Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Arthur The Dog
Arthur The Dog
16,070 Points

HTML <head> best practices

What are the best practices for the "head" tag? I took a look at the HTML 5 validator, but that seems leading edge. What about compatibility with different browsers and old standards? What about different devices?

For example, do we need:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

I think "title" is the only tag that is required under HTML5.

Arthur The Dog
Arthur The Dog
16,070 Points

I found a basic template here:

http://getbootstrap.com/getting-started/#template

2 Answers

Arthur Verschaeve
Arthur Verschaeve
20,816 Points

Always start your head with <meta charset="utf-8">, It's important that this is in the first 500 bytes of your document. You can read about that here: https://code.google.com/p/doctype-mirror/wiki/MetaCharsetAttribute

Of course, for SEO, you want a description meta tag too: <meta name="description" content="">. Many people are using a keywords-meta too, but that one isn't used. For SEO stuff, check out this article. Your <title> is important too.

There are a hole bunch of touch icons that should be included too: 

<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
        <link rel="shortcut icon" sizes="196x196" href="img/touch/touch-icon-196x196.png">-->
        <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

        <!-- Tile icon for Win8 (144x144 + tile color) -->
        <!--<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
        <meta name="msapplication-TileColor" content="#222222">

However, according to the apple touch icons, everything can be provided in one file. checkout this.

For the favicon some people are including an extra <link>, but when you include that favicon in the root of your site, the browser will find it automatically.

If you're targetting mobiles, you probably want this two:

<meta name="HandheldFriendly" content="True">
 <meta name="MobileOptimized" content="320">

These are just to tell a browser that your website is optimized for mobile.

Some more really cool articles to check out:

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

As with many things related to cross-browser / multi-device support there is no best practice just lots of differing attempts.

Here are a few of my thoughts:

I think "title" is the only tag that is required under HTML5.

That's correct.

What about compatibility with different browsers and old standards?

You can't be compatible with old standards they are mutually exclusive.

While not required by the spec you should include the charset to make sure any non-alphanumeric characters are properly rendered.

Useful for all responsive websites

<meta name="viewport" content="width=device-width, initial-scale=1">

There is no consensus on favicons, various devices have implemented them differently.

There is also metadata, like Google used to use authorship but recently killed the feature because not enough people actually added the tags to their pages. You can include other metadata which might be used by a particular site or 2 if you are interested.