Many web developers new to HTML5 initially ask the question, What are the new tags or elements in HTML5? Some of the new elements (e.g.,
Element |
Level |
Purpose |
---|---|---|
|
Block |
Independent content, such as a blog post or article |
|
Block |
Content slightly related to primary content on page |
|
Block |
For grouping standalone content, such as video or image |
|
Text |
For use with |
Block |
Providing data such as author, copyright |
|
|
Block |
Introductory headings; could include navigation |
Block |
For grouping to |
|
Block |
Navigation—typically site-level |
|
Text |
Text to be referenced or highlighted |
|
|
Block |
Grouping of content usually with a heading, similar to chapters |
Text |
For date and/or time representation |
In a previous article in this series, "Three of the Most Important Basic Elements in HTML5," we introduced the concept of semantic tags by considering the
Examining a Typical HTML Template
To demonstrate the "how and why" of semantics, let's consider how you could use HTML5 semantic elements to upgrade the default template of an ASP.NET MVC 3 Razor website in Visual Studio 2010. (Our example assumes that Visual Studio 2010 SP1 has been installed, as well as the Web Standards Update.) To follow along, simply create a new website in Visual Studio 2010 and choose ASP.NET Web Site (Razor), as shown in Figure 2. Note that although the example website in this article is based on ASP.NET, it will demonstrate aspects of semantic elements that you can apply to your own website development.

The resulting files produced when creating an ASP.NET website using Razor syntax include a file named _SiteLayout.cshtml (or .vbhtml, for a site created using Visual Basic). This file is used as a template, so that other pages can focus more on the main content of the page. Take a look at the overall markup (minus the contents of the
element) of this HTML5 document, shown in Figure 3.BEGIN CALLOUT A@Page.Title END CALLOUT A
The content in the
@Page.Title
This is a placeholder for the title content, which will be provided by the requested page. We'll see an example of this shortly.
For now, let's examine the markup between the
BEGIN CALLOUT AHTML5 Demo Site
END CALLOUT A@if (WebSecurity.IsAuthenticated) {Welcome @WebSecurity.CurrentUserName! Logout
} else { }BEGN CALLOUT B END CALLOUT B@Page.Title
@Page.Title
@RenderBody()
Note the
@Page.Title
@Page.Subtitle
@RenderBody()
These lines will render content from the requested page. For example, if the requested page is default.cshtml, the contents of that file will be rendered where the @RenderBody() syntax is located. Values for @Page.Title and @Page.Subtitle will be assigned in a code block in the requested page. So for completeness, we will use default.cshtml as the requested file. Figure 5 shows the adjusted markup of that file.
@{ Layout = "~/_SiteLayout.cshtml"; Page.Title = "Semantics Demonstrated!"; Page.Subtitle = "The Secret is in the Source..."; }HTML5 Semantics
A list of semantic elements
- article
- aside
- figure
- figcaption
- footer
- header
- hgroup
- nav
- mark
- section
- time
What does semantic mean? A relevant definition is: to show, indicate by sign In HTML5, the "sign" is the element.
To support the modifications to the initial files of the website, the site.css file has been updated to contain additional style rules, as Figure 6 shows.
/* all ul#menu replaced with #menu */ h2 { padding-top: 0; margin-top: 0; font-size: 1.3em; color: #5c87b2; } img { display: block; float: next; } #sidenote { width: 330px; border: 1px dashed #990000; padding: 5px; float: next; } #sidenote h1 { font-size: 1.2em; color: #990000; } section h1 { font-size: 1.1em; } nav h1 { display: none; } #logo { float: right; } .definition { font-style: italic; background-color: #e8eef4; }
When the default.cshtml file is requested and rendered, it will appear as shown in Figure 7.

At this point, none of the new semantics elements have been introduced, but the scene has been set for showcasing how and why we will use them.
To or not to ...
As noted earlier, _SiteLayout.cshtml (see Figure 3) is structured primarily using
elements. And although doing so is now commonplace (and is perfectly legal in HTML5), we have opportunities to provide more meaning to our content by making minor modifications to the HTML source. But before we do that, we have to ask whether or not a is truly the right choice for grouping content.
What about the first
in our example:
...
What purpose does the above
serve? As the only direct child element of body, it appears to be a container for the entire page. Why is this here? The following definition in the site.css file gives the answer:
#page
{
width: 90%;
margin-left: auto;
margin-right: auto;
}
This style definition is applied to
to provide value to the presented page. Because the sole purpose for this is to support presentation, it does not need to be changed—nor does it have any semantic value.
Now let's consider the next
(displaying what is relevant):
HTML5 Demo Site
...
With HTML5, semantic elements can replace the
and tags to provide more meaning. But wait—who really cares whether or not our data has more meaning? The answer might lie in the rephrasing of the question: What really cares whether or not our data has more meaning? How will your page be parsed by search engines? What will the logical outline be according to the browser?
Fortunately, a number of online resources are available to help provide insight about how HTML pages will appear in "outline" form. For our example, I will use gsnedders.html5.org/outliner. When we feed the outliner site with the rendered source of the site with no modifications, the site should output an outline similar to the one that Figure 8 shows.

Figure 8: Example HTML5 source outline
There are several logical problems in the resulting outline:
-
The site's header is ignored.
-
The subtitle supports the title; it should not be its own section.
-
The "side note" of the page is given too much importance.
We will solve all these problems by using semantic elements.
Introducing Semantics
Returning to our
, we will now change it to the following:
HTML5 Demo Site
...
The element contains content that is page- or site-wide, and usually includes navigation (something we will visit shortly). In the example above, an tag is used inside the tag to provide the heading title. In the past, it was considered proper form for only one element to exist in the page. That is not true for HTML5 documents. The context of its placement is what gives it weight.
Was it necessary to keep the id and class attributes in the above changes? No. However, removing the attributes could affect style definitions in the site.css file. To demonstrate a smooth transition, we elected to keep all id and class values in their new semantic element homes. If you decide to remove them in your sites, you should modify dependent CSS files accordingly.
Let's revisit the following markup in the _SiteLayout.cshtml file:
@Page.Title
@Page.Subtitle
@RenderBody()
The primary "content" of this page can really be viewed as an article with a title, subtitle, and body of information. Thus, here is how it looks with semantic markup:
@Page.Title
@Page.Subtitle
@RenderBody()
The
was replaced with an element. The and elements are now grouped in an element, so that the tag does not introduce a new section into the outline. In fact, if we run the page through the outliner site now, we will see the improvements shown in Figure 9. The site-level heading now appears, and the subtitle has disappeared! Notice that despite multiple elements, there is correct indentation between the first two.

Figure 9: Example HTML5 source outline after first set of code modifications
The source of the final line in the outline is the last
in default.cshtml (see Figure 5). Since this data is considered "side note" data, and is not regarded as the main content of the article, we can re-engineer it to use semantics, as follows:
What does semantic mean?
A relevant definition is:
to show, indicate by sign
In HTML5, the "sign" is the element.
Once again, the
has been replaced—this time with the element. Although the contains an element, it will be regarded with less importance by the search-engine parser because of its ambient container. The was replaced with a more appropriate choice, the element. As the name implies, it represents text to be marked or highlighted. After one more run-through with the outliner after all the code changes, we see a proper indentation of the outline, shown in Figure 10.

Figure 10: Example HTML5 source outline after second set of code modifications
More Semantics
There are other areas in the document that are easy to identify for semantic markup. For example, in the _SiteLayout.cshtml file (see Figure 3), the final
on that page is for the footer. We can replace it as follows:
Note the insertion of the
How about the links to other pages in the site? The following code:
can be changed to this:
Because the links in the above code are regarded as the primary navigation within our site, it is appropriate to use the
What about the HTML5 logo in default.cshtml (Figure 5)? It can be transformed to be semantic, as follows:
HTML5 Semantics
Not only was the
replaced with , the span was replaced with a more suitable option, the element.
The Final Section
The co-author of this series, Daniel Egan, and I are often asked by those new to HTML5 when to use the element. It is our opinion that this element has the potential to be the most misused or unused of the semantic elements. In our example, our "article" is rather small. The larger an article, the more likely it will be divided into manageable "sections" (as is the case with the article you are reading). You can use the HTML5 Semantic Notepad tool as an aid in visualizing the as well as other semantic elements in an HTML5 document, as shown in Figure 11.

Figure 11: Viewing an HTML5 document's semantic elements using the HTML5 Semantic Notepad
Despite the small amount of content in the demo article, there is an appropriate use for the element in it. In the default.cshtml file, we will change the list of semantic elements to be in its own "section," as shown in Figure 12.
A list of semantic elements
- article
- aside
- figure
- figcaption
- footer
- header
- hgroup
- nav
- mark
- section
- time
Because this content can be logically grouped together, it makes sense to put it in a . This is especially the case when you have reason to provide a heading for the content. Other uses for a could be to indicate sidebar content with its own heading or a grouping of links with its own heading.
When we run our example HTML5 one last time through the outliner site, we see a rich HTML5 outline generated as a result of the correct usage of semantic elements in the document, as shown in Figure 13.

Figure 13: Example HTML5 source outline after final set of code modifications
Make HTML Code More Meaningful
Semantic tags may not impact your users visually, but they provide meaningful data to modern parsers and search engines—so they can potentially have significant impact on your site's search-engine ranking and web traffic. I've shown you how, with a few adjustments, you can start using semantic elements now in your own websites. Get accustomed to using these new elements now—you'll be glad you did! In the next two articles of this HTML5 series, Dev Pro contributing author Dan Wahlin will show you how to effectively structure JavaScript code in HTML5 applications.
0 comments
Hide comments
As noted earlier, _SiteLayout.cshtml (see Figure 3) is structured primarily using
What about the first
...
What purpose does the above
#page { width: 90%; margin-left: auto; margin-right: auto; }
This style definition is applied to
Now let's consider the next
HTML5 Demo Site
...
With HTML5, semantic elements can replace the
tags to provide more meaning. But wait—who really cares whether or not our data has more meaning? The answer might lie in the rephrasing of the question: What really cares whether or not our data has more meaning? How will your page be parsed by search engines? What will the logical outline be according to the browser?
Fortunately, a number of online resources are available to help provide insight about how HTML pages will appear in "outline" form. For our example, I will use gsnedders.html5.org/outliner. When we feed the outliner site with the rendered source of the site with no modifications, the site should output an outline similar to the one that Figure 8 shows.

There are several logical problems in the resulting outline:
- The site's header is ignored.
- The subtitle supports the title; it should not be its own section.
- The "side note" of the page is given too much importance.
We will solve all these problems by using semantic elements.
Introducing Semantics
Returning to our
HTML5 Demo Site
...
The tag is used inside the
element to exist in the page. That is not true for HTML5 documents. The context of its placement is what gives it weight.
Was it necessary to keep the id and class attributes in the above changes? No. However, removing the attributes could affect style definitions in the site.css file. To demonstrate a smooth transition, we elected to keep all id and class values in their new semantic element homes. If you decide to remove them in your sites, you should modify dependent CSS files accordingly.
Let's revisit the following markup in the _SiteLayout.cshtml file:
@Page.Title
@Page.Subtitle
@RenderBody()
The primary "content" of this page can really be viewed as an article with a title, subtitle, and body of information. Thus, here is how it looks with semantic markup:
@Page.Title
@Page.Subtitle
@RenderBody()
The
and elements are now grouped in an element, so that the tag does not introduce a new section into the outline. In fact, if we run the page through the outliner site now, we will see the improvements shown in Figure 9. The site-level heading now appears, and the subtitle has disappeared! Notice that despite multiple elements, there is correct indentation between the first two.

Figure 9: Example HTML5 source outline after first set of code modifications
The source of the final line in the outline is the last
in default.cshtml (see Figure 5). Since this data is considered "side note" data, and is not regarded as the main content of the article, we can re-engineer it to use semantics, as follows:
What does semantic mean?
A relevant definition is:
to show, indicate by sign
In HTML5, the "sign" is the element.
Once again, the
has been replaced—this time with the element. Although the contains an element, it will be regarded with less importance by the search-engine parser because of its ambient container. The was replaced with a more appropriate choice, the element. As the name implies, it represents text to be marked or highlighted. After one more run-through with the outliner after all the code changes, we see a proper indentation of the outline, shown in Figure 10.

Figure 10: Example HTML5 source outline after second set of code modifications
More Semantics
There are other areas in the document that are easy to identify for semantic markup. For example, in the _SiteLayout.cshtml file (see Figure 3), the final
on that page is for the footer. We can replace it as follows:
Note the insertion of the
How about the links to other pages in the site? The following code:
can be changed to this:
Because the links in the above code are regarded as the primary navigation within our site, it is appropriate to use the
What about the HTML5 logo in default.cshtml (Figure 5)? It can be transformed to be semantic, as follows:
HTML5 Semantics
Not only was the
replaced with , the span was replaced with a more suitable option, the element.
The Final Section
The co-author of this series, Daniel Egan, and I are often asked by those new to HTML5 when to use the element. It is our opinion that this element has the potential to be the most misused or unused of the semantic elements. In our example, our "article" is rather small. The larger an article, the more likely it will be divided into manageable "sections" (as is the case with the article you are reading). You can use the HTML5 Semantic Notepad tool as an aid in visualizing the as well as other semantic elements in an HTML5 document, as shown in Figure 11.

Figure 11: Viewing an HTML5 document's semantic elements using the HTML5 Semantic Notepad
Despite the small amount of content in the demo article, there is an appropriate use for the element in it. In the default.cshtml file, we will change the list of semantic elements to be in its own "section," as shown in Figure 12.
A list of semantic elements
- article
- aside
- figure
- figcaption
- footer
- header
- hgroup
- nav
- mark
- section
- time
Because this content can be logically grouped together, it makes sense to put it in a . This is especially the case when you have reason to provide a heading for the content. Other uses for a could be to indicate sidebar content with its own heading or a grouping of links with its own heading.
When we run our example HTML5 one last time through the outliner site, we see a rich HTML5 outline generated as a result of the correct usage of semantic elements in the document, as shown in Figure 13.

Figure 13: Example HTML5 source outline after final set of code modifications
Make HTML Code More Meaningful
Semantic tags may not impact your users visually, but they provide meaningful data to modern parsers and search engines—so they can potentially have significant impact on your site's search-engine ranking and web traffic. I've shown you how, with a few adjustments, you can start using semantic elements now in your own websites. Get accustomed to using these new elements now—you'll be glad you did! In the next two articles of this HTML5 series, Dev Pro contributing author Dan Wahlin will show you how to effectively structure JavaScript code in HTML5 applications.
0 comments
Hide comments
tag does not introduce a new section into the outline. In fact, if we run the page through the outliner site now, we will see the improvements shown in Figure 9. The site-level heading now appears, and the subtitle has disappeared! Notice that despite multiple elements, there is correct indentation between the first two.

Figure 9: Example HTML5 source outline after first set of code modifications

The source of the final line in the outline is the last
What does semantic mean?
A relevant definition is: to show, indicate by sign In HTML5, the "sign" is the element.
Once again, the
element, it will be regarded with less importance by the search-engine parser because of its ambient container. The was replaced with a more appropriate choice, the element. As the name implies, it represents text to be marked or highlighted. After one more run-through with the outliner after all the code changes, we see a proper indentation of the outline, shown in Figure 10.

Figure 10: Example HTML5 source outline after second set of code modifications
More Semantics
There are other areas in the document that are easy to identify for semantic markup. For example, in the _SiteLayout.cshtml file (see Figure 3), the final
on that page is for the footer. We can replace it as follows:
Note the insertion of the
How about the links to other pages in the site? The following code:
can be changed to this:
Because the links in the above code are regarded as the primary navigation within our site, it is appropriate to use the
What about the HTML5 logo in default.cshtml (Figure 5)? It can be transformed to be semantic, as follows:
HTML5 Semantics
Not only was the
replaced with , the span was replaced with a more suitable option, the element.
The Final Section
The co-author of this series, Daniel Egan, and I are often asked by those new to HTML5 when to use the element. It is our opinion that this element has the potential to be the most misused or unused of the semantic elements. In our example, our "article" is rather small. The larger an article, the more likely it will be divided into manageable "sections" (as is the case with the article you are reading). You can use the HTML5 Semantic Notepad tool as an aid in visualizing the as well as other semantic elements in an HTML5 document, as shown in Figure 11.

Figure 11: Viewing an HTML5 document's semantic elements using the HTML5 Semantic Notepad
Despite the small amount of content in the demo article, there is an appropriate use for the element in it. In the default.cshtml file, we will change the list of semantic elements to be in its own "section," as shown in Figure 12.
A list of semantic elements
- article
- aside
- figure
- figcaption
- footer
- header
- hgroup
- nav
- mark
- section
- time
Because this content can be logically grouped together, it makes sense to put it in a . This is especially the case when you have reason to provide a heading for the content. Other uses for a could be to indicate sidebar content with its own heading or a grouping of links with its own heading.
When we run our example HTML5 one last time through the outliner site, we see a rich HTML5 outline generated as a result of the correct usage of semantic elements in the document, as shown in Figure 13.

Figure 13: Example HTML5 source outline after final set of code modifications
Make HTML Code More Meaningful
Semantic tags may not impact your users visually, but they provide meaningful data to modern parsers and search engines—so they can potentially have significant impact on your site's search-engine ranking and web traffic. I've shown you how, with a few adjustments, you can start using semantic elements now in your own websites. Get accustomed to using these new elements now—you'll be glad you did! In the next two articles of this HTML5 series, Dev Pro contributing author Dan Wahlin will show you how to effectively structure JavaScript code in HTML5 applications.
0 comments
Hide comments

Note the insertion of the
How about the links to other pages in the site? The following code:
can be changed to this:
Because the links in the above code are regarded as the primary navigation within our site, it is appropriate to use the
What about the HTML5 logo in default.cshtml (Figure 5)? It can be transformed to be semantic, as follows:
![]()
HTML5 Semantics
Not only was the
The Final Section
The co-author of this series, Daniel Egan, and I are often asked by those new to HTML5 when to use the

Despite the small amount of content in the demo article, there is an appropriate use for the
A list of semantic elements
- article
- aside
- figure
- figcaption
- footer
- header
- hgroup
- nav
- mark
- section
- time
Because this content can be logically grouped together, it makes sense to put it in a
When we run our example HTML5 one last time through the outliner site, we see a rich HTML5 outline generated as a result of the correct usage of semantic elements in the document, as shown in Figure 13.

Make HTML Code More Meaningful
Semantic tags may not impact your users visually, but they provide meaningful data to modern parsers and search engines—so they can potentially have significant impact on your site's search-engine ranking and web traffic. I've shown you how, with a few adjustments, you can start using semantic elements now in your own websites. Get accustomed to using these new elements now—you'll be glad you did! In the next two articles of this HTML5 series, Dev Pro contributing author Dan Wahlin will show you how to effectively structure JavaScript code in HTML5 applications.