¿Qué es html semántico? ¿No es todo el html igual? Cuando hablamos de html semántico no nos referimos a ninguna nueva tecnología, ni siquiera aportamos ninguna regla nueva al html. Simplemente nos referimos a una página web en la que la estructura html está bien hecha, aprovechando la semántica que brinda el html, y por tanto dota por si sola a los contenidos de significado.
En las especificaciones html del W3C se nos indica una colección de etiquetas que podemos usar a la hora de generar nuestra web. Pero estas etiquetas historicamente se han usado más por la apariencia que adquirían en la pantalla de los navegadores que por su significado real. Así, la web vivió muchos años con maquetas llenas de tablas y atributos que permitían a los diseñadores y maquetadores colocar cada elemento donde les apetecía.
Más adelante, cuando el uso del css 2.1 empezó a hacerse común estas tablas pasaron a ser sustituidas por divs, un elementeo sin ningún significado semántico que solo debe usarse como bloque agrupador de otros.
El html semántico se hace posible en un tiempo en el que la información sobre el propio html y el css en los distintos navegadores ha llegado a ser tan completa que nos permite, con algo de experiencia, empezar a preocuparnos por que nuestro código use realmente las etiquetas html que aportan al contenido el significado real que tienen. En una página con html semántico las tablas solo tienen sentido para mostrar datos tabulados, los divs solo se usan como bloques contenedores como pueden ser la cabecera o pie de la página, la barra lateral, etc... El resto de elementos deben incluirse con las etiquetas html que los representan: titulares, parrafos, listas, citas, estilos de letra, etc...
Seguidamente una mini guía muy básica de como representar con etiquetas html distintos elementos en una web.
- Bloques bien diferenciados en la página (Cabecera, barra lateral, etc... ) : Único caso en el que contendremos los elementos dentro de una etiqueta <div/>.
- Titulares, titulos de sección, subtitulos : Usaremos las etiquetas <hX/> que nos permiten marcar titulos. El titular principal de la página será la etiqueta <h1/>, los titulos de secciones los <h2/>, distintos titulos de partes del contenido los <h3/>, subtutitulos <h4/>, etc... y así hasta el nivel de títulos que necesitemos.
- Menús, Pestañas, listas de links, footers de links, etc. : Usaremos las etiquetas de listado no numerado <ul/> para contener el elemento y luego para cada link usaremos <li><a/><li> marcando que cada link es en realidad un elemento de listado que solo contiene un link.
- Contenido : Para redactar el contenido debemos usar etiquetas enfunción de lo escrito en el contenido. Para parrafos normales, usaremos <p/>para cada parrafo. Para listados ordenados <ol/>, sin orden definido <ul/>. Aparte tenemos la posibilidad de usar otras etiquetas para contenidos especiales: <pre/>, <blockquote/>, etc.
Posts Relacionados:
[...] html semantico [...]
[...] HTML Viendo una web tan pequeña yo recomendaría remaquetarla entera en html semántico. Además la estructura es tan simple que no debería costar demasiado rehacerla. Pero eso de [...]
[...] Cada uno de los contenedores del layout debe ahora incluir su contenido. Para ello la mejor opción es usar html semántico (que es el html semantico). [...]
[...] Una vez entiendes todas las etiquetas XHTML ya no hay excusa para que no te lances la maquetación semántica. [...]
[...] de hablar de maquetas CSS antes abogabamos por la maquetación semántica y poco a poco entrabamos en los microformatos. Ahora las maquetas no semánticas son un claro [...]
Nada nuevo. Lo bueno es que la gente que se dedica a esto (seo, diseñadores web, arquitectos de contenido y toda esta fauna) parece que comienza a entender para que vale. Lo triste es que todo esto ya existía hace 10 años, pero entonces no tenían ni idea. Los que hace 10 años ya lo sabíamos y lo contabamos es evidente que no supimos venderlo o, sencillamente, no nos entendían. No es la primera vez que sucede esto en la historia.
[...] te recomiendo unas Estructuras limpias y html semantico , sin mucha mierda de código por arriba del contenido para darle de comer bien al [...]
[...] Llamamos html semántico a un documento que usa correctamente las etiquetas html para que la estructura resultante, quitandole la capa de diseño, tenga sentido por si sola. Así, si yo uso 200 divs o sections en mi página por mucho que con CSS dibuje cajas y añada fondos de mil colores sin este CSS no estoy diciendo que es cada parte de mi web. Es cuando me preocupo de que cada caja del HTML tenga sentido cuando mi HTML empieza a tener significado y por tanto los buscadores van a poder entender mejor cada uno de nuestros contenidos (leer más sobre html semántico) [...]