I have made this HTML5 structure for a new website I am working on. I'd like to know if there is a more elegant approach to doing it.
Here is the Wireframe
- Is the wrapper for the two column considered bad practice?
- Should the secondary navigation on the left be an
articleor adiv?
<body>
<header class="main">
<p>header</p>
</header>
<div class="wrapper">
<!-- Column left -->
<section class="column_left">
<header>
<article>
<h1>H1 title</h1>
<p>Lorem ipsum dolor sit amen lorem ipsum dolor sit amen</p>
</article>
</header>
<nav class="main">
<ul>
<li>- main navigation</li>
<li>- main navigation</li>
<li>- main navigation</li>
</ul>
</nav>
<div class="uploadyourphoto">
<p>button call to action</p>
</div>
<article class="secondarynav">
<h2>Title h2 secondary menu</h2>
<ul>
<li>navigation</li>
<li>navigation</li>
<li>navigation</li>
</ul>
</article>
<article class="secondarynav">
<h2>Title h2 secondary menu</h2>
<ul>
<li>navigation</li>
<li>navigation</li>
<li>navigation</li>
</ul>
</article>
</section>
<!-- Content -->
<section class="main">
<header class="slideshow">
<p>slideshow widget</p>
</header>
<article class="review">
<p>review widget</p>
</article>
<article class="product_grid">
<h2>product grid title</h2>
<p>Text text text lorem ipsum dolor sit amen </p>
<article class="products">
<ul>
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
</ul>
</article>
</article><
<article class="product_grid">
<h2>product grid title</h2>
<p>Text text text lorem ipsum dolor sit amen </p>
<article class="products">
<ul>
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
</ul>
</article>
</article>
</section>
</div>
<div class="clearfix">/div>
<!-- footer -->
<footer>
<div>footer</div>
</footer>
</body>
3 Answers 3
Using classes/ids like column_left isn't a very semantic approach; HTML structure doesn't have any concept of "positioning" and, assuming you care about HTML readers other than a desktop browser (like screen readers or mobile devices), the idea of "left" just doesn't apply.
Instead, try describing what the content is. Instead of class="column_left", you could use id="sub-content" or id="related". Just choose something that describes the "what" without referring to appearance or positioning.
In regards to your use of article elements, the HTML5 spec says:
The
articleelement represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Key emphasis added to illustrate that article is meant to be used to say "this is some real content", distinguishing it from containers and markup added to "frame" the content (like sidebars).
Also, your use of section elements is not in-keeping with the specification. The HTML5 specification says:
The
sectionelement represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
It specifically warns:
The
sectionelement is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use thedivelement instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
So, the idea of a "main" section probably isn't right. Sections are meant to be ways partition a large article into headed-sections, in very much the way a Wikipedia article is laid out. You could easily say you have a "main" article, but a "main" section doesn't make as much sense, and you'd be better off replacing yours with simple div elements.
Don't worry about wrapping your content too much if the style cannot be achieved without it. If it can, the extra wrap may be overkill.
Your markup relies a lot on the
<article>where it may not be necessary. For instance, you put one<article>tag into another, which is odd. You also put and<article>tag into the<header>, which is also odd.
If you want simple containers, I would recommend you stick with <div>s with semantic class attributes. They have been around for a while and used for wrapping other tags. They are the tried and true method and their lack of semantic meaning will not confuse the reader or crawler.
I'd keep the wrapper, that way you can apply margin, padding, etc. to it and style the entire page instead of replicating the CSS for the two columns.
Should the secondary navigation on the left should be a as well instead of an article or a div?are you referring to the wireframe instead of an article or a div? \$\endgroup\$.mainthe site navigation? Is.secondarynavsome kind of "See also" or is it a sub-menu of the global nav? \$\endgroup\$