Analice profundamente la semántica de HTML y sus marcos frontales relacionados

Este artículo presenta principalmente el análisis en profundidad de la semántica de HTML y el marco front-end relacionado con él. ¡HTML simple también tiene un gran conocimiento! Amigos que lo necesitan pueden consultar las siguientes preguntas sobre semántica

La semántica estudia la relación entre signos y símbolos y el significado que representan. En lingüística, estudia principalmente el significado de estos marcadores (como palabras, frases o sonidos) en el lenguaje. En el campo del desarrollo front-end, la semántica implica principalmente el significado acordado por los elementos HTML, atributos y valores de atributos (incluidas extensiones como microdatos). Estas semánticas formales de convenciones comúnmente utilizadas en especificaciones pueden ayudar a los programas (y aquellos que luego participan en el desarrollo) comprender mejor la información sobre todos los aspectos de un sitio web. Sin embargo, incluso si se formalizan la semántica de estos elementos, atributos y valores de atributos, aún tienen que estar sujetos a la adaptabilidad del desarrollador y los resultados de su elección conjunta. Esto hace posible que la semántica formal de la convención se modifique en el futuro (y este es uno de los principios del diseño HTML).

Permanecer por el principio de escribir HTML semántico es uno de los fundamentos del desarrollo de front-end profesional moderno. La mayoría de las semánticas están relacionadas con las propiedades de contenido actuales o esperadas (como: elemento H1, atributo Lang, valor de correo electrónico del atributo de tipo, microdata).

Sin embargo, no todas las semánticas deben estar orientadas al contenido. Los nombres de clases no pueden ser semánticos. No importa qué nombre sea, deben tener significado y propósito. La semántica de los nombres de clases puede ser diferente de esos elementos HTML. Podemos usar la semántica global de los elementos HTML, ciertos atributos HTML, microdatos, etc., y luego usar la semántica específica local del sitio web o la aplicación para distinguirlos. Estas semánticas específicas generalmente están contenidas en el valor del atributo, como el atributo de clase.

Aunque esta mejor práctica supuesta se reitera en el capítulo sobre propiedades de clase de la especificación HTML5 ...

... Se alienta a los desarrolladores a usar valores de atributos de clase para describir el contenido real, en lugar de describir lo que esperan presentar.

... No hay una razón inherente para hacerlo. De hecho, cuando este método se aplica en grandes sitios web o aplicaciones, a menudo se convierte en una barrera.

Los elementos HTML y otros atributos ya proporcionan la semántica de la capa de contenido

Para máquinas o visitantes, hay muy poca información semántica útil que el nombre de la clase pueda revelar, o incluso no. A menos que sea la pequeña parte del nombre ya acordada (también legible por la máquina) - MircOformats

El objetivo principal de los nombres de clases es ser un gancho para CSS y JavaScript. Si no necesita agregar rendimiento y comportamiento a su página, es posible que no tenga que agregar nombres de clases a su HTML

Los nombres de clases deben transmitir información útil a los desarrolladores. Cuando lea un fragmento de DOM, ayudará a comprender el papel específico de cierto nombre de clase. Especialmente en los equipos de desarrollo de colaboración en varias personas, los desarrolladores front-end no solo se ocupan de los componentes HTML.

Demos un ejemplo muy simple: