HTML5 semantics, any possible improvements?

Question

So I'm creating some sort of "portfolio" website for my self (a ton of placeholder content right now...) and I was wondering if I could improve the semantics of the HTML5 any further, especially the article stuff.

I'm not completely sure if I should use section elements inside it, I read through a number of HTML5 "Guides" and a few of the element specs, but they often have different positions on this.

I think using sections would add to the semantics since the slides are a different "part/section" of the "article".

PS: Don't rant about the CSS, it's generated by LESS.

PPS: I'm not completely sure whether this falls under "CodeReview", but I think of the semantics as very important so I might just as well ask the question and see if it gets closed or not.

Site can be viewed here: http://bonsaiden.no.de/

Updated HTML

<!doctype html>
<html lang="en">
    <head>
        <title>Coding. Clean and Functional. | BonsaiDen</title>
        <meta charset="utf-8">
        <!--[if IE]>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <![endif]-->

        <link rel="shortcut icon" href="/images/favicon.ico">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold">
        <link rel="stylesheet" href="/stylesheets/reset.css">
        <link rel="stylesheet" href="/stylesheets/style.css">

        <!--[if lt IE 9]>
        <script src="/javascripts/html5.js"></script>
        <![endif]-->
    </head>

    <body>
        <header></header>
        <aside>
            <section id="content">
                <header data-page="/welcome">
                    <h1>Coding. Clean and Functional.</h1>
                </header>
                <div>
                    <h2>Welcome</h2>
                    <p>
                        This is Ivo Wetzel's personal site where he lists his projects.
                    </p>
                </div>
            </section>
            <aside id="slideshow">
                <figure>
                    <figcaption>
                        <h1 id="slidetitle">[SlideShowItem Title]</h1>
                    </figcaption>
                    <div id="slidecontent">
                        <p>
                            [Slideshow Image]
                        </p>
                    </div>
                </figure>
            </aside>
        </aside>

        <div id="navigation">
            <nav>
                <ul>
                    <li class="left">
                    <h1>Projects</h1>
                    <ul>
                        <li><a href="/garden">JavaScript&nbsp;Garden</a></li>
                        <li><a href="/shooter">NodeGame:&nbsp;Shooter</a></li>
                        <li><a href="/atarashii">Atarashii</a></li>
                    </ul>
                    </li>
                    <li>
                    <h1>Code</h1>
                    <ul>
                        <li><a href="/neko">neko.js</a></li>
                        <li><a href="/bison">BiSON.js</a></li>
                    </ul>
                    </li>
                    <li>
                    <h1>Web</h1>
                    <ul>
                        <li><a href="/stackoverflow">Stack&nbsp;Overflow</a></li>
                        <li><a href="/github">GitHub</a></li>
                        <li><a href="/website">The&nbsp;Website</a></li>
                    </ul>
                    </li>
                    <li class="right">
                    <h1>ME</h1>
                    <ul class="info">
                        <li><a href="/me" class="">Ivo Wetzel</a></li>
                        <li class="simple"><a id="picture" href="/me" class=""><img src="images/snufkin.png" alt="Ivo Wetzel"></a>
                        <ul>
                            <li class="first"><a href="http://twitter.com/BonsaiDen">Twitter</a></li>
                            <li><a href="mailto:[email protected]">E-Mail</a></li>
                        </ul>
                        </li>
                    </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <footer></footer>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script src="/javascripts/page.js"></script>
    </body>
<html>

Manually formatted HTML

