Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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:ivo.wetzel@googlemail.com">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: ivo.wetzel@googlemail.com">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>
share|improve this question
1  
Ah! Lowercase your doctype, please! –  David Murdoch Jan 26 '11 at 23:30
    
@David I'm using jade templates (so I blame those), but a good spot :) Gonna fix that. –  Ivo Wetzel Jan 26 '11 at 23:32
    
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 Jan 26 '11 at 23:52
    
@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. –  Ivo Wetzel Jan 27 '11 at 0:08
    
@DavidMurdoch may I know why lowercase doctype ? I thought its case insensitive. –  avi Sep 19 '13 at 5:47

5 Answers 5

up vote 1 down vote accepted

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;
}
share|improve this answer
    
Also, just to nitpick, but isn't a { cursor: pointer; } a little unnecessary? ;) –  Yi Jiang Jan 27 '11 at 13:55
    
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 Wetzel Jan 27 '11 at 18:45
    
@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 Feb 12 '11 at 23:16
    
@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 :/ –  Ivo Wetzel Feb 13 '11 at 11:20

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.

share|improve this answer
    
+1 Best answer yet. Based off your description of an aside, could the slideshow not also be considered an aside? –  Hailwood Jan 26 '11 at 23:50
    
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). –  Ivo Wetzel Jan 26 '11 at 23:57
1  
+1 Great link, thanks for this! Reading as we speak :-) –  Peter Jan 27 '11 at 8:49

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:ivo.wetzel@googlemail.com">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.

share|improve this answer

<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.

share|improve this answer
    
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? –  Ivo Wetzel Jan 26 '11 at 23:56
    
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. –  David Murdoch Jan 27 '11 at 0:15
    
I see, I switched to .clearfix now. –  Ivo Wetzel Jan 27 '11 at 0:22

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>

share|improve this answer
    
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? –  Ivo Wetzel Jan 26 '11 at 23:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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