Estructura de una pagina HTML5

Anterior
Avanzar

La estructura de una página HTML5 está conformada por una variedad de elementos que adquieren un alto valor semántico en comparación a las anteriores versiones de HTML, ahora contamos con nuevas etiquetas que poseen significado para estructurar adecuadamente una pagina web con HTML5, y en esta lección aprenderemos a utilizarlos.

Estructura de página en HTML5

A continuación conozcamos las nuevas etiquetas destinadas para crear una estructura de página HTML5.

  • <header.- contiene la cabecera
  • <nav>.- contiene una barra de navegación o lista de hipervínculos.
  • <aside>.- puede ser un sidebar o un bloque de contenido secundario
  • <article>.- el contenido principal
  • <section>.- secciones de la pagina
  • <Footer.- el pie de página.

Podemos entender de un vistazo la estructura que html5 propone. Rápidamente podemos notar que:

Estructura de contenido HTML5
Imagen de estructura de pagina en HTML5

Elemento <header>

El elemento <header> prácticamente contiene el encabezado donde puede ir elementos como el logo, el nombre del sitio y elementos apropiados para el encabezado.

  • <header> se usa dentro de <body> 
  • <head> y <header> son muy diferentes, no confundir.

Ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Título Gatos</title>
  </head>
  <body>
    <header style="background-color:red;"> 
      <img id="logo" src="gatito.jpg" width="100px" height="100px"/>
      <h1>SITIO WEB DE GATOS</h1>
        <p>Un sitio web genial los amantes de gatitos</p>
    </header>
  </body>
</html>

Elemento <nav>

Este elemento contiene un conjunto de enlaces o hipervínculos para la navegación, para ir de una página o sección a otra fácilmente.

Ejemplo:

<nav>
  <ul>
    <li><a href="url">Inicio</a></li>
    <li><a href="url">Nosotros</a></li>
    <li><a href="url">Servicios</a></li>
    <li><a href="url">Contacto</a></li>
  </ul>
</nav>

Elemento <article>

Básicamente <article> es un elemento semántico y su contenido será un contenido autónomo e independiente, posee sentido por sí solo.

Te recomendamos leer:  Polilineas en html5

Ejemplo:

<article>
  <h1>Los gatitos</h1>
  <p>Los gatitos son animales mamiferos que pertenecen a la familia de felinos...</p>
  <h2>Qué hacen los gatitos</h2>
  <p>Los gatitos hacen las siguientes actividades</p>
  <ul>
    <li> Maullan</li>
    <li>Juegan</li>
    <li>Cazan ratones </li>
    <li>Duermen roncando</li>
  </ul>
  <h2>Razas de gatitos</h2>
  <p>Existen varias razas de gatitos, a continuación nombramos algunos:</p>
    <ul>
    <li> Abisinio</li>
    <li>American Curl</li>
    <li>Bengalí </li>
    <li>Bombay</li>
  </ul>
</article>

<article> podría contener por ejemplo un artículo de un sitio, o la noticia de un sitio de noticias o un comentario de un post. Cuando <article> está dentro de un bloque mayor, entonces el contenido de <article> está relacionado con el contenido del bloque mayor.

Elemento <section>

Elemento que contiene una sección, parte o pieza de un contenido. También es un contenido semántico. Los elementos que están dentro de <section> están relacionados entre si. Para formar un contenido con significado propio.

Elemento <aside>

En <aside> está el contenido secundario, y no es precisamente parte del contenido principal.

Si <aside> se pone dentro de <article>, entonces se puede entender que <aside> es un contenido complementario, pero que ya no forma parte del contenido principal.

El elemento <aside> podrían ser los sidebar, las barras laterales que algunos sitios web presentan o publicidad, banners, o elementos simplemente complementarios.

En fin los elementos <article>, < section>, <aside> son considerados semánticos, pues le dan significado al contenido que engloban y utilizarlos correctamente es muy importante, como por ejemplo, para que los motores de búsqueda entiendan y muestren correctamente y en las mejores posiciones o en fin para el seo, optimización y mantenimiento.

Elemento <footer>

Este elemento prácticamente contiene el pie de página, dentro pueden ir como por ejemplo iconos de redes sociales, datos de contacto, términos del servicio, etc.

Te recomendamos leer:  Etiqueta de vídeo HTML5 - Atributos y propiedades

Dependiendo de nuestros objetivos y expectativas podemos utilizar otros elementos html dentro de los elementos <header>, <nav>, <footer>.

Ejemplo código de la estructura de paginas en html5

<!DOCTYPE html>
  <html>
    <head>
      <title> Titulo</title>
    </head>
    <body>
     <header>
La etiqueta header contiene la cabecera, practicamnete se presenta como una barra en la que se muestra informacion, logo, descripcion, etc.  <nav>
Contiene la barra de navegación de una página web.  </nav>
</header>
<main>
  <section>
Esta es una sección de contenido del bloque principal (MAIN)
           <article>
Esto es un artículo del sitio
           </article>
           <article>
Esto sería un segundo artículo
           </article>
  </section>
</main>
<aside>
La etiqueta aside contiene información accesoria, que no suele añadir un valor significativo a la temática de la página. Puede ser usada para la barra lateral en las que puede ir elementos de widgets, con cualquier contenido dentro.
</aside>
<footer>
Footer contiene el pie de página, pueden ir en ella enlaces, mapa del sitio, etc.
      
      
</footer>
      
    </body>
   
  </html>

Ventajas de la nueva estructura HTML5

  • Organización.- HTML5 organiza mejor las partes de una pagina web, ahora cada parte tiene un nombre y una etiqueta exclusiva para su tipo de elemento.
  • Significado.- Las etiquetas que conocimos en esta lección poseen un significado en comparación con versiones anteriores de HTML en las que se empleaban por ejemplo etiquetas <div> para crear los bloques, sin embargo una etiqueta <div> simplemente representa una división y no posee ninguna carga semántica adicional, por ejemplo a una etiqueta <div id=»footer»>, los navegadores web lo interpretarán como una simple división, en cambio una etiqueta HTML5 <footer> tiene un significado contundente y es empleada exclusivamente para el pie de página.
  • Posicionamiento.- entre muchos factores, los motores de búsqueda se guían de la estructura de una página para entender de que trata la página, entonces como ya vimos las etiquetas html5 poseen significado el mismo que será favorable para que los motores de búsqueda los entiendan, lo cual tiene un impacto al momento de aparecer en los resultados de búsqueda en Internet. Entre una pagina construida con etiquetas <div> y otra construida con etiquetas de HTML5, esta ultima será más entendible y por lo tanto con mayor probabilidad de posicionarse.
Te recomendamos leer:  SVG EN HTML5
Lecciones de HTML5
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5