El término «semántica» se refiere al significado de los signos lingüísticos, como símbolos, palabras, expresiones y representaciones formales. A través de los años, el lenguaje HTML fue volviéndose cada vez más semántico: sus etiquetas tienen un significado cada vez más importante. Que una etiqueta tenga significado no quiere decir que se refleja con un aspecto visual determinado en el navegador (algo que corresponde a las hojas de estilo en cascada), sino que define la naturaleza del contenido que debe incluirse en ella. Por ejemplo, tanto la etiqueta <em> como la etiqueta <i> hacen que el texto encerrado en ellas se vea con itálicas. Sin embargo, <i> solo influye en el aspecto visual de la tipografía, mientras que <em> (por emphasis), además de lograr ese efecto, indica que quisimos darle énfasis al texto. Por eso, <em> es una etiqueta más semántica que <i>.
Usar HTML semántico significa aplicar a cada parte del contenido la etiqueta más adecuada a su tipo. Por ejemplo, para los párrafos se usa <p> y para las listas, <ol> o <ul>. Adoptar esta práctica implica entender que HTML tiene que ver cada vez más con la estructura que con la presentación, por lo cual etiquetas como <i> (que es puramente de presentación) deben dejar de utilizarse.
De manera similar, la etiqueta <table> puede permitir diseñar una plantilla tan bien como (o en ocasiones mejor que) la etiqueta <div>. Pero, aunque el resultado visual sea el mismo, <table> solo es adecuada para presentar información tabular (por ejemplo, un cuadro de doble entrada). En cambio, etiquetas como <div>, <section>, <header> y <footer> se crearon específicamente para separar secciones dentro de una página, por lo que en este caso aportan semántica. Utilizar código semántico ofrece varias ventajas:
- Posicionamiento en buscadores. Los motores de búsqueda analizan el código para saber qué clase de contenido muestran (y así, saber cómo mostrarlo). La semántica del código todavía puede ser un factor secundario, pero indudablemente es cada vez más importante.
- Accesibilidad. Los lectores de pantalla para usuarios ciegos organizan la lectura del contenido de acuerdo con la estructura del código.
- Practicidad. El código semántico es más fácil de entender y mantener.
- Reusabilidad. La separación del contenido de la presentación permite que una página sea rediseñada cambiando sólo el CSS.
En la medida en que los desarrolladores mejoren el significado de su código avanzaremos hacia la Web Semántica, una era en la que el contenido esté tan bien etiquetado que los buscadores puedan encontrar exactamente lo que el usuario desea.