Een blog post ll
We gaan verder met de content. We moeten er even vanuit gaan dat het Lorem Ipsum en het Foobar and Hello World gedeelte 2 andere onderwerpen zijn die wel iets met elkaar te maken hebben (ze zijn wel samen 1 artikel).
Die 2 titels die ik net noemde zijn onderdeel van de blogpost. Als de blogtitel dus een H1 element kreeg moet dit iets van H2 of H3 zijn. Ik kies gewoon voor het gemak H2, maar ik kan me ook voorstellen dat je in sommige gevallen H3 wilt gebruiken (omdat bijv. de sitetitel al in een H2 staat).
De tekst eronder is gewoon weer een paragraaf dus we gebruiken gewoon weer het paragraph element.
Vervolgens gaan we dus verder op een ander onderwerp. Stel dat je nu hier helemaal geen semantische waarde aan hecht dan lijkt het net alsof het hele artikel 1 onderwerp is, dat wil je niet! Om duidelijk te maken dat het om 2 aparte delen (in het engels sections) gaat zetten we ze allebei in een eigen section element.
Die Wat is foobar? titel is weer een sub van die titel daarboven, deze krijgt dus een H3 of H4 element mee. De totale code wordt zoiets:
2
3
4
5
6
7
8
9
10
11
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum ... inceptos himenaeos.</p>
</section>
<section>
<h2>Foobar and Hello World</h2>
<p>Etiam et ... blandit magna.</p>
<h3>Wat is foobar?</h3>
<p>Nunc dictum ... feugiat id.</p>
</section>
De Footer
Dan gaan we nu verder met de footer. Wat is eigenlijk de footer van het bericht? Is dat alleen die grijze balk of is dat die grijze balk + de comments? Ik ben voorstander om de footer alleen die grijze balk te laten zijn en die comments dan hun eigen element mee te geven, maar je kan er ook voor kiezen om dat in het totaal in de footer te zetten.
Die grijze balk is dus de footer, welk element kunnen we hier voor gebruiken? Nou, dat is nou heel simpel: Het footer element. Want wat zegt de specifications hierover?
Ideaal hiervoor dus. De nearest sectioning content is in dit geval ons article element om de blogpost heen. De code voor de footer wordt dan:
2
3
4
5
6
<ul>
<li><a href="http://twitter.com/tweetMe/">Tweet</a></li>
<li><a href="http://facebook.com/likeMe/">Like</a></li>
</ul>
</footer>
Wat je eventueel nog kunt uitbouwen met allerlei leuke extra dingen als related blogposts, author info, enz.
"Waarom een lijst?" zul je zeggen, dat komt omdat het eigenlijk een opsomming van social media buttons is. Meer hierover bij het kopje 'Een Menu'. Dat is wel een menu, maar hetzelfde geldt hiervoor.
De comments
En dan als laatste de comments. Een comment is op zichzelf een klein artikeltje met een author, publish datum enz. Dus ik stel voor dat we dit ook in een article element zetten. Vervolgens heeft dit commentje ook een header met daarin de author en de datum.
Laten we dus verder gaan met de header van ons comment. Hierin staat de author en een author is eigenlijk contact informatie over die persoon. We schrijven het dus in een address element, of zoals de specificaties zeggen:
De datum behoort, precies zoals het artikel, in een time element. In het totaal wordt de header dus:
2
3
<address>Peter Pan</address> op <time datetime="2012-04-17">17 April 2012</time>
</header>
Nu gaan we verder met de content en de thumbnail. Deze plaatsen we weer in een img en paragraph elementen en dus wordt de totale comment:
2
3
4
5
6
7
<header>
<address>Peter Pan</address> op <time datetime="2012-04-17">17 April 2012</time>
</header>
<img src="path/to/user-avatars/peter-pan.png">
<p>Pellentesque habitant ... turpis egestas.</p>
</article>
Nou dat is het dan wel zo'n beetje. Je kunt het nog optimaliseren met microdata. Dan krijg je ong. dit (ik heb dat een tijdje geleden gemaakt, de code verschilt dus her en der iets van wat hier besproken is).