<!DOCTYPE html>
<html>
  <head>
    <title>A Python Twitter Client | BonsaiDen</title>
    <link rel="shortcut icon" href="/images/favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold">
    <link rel="stylesheet" href="/stylesheets/style.css">

    // will get copied to a local file sooner or later
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

    // the content
    <article>

      // quite some divs here
      <div>
        <div id="content">  // maybe use section?

          // gets replaced via ajax

          <header data-page="/atarashii">
            <h1 class="small">A Python Twitter Client</h1>
            <div class="external">
              <a href="https://github.com/BonsaiDen/Atarashii">Go to Project &#x27A4;</a>
            </div>
            <div class="clear"></div> // always hate these clear things...
          </header>

          <div>
            <p>A Twitter Client for GNOME...</p>
          </div>

          // ajax end

        </div>

        <div id="slideshow">  // maybe use section?
          <header>
            <h1 id="slideTitle">[SlideShowItem Title]</h1>
          </header>

          <div id="slideContent">
            <p>[Slideshow Image]</p>
          </div>
        </div>
        <div class="clear"></div>
      </div>
    </article>


    <header>

      // navigation, surprise!
      <nav>

        // really happy with this
        <ul>
          <li class="left">
            <h1>Projects</h1>
            <ul>
              <li><a href="/garden">JavaScript Garden</a></li>
              <li><a href="/shooter">NodeGame: Shooter</a></li>
              <li><a href="/atarashii" class="active">Atarashii</a></li>
            </ul>
          </li>

          <li>
            <h1>Code</h1>
            <ul>
              <li><a href="/neko">neko.js</a></li>
              <li><a href="/bison">BiSON.js</a></li>
            </ul>
          </li>

          <li>
            <h1>Web</h1>
            <ul>
              <li><a href="/stackoverflow">Stack Overflow</a></li>
              <li><a href="/github">GitHub</a></li>
              <li><a href="/website">The Website</a></li>
            </ul>
          </li>

          <li class="right">
            <h1>ME</h1>
            <ul class="info">
              <li><a href="/me">Ivo Wetzel</a></li>
              <li class="simple">

                // div div div :/
                <div>
                  <div id="picture">
                    <img src="images/snufkin.png" alt="Ivo Wetzel"/>
                    <a href="/me"></a>
                  </div>

                  <ul>
                    <li class="first"><a href="http://twitter.com/BonsaiDen">Twitter</a></li>
                    <li><a href="mailto: [email protected]">E-Mail</a></li>
                  </ul>

                  <div class="clear"></div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>

    // no real content so far but a background image thingy
    <footer></footer>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="/javascripts/page.js"></script>
  </body>
</html>

@David I'm using jade templates (so I blame those), but a good spot :) Gonna fix that.
Another comment, Why do you have <article><div>content</div><article> You should be able to get rid of the <div></div> with no side effects.
@Hailwood There's a very sublte shadow fade at the top of the page and I can't get that to span over the complete page without the extra div, unless I make a header just for that and get rid of the other header.

Yi Jiang · Accepted Answer · 2011-01-27 13:39:23Z

Looking through the code, one of the no-brainers for me that jump out immediately is the the separation of the profile anchor and image. The overlay effect is important, obviously, but this can be achieved much more cleanly with a bit of CSS elbow grease:

a {
    background: #fff;
    display: block;
    height: 128px;
    width: 128px;
}

a img:hover {
    opacity: 0.9;
}

^{See: http://www.jsfiddle.net/yijiang/Tv7AP/}

Looking at the code, it seems like the only reason why you have a div#navigation > a structure is for the background 'shadow'. If that is the case, you can easily get rid of the outer div by using either box-shadow or a 1px wide background image repeated along the y axis with some padding:

nav {
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3), 0 -3px 0 rgba(0, 0, 0, 0.3);
}

Additionally, seeing li class="right" makes me slightly sad, but seeing li class="left" makes me sadder still - since the only reason you're using the left class is to avoid double borders (the right class is to give the profile section a bit more space, apparently), you can really using only one class:

nav ul li {
    border-right: 4px solid #052C4F;
}

nav ul li.right {
    border-right: 0;
}

Also, just to nitpick, but isn't a { cursor: pointer; } a little unnecessary? ;)
Oh, yes guess that's left in from the early stages. The img hover thing is ingenious; I've put that in. As for the last one, I tried to change it but I always had some strange offsets in there which I could not get rid of, so I'll leave the 2/2 border for now.
@Ivo you asked a question about HTML5 semantics and the answer you selected is only about CSS. The question and answer should be related so it helps people who are looking for the answer to the question. Stack answers help more than just asker. You should edit your question.
@citadelgrad It wasn't really clear to me which answer I should accept in the end, so I selected the answer that was the most useful to me. The others sadly ended up with no further comments concerning my questions :/ I would really like to accept your answer, but it's hardly more than a "fancy link" to the Mark Pilgrim's article, I was hoping for some more discussion on the figure stuff later on :/

citadelgrad · Answer 2 · 2012-08-10 22:04:24Z

Your "the content" article tag should probably be an Aside.

Mark Pilgrim's Dive Into HTML5 recommends for Article tags:

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

and for Aside tags:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

I believe ID="content" should probably be a section as you proposed.

In my opinion, he gives the best explanations for when and where each tag should be used.

+1 Best answer yet. Based off your description of an aside, could the slideshow not also be considered an aside?
Indeed the aside makes more sense here, I'll replace the article element with it then. @Hailwood I'm wondering about that, right now I'm planning on use a figure and a figcaption for that (the slides seem to match the description of the element that was given in the spec).

David Murdoch · Answer 3 · 2011-01-26 23:36:32Z

<div class="clear"></div> can and should be replaced by the magnificent clearfix solution

Add this to the END of your css:

