![htmlcss2thumb](https://uploads.sitepoint.com/wp-content/uploads/2016/12/1481728173htmlcss2thumb-195x300.png)
The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.
Now that we’ve broken down the basics of our template, let’s start adding some meat to the bones and give our page some structure.
Later in the book, we’re going to specifically deal with adding CSS3 features and other HTML5 goodness; for now, we’ll consider what elements we want to use in building our site’s overall layout. We’ll be covering a lot in this section and throughout the coming chapters about semantics. When we use the term “semantics,” we’re referring to the way a given HTML element describes the meaning of its content.
If you look back at the screenshot of The HTML5 Herald (or view the site online), you’ll see that it’s divided up as follows:
-
header section with a logo and title
-
navigation bar
-
body content divided into three columns
-
articles and ad blocks within the columns
-
footer containing some author and copyright information
Before we decide which elements are appropriate for these different parts of our page, let’s consider some of our options. First of all, we’ll introduce you to some of the new HTML5 semantic elements that could be used to help divide our page and add more meaning to our document’s structure.
The header
Element
Naturally, the first element we’ll look at is the header
element. The spec describes it succinctly as “a group of introductory or navigational aids.”
Contrary to what you might normally assume, you can include a new header element to introduce each section of your content. It’s not just reserved for the page header (which you might normally mark up with <div id="header">
). When we use the word “section” here, we’re not limiting ourselves to the actual section
element described in the next part; technically, we’re referring to what HTML5 calls “sectioning content.” This means any chunk of content that might need its own header, even if that means there are multiple such chunks on a single page.
A header
element can be used to include introductory content or navigational aids that are specific to any single section of a page, or apply to the entire page, or both.
While a header
element will frequently be placed at the top of a page or section, its definition is independent from its position. Your site’s layout might call for the title of an article or blog post to be off to the left, right, or even below the content; regardless of which, you can still use header
to describe this content.
The section
Element
The next element you should become familiar with is HTML5’s section
element. The spec defines section
as follows:
The
section
element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
It further explains that a section
shouldn’t be used as a generic container that exists for styling or scripting purposes only. If you’re unable to use section
as a generic container—for example, in order to achieve your desired CSS layout—then what should you use? Our old friend, the div
element, which is semantically meaningless.
Going back to the definition from the spec, the section
element’s content should be “thematic,” so it would be incorrect to use it in a generic way to wrap unrelated pieces of content.
Some examples of acceptable uses for section
elements include:
-
individual sections of a tabbed interface
-
segments of an “About” page; for example, a company’s “About” page might include sections on the company’s history, its mission statement, and its team
-
different parts of a lengthy “terms of service” page
-
various sections of an online news site; for example, articles could be grouped into sections covering sports, world affairs, and economic news
Note: Using section
Correctly
Every time new semantic markup is made available to web designers, there will be debate over what constitutes correct use of these elements, what the spec’s intention was, and so on. You may remember discussions about the appropriate use of the dl
element in previous HTML specifications. Unsurprisingly, HTML5 has not been immune to this phenomenon, particularly when it comes to the section
element. Even Bruce Lawson, a well-respected authority on HTML5, has admitted to using section
incorrectly in the past. For a bit of clarity, it’s well worth reading Bruce’s post explaining his error.
In short:
-
section
is generic, so if a more specific semantic element is appropriate (such asarticle
,aside
, ornav
), use that instead. -
section
has semantic meaning; it implies that the content it contains is related in some way. If you’re unable to succinctly describe all the content you’re trying to put in asection
using just a few words, it’s likely you need a semantically neutral container instead: the humblediv
.
That said, as is always the case with semantics, it’s open to interpretation in some instances. If you feel you can make a case for why you’re using a given element rather than another, go for it. In the unlikely event that anyone ever calls you on it, the resulting discussion can be both entertaining and enriching for everyone involved, and might even contribute to the wider community’s understanding of the specification.
Keep in mind, also, that you’re permitted to nest section
elements inside existing section
elements, if it’s appropriate. For example, for an online news website, the World News section might be further subdivided into a section for each major global region.
The article
Element
The article
element is similar to the section
element, but there are some notable differences. Here’s the definition according to the spec:
The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
The key terms in that definition are self-contained composition and independently distributable. Whereas a section
can contain any content that can be grouped thematically, an article
must be a single piece of content that can stand on its own. This distinction can be hard to wrap your head around, so when in doubt, try the test of syndication: if a piece of content can be republished on another site without being modified, or if it can be pushed out as an update via RSS, or on social media sites such as Twitter or Facebook, it has the makings of an article
.
Ultimately, it’s up to you to decide what constitutes an article, but here are some suggestions in line with recommendations in the spec:
-
a forum post
-
a magazine or newspaper article
-
a blog entry
-
a user-submitted comment on a blog entry or article
Finally, just like section
elements, article
elements can be nested inside other article
elements. You can also nest a section
inside an article
, and vice versa. It all depends on the content you’re marking up.
The nav
Element
It’s safe to assume that the nav
element will appear in virtually every project. nav
represents exactly what it implies: a group of navigation links. Although the most common use for nav
will be for wrapping an unordered list of links, there are other options. For example, you could wrap the nav
element around a paragraph of text that contained the major navigation links for a page or section of a page.
In either case, the nav
element should be reserved for navigation that is of primary importance. So, it’s recommended that you avoid using nav
for a brief list of links in a footer, for example.
Note: Skip Navigation Links
A design pattern you may have seen implemented on many sites is the “skip navigation” link. The idea is to allow users of screen readers to quickly skip past your site’s main navigation if they’ve already heard it—after all, there’s no point listening to a large site’s entire navigation menu every time you click through to a new page! The nav
element has the potential to eliminate this need; if a screen reader sees a nav
element, it could allow its users to skip over the navigation without requiring an additional link. The specification states: “User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).”
Although not all assistive devices recognize nav
as of this writing, by building to the standards now you ensure that as screen readers improve, your page will become more accessible over time.
Note: User Agents
You’ll encounter the term “user agent” a lot when browsing through specifications. Really, it’s just a fancy term for a browser—a software “agent” that a user employs to access the content of a page. The reason the specs don’t simply say “browser” is that user agents can include screen readers or any other technological means to read a web page.
You can use nav
more than once on a given page. If you have a primary navigation bar for the site, this would call for a nav
element. Additionally, if you had a secondary set of links pointing to different parts of the current page (using in-page anchors or “local” links), this too could be wrapped in a nav
element.
As with section
, there’s been some debate over what constitutes acceptable use of nav
and why it isn’t recommended in some circumstances (such as in a footer). Some developers believe this element is appropriate for pagination or breadcrumb links, or for a search form that constitutes a primary means of navigating a site (as is the case on Google).
This decision will ultimately be up to you, the developer. Ian Hickson, the primary editor of WHATWG’s HTML5 specification, responded to the question directly: “use [it] whenever you would have used class=nav”.[7]
The aside
Element
This element represents a part of the page that’s “tangentially related to the content around the aside
element, and which could be considered separate from that content.”
The aside
element could be used to wrap a portion of content that is tangential to:
-
a specific standalone piece of content (such as an
article
orsection
). -
an entire page or document, as is customarily done when adding a sidebar to a page or website.
The aside
element should never be used to wrap sections of the page that are part of the primary content; in other words, aside
is not meant to be parenthetical. The aside
content could stand on its own, but it should still be part of a larger whole.
Some possible uses for aside
include a sidebar, a secondary list of links, or a block of advertising. It should also be noted that the aside
element (as in the case of header
) is not defined by its position on the page. It could be on the side, or it could be elsewhere. It’s the content itself, and its relation to other elements, that defines it.
The footer
Element
The final element we’ll discuss in this chapter is the footer
element. As with header
, you can have multiple footer
elements on a single page, and you should use footer
instead of something generic such as <div id="footer">
.
A footer element, according to the spec, represents a footer for the section of content that is its nearest ancestor. The section of content could be the entire document, or it could be a section
, article
, or aside
element.
Often a footer
will contain copyright information, lists of related links, author information, and similar information that you normally think of as coming at the end of a block of content; however, much like aside
and header
, a footer element is not defined in terms of its position on the page, so it does not have to appear at the end of a section, or at the bottom of a page. Most likely it will, but this is not required. For example, information about the author of a blog post might be displayed above the post instead of below it, and will still be considered footer information.
Note: How did we get here?
If you’re wondering a little bit about the path to HTML5 and how we ended up with the tags that we did, you might want to check out Luke Stevens’ book called The Truth about HTML5. Currently in its 2nd edition, Luke’s book is somewhat controversial. In addition to covering many of the HTML5 technologies such as video and canvas, he also goes in-depth in his coverage of the history of HTML5, explaining some of the semantic and accessibility problems inherent in the new elements and providing some recommendations on how to handle these issues.
Frequently Asked Questions (FAQs) about HTML5 Page Structure
What is the significance of the declaration in HTML5?
The declaration is the very first line in an HTML5 document. It is not an HTML tag; rather, it is an instruction to the web browser about what version of HTML the page is written in. In HTML5, the declaration is simplified to . This helps to ensure that the browser renders the page in standards mode, which supports the latest HTML specifications.
How does the element function in an HTML5 document?
The
element is a container for metadata (data about data) and is placed between the tag and the tag. Metadata is not displayed on the page but is machine parsable. It typically defines the document title, character set, styles, scripts, and other meta information. The contents of the element can include elements like <title>, <style>, , , <script>, andWhat is the role of the element in HTML5?
The
element contains the main content of the HTML document or the section of the HTML document that will be directly visible on your web page. This can include text, images, tables, links, forms, and other types of data. The tag is typically placed immediately after the tag.How does the element enhance HTML5 structure?
The
What is the purpose of the
The
How does the
The
What is the function of the element in HTML5?
The
How does the element contribute to HTML5 structure?
The
What is the role of the
The
How does the element enhance HTML5 structure?
The
![Louis Lazaris](https://uploads.sitepoint.com/wp-content/uploads/2014/12/1419330230lazaris-headshot-500-96x96.jpg)
Louis is a front-end developer, writer, and author who has been involved in the web dev industry since 2000. He blogs at Impressive Webs and curates Web Tools Weekly, a newsletter for front-end developers with a focus on tools.