Cómo usar etiquetas semánticas para programación HTML5 y CSS3 - dummies

A medida que los desarrolladores web comenzaron a usar técnicas de diseño flotante, casi siempre crearon divs llamados nav, header y footer. Los desarrolladores de HTML5 decidieron crear nuevos elementos con estos nombres. Eche un vistazo al siguiente código para ver las etiquetas semánticas en acción.

encabezado semántico {border-bottom: 5px double black;} nav {float: left; ancho: 20%; claro: izquierda; altura mínima: 400px; borde-derecha: 1px negro sólido;} sección {float: left; ancho: 75%; padding-left: 1em;} artículo {float: left; ancho: 75%; padding-left: 1em;} pie de página {clear: both; borde superior: 5px doble negro; text-align: center;}

Este es mi encabezado







Navegación

enlace a
enlace b
enlace c
enlace d
enlace e


Sección 1
Sección cuerpo …

Sección 2
Sección del cuerpo …

Artículo
Artículo del cuerpo …

Pie de página
Andy Harris 

andy @ aharrisbooks. net

Como puede ver, hay varias etiquetas de marcado semántico nuevas en HTML5:

• encabezado: Esto no es lo mismo que las etiquetas h1-h6. Denota un fragmento de la página que contendrá un encabezado para la página. A menudo, el encabezado llenará el ancho de la página y tendrá algún tipo de imagen de banner. Con frecuencia contiene contenido h1.

• nav: Esta etiqueta indica algún tipo de sección de navegación. No tiene un estilo particular en sí mismo, pero se usa con frecuencia como un menú horizontal o vertical para la navegación del sitio.

• sección: Una sección se usa para especificar una parte genérica de la página. Puede tener varias secciones en la misma página.

• artículo: Un artículo es como una sección, pero está destinado a ser utilizado con recursos externos. Muchas páginas se crean automáticamente por software, y cuando estas páginas integran contenido de otras fuentes, se pretende utilizar la etiqueta del artículo para integrar este contenido.

• pie de página: Un pie de página está diseñado para mostrar el contenido del pie de página en la parte inferior de la página. Normalmente, un pie de página cubre la parte inferior de una página, aunque este no es el comportamiento predeterminado.

Tenga en cuenta que ninguno de estos elementos tiene ningún formato específico. Depende de usted proporcionar el formato a través del código CSS. Cada uno de los elementos se puede formatear directamente como un elemento HTML (porque eso es lo que es). Todos los navegadores de última versión admiten las etiquetas de marcado semántico, pero si desea admitir navegadores más antiguos (especialmente IE antes de la versión 8), aún necesitará usar divs.