HTML5 semantic web elements - why should I use them in a internal app

Question

Why should I use HTML5 semantic web elements in a internal application? Semantic elements seem to be good for search engines to detect which elements are specific to navigation, articles, etc. What will I gain if I use these elements in client-only HTML-based applications?

Answer 1

Possible gains:

• Readability
• Accessibility
• Lightweight applications
• Less constraint on the network (smaller file sizes)
• Easier to expand
• Easier to train a second developer to fit in
• Chance to practice good habits for developing external sites

Possible drawbacks:

• None?

---

Basically,

<header>
    <hgroup>
        <h1>Logo and Application Title</h1>
        <h2>Clever Slogan</h2>
    </hgroup>

    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Test</li>
            <li>Stuff</li>
        </ul>
    </nav>
</header>

Looks better than...

<div id="header">
    <div class="top_logo">
        <h1>Logo and Application Title</h1>

        <h2>Clever Slogan</h2>
    </div>

    <div class="navigation">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            <li>Test</li>
            <li>Stuff</li>
        </ul>
    </div>
</div>

Also in styles

<style type="text/css">
    header hgroup {}
    header nav li {}
</style>

Looks better than

<style type="text/css">
    #header .top_logo {}
    #header .navigation li {}
</style>