As long as HTML has powered the frontend of our favorite websites, sacrifices have been made on the part of designers and developers to accommodate its limitations.
Fortunately, technology generally improves over time and HTML is no exception. The current standard of HTML5 has fewer limitations, offering a great deal of modern features and stability. Even well-versed developers of HTML4 or XHTML find that HTML5 has many valuable new features that streamline the development process.
To guide you on your journey, we’ve rounded up fully valid HTML5 examples that include all the critical components you’d expect to find on a modern web page. The rest of this article contains the HTML 5 examples you need by breaking down each section in detail to give you a firm grasp of what HTML5 focuses on and how you can use it effectively in your own projects.
Throughout the code you’ll find numerous comments with links to additional resources, so feel free to follow along as we explore an HTML5 document.
HTML 5 Examples: HTML5 DOCTYPE, HTML Tag, and Language
As with past versions of HTML, the very first line you’ll need is the DOCTYPE, specifying the type of document being served. Thankfully, HTML5 has done away with a great deal of the complexity of past versions such as XHTML and now you need only specify the type as ‘html’, case-insensitive.
Immediately following DOCTYPE is the standard html tag, where we are also including the default language (lang attribute) of the page being served. The lang attribute isn’t required to be valid in HTML5, but it is good practice to include it. It allows search engines to provide accurate language results, ensures proper font selection and display, and enables text-to-speech applications to read the content as intended.
Example (Gist)
Heading It Up
The next section is the head element, which is parent to a number of crucial elements including metadata, page title, stylesheets, and some JavaScript.
Metadata & Title
We begin inside the head element with our metadata. First we specify the character set of the page, typically UTF-8, as seen here. Metadata can contain all manner of name and content combinations that you may desire, though a handful are considered more standard, such as author, description, and keywords.
It’s important to note that many modern search engines, including Google, no longer parse the ‘keyword metadata’ included in this section of the page to determine search rankings or results (instead opting to parse actual page content).
Next up we have the title tag which, just as in previous HTML versions, specifies the title of the rendered page.
Example (Gist)
CSS and JavaScript Includes
The latter half of our head section contains links to our stylesheets and JavaScript files, as appropriate.
The first important note is that valid HTML5 no longer requires a type value of “text/css.” Modern browsers are correctly assumed to determine how to handle these files based on the HTTP response, thus including type=”text/css” is superfluous. But, specifying the relationship of the link as a stylesheet via rel=”stylesheet” is still necessary.
You’ll also notice examples of conditional comments enclosing the latter two stylesheet links. These have been in use for some time as a (clunky) workaround when dealing with browser specific behaviors, most prominently displayed by earlier Internet Explorer versions. They allow developers to serve different stylesheets to different browsers. Thankfully, starting with Internet Explorer 10 and beyond, Microsoft has done away with the need (and thus activation) of these conditional comments.
For complete backward compatibility, however, many developers still implement this solution. Click here for more details on the coding and usage of conditional comments.
Finally, we include any JavaScript files that may be required, and just like stylesheets, there is no need to specify the type attribute with HTML5. It’s worth noting that some JavaScript includes should be placed at the end of your HTML markup—right before the closing body tag.
This ensures the script is loaded after the majority of the page. If the script modifies DOM elements directly with JavaScript, it is best practice to place the script tags at the end of the body; however, many JavaScript libraries invoke a function that require the body to load first, making script tag placement a personal decision. As a developer use your best judgment to determine whether certain scripts should load before or after the rest of your content.
Example (Gist)
Divs are Dead!
Now that we’ve reached the body tag of our document we get to see how the changes implemented in HTML5 really shine.
Perhaps the most impactful design change moving into HTML5 revolves around the semantics of your markup: What your code actually means and the purpose each section or element serves. While divs are still perfectly valid elements, HTML5 introduces a number of section elements that are intended to do away with the overabundance of divs that has become so commonplace in development.
Now, we have the nav element for navigation, the header and footer elements for their namesakes, the section element for thematic groupings that contain a child heading tag, the article element to encompass self-contained content like a post or comment, and more.
The purpose of this armada of new elements is to give your HTML markup a near-complete semantic structure, prior to adding any CSS class attributes. Additionally, it largely eliminates the need for ambiguous div tags that may exist solely for presentation or for CSS styling purposes, where differentiating which is which can be difficult. In short, it organizes your HTML markup, and makes CSS much sleeker and simpler.
At first, it can feel a little daunting or confusing to examine existing HTML4 markup with all those divs everywhere and determine how to go about replacing everything with the appropriate HTML5 section elements. Instead, it’s far simpler to get accustomed to these elements with a new project or by digging through a simple example, as we have below.
We begin with the standard body tag followed by the header element. The header is used for introductory content that leads into a section element to follow. In most markups the header element will hold your logo and probably the new nav element as well. Note: In this example we’ve removed the content of the nav element for brevity and because it isn’t necessary to understand the structure, but the full Gist contains a working nav section if you want an example.
Example (Gist)
Following our header element we have a section element, which in this case defines the real ‘body’ of the page, such as your list of blog posts or cart items. Since the section tag is intended to have a child heading and then be a grouping of similarly thematic content, it is fitting, in this case, to use a section to hold our “Article List Heading” along with a series of child article elements.
Wrapping Your Head Around Headings
Before we discuss the article tag, there’s also an important facet of the semantic use of proper heading tags in HTML5. In HTML5, headings (h1 – h6) are intended to be the first child element within a parent element for which that heading is representative. Thus, if you are using a heading element within a section or article element, for example, your heading tag should be the immediate child tag following the opening section or article tag.
Additionally, to generate clean HTML5 markup, you should avoid two headings of the same nesting level that are not separated from one another within their own parent elements (such as a by being housed within a parent section).
Lastly, you should try to use heading ranks (the numeric identifier) that match the appropriate nesting level within the body and section elements.
Given these simple rules, we can take our bad example below and clean it up. Our first issue is we have h4 “above” (parent to) a section that contains h3 elements. Additionally, our h3 elements are all sharing the same nesting level and thus should be separated by section elements.
Bad Example (Gist)
To fix this up, we’ll want to change our top-most heading to match the rank level (h1) and the secondary headings will be the second nesting level (h2). We’ll also get rid of the singular section element that houses all the book entries and instead split each book entry — with its own heading and paragraph — into unique section elements.
Good Example (Gist)
With that tangent out of the way and a better understanding of organizing headings, we can get back to looking at our primary markup example. You’ll notice that every time we use a heading tag, it’s the first element within a parent element such as a section or article.
We’re also able to easily use these elements to create child elements, so an article element for one of our book listings might contain a child article or section element that holds the comment or review content for that particular book. Just like HTML of the past, there is no limitation on the nesting of these elements, but using good design principles enabled by HTML5, its now possible to break these elements into more readable sections as appropriate.
Example (Gist)
Aside and Footer
The last section of our example contains the aside element and the simple footer element to close things out.
An aside element is typically intended for content that is tangential to the primary content nearby. In a news article this might be where a pull quote is placed; ‘within’ the article content but off to the side or emphasized in some way. In our example here, we’re using the description list element to put some glossary terms into an aside.
Last we have the footer element. This footer is intended to contain related content for the section for which it follows. Thus, while you could certainly use footer elements after an article news post to give authors credit and the like, in this example we’re using it as the footer of our overall page.
Example (Gist)
Determining Which Element to Use and When
After this introduction to some of the new HTML5 features — in particular the new section elements, the next task is learning how to evaluate when and where a particular element should be used.
One of the best resources for this is a handy flowchart courtesy of html5doctor, which walks you through the process of determining what type of content you have and thus what element you should use for it
While some of this is, of course, subjective (for example, I’d argue that a comments section should be in a section element), overall this is a good jumpstart.
We hope that this article has provided you with a good introduction to what’s new and great about HTML5 and gets you started down the path to writing your own semantically clean markup on all your future projects!