El diseño semántico , o código HTML semántico , es un enfoque para crear páginas web en HTML , basado en el uso de etiquetas HTML de acuerdo con su semántica (propósito) [1] , y también asumiendo una jerarquía de página lógica y consistente [2] [ 3] . Se opone al enfoque en el que la escritura del código HTML está determinada por la apariencia de la página web. Las hojas de estilo en cascada (CSS) se utilizan para diseñar páginas web escritas de acuerdo con la semántica . El estándar HTML desde el principio incluía una serie de etiquetas semánticas [4] , pero el diseño semántico ganó popularidad después del comienzo del trabajo en HTML5 .
Como ejemplo, podemos citar cambios en el estándar HTML, que afectaron, en particular, la etiqueta de formato físico <i> ( cursiva inglesa , haciendo que el texto esté en cursiva ) - en lugar de eso, ahora se recomienda usar la etiqueta de formato lógico (del inglés énfasis , énfasis). El énfasis se puede visualizar usando CSS como cursiva, negrita, subrayado; auditivo (al expresar texto basado en tecnologías TTS): ralentizar el ritmo del habla o una voz más fuerte, etc. Estos cambios se deben al hecho de que las cursivas visuales no solo enfatizan el texto, sino también, por ejemplo, las citas, para las cuales con la etiqueta HTML 4 apareció . Otro uso de la cursiva puede ser indicar frases o palabras extranjeras; sin embargo, los desarrolladores web pueden usar los atributos de especificación de lenguaje integrados de XHTML, o hacer que su marcado sea semántico especificando la clase de elemento de texto adecuada a través de un atributo (p. ej., ). El uso de marcas diferentes para acentos, citas y palabras extranjeras permite que los agentes web de máquinas, como las arañas de los motores de búsqueda , determinen con mayor precisión la relevancia de los elementos individuales de una página web y del texto completo como un todo. <em> <cite>classclass="foreign"