HTML5 semantics, any possible improvements? Twitter client portfolio website

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 semanticssemantics 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""guides" and a few of the element specs, but they often have different positions on this.

PS: Don't rant about the CSS,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.

SiteThe site can be viewed here: http://bonsaiden.no.de/here.

Manually formatted HTML

Manually formatted HTML

HTML5 semantics, any possible improvements?

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.

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

Twitter client portfolio website

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.

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

The site can be viewed here.

Manually formatted HTML

Rollback to Revision 1

Source Link

edited Jul 27, 2015 at 1:19

Jamal

35.2k
13
134
238

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:[email protected]">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>

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:[email protected]">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>