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 HTML<del>5</del> 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/ ### 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 ➤</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>