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 ➤</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>
<article><div>content</div><article>
You should be able to get rid of the<div></div>
with no side effects. \$\endgroup\$