Zločin i kazna by W3C Validator(ski) 2 - HTML

Kojih su to 10 osnovnih gešaka u pisanju HTML koda i saveti kako ih izbeći, kako izabrati neka alternativna rešenja, slede u ovom nastavku teksta:

1. Greh: Postavljanje "blok elementa" unutar "inline elementa"

<a href="#"><h2> ovo je POGRESNO</h2></a>

<h2> <a href="#">ovo je ISPRAVNO</a></h2>

h2 - blok element

a - inline element

HTML elementi mogu biti prikazani na dva načina: Block ili Inline. Blok elementi sadrže <div> tagove i <p> paragrafe koji čine strukturu dokumenta. Inline elementi, s druge strane, mogu postojati unutar blok elemanta, primer su anchor ili span tagovi. Ako imamo ovo na umu, inline elementi uvek idu unutar blok elemenata i nikako drugačije.

2. Greh: Neupotrebljavanje ALT Attributa kod slika

<img src="/slika1.jpg" / > -->Pogrešno

<img src="/slika1.jpg"  alt="opis slike"/ > -->Ispravno

ALT atribut je potreban element na svim slikama prikazanim na vašoj web strani. To pomaže korisnicima pri raspoznavanju onog šta predstavlja slika, screen reader može da pročita, ili kod prikaza u sporim konekcijama. ALT attribute opisuje sliku koja se prikazuje, tako da alt="image" ne znači ništa. U slučaju da je slika samo neki dekorativni elemenat na strani tda je dovoljno napisati alt=" ".

3. Greh: Nekorišćenje liste kada je ona potrebna

Nepravilno:
<p>
red1</br>
red2</br>
itd..</br>
</p>

Pravilno
<ul>
<li>red1</li>
<li>red2</li>
<li>itd...</li>
</ul>

Praktični <ul> (ili <ol>) tagovi imaju veliku upotrebljivost i mnogostruko su primenljivi za prikaz svih vrsta nabrajanja na strani, uz definisanje CSS stila. Nikako nemojte više koristiti </br> za nabrajanje.

4. Greh: Upotreba <b> i <i> za bold i italiku

<b> ovo je bold </b> -->Pogrešno

<strong>isto bold, samo ovako je mnogo bolje</strong> -->Ispravno

<b> <i> tagovi formatiraju bold ili italik tekst. Njih bi trebalo zameniti CSS stilovima font-weight ili font-style. Ukoliko je baš potrebno da se istakne deo u okviru jedne rečenice, tada je bolje koristiti <strong> ili <em> tagove.

5. Greh: Preterana upotreba taga br (Line Breaks)

Nepravilno:
..kraj prvog paragrafa
</br>
</br>
pocetak drugog paragrafa..

Pravilno:
<p>...kraj prvog paragrafa</p>
<p> Pocetak drugog paragrafa</p>

Tag za novi red <br /> treba da se upotrebljava za prelom jednog reda (kad želimo samo novi red a ne i novi paragraf), nikako ne treba mešati sa paragraf tagom <p>, nikako ga ne treba koristiti za pravljenje razmaka između redova (za povećanje proreda) - bolje je podeliti tekst u odvojene paragrafe i primeniti na njih CSS stilove.

6. Greh: Upotreba pogrešnih tagova

U starim danima <s> i <strike>, označavali su editovan web tekst. Štaviše oni su sada nepoželjni tagovi, što znači da oni i dalje funkcionišu (u Transitional), ali postoje novi koijm se oni zamenjuju, a to su <del> i <ins>. Ovi novi tagovi se upotrebljavaju zajedno za prikazivanje brisanog i ubačenog teksta u dokumentu.
Tag <ins> zajedno sa <del> elementom predstavalja jedine HTML elemente koji markiraju reviziju dokumenta. Na ekranu tekst koji se nalazi unutar ovih tagova biće prikazan sa podvučenom crtom, ali se pomoću stila može promeniti izgled ovog elementa.

7. Greh: Upotreba Inline Stilova

<h1 style="color: blue">

Čitava filozofija semantičkog pristupa web-u je odvajanje strukturnih dokumenata i stilova (npr. HTML i CSS) - iz tog razloga nema smisla ubacivati stilove direktno u HTML dokument. Zapamtite: stilove uvek pišite u CSS-u jer oni tamo pripadaju.

8. Greh: Dodavanje i brisanje ivica (Borders) u HTML

<img src="/" alt"" border="0"/>

Priča kao i u prethodnom grehu - atribut "border" treba prepustiti CSS-u nikako ostaviti HTML-u.

9. Greh: Neupotrebljavanje Header Tagova

Nepravilno:
<p><strong> Naslov1</strong></p>
<p>neki tekst ispod naslova</p>

Pravilno:
<h1> Naslov1</h1>
<p>neki tekst ispod naslova</p>

Header <h> tagovi su raspoloživi od <h1> do <h6> i vrlo su praktični za razdvajanje sekcija naslovim i ponaslovima. U principu, trebalo bi se pridržavati pravila kao kod preloma i uređivanja teksta u pripremi za štampu, pravila da se naslovi ne ističu samo boldiranjem ili povećanjem fonta nego definisanjem posebnih stilova za svaki nivo naslova.

10. Greh: <blink> ili <marquee>

<blink> Sad me vidiš, sad me ne vidiš</blink>

Na stranu to što ovi tagovi nisu deo HTML standarda, oni su prosto i jednostavno rečeno - ružni!!! Ako imate potrebu da istaknete neki deo teksta ili da privučete pažnju posetilaca, postoje mnoge druge mogućnosti isticanja teksta i koristite njih. Blinkanje, ili "trčanje" teksta po ekranu spada u ono što odbija posetioce.

Kraj drugog dela...