How Semantic Can We Get With HTML 5?

StackOverflow https://stackoverflow.com/questions/1025126

  •  06-07-2019
  •  | 
  •  

Question

This is a community wiki that asks the question, "Just how semantic can our HTML markup get thanks to HTML 5?" Below You can find the source code of a sample HTML 5 page. The object is to make a very usable, accessible, style-able webpage using as few classes and IDs as possible.

Also, when do you plan to start implementing HTML 5? Are you going to wait 10+ years until the draft is finalized, or are you going to be an "early adopter" now that browser support is rapidly growing?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />  
        <title>Site Name &bull; Page Title</title>
    </head>
    <body>
        <nav>
            <h1><a href="/">Site Name</a></h1>
            <ul>
                <li><a href="#">Nav Link</a></li>
                <li><a href="#">Nav Link</a></li>
                <li><a href="#">Nav Link</a></li>
            </ul>
        </nav>
        <header>
            <p>Welcome to the site!</p>
            <a href="#">Call to action!</a>
        </header>
        <section>
            <aside>
                <!-- Sidebar -->
            </aside>
            <article>
                <header>
                    <h2>Article Name</h2>
                    <p>Posted by <cite>Kerrick Long</cite> on <time datetime="2009-06-21">June 21</time>.</p>
                </header>
                <p>Lorem ipsum dolor sit amet...Aliquam erat volutpat.</p>
                <figure>
                    <img src="/images/eclipse.jpg" width="640" height="480" alt="Solar Eclipse" />
                    <label>Here we can see the solar eclipse that happened <time datetime="2009-05-28">recently</time>.</label>
                </figure>
                <p>Lorem ipsum dolor...</p>
            </article>
        </section>
        <footer>
            <p>&copy; <time datetime="2009-01-01">2009</time>, <cite>Site Owner</cite></p>
        </footer>
    </body>
</html>
Was it helpful?

Solution

It won't be 10+ years. That time period is for "final completion", all browsers support all parts of the spec. It's due to become a candidate late this year, early next, and hopefully approved by 2011/2.

I'm phasing it it in where I can, right now. How much I use depends on audience, but since IE share has been falling constantly, what they don't support is no longer a killer, especially as John Resig's "HTML5 shiv" lets the semantic tags play even in IE6 with js turned on.

More importantly, I'm starting to shift my thinking into HTML5 lines, using classes today for what will become HTML5 tags tomorrow (div class="nav"). That way I'll be more used to thinking in HTML5 terms when the opportunity arises.

OTHER TIPS

Although I take great happiness in seeing new capabilities, the truth still remains that my clients use IE6 (and similar browsers). As much as I would like to see everybody using a modern browser, the fact that they aren't means I have to work with technologies that don't require them to upgrade.

I'm going to use it as soon as browsers support it. The sites I make are mainly hobby projects mostly visited by Firefox users. (80% of my traffic uses the latest version of FF).

Keep in mind that the cite element is not appropriate for a person's name: HTML5 states "A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names." Also, the trailing slash in <meta charset="UTF-8" /> isn't necessary.

The main driver for people adopting HTML 5 would be better search engine placement, without that, I'm not seeing a huge reason to adopt.

(Maybe if people could somehow convince me that the web might be more data-like and therefore interoperability would improve, then I might be somewhat convinced, but that sounds a bit overly optimistic)

I'll echo jonothan sampson. As long as a reasonable number of people are still using older browsers, it's hard to make that jump.

On the other hand, it's probably sensible to detect browsers and send a version that makes good sense. Since the differences between the two languages will be moderate, it will probably be feasable to transform an HTML5 page to HTML4 with additonal class and styles depending on user agent, perhaps with a little server side xslt. That said, I doubt I'd be the one to invent that technology, although I'd use it if or when it becomes available.

People keep mentioning a javascript solution for older browsers such as ie6 but what if they do not support javascript?

Sorry not an answer but more a ????? As this is the point I just don't get about semantic html5 and IE support.

You could always go belt and braces for older browsers 

<nav><div id="nav"> some nav stuff</div></nav>

But that feels dirty to me?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top