Un principio importante do movemento de Normas Web que é responsable da industria que temos hoxe é a idea de usar elementos HTML para o que son máis que como poden aparecer no navegador por defecto. Isto é coñecido como o uso de HTML semántico.
Que é HTML semántico?
O marcador semántico HTML ou semántico é o HTML que introduce significado na páxina web en lugar de só a presentación. Por exemplo, unha etiqueta
indica que o texto incluído é un parágrafo.
Isto é semántico e de presentación, porque a xente sabe o que son os parágrafos e os navegadores saben como mostrar.
No flip side desta ecuación, as etiquetas como e non son semánticas, xa que definen só como debería ollarse o texto (negra ou cursiva) e non proporcionan ningún significado adicional ao marcado.
Exemplos de etiquetas HTML semánticas inclúen as etiquetas de título
a través de , , e . Hai moitas máis etiquetas HTML semánticas que se poden usar a medida que constrúe un sitio web compatible con estándares.
Por que debes preocuparte pola semántica
O beneficio da escritura de HTML semántico deriva do que debería ser o obxectivo de condución de calquera páxina web: o desexo de comunicarse. Ao engadir etiquetas semánticas ao documento, proporciona información adicional sobre ese documento, que axuda na comunicación. En concreto, as etiquetas semánticas deixan claro ao navegador cal é o significado dunha páxina e do seu contido.
Esa claridade tamén se comunica cos buscadores, asegurándose de que se entreguen as páxinas correctas para as consultas correctas.
As etiquetas HTML semánticas proporcionan información sobre o contido destas etiquetas que vai máis alá do xeito que se ven nunha páxina. O texto que está encerrado na etiqueta é recoñecido de inmediato polo navegador como algún tipo de linguaxe de codificación.
No canto de tentar renderizar ese código, o navegador entende que está a usar ese texto como un exemplo do código para os fins dun artigo ou tutorial en liña de algunha maneira.
Usar etiquetas semánticas dálle moitos máis anzamentos para o seu contido. Quizais hoxe prefire que os seus mostras de código se mostren no estilo de navegador predeterminado, pero mañá quererá chamarlles cunha cor de fondo gris e despois desexa definir a familia de fontes ou pila de fontes monocatenario precisa para usar as túas mostras. Pode facer facilmente todas estas cousas usando o marcado semántico e CSS de aplicación intelixente.
Use correctamente as etiquetas semánticas
Cando quere usar etiquetas semánticas para transmitir significado e non para fins de presentación, cómpre ter coidado de non usalos de xeito incorrecto para as súas propias propiedades de visualización común. Algunhas das etiquetas semánticas máis utilizadas son:
- blockquote - Algunhas persoas usan a etiqueta para sangrar texto que non é unha cita. Isto ocorre porque os bloques están sangrados por defecto. Se simplemente desexa obter beneficios de sangría, pero o texto non é un cadro de bloque, use as marxes CSS.
- p - Algúns editores web usan
& nbsp; (un espazo que non se rompe nun párrafo) para engadir espazo extra entre os elementos da páxina, en lugar de definir os parágrafos reais para o texto desta páxina. Do mesmo xeito que co exemplo de sangría anteriormente mencionado, debería usar a propiedade de marxe ou estilo de recheo para engadir espazo.
- ul - Do mesmo xeito que o bloqueo, o texto que inclúe dentro dunha etiqueta
inclina ese texto na maioría dos navegadores. Este é semánticamente incorrecto e HTML non válido, xa que só as etiquetas - son válidas nunha etiqueta
. De novo, use a marxe ou o estilo de recheo para sangrar o texto.
- h1-h6 - As etiquetas de título pódense empregar para facer fontes maiores e máis audaces, pero se o texto non é un título, non debería estar dentro dunha etiqueta de título. Use as propiedades do tipo de fonte-peso e CSS do tipo de fonte se quere cambiar o tamaño ou o peso do texto específico na súa páxina.
Ao usar etiquetas HTML que teñen significado, creas páxinas que imparten máis información que simplemente envolvendo todo con etiquetas
.
Que etiquetas HTML son semánticas?
Aínda que case todas as etiquetas HTML4 e todas as etiquetas HTML5 teñen un significado semántico, algunhas etiquetas son principalmente semánticas.
Por exemplo, HTML5 redefiniu o significado das etiquetas e para ser semántica. A etiqueta non transmite importancia extra, senón texto que normalmente se mostra en negra. A etiqueta tamén non transmite importancia ou énfase adicional, senón que define o texto que normalmente se representa en cursiva.
Etiquetas semánticas HTML
Abreviatura Acrónimo
Cotización longa Definición Enderezo de autor (s) do documento Cita Referencia de código Texto de teletipo División lóxica Contenedor de estilo xenérico Texto eliminado Texto inserido Énfase Énfase forte
Titular de primeiro nivel
Titular de segundo nivel
Titular de terceiro nivel
Título de cuarto nivel
Titular de quinto nivel
Titular de sexto nivel
Salto temático Texto a inserir polo usuario
Texto preformado
Cita en liña curta Saída de mostra Subíndice Superíndice Texto definido polo usuario ou variable
, e . Hai moitas máis etiquetas HTML semánticas que se poden usar a medida que constrúe un sitio web compatible con estándares.
Por que debes preocuparte pola semántica
O beneficio da escritura de HTML semántico deriva do que debería ser o obxectivo de condución de calquera páxina web: o desexo de comunicarse. Ao engadir etiquetas semánticas ao documento, proporciona información adicional sobre ese documento, que axuda na comunicación. En concreto, as etiquetas semánticas deixan claro ao navegador cal é o significado dunha páxina e do seu contido.
Esa claridade tamén se comunica cos buscadores, asegurándose de que se entreguen as páxinas correctas para as consultas correctas.
As etiquetas HTML semánticas proporcionan información sobre o contido destas etiquetas que vai máis alá do xeito que se ven nunha páxina. O texto que está encerrado na etiqueta é recoñecido de inmediato polo navegador como algún tipo de linguaxe de codificación.
No canto de tentar renderizar ese código, o navegador entende que está a usar ese texto como un exemplo do código para os fins dun artigo ou tutorial en liña de algunha maneira.
Usar etiquetas semánticas dálle moitos máis anzamentos para o seu contido. Quizais hoxe prefire que os seus mostras de código se mostren no estilo de navegador predeterminado, pero mañá quererá chamarlles cunha cor de fondo gris e despois desexa definir a familia de fontes ou pila de fontes monocatenario precisa para usar as túas mostras. Pode facer facilmente todas estas cousas usando o marcado semántico e CSS de aplicación intelixente.
Use correctamente as etiquetas semánticas
Cando quere usar etiquetas semánticas para transmitir significado e non para fins de presentación, cómpre ter coidado de non usalos de xeito incorrecto para as súas propias propiedades de visualización común. Algunhas das etiquetas semánticas máis utilizadas son:
- blockquote - Algunhas persoas usan a etiqueta para sangrar texto que non é unha cita. Isto ocorre porque os bloques están sangrados por defecto. Se simplemente desexa obter beneficios de sangría, pero o texto non é un cadro de bloque, use as marxes CSS.
- p - Algúns editores web usan
& nbsp; (un espazo que non se rompe nun párrafo) para engadir espazo extra entre os elementos da páxina, en lugar de definir os parágrafos reais para o texto desta páxina. Do mesmo xeito que co exemplo de sangría anteriormente mencionado, debería usar a propiedade de marxe ou estilo de recheo para engadir espazo.
- ul - Do mesmo xeito que o bloqueo, o texto que inclúe dentro dunha etiqueta
inclina ese texto na maioría dos navegadores. Este é semánticamente incorrecto e HTML non válido, xa que só as etiquetas - son válidas nunha etiqueta
. De novo, use a marxe ou o estilo de recheo para sangrar o texto.
- h1-h6 - As etiquetas de título pódense empregar para facer fontes maiores e máis audaces, pero se o texto non é un título, non debería estar dentro dunha etiqueta de título. Use as propiedades do tipo de fonte-peso e CSS do tipo de fonte se quere cambiar o tamaño ou o peso do texto específico na súa páxina.
Ao usar etiquetas HTML que teñen significado, creas páxinas que imparten máis información que simplemente envolvendo todo con etiquetas
.
Que etiquetas HTML son semánticas?
Aínda que case todas as etiquetas HTML4 e todas as etiquetas HTML5 teñen un significado semántico, algunhas etiquetas son principalmente semánticas.
Por exemplo, HTML5 redefiniu o significado das etiquetas e para ser semántica. A etiqueta non transmite importancia extra, senón texto que normalmente se mostra en negra. A etiqueta tamén non transmite importancia ou énfase adicional, senón que define o texto que normalmente se representa en cursiva.
Etiquetas semánticas HTML
Abreviatura Acrónimo
Cotización longa Definición Enderezo de autor (s) do documento Cita Referencia de código Texto de teletipo División lóxica Contenedor de estilo xenérico Texto eliminado Texto inserido Énfase Énfase forte
Titular de primeiro nivel
Titular de segundo nivel
Titular de terceiro nivel
Título de cuarto nivel
Titular de quinto nivel
Titular de sexto nivel
Salto temático Texto a inserir polo usuario
Texto preformado
Cita en liña curta Saída de mostra Subíndice Superíndice Texto definido polo usuario ou variable