Dažnai apie HTML programuotojai galvoja kaip apie mažiausiai svarbų dalyką, todėl neverta skirti daug dėmesio išmokti rašyti gerą HTML.
Tačiau, geras HTML kodas yra būtinas norint sukurti prieinamą ir SEO optimizuotą tinklalapį. Šiame straipsnyje aptarsime keletą patarimų ir geriausios praktikos, kaip rašyti geresnį HTML kodą.
Semantinio HTML svarba
Semantinis HTML yra skirtas perteikti tinklalapio turinio reikšmę, o ne jo išdėstymą ir reprezentaciją. Šią funkciją atlieka CSS.
Ekranų skaitymo programos paverčia tekstą į kalbą bei naudoja įvairius HTML elementus navigacijai. Skirtingas h1 - h6 žymes, gali pritaikyti skirtingą intonaciją, o tai atitinkamai leidžia suprasti klausytojui elementų hierarchiją.
Tinkamai parašytos duomenų lentelės taip pat gali suteikti papildomos navigacijos.
Pagrindiniai principai
Laikydamiesi šių principų, galėsite rašyti semantiškai teisingą HTML kodą:
- Pirmiausia, konteinerių elementai turi būti naudojami tik išdėstymui, o ne perteikti turiniui.
- Antra, semantinės HTML žymės turi būti naudojamos pagal paskirtis. Nuorodos (a) naudojamos navigacijai, o mygtukai (button) - tam tikriems veiksmams atlikti. Viduje, prie jų turi būti label aprašas.
- Žymė h1 turėtų būti naudojama tik vieną kartą puslapyje, paprastai pavadinimui.
Gal atrodo ir nemažai dalykų, kuriuos reikia turėti omenyje, bet tai yra įpročio reikalas.
Semantinis HTML ir SEO
Be to, semantinis HTML kodas taip pat pasitarnauja SEO.
Naudojant tinkamas semantines žymes, paieškos sistemoms lengviau suprasti jūsų tinklalapio turinį, o tai gali pagerinti jūsų pozicijas paieškos rezultatuose.
Paaiškinta per 4 minutes: Semantinis HTML
HTML žymės ir jų paskirtis
Šioje lentelėje pateikiamos dažniausiai naudojamos HTML žymės ir jų paskirtis:
| Žymė | Paskirtis |
|---|---|
| <h1> - <h6> | Antraštės |
| <p> | Paragrafas |
| <a> | Nuoroda |
| <img> | Paveikslėlis |
| <ul> | Netvarkingas sąrašas |
| <ol> | Tvarkingas sąrašas |
| <li> | Sąrašo elementas |
| <table> | Lentelė |
| <form> | Forma |
| <input> | Įvesties laukas |
| <button> | Mygtukas |
| <footer> | Poraštė |
Gal irgi turi patarimų, kaip rašyti geresnį HTML?