/* >> The Magnificent CLEARFIX: http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }

Then just add class="clearfix" to any container that has floated elements.

You should also check out http://html5boilerplate.com/ if you haven't already.

Hm, googled a bit about the float stuff and as it turns out I can also use a simple overflow: auto in my case, which seems to work fine so far (only used twice). Do you know of any problems with this solution?
I did run into an issue with using overflow:auto once before but I can't remember what it was. There is also this. I always use .clearfix now, just in case.

Hailwood · Answer 4 · 2011-01-26 23:37:42Z

In my opinion A section element is basically an important sub div by this I mean, A section element is used to designate a notable division in your content.

One of the best ways I have found to think about if you should use a certain element in a certain place is:

Imagine you are using a screen reader like a blind person. They cannot see images or color, so the fact that you have a different background for each part of you content makes no difference to them.

But, If suddenly the screen reader starts reading out "new section" then that makes a more sense doesn't it?

So, in my opinion.

You should not replace your content or slideshow div with a section.

a section should be used inside of your content div.

Although,

This may be nit picking, but does having a content div not take the place of where an article element should be?

Does anyone else find that w3schools is full of C***?

The <article> tag defines external content.
The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.

In reality if this was the case they would have called the tag <external>

The last point is a good one, problem is, the slides are more or less part of the article as the change with the article to give some overview of the project, so the should be contained in the article I guess. Maybe I could place same inside a figure element and make the title a figcaption, would that make more sense?

unor · Answer 5 · 2012-11-03 03:46:22Z

About your "Updated HTML":

`meta`-`charset` before `title`

You should place the meta element with the charset attribute as first element in head; otherwise it might not be used for the title element.

    <meta charset="utf-8">
    <title>Coding. Clean and Functional. | BonsaiDen</title>

Favicon

You could use icon instead of shortcut icon (still allowed for historic reasons, though).

Outline

A site heading is missing. Add a h1 (containg the site name and/or site logo), probably in your <header></header>.

No need to use `header`

If your header elements only contain a heading (h1-h6), you may omit header altogether. It's only useful if you add additional introductory content. However, you may keep them for consistency, of course.

A heading for `nav`

If you like to structure your links in nav with headings, you should give it a one level higher heading like "Navigation" (h1). Then use h2 for the other headings (or use section elements inside, each with h1). You shouldn't use a ul for the whole navigation, instead use a new ul for each sub-section.

<nav>
 <h1>Navigation</h1>

 <h2>Projects</h2>
 <ul>
  <li><a href="/garden">JavaScript&nbsp;Garden</a></li>
  <li><a href="/shooter">NodeGame:&nbsp;Shooter</a></li>
  <li><a href="/atarashii">Atarashii</a></li>
 </ul>

 <h2>Code</h2>
 <ul>
  <li><a href="/neko">neko.js</a></li>
  <li><a href="/bison">BiSON.js</a></li>
 </ul>

 <h2>Web</h2>
 <ul>
  <li><a href="/stackoverflow">Stack&nbsp;Overflow</a></li>
  <li><a href="/github">GitHub</a></li>
  <li><a href="/website">The&nbsp;Website</a></li>
 </ul>

 <h1>ME</h1>
 <ul class="info">
  <li><a href="/me" class="">Ivo Wetzel</a></li>
  <li class="simple"><a id="picture" href="/me" class=""><img src="images/snufkin.png" alt="Ivo Wetzel"></a>
   <ul>
    <li class="first"><a href="http://twitter.com/BonsaiDen">Twitter</a></li>
    <li><a href="mailto:[email protected]">E-Mail</a></li>
   </ul>
  </li>
 </ul>

</nav>

However, I think your Twitter and E-Mail links are not part of the major navigation, so you should better move them to the site footer.

Main content?

Which is your main content of the page? Is it #content ("Coding. Clean and Functional.")? If so, why is it in aside? You shouldn't enclose it in aside! Use section as a direct child of body instead (or article, if applicable).

If the slideshow is part of your main content, you shouldn't use aside for it either.

HTML5 semantics, any possible improvements?

Updated HTML

Manually formatted HTML

5 Answers

`meta`-`charset` before `title`

Favicon

Outline

No need to use `header`

A heading for `nav`

Main content?

Your Answer

Not the answer you're looking for? Browse other questions tagged html or ask your own question.

asked	2 years ago
viewed	835 times
active	6 months ago

HTML5 semantics, any possible improvements?

Updated HTML

Manually formatted HTML

5 Answers

meta-charset before title

Favicon

Outline

No need to use header

A heading for nav

Main content?

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged html or ask your own question.

Related

`meta`-`charset` before `title`

No need to use `header`

A heading for `nav`