Ir al contenido principal

La estructura del documento (HTML5)


La estructura del documento en HTML 5 es algo diferente a la de las versiones anteriores de HTML.

Pues además de las etiquetas para separar las cabeceras del contenido (head y body), contiene nuevas etiquetas para delimitar las partes del documento:

header - Contiene un encabezamiento del documento o de una sección (section), suele incluir un título (h1, h2, ...)
nav - Contiene el principal elemento de navegación de la página, por ejemplo el menú principal
section - Contiene una porción del documento con contenido de temática similar, por ejemplo una introducción, un sub apartado ( con su posibleheader y su h2 o h3... )... Una sección puede contener otras secciones.
aside - Contenido que amplía el contenido principal: imagen relacionada, información relacionada...
footer - Contiene la información que suele estar en el pié de un documento, autor, copyright... independientemente si está situada en el pié del documento, a un lado o donde sea.
Un ejemplo de estructura de documento HTML5:

000
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042 
<!DOCTYPE html>
<html lang="es">
<head>
  <!--  Cabeceras para el navegador: title, meta-tags... -->
</head>

<body>
    <header>
      <!--  Encabezamiento del documento -->
      <h1>Portada</h1>
    </header>
    <nav>
      <!--  Menú principal -->
      <header>
        <!--  Encabezamiento del menú principal -->
        <h1>Menu</h1>
      </header>
      <p><a href="/">Portada</a></p>
      <!--  ... -->
      <p><a href="/enlaces.html">Enlaces de interés</a></p>
    </nav>
    <section>
      <!--  Segundo bloque de información-->
      <header>
        <!--  Encabezamiento del segundo bloque -->
        <h1>¿Donde estamos?</h1>
      </header>
      Estamos en ...
    </section>
    <section>
      <!--  Primer bloque de información-->
      <header>
        <!--  Encabezamiento del primer bloque -->
        <h1>¿Quienes somos?</h1>
      </header>
      Somos ...
    </section>
    <footer>
     <p>&copy; Creado 10/12/2010</p>
     <p>&copy; Copyright 2010</p>
    </footer>
</body>
</html>

 Maximizar   Seleccionar   XML
Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Como descargar e instalar Fuentes en tu PC

Los  distintos tipos de letras nos permiten generar trabajos impresos de mejor calidad.  De allí la importancia de poseer en nuestra computadora de un gran número de fuentes entre las cuales elegir. Tanto los   profesionales del diseño gráfico   como todos aquellos que solemos utilizar nuestra computadora para realizar trabajos impresos, conocemos la importancia de disponer de un importante número de fuentes. 
Publicar un comentario
Ver todo »

(Blogger) Corazones que sube por el blog

Cupido ya está a la vuelta de la esquina y ahora no es el amor el que está en el aire sino los corazones, muchos corazones. Giffy.me  nos ofrece estos dos scripts que harán que tu blog se inhunde de romanticismo al mostrar muchos  corazones subiendo como globos por el blog . Son dos diseños, el primero son corazones color rosa de un tamaño mediano, el segundo son corazones pequeños en color rojo; en ambos casos los corazones subirán por la página moviéndose de un lado al otro.
Publicar un comentario
Ver todo »

C# - Jerarquia de Operaciones - .NET

El problema de no tomar en cuenta la jerarquía de los operadores al plantear y resolver una operación casi siempre conduce a resultados muchas veces equivocados como estos:
Publicar un comentario
Ver todo »