Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

HTML 5 - II

Estructura de la página

La etiqueta DOCTYPE

La etiqueta DOCTYPE queda en HTML 5 reducida a su mínima expresión. Basta con poner:

<!DOCTYPE HTML>

Nuevas etiquetas de estructura

Las nuevas etiquetas de estructura sustituyen a las etiquetas "div" que dividen la página en apartados. Se pretende así eliminar el abuso de la etiqueta <div> y de su atributo id. De esta manera las secciones o apartados de la página quedan mejor definidos, utilizando una etiqueta diferente para cada apartado.

El uso de estas etiquetas esta disponible ya en casi todos los navegadores (todos excepto Internet Explorer), por lo que podemos ya hacer alguna página de prueba.

Las nuevas etiquetas son:

Estas etiquetas se utilizan para estructurar la página, por lo que todas ellas son elementos de bloque. Pueden utilizarse de manera directa con CSS o mediante atributos "id" o "class".

Funcionan como cualquier otra etiiqueta de bloque, por lo que pueden ser repetidas, anidadas, etc.

Estructura de la página.

Aunque podemos utilizar cualquiera de estas etiquetas como una etiqueta <div></div> la función de estas etiquetas es facilitar el diseño de la página, por lo que su forma normal de utilización es sustituir a las etiquetas <div> que forman la estructura de la página.

En un diseño con HTML 4 o XHTML 1 una página normal tiene en su diseño las siguientes etiquetas:

diseño con html 4

En HTML 5 utilizamos directamente las etiquetas, sin tener que marcarlas mediante los atributos id ó class:

diseño con html 5

En la hoja de estilos CSS definimos su aspecto como para cualquier otra etiqueta de HTML, por ejemplo:

header {bacground_color: aqua; border: 3px double, black; }

Ejemplo de página con HTML 5

En los siguientes enlaces mostramos una página construida con las etiquetas anteriores en HTML 5 y su código fuente.

La página la veremos bien en todos los navegadores excepto Internet Explorer, el cual no reconoce todavía estas etiquetas como parte del DOM.

Página de ejemplo html 5

En el siguiente enlace mostramos su código fuente, el cual consiste en una página en HTML y otra página con los estilos CSS.

Código de ejemplo html 5






En la siguiente página veremos más etiquetas nuevas y el tratamiento de formularios:

Formularios y otras etiquetas



Manual HTML5

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo