Responsive HTML5 web page: What is best practice? - html

I'm working on creating Responsive web page using HTML5. Inside HTML5 Head tag, I've title, meta and link tags, is there any recommended best practice for sequencing these tags to get best possible results ? Current structure of the my page is mentioned below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-saleable=false;"/>
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Demo</title>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body style="margin: 0px;">
Content
</body>
</html>
Can you please suggest, if there is any best practice I need to follow, to utilize HTML5 in best possible way for responsive page design?

It seems ok but:
Responsive web design has nothing whatsoever to do with HTML5.
You shouldn't set maximum-scale nor user-scaleable (which you've got a typo in) to false as the user should be able to scale and zoom in if they want/need to.
Remove the xmlns stuff, it's not needed.
Don't use inline styles in elements, it's not good practice.

This library is very useful to design responsive template
http://getbootstrap.com/

Related

Html image in a meta tag

I'm using discord, and I saw a lot of people do that thing (the big square in the image).
I tried to do that in html with meta tag, but it came out with the result (image number 2).
I really want to know how to do this, can someone please help me?
Image number one
| image number two
And there is the code I use for doing this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta property="og:title" content="An Image By ItsJustOne#9817">
<meta property="og:description" content="Remember always that there is an end in the tunnel 🥰">
<meta property="og:image" content="https://cdn.discordapp.com/banners/907132383814377502/4aca154cd6040b31aacaaf781877f121.png?size=1024">
<meta name="viewport" content="width=device-width">
<title>Why You Are Here?</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Why You Are Here?
<script src="script.js"></script>
</body>
</html>
The image I'm trying to use is my discord banner.
It was 4 months ago, and I forgot to write here that I found a solution a week after asking here!
The solution is simple, using other meta tags, not the regular. The twitter meta tags.
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Cool description">
<meta name="twitter:image" content="the image link">
<meta name="twitter:card" content="summary_large_image">
Replace there the title, description, and the image link.

What is the proper declaration in HTML head?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=width-divice, initial-scale=1.0">
<link rel="icon" href="images/icon/icon.png">
<title>T#O</title>
<link rel="stylesheet" href="style/style.css">
</head>
</html>
I ask if there is a lacking code that need to put
You can use this meta tags for SEO if you want
<meta name="keywords" content="wood, furniture, garden, gardentable, etc">
<meta name="description" content="Official dealer of wooden garden furniture.">
This meta tags tells search engines not to index the page and prevent them from following the links. If you happen to be using two contradictory terms (e.g. noindex and index), Google will choose the most restrictive option.
<meta name=”robots” content=”noindex, nofollow” />
Why is this tag useful for SEO? First of all it’s a simple way to prevent the indexation of duplicate content, for example the print version of a page. It might also be useful for incomplete pages or pages with confidential information.
Also i sometimes use
<meta name="author" content="John Smith">
You have a typo in your viewport declaration - it needs to be "device-width". Other than that, your head declaration includes all the necessary parts and looks valid to me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/icon/icon.png">
<title>T#O</title>
<link rel="stylesheet" href="style/style.css">
</head>
</html>

Suggestions for <head> tags for Meteor

Fellow Meteor users,
During my searches for tutorials and example applications, I found one that uses a unique head structure:
<meta charset="utf-8">
<title>Title</title>
<meta name="description" content="Top10">
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
This particular example app didn't even have a <body> tag anywhere, just a file called head.html which contained the above code. I also learned that it seems that Meteor just automatically makes a body tag for you, so technically, just a head.html is fine.
So, it got me wondering, does anyone define specific head tags for Meteor apps? What's the rationale? Is the above code a good starting point?
When Meteor parses your various html files, any files that contain a <head></head> tag outside of a <template></template> will be concatenated together into one <head></head> tag in every page of your app. This is good for including stuff like title, various meta tags, and 3rd party resources that you want to use on every page. However handlebars support for title tags still does not exist in Meteor so it is definitely limited in what you can do with it (No dynamic meta information).
In the end if you want dynamic information you'll have to resort to something like jquery
You can find more discussion revolving around the <head> tag here:
https://github.com/meteor/meteor/issues/266
You can easily set dynamic titles using iron:router for example with:
onAfterAction: function(){
document.title = 'my awesome site: ' + Router.current().route.getName();
}
I use a head.html that includes various SEO settings:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="fragment" content="!"/>
<meta name="description" content="your description"/>
<meta property="og:title" content="your site title"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://yourimageurl"/>
<meta property="og:url" content="https://hostname"/>
<meta property="og:description" content="your description"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:url" content="https://hostname"/>
<meta name="twitter:title" content="your site title"/>
<meta name="twitter:description" content="your site description"/>
<meta name="twitter:image" content="https://yourimageurl">
<noscript>You must have Javascript enabled in order to use this site</noscript>
<link rel="shortcut icon" href="/your-ico" type="image/x-icon" />
</head>
Looking into https://github.com/kadirahq/meteor-dochead I found one way to dynamically add data to <head> tag
var meta = '<div>just an example</div>'
document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', meta);
Or just add that package if you need more functionality

What is happening between receiving HTML and DOM ready?

I've spend evenings on tuning my backend code to be served faster, yet there's a gap in page loading time that am not familiar with.
Attached an image - please tell me what is happening in highlighted time (between recieving HTML and DOM ready).
What I think it is - maybe it's DOM intself generating? But why so long? Theres like 10 HTML tags in this testing page.
That's my markup:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>#</title>
<meta name="keywords" content="a, b">
<meta name="description" content="cde">
<meta name="geo.region" content="PL">
<meta name="geo.placename" content="Warszawa">
<meta name="geo.position" content="52;21">
<meta name="ICBM" content="52, 21">
<link rel="stylesheet" href="/Css/_global/Style.css">
<!--link rel="shortcut icon" href="/Gfx/_global/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/Gfx/_global/favicon.gif" type="image/x-icon"-->
</head>
<body>
<ul id="bredcrumbs"><li>domain.com</li><li>Home Page</li></ul>
Content
</body>
</html>
The browser is parsing the dom (as warlock notes) but some javascript may run during this process as well. (See JavaScript: DOM load events, execution sequence, and $(document).ready())
As you have seen some browser plugins can essentially inject some scripts which run pre-dom load which may show up in your load times.
The Browser is parsing HTML and creating DOM

What is the best place for the viewport tag

I'm wondering what is the best place to put the viewport tag.
after <title> tag, before CSS links, before/after html5shiv (old browsers) and if possible why?
Thanks in advance.
If you're talking about <meta name="viewport"> (because there's no such thing as <viewport>), you can put it anywhere you like, as long as you keep it somewhere within the <head> tag for it to be valid HTML.
It doesn't matter whether it comes before or after the <title> tag, <link> tags, or even the HTML5 shiv, because <meta> tags are widely supported and don't require the HTML5 shiv as they already exist in older specifications (and as mentioned, it's <meta name="viewport">, not <viewport>).
The html5 boilerplate (which is a good source for this sort of thing) puts it here:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet/less" href="less/style.less">
<script src="js/libs/less-1.3.0.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/libs/html5.js"><\/script>')</script>
<![endif]-->
</head>
But I don't think it matters so long as its in the head.