14 Days Free Technical Video Training from WintellectNOW

  

Use HTML5 semantic tags to add new meaning to your MVC views

Tags: HTML, HTML5, ASP.NET, ASP.NET MVC

While HTML5 promises to be THE future of the web, there's no need to wait - you can have some of that future now. As the W3C Working Groups finalize the HTML5 standards, many browsers are already implementing them, so developers can already take advantage of these cutting-edge features. Semantic elements are one of these features that you can use in your code, right now.

The HTML5 semantic element set

Since HTML is a markup language, elements are at its core, and semantic elements in particular allow you to express the content and meaning of the content in a more precise, clear, way than you can with traditional elements. Semantic elements give you the ability to format data like HTML does, but also to describe the meaning of the content, similar in concept to XML. That means you're looking at smaller, cleaner, expressive, markup as a result.

Since semantic elements are part of the HTML5 specification, your page will need the much improved <!DOCTYPE> element, shown here:

<!DOCTYPE html>

This back-to-basics <!DOCTYPE> works everywhere, in every browser, with no ridiculously long syntax to deal with. Once your <!DOCTYPE> is setup, the rest of the page can go semantic as well, as some of the new elements deal with describing structure of the content rather than providing just basic markup. Below is a list of semantic elements for structuring page content:

Element Purpose
<article> Use this to encase content, particularly syndicated content such as blog entries. As it's name denotes, the <article>
<aside> Great for side-bars, quotes, notes, and other content related to the article content that you want to emphasize.
<figcaption> A caption for a Figure
<figure> A Figure
<footer> This element is the footer of an article or of the page/document itself. Pages can contain multiple <footer> tags for varying purposes.
<header> The <header> tags belong in between <article> article tags to denote the header of an article. They're not to be confused with the <head> tag that signifies the entire document heading.
<hgroup> Use this element to group heading elements <h1> - <h6>. This will group the elements together for rendering titles and subtitles.
<mark> Highlights (yellow, in many browsers) some content for emphasis. Use this tag to highlight notes much as you would with a highlighter pen on paper.
<nav> Use this to designate a navigational section of a page. Great for menus.
<section> This element designates a generic section of a document. Because this tag is generic, it doesn't describe the content in the best possible way. Use the other semantic tags first and the <section> tag for misc. content.

You can create content that is more meaningful to both humans and machines with the new semantic elements in HTML5.

Today's web with standard non-semantic elements

Traditionally, developers have implemented <div> tags with a class attribute to define the structure and express the meaning of content. The sample code below shows a classic style HTML page with <div> elements for structure.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML5 Non Semantic Elements Document Structure</title>
</head>
<body>
<div id="page">
    <div id="header">
    <h1>HTML5 Semantic Tags</h1>
    <h2>Demonstrating HTML5 Document Structure</h2>      
    </div>
    <div id="content">
        HTML5 is the future of the web!         
        <div class="figures">   
            <img src="Content\Images\html5.jpg" height="200" width="200" />
             <sub>1. HTML5 Official Logo</sub>
        </div>
        Follow <a href="http://twitter.com/html5">Rachel</a> and 
        HTML5 <a href="http://twitter.com/html5">HTML5</a> for the latest updates on HTML5!        
        <br />        
        Visit the <b>W3c Website</b> for more information on the following specs and standards as they are developed.
        <ul>
            <li>HTML5</li>
            <li>ECMAScript</li>
            <li>SVG</li>
        </ul>
    <div id="content">
    <div id="footer">HTML5 Footer</div>
</div>
</body>
</html>

The above code saturates today's web, growing in popularity since around the time CSS2 (1997). In the era before CSS2,  the <table> tag had reigned as the de facto way to organize a web page; however, tables do little more than render boxes in a browser. While <div> elements are more expressive than <table> elements when it comes down to conveying the meaning of the contents, semantic elements have an even better way to express meaning, since that meaning is built right into the tag's name.

Today's web with semantic elements

Now you can create documents that are more clear in their content, structure, and meaning, by using HTML5 semantic elements. Below is a rework of the same code sample as previously mentioned, but using HTML5 semantic tags instead.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML5 Semantic Elements Document Structure</title>
</head>
<body>
    <article>
        <header>
            <hgroup>
                <h1>HTML5 Semantic Tags</h1>
                <h2>Demonstrating HTML5 Document Structure</h2>      
            </hgroup>
            <time datetime="2011-06-01">June 01, 2011</time>
        </header>   
        HTML5 is the future of the web!         
        <figure>   
            <img src="Content\Images\html5.jpg" height="200" width="200" />
            <figcaption>
                Fig 1. HTML5 Official Logo
            </figcaption>
        </figure>
        Follow <a href="http://twitter.com/html5">Rachel</a> and 
        HTML5 <a href="http://twitter.com/html5">HTML5</a> for the latest updates on HTML5!        
        <br />        
        Visit the <mark>W3c Website</mark> for more information on the following specs and standards as they are developed.
        <ul>
            <li>HTML5</li>
            <li>ECMAScript</li>
            <li>SVG</li>
        </ul>
        <footer>Article Footer</footer>
    </article>     
 <footer>Document Footer</footer>
