16
\$\begingroup\$

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

Don't rant about the CSS; it's generated by LESS.

The site can be viewed here.

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>
Improve this question
\$\endgroup\$
6
  • 1
    \$\begingroup\$ Ah! Lowercase your doctype, please! \$\endgroup\$
    – David Murdoch
    Jan 26, 2011 at 23:30
  • \$\begingroup\$ @David I'm using jade templates (so I blame those), but a good spot :) Gonna fix that. \$\endgroup\$
    – Ivo Wetzel
    Jan 26, 2011 at 23:32
  • \$\begingroup\$ 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. \$\endgroup\$
    – Hailwood
    Jan 26, 2011 at 23:52
  • \$\begingroup\$ @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. \$\endgroup\$
    – Ivo Wetzel
    Jan 27, 2011 at 0:08
  • \$\begingroup\$ @DavidMurdoch may I know why lowercase doctype ? I thought its case insensitive. \$\endgroup\$
    – avi
    Sep 19, 2013 at 5:47

5 Answers 5

Reset to default
2
\$\begingroup\$

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;
}
Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ Also, just to nitpick, but isn't a { cursor: pointer; } a little unnecessary? ;) \$\endgroup\$
    – Yi Jiang
    Jan 27, 2011 at 13:55
  • \$\begingroup\$ 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. \$\endgroup\$
    – Ivo Wetzel
    Jan 27, 2011 at 18:45
  • \$\begingroup\$ @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. \$\endgroup\$
    – citadelgrad
    Feb 12, 2011 at 23:16
8
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
2
  • \$\begingroup\$ +1 Best answer yet. Based off your description of an aside, could the slideshow not also be considered an aside? \$\endgroup\$
    – Hailwood
    Jan 26, 2011 at 23:50
  • \$\begingroup\$ 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). \$\endgroup\$
    – Ivo Wetzel
    Jan 26, 2011 at 23:57
3
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
2
\$\begingroup\$

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

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ 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? \$\endgroup\$
    – Ivo Wetzel
    Jan 26, 2011 at 23:56
  • \$\begingroup\$ 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. \$\endgroup\$
    – David Murdoch
    Jan 27, 2011 at 0:15
  • \$\begingroup\$ I see, I switched to .clearfix now. \$\endgroup\$
    – Ivo Wetzel
    Jan 27, 2011 at 0:22
2
\$\begingroup\$

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>

Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ 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? \$\endgroup\$
    – Ivo Wetzel
    Jan 26, 2011 at 23:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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