patternhtmlMinor
Twitter client portfolio website
Viewed 0 times
websitetwitterclientportfolio
Problem
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
I'm not completely sure if I should use
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
```
A Python Twitter Client | BonsaiDen
// will get copied to a local file sooner or later
// the content
// quite some divs here
// maybe use section?
// gets replaced via ajax
A Python Twitter Client
Go to Project ➤
// always hate these clear things...
A Twitter Client for GNOME...
// ajax end
// maybe use section?
[SlideShowItem Title]
[Slideshow Image]
// navigation, surprise!
// really happy with this
Projects
JavaScript Garden
NodeGame: Shooter
Atarashii
Code
neko.js
BiSON.js
Web
Stack Overflow
GitHub
The Website
ME
Ivo Wetzel
// div div div :/
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
```
A Python Twitter Client | BonsaiDen
// will get copied to a local file sooner or later
// the content
// quite some divs here
// maybe use section?
// gets replaced via ajax
A Python Twitter Client
Go to Project ➤
// always hate these clear things...
A Twitter Client for GNOME...
// ajax end
// maybe use section?
[SlideShowItem Title]
[Slideshow Image]
// navigation, surprise!
// really happy with this
Projects
JavaScript Garden
NodeGame: Shooter
Atarashii
Code
neko.js
BiSON.js
Web
Stack Overflow
GitHub
The Website
ME
Ivo Wetzel
// div div div :/
Solution
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.
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.
Context
StackExchange Code Review Q#239, answer score: 8
Revisions (0)
No revisions yet.