Een blog post

Een blogpost is denk ik iets wat je vast wel een keer hebt gemaakt, iedereen wil tegenwoordig wel zijn eigen blog. Alleen een blogpost is best ingewikkeld om goed semantisch te maken. Het heeft namelijk zo veel verschillende onderdelen die wel iets met elkaar te maken hebben, maar niet veel.

Nu heb ik me even helemaal uitgeleefd en is dit een blogpost ontwerp dat ik voor deze tutorial heb gemaakt:

We gaan eerst eens kijken welke basis onderdelen deze blogpost heeft. Zo op het eerste gezicht kan ik er 4 onderdelen uithalen:

• Header de header bevat de titel van het bericht, het intro, de datum en eventuele thumbnail.
• Body de body bevat de echte tekst van een bericht.
• Footer extra informatie als de serie, biographie van de schrijver en social media hoort niet echt bij de content. Dit plaatsen we dus in een footer.
• Comments dan krijgen we de comments.

Je zou het ook op een andere manier kunnen bekijken:
En er zullen vast nog wel andere methoden zijn. Alleen de eerste klinkt voor mij het meest logisch, dus die gaan we volgen.

De Header
Laten we maar eens met de header beginnen. Je eerste gedachte, als je even bezig bent in HTML5, zou zijn "kunnen we hier de <header> tag voor gebruiken"? Om daar antwoord op te krijgen kijken we wat de uitvinders van de header tag in hun gedachte hebben. Dat doen we door in de HTML5 specificaties te lezen. Ik citeer:

We mogen, of eigenlijk moeten, hier dus deze tag voor gebruiken.

Oké, die basis hebben we. Laten we nu verder kijken wat er nou precies allemaal in de header zit. We hebben de publish date, de titel, een thumbnail en een intro stukje.

Laten we beginnen met die publish date. Hiervoor zou ik het time element gebruiken. Alleen er is wel een heel gedoe over dit element, hij is namelijk verwijderd, terug gekomen en aangepast. Wat er met dit element gaat gebeuren in de toekomst zou ik niet weten, maar we gaan er voor het gemak maar vanuit dat dit element nu blijft bestaan. Het element heeft een datetime attribuut waarin je de datum zet, vervolgens kun je als tekst in het element jou versie van een datum gebruiken. In ons voorbeeld zou het zoiets worden

Nu weten de zoekmachines en andere robots dat het artikel is geplaatst op 14 April 2012, maar onze bezoeker krijgt alleen 14 Apr te zien. We zien in ons design voor onze blog dat de maand een aparte stijl krijgt. Die zullen we dus een element moeten meegeven, zodat het goed te stijlen is. Omdat dat element totaal geen semantisch nut mag hebben komen we uit bij een span of een div element. Een div is voor Block elementen zonder betekenis en een span voor inline elementen. We gebruik hier dus een span voor.

De titel van een bericht is moeilijker. Wat duidelijk is is dat we een Heading element (h1 t/m h6) moeten gebruiken. Maar welk getal? Een H1 element is uniek per pagina en behoort de belangrijkste titel te zijn. Stel dat je nu op de pagina zit waar de blog post alleen opstaat, dus waarbij je hem kan lezen. Dan is de titel van die blogpost het belangrijkst en behoort naar mijn mening dus een H1 te krijgen. Maar als het tussen de andere blogposts op de homepagina staat is bijv. een sitenaam veel unieker en belangrijker en krijgt een blogtitel bijv. een H2.

Ik ga er vanuit dat dit een design is voor 1 blog post, omdat de comments enzo erbij staan. En dus gebruiken we hier een H1 element voor:

Nu de thumbnail, veel makkelijker kun je het niet hebben. Voor een afbeelding is maar 1 element: Het image element (<img>). We kunnen dus gewoon die gebruiken:

Dan de intro tekst. Het is een mooie alinea, in het engels paragraph, en dus gebruiken we hier ook gewoon een paragraph element (<p>) voor:

Ik ben nu wel klaar met de header, laten we verder gaan met de content zelf!

« Lees de omschrijving en reacties