Un principi important del moviment de les Normes Web que és el responsable de la indústria que tenim avui és la idea d'utilitzar elements HTML pel que són més que no pas com poden aparèixer al navegador de manera predeterminada. Això es coneix com l'ús de l'HTML semàntic.
Què és HTML semàntic?
L'etiquetatge semàntic d'HTML o semàntic és HTML que introdueix significats a la pàgina web i no només a la presentació. Per exemple, una etiqueta
indica que el text adjunt és un paràgraf.
Això és semàntic i presentatiu, perquè la gent sap el que són els paràgrafs i els navegadors saben com mostrar-los.
A la part inferior d'aquesta equació, etiquetes com i no són semàntiques, ja que defineixen només com hauria de mirar el text (negreta o cursiva) i no proporcionen cap significat addicional al marcat.
Exemples d'etiquetes HTML semàntiques inclouen les etiquetes de capçalera
a través de , , i . Hi ha moltes més etiquetes HTML semàntiques que es poden utilitzar a mesura que es crea un lloc web compatible amb normes.
Per què hauria de preocupar-se de la semàntica
El benefici d'escriure HTML semàntic prové del que hauria de ser l'objectiu de conduir de qualsevol pàgina web: el desig de comunicar-se. Si afegiu etiquetes semàntiques al vostre document, proporcioneu informació addicional sobre aquest document, que ajuda en la comunicació. En concret, les etiquetes semàntiques deixen clar al navegador quin és el significat d'una pàgina i el seu contingut.
Aquesta claredat també es comunica amb els motors de cerca, assegurant que es lliurin les pàgines correctes per a les consultes correctes.
Les etiquetes HTML semàntiques proporcionen informació sobre el contingut d'aquestes etiquetes que va més enllà de la manera com es veuen en una pàgina. El text que està tancat a l'etiqueta és immediatament reconegut pel navegador com un tipus de llenguatge de codificació.
En lloc d'intentar renderitzar aquest codi, el navegador entén que esteu utilitzant aquest text com a exemple del codi per als propòsits d'un article o tutorial en línia d'algun tipus.
L'ús d'etiquetes semàntiques et dóna molts més enganxaments per dissenyar el vostre contingut. Potser avui preferiu que els vostres mostres de codi es mostrin a l'estil del navegador predeterminat, però demà, voleu trucar-los amb un color de fons gris, i més endavant voleu definir la família de tipus de lletra mono-espaciada o la pila de lletra necessària per utilitzar-la les vostres mostres. Podeu fer totes aquestes coses fàcilment utilitzant el marcat semàntic i CSS aplicat amb intel·ligència.
Utilitzeu correctament les etiquetes semàntiques
Quan vulgueu utilitzar etiquetes semàntiques per transmetre significats i no per a finalitats de presentació, heu de tenir cura que no les utilitzeu de manera incorrecta per les seves propietats de visualització comuns. Algunes de les etiquetes semàntiques mal utilitzades són:
- blockquote - Algunes persones utilitzen l'etiqueta per sagnar text que no és una cita. Això es deu a que els blocs estan sagnats per defecte. Si només voleu beneficiar-se de la sagnia, però el text no és un bloqueig, utilitzeu els marges CSS.
- p - Alguns editors web utilitzen
& nbsp; (un espai que no es trenca en un paràgraf) per afegir espai addicional entre els elements de la pàgina, en comptes de definir paràgrafs reals per al text d'aquesta pàgina. Igual que amb l'exemple d'indentació anteriorment esmentat, haureu d'utilitzar la propietat del marge o l'estil d'emplenament per afegir espai.
- ul - Com a blockquote, el text adjunt dins d'una etiqueta
sagna aquest text a la majoria dels navegadors. Això és semànticament incorrecte i HTML no vàlid, ja que només les etiquetes - són vàlides dins d'una etiqueta
. De nou, utilitzeu el marge o l'estil de farcit per sagnar text.
- h1-h6: les etiquetes de títol es poden utilitzar per fer que les fonts siguin més grans i més audaces, però si el text no és un encapçalament, no ha d'estar dins d'una etiqueta de títol. Utilitzeu les propietats CSS de font-weight i font-size si voleu canviar la mida o el pes del text específic a la vostra pàgina.
Mitjançant l'ús d'etiquetes HTML que tenen significat, creeu pàgines que imparteixin més informació que tot envoltant tot amb etiquetes
.
Quines etiquetes HTML són semàntiques?
Tot i que gairebé totes les etiquetes HTML4 i totes les etiquetes HTML5 tenen un significat semàntic, algunes etiquetes són principalment de caràcter semàntic.
Per exemple, HTML5 ha redefinit el significat de les etiquetes i com a semàntiques. L'etiqueta no transmet més importància, sinó que el text normalment es mostra en negreta. L'etiqueta també no transmet més importància o èmfasi, sinó que defineix text que normalment es representa en cursiva.
Etiquetes HTML semàntiques
Abreviatura Acrònim
Cotització llarga Definició Adreça d'autor (s) del document Cita Referència del codi Text de teletipo Divisió lògica Contenidor genèric d'estil en línia Text suprimit Text inserit Èmfasi Èmfasi forta
Títol de primer nivell
Títol de segon nivell
Títol de tercer nivell
Capçalera del quart nivell
Títol del cinquè nivell
Titular de sisè nivell
Trencament temàtic Text que ha d'introduir l'usuari
Text preformatat
Cita en línia curta Sortida de mostra Subscripció Superíndex Text variable o definit per l'usuari
, i . Hi ha moltes més etiquetes HTML semàntiques que es poden utilitzar a mesura que es crea un lloc web compatible amb normes.
Per què hauria de preocupar-se de la semàntica
El benefici d'escriure HTML semàntic prové del que hauria de ser l'objectiu de conduir de qualsevol pàgina web: el desig de comunicar-se. Si afegiu etiquetes semàntiques al vostre document, proporcioneu informació addicional sobre aquest document, que ajuda en la comunicació. En concret, les etiquetes semàntiques deixen clar al navegador quin és el significat d'una pàgina i el seu contingut.
Aquesta claredat també es comunica amb els motors de cerca, assegurant que es lliurin les pàgines correctes per a les consultes correctes.
Les etiquetes HTML semàntiques proporcionen informació sobre el contingut d'aquestes etiquetes que va més enllà de la manera com es veuen en una pàgina. El text que està tancat a l'etiqueta és immediatament reconegut pel navegador com un tipus de llenguatge de codificació.
En lloc d'intentar renderitzar aquest codi, el navegador entén que esteu utilitzant aquest text com a exemple del codi per als propòsits d'un article o tutorial en línia d'algun tipus.
L'ús d'etiquetes semàntiques et dóna molts més enganxaments per dissenyar el vostre contingut. Potser avui preferiu que els vostres mostres de codi es mostrin a l'estil del navegador predeterminat, però demà, voleu trucar-los amb un color de fons gris, i més endavant voleu definir la família de tipus de lletra mono-espaciada o la pila de lletra necessària per utilitzar-la les vostres mostres. Podeu fer totes aquestes coses fàcilment utilitzant el marcat semàntic i CSS aplicat amb intel·ligència.
Utilitzeu correctament les etiquetes semàntiques
Quan vulgueu utilitzar etiquetes semàntiques per transmetre significats i no per a finalitats de presentació, heu de tenir cura que no les utilitzeu de manera incorrecta per les seves propietats de visualització comuns. Algunes de les etiquetes semàntiques mal utilitzades són:
- blockquote - Algunes persones utilitzen l'etiqueta per sagnar text que no és una cita. Això es deu a que els blocs estan sagnats per defecte. Si només voleu beneficiar-se de la sagnia, però el text no és un bloqueig, utilitzeu els marges CSS.
- p - Alguns editors web utilitzen
& nbsp; (un espai que no es trenca en un paràgraf) per afegir espai addicional entre els elements de la pàgina, en comptes de definir paràgrafs reals per al text d'aquesta pàgina. Igual que amb l'exemple d'indentació anteriorment esmentat, haureu d'utilitzar la propietat del marge o l'estil d'emplenament per afegir espai.
- ul - Com a blockquote, el text adjunt dins d'una etiqueta
sagna aquest text a la majoria dels navegadors. Això és semànticament incorrecte i HTML no vàlid, ja que només les etiquetes - són vàlides dins d'una etiqueta
. De nou, utilitzeu el marge o l'estil de farcit per sagnar text.
- h1-h6: les etiquetes de títol es poden utilitzar per fer que les fonts siguin més grans i més audaces, però si el text no és un encapçalament, no ha d'estar dins d'una etiqueta de títol. Utilitzeu les propietats CSS de font-weight i font-size si voleu canviar la mida o el pes del text específic a la vostra pàgina.
Mitjançant l'ús d'etiquetes HTML que tenen significat, creeu pàgines que imparteixin més informació que tot envoltant tot amb etiquetes
.
Quines etiquetes HTML són semàntiques?
Tot i que gairebé totes les etiquetes HTML4 i totes les etiquetes HTML5 tenen un significat semàntic, algunes etiquetes són principalment de caràcter semàntic.
Per exemple, HTML5 ha redefinit el significat de les etiquetes i com a semàntiques. L'etiqueta no transmet més importància, sinó que el text normalment es mostra en negreta. L'etiqueta també no transmet més importància o èmfasi, sinó que defineix text que normalment es representa en cursiva.
Etiquetes HTML semàntiques
Abreviatura Acrònim
Cotització llarga Definició Adreça d'autor (s) del document Cita Referència del codi Text de teletipo Divisió lògica Contenidor genèric d'estil en línia Text suprimit Text inserit Èmfasi Èmfasi forta
Títol de primer nivell
Títol de segon nivell
Títol de tercer nivell
Capçalera del quart nivell
Títol del cinquè nivell
Titular de sisè nivell
Trencament temàtic Text que ha d'introduir l'usuari
Text preformatat
Cita en línia curta Sortida de mostra Subscripció Superíndex Text variable o definit per l'usuari