HTML5 Tutorial – Getting Started With Semantic Tags

So what is this HTML5 all about? And if I already knew HTML4, what is new?

In this series of posts, I’ll describe what you need to know to build a line of business application. I’ll provide code samples, and I’ll post my example code so you can have a starting point with each features.

HTML5 doctype

Let’s start at the top of the page.

HTML 4.01 Strict	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
HTML 4.01 Frameset	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Now with HTML5, start using HTML5 by using the HTML5 doctype:

<!DOCTYPE html>

<!DOCTYPE html>

Minimal Skeleton

You can now declare your document as HTML5 and have the doctype be the top of the document. Next, your document can be very much HTML4.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Your title</title>
	</head>

	<body>
	The document content
	</body>

	</html>

view raw

minimal-skeleton.html

hosted with ❤ by GitHub

You still have the root <html> element, <head> and <body> elements. The root html element has the lang tag to declare the language of a Web page or a portion of a Web page. It is meant to assist search engines and browsers.

Best Practice: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

Character Encoding

There are hundreds of different character encodings, some optimized for particular languages like Russian or Chinese or English, and others that can be used for multiple languages. Generally you specify the character encoding to provide a a mapping between what you see on your screen and what your computer actually stores in memory and on disk.

Best Practice: UTF-8 attribute in the meta tag tells the browser your character set will work for most western languages. You should always include character encoding for your web pages, even if you never use any special characters. If you don’t, your site becomes vulnerable to a cross site scripting attack using UTF-7.

The attacker sees that your site has no character encoding defined, so it makes the browser think that the character encoding is UTF-7. Then the attacker injects UTF-7 encoded scripts into the web page, and your site is hacked.

Best Practice: Character encoding should be the first line of Your HTML after the root and head elements.

You can find names for character encodings in the IANA registry.

Document Structure with Semantic Tags

To get started with HTML5 you can use semantic elements for describing the structure of page content. You will use tags to label content by what it is rather than what it looks like. The following represent some important tags:

<section> is used for content that can be grouped thematically. A <section> can have a <header>, as well as a <footer>. The point is that all content contained by <section> is related.
<header> typically contains the headline or grouping of headlines for a page and/or <section>s, although it can also contain other supplemental information like logos and navigational aids. Notice that I said “page and/or <sections>s.” That means you could have multiple <header>s on a page.
<footer> is used for content about a page and/or <section>s, such as who wrote it, links to related information and copyrights. And, like <header>, you could have multiple <footer>s on a page.
<nav> is used to contain major navigation links for a page. While it isn’t a requirement, <nav> will often be contained by <header>, which, by definition, contains navigational information.
<article> is used for content that is self-contained and could be consumed independent of the page as a whole, such as a blog entry. <article> is similar to <section> in that both contain related content. The best rule of thumb for deciding which element is appropriate for your content is to consider whether the content could be syndicated. If you could provide an Atom or RSS feed for the content, <article> is most likely the way to go.
<aside> indicates the portion of a page that is tangentially related to the content around it, but also separate from that content, such as a sidebar or pull-quotes. A good method for deciding whether <aside> is appropriate is to determine if your content is essential to understanding the main content of the page. If you can remove it without affecting understanding, then <aside> is the element to use.

When you put it together, the HTML5 code looks like this:

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Part 3</title>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
	</head>
	<body>

	<header>masthead
	</header>
	<nav><ul><li>Nav1</li><li>Nav2</li><li>About</li></ul>
	</nav>
	<article id="container">
	<aside>
	aside
	</aside>
	<section>
	section 1
	</section>
	<section>
	section 2
	</section>
	</article>
	<footer>
	footer
	</footer>

	</body>
	</html>

view raw

html5-skeleton.html

hosted with ❤ by GitHub

The body is a bit different. There’s ways to break my page up into sections. When I do that I can explain in markup what the parts of my documents are. I will be able to stylize them later, turn them on and off, and to make the page fit the device. I’ll be able to render the page in older browsers.

Header, Footer, Section, Article

You divide your page into sections. In previous versions you might have used the div tag. But the div tag does not really describe what each part of the document is for. You might have product descriptions, chapters, blog posts. The <article>, <section> and <aside> tags helps you describe the purpose of each section.

You can think of a lot of the <header> tag as <div class=”header”>.

You can think of a lot of the <footer> tag as <div class=”footer”>.

We will have a different <section> tag for each part of the registration. One will be for the event details. I’ll write code so the user can then click on a button to take them to the next section where they can enter a name and address, another section for their email address, and another section for some other information we want to keep about the user (that will show off each of the input types in HTML5).

Use the <article> tag to group my sections together.

Aside, Nav

I will use <aside> to provide the event details in a panel along the side of the page. In my case, I will put a list of events that the user can register for. I will use CSS to describe it’s position, color, etc.

I could put an <aside> inside a particular <section>, then that positioning will float with the section. I can use these as a sort of tool tip.

My <nav> tag contains an unordered list of items for my menu. I’ll fill it out later.

So there are new tags to learn about. I’ve covered a few HTML5 Sematic Elements. We will explore more as we go, but you can get a flavor of the various tags at Internet Explorer 9 Guide for Developers.

When you get done, you have a skeleton of HTML5 for your site.

Advantages to Using Semantic Tags

There are several key benefits from using semantic tags:

Enable a tag standardization by adding a meaning.
Lighter code. Semantic HTML styled by CSS typically requires less code than HTML formatted by tables.
Easier to understand code. Semantic HTML is easier for humans to understand than nonsemantic HTML.
Facilitate information integration and knowledge discovery. You can think of this as search engine optimization.
Facilitate communication between different services.
Enable auto-classification and multilingual semantic tagging.
Easier to repurpose. Semantic HTML takes advantage of the fact that a news item will always be a news item, and an archive will always be an archive, no matter where they are positioned on the page.

Browser Compatibility

When you run the code, it will not look the same on every browser.

IE9	IE7	Firefox 12

You can check CanIUse.com to see which browsers support semantic tags natively. IE 9 or greater, Firefox 25 and greater, Chrome 31 and greater, Safari 7, Opera 18 and above. It works on iOS, Android, IE Mobile, and Blackberry.

And in a later post, you will see how you can use Modernizr for legacy browsers that do not support semantic tags out-of-the-box.