Kada govorimo o formatiranju teksta, svaki pravilno koncipiran tekst poseduje naslov. U HTML jeziku naslovi se označavaju terminom Heading (što na engleskom i znači naslov). Postoji šest nivoa naslova u HTML-u, od heading1 do heading6, stim da je heading1 najvišeg nivoa (uvek ide prvi), dok je heading6 najnižeg nivoa. Tagovi za naslove su h1, h2…h6. Zbog mnogih razloga, trebamo se truditi da naslove koristimo pravilno. h2 ide uvek posle h1, ako je njegov podelement ili posle h2, ako je na istom nivou, ali kome opet prethodi h1. h3 ide uvek posle h2 i tako dalje.

Naslovi (headings)

Naslove smo već sreli u prethodnim lekcijama. Pored toga što označavaju delove teksta, naslovi služe kako bismo pravilno strukturirali dokument.

Primer naslova u HTML jeziku:

<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<h5>Lorem ipsum dolor sit amet</h5>
<h6>Lorem ipsum dolor sit amet</h6>

…i prikaz u browseru:

 

Važno je zapamtiti više detalja kada je reč o naslovima:

• U naslovima se postavlja samo kratak, čist tekst naslova. Ne možemo postavljati čitave tekstove, slike i tako dalje. Iako ovo pravilo deluje logično, često se pojavljuju ovakve greške.
• Mora se poštovati pravilna hijerarhija naslova. H1 se koristi za glavne naslove. H2 za podnaslove. Ukoliko postoji potreba za daljim grananjem teksta (posle h2), koristimo h3 podnaslove, i tako dalje. Ne možemo postaviti h4 podnaslov odmah posle h1, na primer, ili h1 posle h2.
• Naslovi se ne koriste radi povećavanja veličine teksta i/ili postavljanja bold formatiranja.

Paragrafi (paragraphs)

Paragrafi su ono što često nazivamo običnim tekstom. Kao i kod naslova, paragrafe kreiramo tako što tekst okružimo početnim i završnim p tagom.

Po osnovnim, default vrednostima, svaki paragraf, browser prikazuje na novom redu i postavlja određeni razmak posle svakog paragrafa.

Primer paragrafa u HTML jeziku:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

…i prikaz u browseru:

 

Bold

Bold efekat se, kao i što već možete pretpostaviti, postavlja pomoću taga određenog za to. Ono što je specifično je to što možemo postaviti jednu od dve varijante, tačnije <b> ili <strong> tag, i dobiti skoro isti efekat. Kažem skoro, jer se razlikuju u jednom bitnom detalju. Da bismo to razumeli, moramo napraviti malu digresiju i prvo pojasniti pojam semantike.

Semantika[1] je, uopšteno govoreći, nauka o značenju reči. U kontekstu web dizajna i HTML jezika, koji ovde izučavamo, semantika se odnosi na funkcionalno označavanje elemenata. Ako govorimo konkretno o <b> ili <strong> tagovima, prvi će samo postaviti bold varijantu fonta nad označenim karakterima, dok će <strong> definisati označen deo kao izdvojen, bitan, naglašen.

Svi moderni browseri sadržaj i u jednoj u drugoj varijanti prikazuju na isti način (bold font), ali <strong> ukazuje raznim softverskim alatima, drugim sajtovima i sličnim neljudskim čitačima da je taj deo teksta naglašen.

Zbog svega navedenog, bolje je koristiti <strong> varijantu jer, osim vizuelne, ima i funkcionalnu upotrebu. Na primer, kada Google, odnosno njegov automatizovani servis, indeksira stranice, <b> će preskočiti, odnosno tretirati kao običan tekst, dok će <strong> uzeti u obzir kao nešto bitniji deo teksta.

Primer bold (strong) formatiranja u HTML jeziku:

<p>Lorem ipsum <strong>dolor sit amet</strong>,consectetur adipisicing elit.</p>

…i prikaz u browseru:

 

Na primeru iznad primećujemo da je postavljen paragraf teksta, a da je njegov deo označen (uokviren) novim strong tagom. U prikazu u browseru, taj deo teksta je prikazan bold varijantom fonta. Da smo, kojim slučajem koristili <b> varijantu, vizuelno bi dobili isti efekat, ali ne i funkcionalno.

