Search code examples
htmlsemantic-markup

Semantic button markup

curious how the below might be marked up via HTML. Not sure if it's a list, if it should be separate divs (with spans maybe?) or navigation(html 5).

The button on far left is stand-alone. Then the title in center. Then a button group (back/next). Then a button (notifications) on far right.

All the buttons and title refer and act upon the content below it. 

button         Title of page below      button(back) button(next)       button
Solution

  • If it's navigation and you want it to be semantic, you should wrap it in a nav tag. The Nav tag is HTML5 only, but semantically describes navigation. I would structure it like this:

    <nav>
    <ul>
        <li><a href="#">Button</a></li>
        <li><h1>Title</h1></li>
        <li><a href="#">Back</a></li>
        <li><a href="#">Next</a></li>
        <li><a href="#">Button</a></li>
    </ul>
</nav>

    It's good practice to use anchor tags for navigation and style them to look like appropriate. You should use a <h1> for a title, as it should be the most important heading.