Topic: Estructura de HTML5

October 02, 2012 - 09:45 21:45

En esta clase vamos a dar un ejemplo de como se utiliza el HTML5 para estructuras que tienen Footer, Menu y Header.

Estructura completa

Code: [Select]

<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í:

Code: [Select]

<aside id="IDaqui">
Y también, les explicaré la línea de DATETIME:

Code: [Select]

<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.

Quote

<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.

Code: [Select]

<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.

Code: [Select]

<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.

Code: [Select]

<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.

Code: [Select]

<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.

Code: [Select]

<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.

Fuente: www.Mixmundo.net

**Reply #1** October 02, 2012 - 10:26 22:26

Buena info

**Reply #2** October 03, 2012 - 07:34 07:34

Muy bueno, todos los que programamos o intentamos programar deberíamos empezar a utilizar HTML5. +10

Enviado desde mi GT-I9300 usando Tapatalk 2

Estructura de HTML5