HTML: semantika

HTML semantikoak, marka semantiko gisa ere ezagutzen denak, edukiaren esanahia (edo semantika) transmititzen duten HTML etiketak biltzen ditu.

Zure orriei HTML etiketa semantikoak gehitzean, bilatzaileei informazio gehigarria ematen diezu zure orrialdeetako atalen funtzionaltasunari eta garrantziari buruz.

(HTML ez-semantikoak ez bezala, HTML semantikoak esanahia zuzenean transmititzen duten etiketak erabiltzen ditu).

HTML semantikoa (1): HTML semantikoa eta ez semantikoa

Etiketa semantikoak

HTML etiketa semantikoak barnean hartzen duten edukiaren esanahia definitzen duten etiketak dira.

Adibidez, < header>, < article> eta < footer> bezalako etiketak HTML etiketa semantikoak dira. Argi eta garbi adierazten dute edukiaren funtzionaltasuna. < header> goiburua, < article> artikulua eta < footer> orri-oina

Aldiz, < div> eta < span> bezalako etiketak HTML elementu ez-semantikoen ohiko adibideak dira. Edukia duten arren, ez dute adierazten zer eduki mota duten, ezta pieza horrek orrian zer funtzio betetzen duen ere.

HTML semantikoaren garrantzia

Etiketa semantikoak web bilatzaileek eta garatzaileek irakurtzeko eta ulertzeko errazagoak izateaz gain, ikusmen-urritasunak dituzten irakurleentzat eskuragarriagoak dira eta bilatzaileetan duzun posizionamendua hobetzen dute.

Irisgarritasuna:

Ikusmen arazorik ez duten erabiltzaileentzat, erraza da orrialde bateko atalak identifikatzea. Buruak, orri-oinak eta edukia berehala ikus daitezke.

Hala ere, ez da hain erraza pantaila-irakurgailuen mende dauden erabiltzaile itsuentzat edo ikusmen-arazoak dituztenentzat. HTML etiketa semantikoak behar bezala erabiltzeak zure edukia hobeto ulertzeko aukera emango die.

SEO:

etiketa semantikoak garrantzitsuak dira SEOrako, etiketen barruan edukiaren funtzioa adierazten dutelako.

Horrela, bilatzaileen arakatzaileek, Googlebotek kasu, hobeto ulertuko dute zure edukia, eta horrek aukera gehiago izango ditu zure gako-hitz objektiboetarako bilaketa-emaitzetan (SERP) posizionatua izateko.

Hitz gutxitan esanda, HTML semantikoa behar bezala inplementatuta duten orriek lehiarako abantaila dute SEO arloan, ez dutenen aldean.

Etiketa semantiko motak

Etiketa semantikoak web-orri baten atalak definitzeko erabiltzen dira.

HTML elementu semantiko ohikoenak ikusiko ditugu, erabileraren arabera bi kategoriatan banatuta:

• HTML etiketa semantikoak egiturarako
• HTML etiketa semantikoak testurako

HTML etiketa semantikoak egiturarako

HTML etiketa semantiko gehienek orrien diseinua komunikatzen dute.

Egiturarako etiketa horiek HTML4a HTML5era eguneratu zenean sartu ziren. Horregatik, HTML5 etiketa semantikoak edo HTML5 elementu semantikoak ere esaten zaie.

Hauexek dira:

• <header>: sarrera-etiketak orrialde edo atal baten sarrera-edukia definitzen du.
• < nav>:nabigazio-etiketa nabigazio-loturetarako erabiltzen da. < header> etiketaren barruan habia daiteke, baina bigarren mailako nabigazioko < nav> etiketak orriaren beste atal batzuetan ere erabili ohi dira.
• < main>: etiketa honek orrialde baten eduki nagusia (gorputza ere esaten zaio) jasotzen du. Etiketa bakarra egon beharko litzateke < main> orriko.
• < article>: artikulu etiketak definitzen du zein orri edo webgunetan dagoen. Ez du zertan “blogaren sarrera” esan nahi. Pentsa ezazu “janzki bat” bezala: hainbat testuingurutan erabil daitekeen etiketa independente bat.
• < section>: < section> erabiltzea antzeko gaiei buruzko edukiak multzokatzeko modu bat da. Sekzio-etiketak eta artikulu-etiketak desberdinak dira, ez dira nahitaez autonomoak, beste zerbaiten parte baizik.
• < aside>: “aside” elementu batek garrantzi txikiko edukia definitzen du. Alboetako barretarako erabili ohi da, informazio osagarria baina ez funtsezkoa dutenak.
• < footer>: < footer> erabiltzen du orrialde baten behealdean. Etiketak harremanetarako informazioa, egile-eskubideak eta web-ean nabigatzeko aukera ematen du.

HTML semantikoa (2): HTML semantikoa eta ez semantikoa

