Besedilo v urejevalniku zapišemo kot zaporedje znakov, pri čemer ni pomembno, kako razlamljamo vrstice ter koliko presledkov in tabulatorjev pišemo med besedami. Brskalniki tabulatorje in znake za novo vrstico pri običajnem besedilu navadno obravnavajo kot presledke, več zaporednih presledkov pa kot en sam presledek. Zato lahko besedilo v brskalniku izgleda drugače, kot je zapisano v datoteki HTML.
Besedilo v HTML navadno zapisujemo v naslovih, odstavkih, seznamih, tabelah in drugih primernih elementih. Za pregledno in semantično pravilno stran je pomembno, da izberemo ustrezen element glede na vlogo besedila.
Pomni: Brskalnik pri običajnem besedilu več zaporednih presledkov, tabulatorjev in znakov za novo vrstico ne prikaže tako, kot so zapisani v izvorni kodi.
Osnovna pravila
- Besedilo v HTML zapisujemo v ustrezne elemente, na primer naslove in odstavke.
- Za naslove uporabljamo elemente
<h1>do<h6>. - Za običajen odstavek uporabljamo element
<p>. - Za ročni prelom vrstice uporabimo element
<br>. - Za pomen besedila sta v sodobnem HTML pogosto primernejša elementa
<strong>in<em>kot zgolj oblikovna elementa.
Pozor: Naslovov ne uporabljamo zato, da bi bilo besedilo samo večje, ampak zato, da z njimi označimo strukturo vsebine. Za videz besedila uporabljamo CSS.
Naslovi
Na voljo imamo več nivojev naslovov. Za naslove uporabljamo elemente <h1> do <h6>. <h1> predstavlja naslov najvišjega nivoja, <h6> pa naslov najnižjega nivoja.
V sodobnem HTML naslovov ne izbiramo glede na privzeto velikost pisave, ampak glede na strukturo vsebine. Posameznih nivojev praviloma ne izpuščamo brez razloga.
Pomni: Za glavni naslov strani navadno uporabimo <h1>, za podrejene vsebinske sklope pa <h2>, <h3> in nižje nivoje.
Primer naslovov:
<h1> Glavni naslov <br> (naslov na 1. nivoju) </h1>
<h2> Podnaslov <br> (naslov na 2. nivoju) </h2>
<h3> Naslov na 3. nivoju </h3>
<h4> Naslov na 4. nivoju </h4>
<h5> Naslov na 5. nivoju </h5>
<h6> Naslov na 6. nivoju </h6> Glavni naslov
(naslov na 1. nivoju)
Podnaslov
(naslov na 2. nivoju)
Naslov na 3. nivoju
Naslov na 4. nivoju
Naslov na 5. nivoju
Naslov na 6. nivoju
Odstavki in drugi besedilni bloki
V HTML poznamo več vrst elementov za zapis besedila. Za običajne odstavke uporabljamo element <p>, za predoblikovano besedilo element <pre>, za splošen blok vsebine element <div>, za podatke o avtorju ali stiku element <address>, za tematski prelom pa element <hr>.
Element <pre> je poseben zato, ker ohrani presledke, tabulatorje in prehode v novo vrsto. Element <div> nima sam po sebi posebnega pomena, pogosto pa ga uporabljamo kot splošen blok vsebine, ki mu pozneje določimo dodatne lastnosti ali oblikovanje.
Primer odstavkov:
<hr>
<div> Bločni element. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi aliquet, ipsum in lacinia aliquam, ipsum
enim mattis turpis, vel pulvinar sapien est ac leo. </div>
<hr>
<p> Navaden odstavek. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi aliquet, ipsum in lacinia aliquam, ipsum
enim mattis turpis, vel pulvinar sapien est ac leo. </p>
<hr>
<pre> Predoblikovan odstavek. Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. </pre>
<hr>
<address> Podatki o avtorju </address>
<hr>Navaden odstavek. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet, ipsum in lacinia aliquam, ipsum enim mattis turpis, vel pulvinar sapien est ac leo.
Predoblikovan odstavek. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Podatki o avtorju
Pozor: Element <div> ni navaden odstavek z določenim pomenom. Uporabljamo ga kot splošen blok vsebine, kadar nimamo primernejšega semantičnega elementa.
Prelomi vrstic in presledki
Če želimo, da brskalnik skoči v novo vrsto na točno določenem mestu, uporabimo element <br>. To je prazen element brez zaključne oznake.
Primer prehoda v novo vrsto z elementom <br>:
<p>
To je odstavek, <br>
v katerem smo ročno <br>
naredili nekaj prelomov vrstic.
</p>To je odstavek,
v katerem smo ročno
naredili nekaj prelomov vrstic.
Pri nekaterih zapisih, na primer pri številu in enoti, ne želimo, da bi brskalnik med njima naredil prelom vrstice. V takem primeru uporabimo trdi presledek . Ta se izpiše kot presledek, vendar se obnaša kot del iste besede, zato brskalnik vmes ne naredi preloma.
Pomni: Navaden presledek dopušča prelom vrstice, trdi presledek pa prepreči prelom na tistem mestu.
Oblikovanje besedila
Obliko besedila danes določamo predvsem s CSS, vendar HTML pozna tudi nekaj elementov za poudarjanje pomena ali za poseben zapis besedila. V sodobni rabi sta za pomen pogosto pomembnejša elementa <strong> in <em>, medtem ko elementi <b>, <i> in <u> praviloma ne določajo enake semantike.
Z oznako <sup> besedilo nadpišemo, z oznako <sub> pa ga podpišemo. Element <span> nima nobenih privzetih oblikovnih učinkov in ga običajno uporabljamo skupaj s CSS.
Primer oblikovanja besedila:
<p> To je <b>krepko</b> besedilo. </p>
<p> To je <i>nagnjeno</i> besedilo. </p>
<p> To je <u>podčrtano</u> besedilo. </p>
<p> H<sub>2</sub>O </p>
<p> E = m c<sup>2</sup> </p> To je krepko besedilo.
To je nagnjeno besedilo.
To je podčrtano besedilo.
H2O
E = m c2
Element <big> v sodobnem HTML ni več podprt. Prav tako ni več podprt element <tt>. Takšne oblikovne lastnosti danes določamo s CSS.
Za poudarjanje pomena HTML priporoča predvsem uporabo oznak <em> za poudarjeno besedilo in <strong> za pomembno besedilo.
Priporočila
- Za naslove uporabljaj elemente
<h1>do<h6>glede na strukturo vsebine. - Za običajne odstavke uporabljaj element
<p>. - Element
<br>uporabljaj samo tam, kjer res želiš ročni prelom vrstice. - Za pomen besedila uporabljaj
<strong>in<em>, za videz pa CSS. - Za zapis brez preloma med številom in enoto uporabi trdi presledek
.
Pogoste napake
- Naslovi se uporabljajo samo zato, da je besedilo večje.
- Element
<br>se uporablja namesto pravih odstavkov. - Element
<div>se uporablja tam, kjer bi bil primernejši semantični element. - Pri zapisu števil in enot se uporabi navaden presledek, čeprav ne želimo preloma vrstice.
- Pomen besedila se meša z njegovim videzom.