Marcofbb Noticias y Artículos Webmasters



Publicidad marcored

Estructura completa HTML5

  • 04/04/2011
  • 6:19 pm
  • marcofbb

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

Estructura completa

Estructura Html5

<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

Share

¿Necesitas ayuda? o ¿Asesoramiento webmaster? Registrate en nuestro foro de consultas

Posts Relacionados

Total de Comentarios: 11

Avatar
04/04/2011
9:28 pm

mmm... interesante Ñ_Ñ ; muxos cambios :S

Avatar
04/04/2011
9:53 pm

Son muchos cambios pero fáciles de recordar 🙂 después viene la guia CSS3 🙂

Avatar
Fede
05/04/2011
10:42 pm

No sabía que ya estaba el CSS3... Eso es lo que más me interesa aunque el HTML 5 también despierta mi curiosidad =P

Avatar
05/04/2011
10:47 pm

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

Avatar
26/02/2012
4:48 am

uuh, me tengo q aprender de nuevo las etiquetas u.u!

Avatar
Jeickball
24/03/2012
11:17 pm

"...Pero, si queremos darle un diseño a cada uno con CSS, podemos ponerle el atributo div, quedaría algo así:"

Buen post, me ayudo bastante aunque hay un error de escritura, creo que es Atributo ID y no Atributo DIV.

Saludos!

Avatar
12/04/2012
9:40 pm

[...] 6 comentarios [...]

Avatar
01/06/2012
3:54 pm

[...] Estructura completa HTML5 [...]

Avatar
peter
12/07/2013
2:40 pm

y cual es la diferencia entre la etiqueta y la etiqueta ??

Avatar
peter
12/07/2013
2:41 pm

y cual es la diferencia entre la etiqueta NAV y la etiqueta MENU ??

Avatar
07/09/2015
6:24 pm

estimados si yo quiero mantener el menu y la cabecera para todo los enlaces dentro de la pagina como hago


Enviar Comentario

(*)

(*)