</body>
</html>

As you can see, the only real structural non-semantic element is the <div class="page">. Inside this element are many of the semantic elements listed in the table above. These elements describe an online article about HTML5 Semantic tags and document structure, including a complete figure with caption. You'll notice it's very easy to read and understand the meaning that the author has intended.

Additionally, semantic and standard elements can mix in the page easily. This also means that current HTML elements won't be going away, although a few rarely used elements went up for deprecation, such as the <marquee> tag.

HTML5 semantic tags & cross browser support

The most important question for developers is whether or not they can actually use these new features, and if not, when. The good news is that you can use HTML5 semantic tags today because of their wide cross browser support. The browsers that don't support these elements will display them as inline content, since browsers just ignore things they don't understand and move to the next element. That means basic CSS styling can enforce a level of semantic element support, even if only for aesthetic reasons.

The IE Test Center  web site boasts:

"We developed 270 new test cases and updated 13 test cases in conjunction with development of IE10 Platform Preview 2. The IE Testing Center now offers a total of 6668 test cases. We are working closely with these two web standards organizations to submit these test cases officially within each working group’s official process." (Important numbers highlighted in bold)

At the test center, you can run any of these 6400+ HTML5, CSS, SVG, or other test cases that exist, and in the future, many more. Inspecting the image below from the IE Test Center illustrates current information on cross browser support for these elements.

image

During the May 2011 update shown in the above image, Opera had the least amount of support for HTML5 semantic elements. Since then, Opera's added more support and appears that they'll continue development on semantic element support.

HTML5 semantic tags and developer tools support

Many developer tools such as Visual Studio 2010 are providing HTML5 support to varying degrees and with that of course, HTML5 semantic element support as well. To turn on HTML5 validation for all web applications going forward in Visual Studio 2010 SP1, use the Tools->Options menu item, then navigate to the Text Editor's HTML tab.

SNAGHTML3524591e

Note: You must have Service Pack 1 installed to use the HTML5 validation. Previous versions of VS2010 will only validate to HTML 4.0.1 as the default.

Additionally, the new MVC3 project templates in VS2010 SP1 give you the option to use HTML5 semantic markup.

SNAGHTML35290322

Selecting this checkbox will create the following HTML5 markup in the _Layout.cshtml Layout Page in the \Views\Shared folder:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</script>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="main">
            @RenderBody()
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

Although the <div> shows up a few times in the page, most of it is semantic. The <header>, <nav>, <section>, and <footer> elements are added into this basic page layout template, where appropriate, making it easy to express the content's meaning. You can customize the layout and other default view templates to use more semantic elements or other new HTML5 features that Visual Studio 2010 supports.

In addition to the service pack and tools update, you can visit the MSDN Visual Studio Code Gallery online to download the "Visual Studio Web Standards Update" extension for Visual Studio. You can use the new tools to keep up to date with the status of HTML5 and related technologies. The Visual Studio Web Standards Update provides support for HTML5 Intellisense, the Geolocation API, and many other features.

There's more information about the VS Web Standards Update, and other tools to get you moving along quickly with HTML5 development here.

Summary

Visual Studio 2010 SP1 already has some nice support for HTML5 development. As you might imagine, there will be more support and features added to Visual Studio as more of the HTML5 specs become finalized, but in the meantime, there are many NuGet packages and extensions like the VS Web Standards Update that will help you become more productive in HTML5 development now.

Resources:

My previous post on HTML5 support in Visual Studio 2010

IE Developer center: HTML5 Semantic elements

How to use semantic tags

image

2 Comments

  • Rachel Appel said

    Readers:

    In addition to this post you'll want to check out Jennifer Marsman's post on semantic features in HTML5.

    http://tinyurl.com/42no592

  • Rui Jarimba said

    Hi Rachel,

    Thank you for your post.
    I wrote an article that may be of your interest - using HTML5 microdata attributes in ASP.NET MVC:

    http://ruijarimba.wordpress.com/2011/07/24/asp-net-mvc-add-html5-microdata-to-your-applications-using-metadata-providers/

    Let me know what you think.

    Best regards,
    Rui Jarimba

Comments have been disabled for this content.