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 página web con HTML5, y en esta lección aprenderemos a utilizarlos.
Ir a contenido:
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:
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>
El elemento <nav> 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.
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 simplemente elementos 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.
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>Ejemplos de section y article
Para organizar mejor el contenido independiente, las etiquetas <section> pueden ir dentro de las etiquetas <article>
<article>
<h2> Figuras Geométricas </h2>
<p> Existen varios tipos diferentes de formas ... </p>
<section>
<h3> Triángulos </h3>
<p> Los triánguos son figuras con 3 lados y 3 vértices... </p>
</section>
<section>
<h3> Círculos </h3>
<p >Estas maravillas en forma de Pi son fascinantes y ... </p>
</section>
</article>En otras ocasiones se puede usar un elemento <article> dentro de un elemento <section>. Por ejemplo, en una página web que contiene varios artículos sobre diversos temas:
<section>
<h1> Artículos sobre lugares turísticos </h1>
<article>
<h3>Machupicchu</h3>
<p>Una maravilla mundial construida por los Incas ... </p>
</article>
<article>
<h3>Las pirámides de Egipto</h3>
<p>Tres hermosas piramides... </p>
</article>
</section>En resumen, <article> es un elemento independiente, y <section> es preferible utilizarlo para partes de un elemento más grande, por ejemplo dentro de un <article>, sin embargo es posible que veas en ocasiones, una va dentro de otra y viceversa.
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.
[popup_anything id=»4434″]
hola, me gusta mucho tu contenido ya que soy una persona que recién esta aprendiendo a programar, pero me confundí un poco ya que en la estructura es muy diferente de la otra imagen que esta el código, pensé que adentro de <article> van los <section>, y por ultimo, la etiqueta <main> ¿Cuál es su propósito?
serias tan amable de responder mis dudas por favor.
Normalmente, las secciones pueden ir dentro de artículos, sin embargo, también es posible que artículos vayan dentro de secciones; depende del tipo de contenido y la forma de organizarlas, trataré de añadir algún ejemplo. La etiqueta, sirve para contener el contenido principal de la página y solo puede ir una vez, dentro de ella se organiza el contenido principal.
Muchas gracias por aclarar mi duda. 🙂
Empezando con HTML, espero aprender… Gracias por el trabajo.