HTML/Pealkirjad ja eraldusjooned

Pealkirjad

Pealkirja-elemente on HTML-is 6, kõik eri suuruse ja stiiliga. Üldkuju on selline:

<hx>Pealkiri</hx>

x tähistab siin numbrit ühest kuueni - h1 on suurim ja h6 väikseim pealkiri (või teisisõnu: h1 on esimese astme ja h6 madalaima astme pealkiri). Pealkirjad paigutatakse automaatselt omaette reale, reavahetussümboleid ei pea siin kasutama.

Tasub meelde jätta, et h1 elementi kasutatakse ainult suurte lehekülgede avapealkirjas - kaks h1 pealkirja mõjuvad ühel ja samal lehel liigse karjumisena. Teisalt aga tuleks arvesse võtta dokumendi loogilist struktuuri ja mitte hüpata alapealkirjade kasutamisel vahepealsetest üle, kasutades näiteks suure h1 pealkirja järel alapealkirjas h4 elementi (loogiline oleks h2; muuhulgas teeb selle reegli ignoreerimine lehe halvemini loetavaks ka ekraanilugejat kasutavatele puuetega inimestele).

Näitlik pealkirjade kasutamine:

<h1>Aadu arvutiäri</h1>

<h2>Tere tulemast!</h2>

<p>...siin on avatekst, tervitus vms...</p>

<h3>Arvutid</h3>

<p>...tekst...</p> 
<p>...........</p>
<p>...........</p>

<h3>Tarkvara</h3>

<p>...tekst...</p>
<p>...........</p>
<p>...........</p>

Ülalolev kood näeb brauseris vaadates välja selline:

Eraldusjooned

Teinekord on tarvis tekitada tekstilõikude vahele pikem paus, milleks pealkiri ei sobi. Tuttav peaks olema ilukirjanduses kasutatav "kolme tärniga eraldamine":

    Lorem ipsum dolor  sit amet,  consectetuer adi-
piscing elit. Proun vel elit nec erat rutrum dictum.
Etiam hendrerit  purus convallis leo.  Pellentesque
nibh. Nam scelerisque rhoncus sem.
    Nulla tristique tincidunt wisi. Quisque pretium
aliquam purus. Morbi cursus erat.

                      * * *

    Pellentesque sed eros et eros adipiscing tempus.
Etiam a metus vitae nunc tempor feugiat. Vestibulum
ante ipsum primis in faucibus orci luctus et ultri-
ces posuere cubilia Curae;  Fusce interdum massa at
sapien.

Sellisel juhul pole aga õige kasutada pealkirja, mille sisuks on kolm tärni: <h2>* * *</h2> - tegu pole ju pealkirjaga. Samuti pole päris õige ka kolme tärni sisaldava lõigu tegemine, sest tegu pole ka tekstiga.

Selliste pauside tekitamiseks on HTML-is olemas element hr (horisontal rule - horisontaalne joon). Ning tõepoolest, nagu nimigi ütleb, annab hr kasutamine enamikes brauserites tulemuseks horisontaalse eraldusjoone, mis ulatub ühest ekraaniservast teise. Ent sellest vaikimisi kasutatavast välimusest ei tasu ennast heidutada lasta - stiililehtede abil võib selle joone asendada täpselt sellise graafikaga nagu tarvis.

Ülaltoodud näite puhul oleks hr kasutamine järgnev:

<p>Lorem ipsum dolor  sit amet,  consectetuer adi-
piscing elit. Proun vel elit nec erat rutrum dictum.
Etiam hendrerit  purus convallis leo.  Pellentesque
nibh. Nam scelerisque rhoncus sem.</p>

<p>Nulla tristique tincidunt wisi. Quisque pretium
aliquam purus. Morbi cursus erat.</p>

<hr />

<p>Pellentesque sed eros et eros adipiscing tempus.
Etiam a metus vitae nunc tempor feugiat. Vestibulum
ante ipsum primis in faucibus orci luctus et ultri-
ces posuere cubilia Curae;  Fusce interdum massa at
sapien.</p>

Sagedased vead

Tihtipeale kasutatakse pealkirja-elemente, et teksti suurust muuta. Selline lähenemine on väär ja pealkirja-elemente tuleb kasutada loogiliselt, sisule vastavalt - tähtsamad pealkirjad kõrgeima astmega (h1), ning alampealkirjad järjest väiksema astmega (h2,h3,h4...). Dokumendi välimust tuleb muuta siiski CSSi abil.