O que é HTML semântico e por que você deve usá-lo

Um princípio importante do movimento dos Padrões na Web que é responsável pelo setor que temos hoje é a idéia de usar elementos HTML para o que eles são, e não como eles podem aparecer no navegador por padrão. Isso é conhecido como usar HTML semântico.

O que é HTML semântico

HTML semântico ou marcação semântica é HTML que introduz significado à página da Web, em vez de apenas apresentação. Por exemplo, um

tag indica que o texto em anexo é um parágrafo.

Isso é semântico e de apresentação, porque as pessoas sabem quais são os parágrafos e os navegadores sabem como exibi-los.

No outro lado desta equação, tags como e não são semânticas, porque definem apenas como o texto deve parecer (negrito ou itálico) e não fornecem nenhum significado adicional à marcação.

Exemplos de tags HTML semânticas incluem as tags de cabeçalho

através
,
, e . Há muito mais tags HTML semânticas que podem ser usadas quando você cria um site compatível com os padrões. Por que você deveria se preocupar com a semântica O benefício de escrever HTML semântico deriva do que deveria ser o objetivo de qualquer página da Web - o desejo de se comunicar. Ao adicionar tags semânticas ao seu documento, você fornece informações adicionais sobre esse documento, o que ajuda na comunicação. Especificamente, as tags semânticas deixam claro para o navegador qual é o significado de uma página e seu conteúdo. Essa clareza também é comunicada com os mecanismos de pesquisa, garantindo que as páginas certas sejam exibidas para as consultas certas. As tags HTML semânticas fornecem informações sobre o conteúdo dessas tags que vão além de como elas são exibidas em uma página. Texto que é colocado no A tag é reconhecida imediatamente pelo navegador como algum tipo de linguagem de codificação. Em vez de tentar processar esse código, o navegador entende que você está usando esse texto como um exemplo do código para fins de um artigo ou tutorial on-line de algum tipo. Usar tags semânticas oferece muito mais ganchos para estilizar seu conteúdo. Talvez hoje você prefira ter seus exemplos de código exibidos no estilo padrão do navegador, mas, amanhã, você quer chamá-los com uma cor de plano de fundo cinza e depois definir a família de fontes espaçadas ou a fonte para usar suas amostras. Você pode facilmente fazer todas essas coisas usando marcação semântica e CSS aplicado de maneira inteligente. Use Tags Semânticas Corretamente Quando você quiser usar tags semânticas para transmitir o significado e não para fins de apresentação, é necessário ter cuidado para não usá-las incorretamente, simplesmente por suas propriedades de exibição comuns. Algumas das tags semânticas mais comumente usadas incorretamente incluem: blockquote - Algumas pessoas usam o tag para recuar texto que não seja uma cotação. Isso ocorre porque as blockquotes são recuadas por padrão. Se você simplesmente deseja benefícios de recuo, mas o texto não é um blockquote, use as margens CSS. p - Alguns editores da web usam (um espaço não separável contido em um paragrafo) para adicionar espaço extra entre os elementos da página, em vez de definir parágrafos reais para o texto dessa página. Como no exemplo de recuo mencionado anteriormente, você deve usar a propriedade de estilo de margem ou preenchimento para adicionar espaço. ul - Como blockquote, colocando o texto dentro de ummarca recua esse texto na maioria dos navegadores. Isto é tanto semanticamente incorreto e inválido HTML, como sótags são válidas dentro de umtag. Novamente, use a margem ou o estilo de preenchimento para recuar o texto. h1 – h6 - As marcas de título podem ser usadas para tornar as fontes maiores e mais arrojadas, mas se o texto não for um título, ele não deve estar dentro de uma tag de título. Use as propriedades CSS font-weight e font-size em vez disso, se quiser alterar o tamanho ou o peso do texto específico na sua página. Ao usar tags HTML que têm significado, você cria páginas que transmitem mais informações do que simplesmente cercando tudo com Tag. Quais tags HTML são semânticas? Embora quase todas as tags HTML4 e todas as tags HTML5 tenham um significado semântico, algumas tags são basicamente de natureza semântica. Por exemplo, o HTML5 redefiniu o significado do e tags para ser semântico. o tag não transmite importância extra, mas sim texto que geralmente é exibido em negrito. o A tag também não transmite importância ou ênfase extra, mas define o texto que geralmente é exibido em itálico. Tags HTML semânticas Abreviação Acrônimo Citação longa Definição Endereço para o (s) autor (es) do documento Citação Referência de código Texto de teletipo Divisão lógica Recipiente de estilo inline genérico Texto excluído Texto inserido Ênfase Forte ênfase Título de primeiro nível Manchete de segundo nível Título de terceiro nível Manchete do quarto nível Manchete de quinto nível Manchete do sexto nível Quebra temática Texto a ser inserido pelo usuário Texto pré-formatado Cotação em linha curta Amostra de saída Subscrito Sobrescrito Texto definido ou definido pelo usuário