HTML etiketa semantikoak testurako

Testurako HTML etiketa semantikoak HTML etiketak dira, eta (formatuaz gain) testuaren funtzio semantikoa ere transmititzen dute.

Hona hemen adibide ohikoenetako batzuk:

• < h1> (goiburua): H1 etiketak goiko mailako goiburua markatzen du. Normalean, orrialde bakoitzeko H1 titulu bakarra dago.
• < h2>tik < h6>ra (azpitituluak): hainbat garrantzi-mailatako azpitituluak. Maila bereko hainbat azpititulu egon daitezke orrialde berean.
• < p> (paragrafoa): testu independenteko paragrafo bat.
• < a> (aingura): orrialde batetik bestera hiperesteka bat markatzeko erabiltzen da.
• < ol> (zerrenda ordenatua): ordena jakin batean agertzen diren elementuen zerrenda, binetetatik hasita. < li> etiketek (zerrendako elementua) zerrendako elementu bakarra dute.
• < ul> (zerrenda desordenatua): ordena jakin batean erakutsi beharrik ez duten elementuen zerrenda, zenbaki ordinaletatik hasita. < li> etiketek (zerrendako elementua) zerrendako elementu bakarra dute.
• < q>/< blockquote>: testuaren aipua. Erabili < blockquote> hainbat lerrotako hitzordu luzeetarako, eta < q> hitzordu laburragoetarako, linean.
• < em> (nabarmentzeko): testua modu etzanean nabarmentzeko erabiltzen da.
• < strong> (enfasia emateko): testua letra lodiz nabarmentzeko erabiltzen da.
• < code>: kode-bloke bat adierazten du.
• Eta hamaika gehiago, ehun inguru, ikastaroan zehar ikusiko ditugunak.

GARRANTZITSUA: HTML etiketa semantiko ohikoenetako batzuk baino ez ditugu zerrendatu. Beste asko ere erabil ditzakezu, hala nola < summary>, < time>, < address>, < video>, etab., zure webgunearen edukia errazago ulertzeko. HTML elementu semantiko gehiago aurkitu nahi badituzu, kontsultatu W3Schoolsen HTML etiketa guztien zerrenda.

HTML semantikoaren jardunbide egokiak

Azkenik, erabiltzaileek HTML etiketa semantikoak erabiltzean egiten dituzten errore komunetan oinarritutako HTML inplementazio-aholku batzuk ikusiko ditugu.

Ez erabili HTML etiketa semantikoak formatu gisa

Nabigatzaileek estiloak aplikatzen dizkiete etiketa semantiko askori (adibidez, < a> etiketa baten barruko testua urdina izaten da eta azpimarratuta egoten da), baina horrek ez du esan nahi HTML etiketak erabili behar direnik zure testuak formateatzeko.

Bestela esanda, etiketa bat urdinez jartzeko eta esteka bat ez duen testu bat azpimarratzeko < a> erabiliko ez zenukeen bezala, ez zenituzke etiketa semantikoak erabili behar helburu estilistiko hutsekin.

Hona hemen etiketa semantikoen erabilera okerraren adibide tipiko batzuk:

• < h1> eta < h6> etiketak erabiltzea, iturriaren tamaina aldatzeko izenburua ez den testu baterako.
• < blockquote> erabili aipua ez den testu bat odoletan jartzeko.
• Erabili < strong> edo < em> enfasirik behar ez duen testu bati letra lodia edo etzana gehitzeko.

Formatu helburuetarako, erabili beti CSS.

Kontuan hartu semantika izenburuak egiteko etiketak sortzean

Ordenatu beti garrantziaren araberako goiburuen elementuak.

Adibidez, H2 sarrera bati jarraitzen dioten H3 goiburu guztiek H2aren azpigaiak izan behar dute.

Horrela, goiburuen egiturak hierarkia logiko bat sortzen du zure edukiaren gaietan, eta irakurleei zein bilatzaileei laguntzen die testua hobeto ulertzen eta nabigatzen.

HTML semantikoa (3): HTML semantikoa eta ez semantikoa

AHOLKUA: erabili Semrush webgunearen auditoria tresna zure webguneak izan ditzakeen H1, HTML eta SEO on-page goiburuekin arazoak identifikatzeko.

Aholku bera aplikatzen zaie gainerako HTML etiketa semantiko guztiei ere.

Horrek honako aholku honetara garamatza:

Ez kopiatu zure ikuspegia besterik gabe

Zure HTML inplementazioak ez du zure diseinu bisualaren kopia hutsa izan behar. Aldiz, orriaren egitura semantikoari jarraitu behar dio.

tu berari mota asko esleitzeko). Era berean, zure webgunea nabigatzaile guztiekin bateragarria izateko, letrak eta zenbakiak bakarrik erabili beharko zenituzke, beti letra batekin hasi eta karaktere bereziak saihestu.