In this article we will look on HTML 5 <head> tag changes. Before embark on this journey let’s have a look on what HTML5 has now.

Previous HTML code was similar like below:

[php]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns = “http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv = “content-type” content=”text/html; charset = UTF-8” />
<title>HackerThink | HTML5 | The head tag, Chapter 1 Example File </title>
</head>
[/php]

Now we have new HTML 5 code:

[php]
<!DOCTYPE html>
<html lang = “en”>
<head>
<meta charset = “UTF-8” />
<title> HackerThink | HTML5 | The head tag, Chapter 1 Example File </title>
</head>
</html>
[/php]

A new HTML5 DOCTYPE

As you have seen DOCTYPE declaration above, previous DOCTYPE syntax is not so easy to remember. You need extra intelligent memory to remember those long declared syntax.

If you have been writing html using XHTML 1, your DOCTYPE will similar like below:

[php]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
[/php]

“or” if you are using HTML 4 then your DOCTYPE will be similar like below:

[php]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
[/php]

Now, with new HTML 5 no need to use of this type of complicated and unmemorable DOCTYPE. HTML 5 syntax providing shortest DOCTYPE declaration method like below syntax:

[php]
<!DOCTYPE html>
[/php]

You can remember this declaration easily, and use without referring the documents.

Languages Declaration in HTML5

The first and important question is “Why language declaration in necessary?”. The W3C is given answer for this question as follows:

Specifying the language of content is useful for a wide number of applications, from linguistically-sensitive searching to applying language-specific display properties. In some cases, the potential applications for language information are still waiting for implementations to catch up, whereas, in others, such as detection of language by voice browsers, it is a necessity today.

Adding markup for language information to content is something that can and should be done today. Without it, it will not be possible to take advantage of any future developments.

Declaring language is very important to increase accessibility and search engine optimisation.  The simplest way to declare the language of an HTML document is to add “lang” attribute to the <html> tag, you can declare as following:

[php]
<html lang = “en”>
[/php]

The value of “lang” attribute is a two-letter code of languages, for example, de (German), it (Italian), nl (Dutch), es (Spanish), ru (Russian), etc.

You can also specify dialects within a language. These are generally represented with the base language code, for example, en followed by a hyphen and the dialect in question.

The following example shows UK English and US English respectively:

en-US:    US  English

en-GB:    UK  English

Character encoding in HTML5

Previously we define character encoding as follows:

[php]
<meta http-equiv = “content-type” content = “text/html; charset = UTF-8” />
[/php]

In HTML 5, you can specify your page’s character encoding in a simple syntax. Let’s have a look on HTML 5 version character encoding:

[php]
<meta charset = “UTF-8” />
[/php]

Here, you no need to know character encoding in details, and you can define it in very simple memorable syntax.

So, If now we considered all attributes and child tags of <head> tag together, it is very easy to remember and define. It looks very simple and few set of character like below:

[php]
<!DOCTYPE html>
<html lang = “en”>
<head>
<meta charset = “UTF-8” />
<title>HackerThink | HTML5 | The head tag, Chapter 1 Example File </title>
</head>
[/php]

You can check above code with any exist page, and it will surely work.

Now, let’s take a dip dive in HTML 1st Program “ Hello World”.

HTML5 1st Program “Hello World”

Before writing HTML 5 program, let’s have a look same program in the previous version of HTML.

“Hello World!” in XHTML 1.0 style

[php]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
<title>Hello World! XHTML 1 Strict</title>
</head>
<body>

Hello World!

</body>
</html>
[/php]

“Hello World!” in HTML 4 style

[php]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=content-type content=”text/html; charset=UTF-8″>
<title>Hello World! HTML 4 Strict</title>
</head>
<body>

Hello World!

</body>
</html>
[/php]

“Hello World!” in HTML 5 “loose” style

[php]
<!DOCTYPE html>
<meta charset=UTF-8>
<title>Hello World!</title>

Hello World!

[/php]

This is the HTML 5 simplest page and it is 100% valid HTML page.

“Hello World!” in HTML 5 “strict” style

[php]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>Hello World!</title>
</head>
<body>

Hello World!

</body>
</html>
[/php]

If you are seeing above HTML 5 code and make compression with XHTML or HTML 4, you will find HTML 5 had use less of code syntax from others. It is the beauty of HTML 5 and it makes 100% valid HTML pages.

After this, Now you have the general idea how to write the <head> components in HTML5. We will discuss more HTML 5 in upcoming tutorial articles.

Here we listed few of the best books for learning HTML development:

Beginning HTML5 and CSS3: The Web Evolved
Professional HTML5 Mobile Game Development (Wrox Programmer to Programmer)
Web Design with HTML & CSS3 (Shelly Cashman)
HTML5 Digital Classroom: (Book and Video Training)
Web Design with HTML & CSS3: Comprehensive (Shelly Cashman)
HTML 5 CSS Illustrated Introductory (Illustrated Series)
HTML5 for Masterminds
Html5, Css3, Javascript, Jquery Mobile Programming: Beginning to End Cross-platform App Design
HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL
HTML5 and CSS3 2e

Note:– If you fill some special tutorial requirement for any topic or subject related to programming, you can request for a tutorial article by using Tutorial Request option.