HTML5 – Head Section
November 10, 2012
The DOCTYPE
And in the beginning, there was the doctype. The doctype is a required part of a properly coded HTML page. Before HTML5, we had several options. There was HTML vs. XHTML, strict, lose, or transitional, and the proper doctype was a pretty long and ugly piece of characters – for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
HTML5 sums it all up and comes right to the point, and now all we need is this:
<!DOCTYPE html> |
Isn’t it beautiful? Short, simple, to the point. Even I might be able to remember that one without peeking! Eventually~
The HTML Tag
That’s an easy one – simply, following the doctype, we add:
<html> |
or, if we want to include the language info:
<html lang="en"> |
The Charset
The charset specifies the character encoding for your HTML document. This is also an essential part of a properly coded webpage. And here, too, HTML5 has turned the ‘old’ way of determining this:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
into something short and sweet:
<meta charset="UTF-8"> |
More Meta Tags
Aside from the charset, with determines the character encoding of your pages, there are other useful meta tags. These are the most commonly used ones:
<meta name="description" content="A brief description of your page - this is also what shows up with your hits when you Google something."> <meta name="keywords" content="Some good SEO Keywords."> <meta name="author" content="Your Name Goes Here."> <meta name="robots" content="all"> (This one is redundant, unless you want to specify "nofollow" or "noindex" |
The Title Tag
This tag stays the same as it was in older HTML versions. The title tag is important. Not only does is dictate what people will see in the very top left corner of their browsers, it is also very useful for search engines. So make sure you pick well.
<title>Something significant and search engine friendly</title> |
Link to Stylesheet
Since a well-designed website is styled by an external stylesheet, we need to link to it. That’s done in the head section we’re currently discussing:
<link rel="stylesheet" type="text/css" href="style.css"> |
The Favicon
This is not an essential part, but if you would like to have one of those little images that show up next to the URL in your browser’s address field, once you created this favicon (how to do that doesn’t fit into the scope of this tutorial – Google "Creating a Favicon" and have uploaded your favicon.ico, you link to it here with this line:
<link rel="shortcut icon" href="/favicon.ico"> |
And then you end it all with:
</head> |
And, putting it all together, we get this:
<!DOCTYPE html> <html lang="en"> <meta charset="UTF-8"> <meta name="description" content="A brief description of your page."> <meta name="keywords" content="Some good SEO Keywords."> <meta name="author" content="Your Name Goes Here."> <meta name="robots" content="all"> <title>Something significant and search engine friendly</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="shortcut icon" href="/favicon.ico"> </head> |
Next, we’ll explore what’s new in the body section.
If you have any questions about this tutorial or run into trouble trying it yourself, post your question/problem in the Killersites Forum for help.
