XHTML5.NL

Koppen en alinea’s

Nu je een basaal document kunt maken, wordt het tijd de tekst van het document onder te verdelen in secties met koppen en alinea’s. Je maakt een krantenartikel.

Alinea’s

Het eerste wat je wilt doen, is waarschijnlijk de tekst verdelen over verschillende alinea’s. Een alinea wordt ingesloten door een <p>-element. Door meerdere van deze elementen te gebruiken, ontstaan meerdere alinea’s.

Hieronder een voorbeeld van twee alinea’s:

…
<p>Bert Brussen is door de politie gehoord over zijn weblog. Op zijn weblog
citeerde hij een tweet waarin Geert Wilders werd bedreigd.</p>
<p>Het Openbaar Ministerie lijkt echter niet te begrijpen dat het om een citaat
gaat en wil Brussen vervolgen alsof hij Wilders zelf heeft bedreigd. Tijdens het
verhoor kreeg hij bovendien te horen dat hij nu ook wordt verdacht van
haatzaaien.</p>
…

Deze code dient als inhoud van het <body>-element. Voor de kortheid zal voortaan niet meer de hele (X)HTML-documentstructuur worden getoond.

Secties met koppen

Webpagina’s zijn met <section>-elementen in secties te verdelen. Binnen deze secties kunnen ook weer andere <section>-elementen worden geplaatst voor verdere onderverdeling. Om koppen toe te voegen aan een sectie, gebruik je een <h…>-elementen. Op de plaats van de puntjes typ je het getal gelijk aan het aantal bovenliggende <section>-elementen plus één.

In onderstaand voorbeeld is er één overkoepelende kop voor het artikel en heeft het artikel twee secties met elk één paragraaf en een eigen kop.

…
<h1>Blogger gehoord wegens tweet</h1>
<p>Bert Brussen is door de politie gehoord over zijn weblog. Op zijn weblog
citeerde hij een tweet waarin Geert Wilders werd bedreigd.</p>
<section>
<h2>Onbegrip</h2>
<p>Het Openbaar Ministerie lijkt echter niet te begrijpen dat het om een citaat
gaat en wil Brussen vervolgen alsof hij Wilders zelf heeft bedreigd. Tijdens het
verhoor kreeg hij bovendien te horen dat hij nu ook wordt verdacht van
haatzaaien.</p>
</section>
<section>
<h2>Kamervragen</h2>
<p>Van der Ham (D66) en Hennis-Plasschaert (VVD) hebben inmiddels demissionair
minister van Justitie Hirsch-Ballin (CDA) middels kamervragen om opheldering
gevraagd.</p>
</section>
…

Lead en meerdere koppen

Met het <b>-element kunnen soorten tekstgedeelten worden aangegeven waarbij het zeer gebruikelijk is deze vet te drukken. Dit kan dus gebruikt worden voor de lead.

Het <b>-element is een inline element, wat wil zeggen dat er geen regelovergangen voorkomen aan het begin en eind. Het <p>-element is daarentegen een element op blokniveau omdat er wel regelovergangen bijhoren. Inline elementen moeten altijd binnen elementen op blokniveau worden geplaatst, dus <b> komt binnen <p>.

Boven krantenartikelen zie je ook weleens meerdere koppen. Dit is mogelijk bij met het <hgroup>-element. Hierin stop je alle koppen die bij elkaar horen. De ‘extra’ kop krijgt een nummer lager dan de ‘primaire’ kop, dus <h2> i.p.v. <h1>.

Hieronder zie je het resultaat van deze wijzigingen:

…
<hgroup>
<h2>‘Citaat bedreigend en haatzaaiend’</h2>
<h1>Blogger gehoord wegens tweet</h1>
</hgroup>
<p><b>UTRECHT — Bert Brussen is door de politie gehoord over zijn weblog. Op
zijn weblog citeerde hij een tweet waarin Geert Wilders werd bedreigd.</b></p>
<section>
<h2>Onbegrip</h2>
<p>Het Openbaar Ministerie lijkt echter niet te begrijpen dat het om een citaat
gaat en wil Brussen vervolgen alsof hij Wilders zelf heeft bedreigd. Tijdens het
verhoor kreeg hij bovendien te horen dat hij nu ook wordt verdacht van
haatzaaien.</p>
</section>
<section>
<h2>Kamervragen</h2>
<p>Van der Ham (D66) en Hennis-Plasschaert (VVD) hebben inmiddels demissionair
minister van Justitie Hirsch-Ballin (CDA) middels kamervragen om opheldering
gevraagd.</p>
</section>
…