Este artigo apresenta principalmente a análise aprofundada da semântica do HTML e a estrutura front-end relacionada a ele. O simples HTML também tem um ótimo conhecimento! Amigos que precisam podem se referir às seguintes perguntas sobre semântica
A semântica estuda a relação entre sinais e símbolos e o significado que eles representam. Na linguística, estuda principalmente o significado desses marcadores (como palavras, frases ou sons) na linguagem. No campo do desenvolvimento do front-end, a semântica envolve principalmente o significado acordado pelos elementos HTML, atributos e valores de atributo (incluindo extensões como microdatas). Essa semântica formal da convenção comumente usada em especificações pode ajudar os programas (e aqueles que mais tarde participam do desenvolvimento) a entender melhor as informações sobre todos os aspectos de um site. No entanto, mesmo que a semântica desses elementos, atributos e valores de atributos sejam formalizados, eles ainda precisam estar sujeitos à adaptabilidade do desenvolvedor e aos resultados de sua escolha conjunta. Isso possibilita que a semântica formal da convenção seja modificada no futuro (e este é um dos princípios do design HTML).
Distinguir diferentes tipos de semântica HTMLA cumprimento do princípio da escrita semântica HTML é uma das fundações do desenvolvimento de front-end profissional moderno. A maioria da semântica está relacionada às propriedades de conteúdo atuais ou esperadas (como: elemento H1, atributo lang, valor de email do atributo de tipo, microdata).
No entanto, nem toda a semântica precisa ser orientada para o conteúdo. Os nomes das classes não podem ser semânticos. Não importa o nome, eles devem ter significado e propósito. A semântica dos nomes das classes pode ser diferente daqueles elementos HTML. Podemos usar a semântica global dos elementos HTML, certos atributos HTML, microdados etc. e, em seguida, usar a semântica específica local do site ou aplicativo para distingui -los. Essas semânticas específicas geralmente estão contidas no valor do atributo, como o atributo de classe.
Embora essa prática recomendada assumida seja reiterada no capítulo sobre as propriedades da classe da especificação HTML5 ...
… Os desenvolvedores são incentivados a usar valores de atributo de classe para descrever o conteúdo real, em vez de descrever o que esperam apresentar.
... Não há razão inerente para fazê -lo. De fato, quando esse método é aplicado em grandes sites ou aplicativos, geralmente se torna uma barreira.
Elementos HTML e outros atributos já fornecem a semântica da camada de conteúdo
Para máquinas ou visitantes, há muito pouca informação semântica útil que o nome da classe pode revelar, ou mesmo não. A menos que seja a pequena parte do nome já acordado (também legível pela máquina) - mircoformats
O principal objetivo dos nomes das classes é ser um gancho para CSS e JavaScript. Se você não precisar adicionar desempenho e comportamento à sua página, talvez não precise adicionar nomes de classe ao seu html
Os nomes da classe devem transmitir informações úteis aos desenvolvedores. Quando você lê um snippet Dom, ele ajudará a entender o papel específico de um determinado nome de classe. Especialmente em equipes de desenvolvimento de colaboração em várias pessoas, os desenvolvedores de front-end não estão apenas lidando com componentes HTML.
Vamos dar um exemplo muito simples:
Código XML/HTML Copito de Conteúdo para a área de transferência