Italic

Kad govorimo o italic varijanti pisanja, pojavljuje se slična situacija kao kod gore pomenutog bold formatiranja. Možemo koristiti ili <i> ili <em> tagove. Analogno tome, prvi će samo postaviti italic varijantu fonta, dok će <em> tag postaviti i semantičko značenje. Pomenuti <em> tag označava da se tekst unutar njega neznatno razlikuje i ističe od ostatka rečenice. Em je skraćeno od engleske reči emphasize, što znači naglasiti.

Primer italic (em) formatiranja u HTML jeziku:

<p>Duis aute irure <em>dolor</em> in reprehenderit</p>

…i prikaz u browseru:

 

Sup i sub

Ponekad se u tekstovima pojavljuje potreba za karakterima koji su iznad, odnosno ispod osnovne linije, pogotovo u formulama. Za takve detalje koristimo <sup>, odnosno <sub>  tagove. Sup je skraćeno od superscript, dok je sub skraćeno od subscript.

Pogledajmo primer za sup (u prvom redu) i sub (u drugom redu):

<p>E = MC²</p>

<p>CO₂ + H₂O = H₂CO₃</p>

…i prikaz u browseru:

 

Verujem da kôd, kod drugog primera deluje pomalo zbunjujuće zbog mnoštva tagova, ali, ako razložite deo po deo, primetićete da je u stvari sve veoma jednostavno. Pogledajte, na primer, isti deo ovako:

<p>
CO₂
+
H₂O
=
H₂CO₃
</p>

da li sada deluje malo jednostavnije? Sve je u načinu gledanja na detalje. Naši mozgovi su navikli na „klasične“ (da se tako izrazim) tekstove i povezuju delove teksta u logične celine. Kod HTML jezika je to malo drugačije.

Ovakav, navedeni kôd će dati isti rezultat, jer novi redovi i razmaci uneti u kod ne igraju značajnu ulogu.

Br

Već smo rekli da se po završetku i početkom novog paragrafa postavlja novi red. Ali ponekad želimo da usred paragrafa prelomimo red, bez kreiranja novog paragrafa. To možemo učiniti jednostavno postavljanjem taga za, pretpostavili ste, prelom reda koji se označava sa <br> u HTML varijanti jezika, odnosno <br /> u xHTML varijanti.

Zbog specifičnosti ovog elementa (nema svoj sadržaj), ne pišemo početni i krajnji tag, već samo jedan koji je istovremeno i početni i završni. Ovo je jedan od samozatvarajućih tagova, o čemu je već bilo reči ranije u kursu.

Br je skraćenica od engleske reči break. Ukoliko ste koristili opciju shift+enter u MS Wordu, ili sličnom alatu, onda Vam je princip umnogome poznat.

Primer <br> taga u HTML jeziku:

<p>Excepteur sint occaecat,<br />cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

…i prikaz u browseru:

 

Zašto koristiti ovaj tag? Deluje logičnije uvek prelomiti tekst novim paragrafom, ali se može desiti da smo, na primer, postavili određenu CSS stilizaciju nad paragrafom, kao i veći razmak pre/posle. Možda želimo da neki deo teksta sačuvamo zajedno, ali ipak u novom redu.

Hr

Hr je tag koji slično funkcioniše kao prethodno pomenuti br, u smislu da se piše samo jednom kao <hr> u HTML varijanti jezika, odnosno <hr /> u xHTML varijanti, ali ima sasvim drugačiju funkciju. Ovaj tag postavlja horizontalu liniju u tekstu. Sama oznaka hr je skraćeno od horizontal rule (horizontalna linija). U poslednje vreme se sve ređe koristi, ali ponekad može biti korisno.

Primer <hr> taga između dva paragrafa u HTML jeziku:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr />
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

…i prikaz u browseru:

 

[1] Nauka o značenju reči. Po široj definiciji, semantika je nauka koja izučava značenje reči. Semantika se često pominje kao kontrast sintaksi, jer semantika izučava šta nešto znači, dok sintaksa izučava stukture/oblike onoga čime se nešto izražava (npr. nečeg napisanog ili izgovorenog).