Estructura completa HTML5
- 04/04/2011
- 6:19 pm
En esta clase vamos a dar un ejemplo de como se utiliza el HTML5 para estructuras que tienen Footer, Menu y Header.
Estructura completa
<body> <header> <hgroup> <h1>Título de la página</h1> <h2>Subtítulo de la página</h2> </hgroup> <nav> <ul> <li><a href="#">Link 1</a> <li><a href="#">Link 2</a> <li><a href="#">Link 3</a> </ul> </nav> </header> <section> <article> <header> <h1>Título del post</h1> <p>Datos del post: autor, fecha, etc.</p> <time datetime="2010-08-02T13:30:50+07:00"></time> </header> <p>Contenido del artículo</p> </article> <!--Más artículos --> </section> <aside> Barra lateral / Sidebar </aside> <footer> Footer de la página </footer> </body> |
Como verán, se usa la etiqueta “aside” para la sidebar, “footer” para el footer, etc. Pero, si queremos darle un diseño a cada uno con CSS, podemos ponerle el atributo div, quedaría algo así:
<aside id="IDaqui"> |
Y también, les explicaré la línea de DATETIME:
<time datetime="2010-08-02T13:30:50+07:00"> |
La sintaxis es algo así: AÑO-MES-DIA, todo seguido de una T que indica que escribiremos el Tiempo y luego: HORA(Formato24):MINUTO:SEGUNDO+DIFERENCIAGTM
Por ejemplo, si la hora GTM es 12:50:10, y nuestro GTM es +5 pondremos: 12:50:10+5:00
O si somos -7, pondremos: 12:50:10-7:00
Elementos no soportados en HTML5
Los siguientes elementos ya no son soportados en HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>
Nuevas etiquetas
Las principales nuevas etiquetas en HTML5, solo buscan añadir un significado semántico superior a lo que anteriormente significaba un div o un span.
Estás etiquetas se pueden utilizar en conjunto con las etiquetas del estándar HTML4.
<header> y <footer> |
Los elementos <header> y <footer> reemplazan a <div id=”header”> y <div id=”footer”> y generalmente contienen la sección de la cabecera y pié de página del diseño, pero también pueden ser usados como cabecera y/o pié de página de una sección en especial. Estas etiquetas pueden usarse varias veces en un mismo diseño.
<hgroup> |
Este elemento es usado para agrupar varias etiquetas de cabeceras (<h1> <h2> <h3> <h4> <h5> <h6>) cuando se van a utilizar títulos, subtítulos, etc para evitar cortar el flujo del esquema del documento.
<nav> |
Esta etiqueta esta diseñada para que coloques los menús de navegación ya sea de la página principal o para un artículo en especial.
<section> |
Esta etiqueta indica una sección genérica del sitio: La etiqueta <section> es una agrupación temática de contenidos, generalmente con una cabecera.
<article> |
Esta etiqueta representa una sección de contenido independiente. Esta etiqueta se utilizaría para respuestas en un foro, artículos en un blog o comentarios de un artículo.
<aside> |
Esta etiqueta se utiliza para representar contenido que no este directamente relacionado con el contenido de la página. Por lo general esta etiqueta es utilizada para representar las barras laterales de los blogs.
Cuando necesites una sección con propósitos netamente de posicionamiento, estilos, etc, es recomendable seguir usando la etiqueta <div> en vez de usar las etiquetas mencionadas anteriormente.
Hilo donde están todos los artículos para aprender HTML5
Posts Relacionados
[…] 1: Que se viene de nuevo en HTML5 Parte 2: Estructura básica HTML5 Parte 3: Estructura completa HTML5 Parte 4: Nuevos inputs en HTML5 Parte 5: Etiqueta de Audio y Videos […]