Toda página web tiene la siguiente estructura:
<!DOCTYPE html> <html lang=”es”> <head> […] </head> <body> […] </body> </html>
La primera etiqueta que vemos es <!DOCTYPE html> que indica el tipo de documento que está viendo el navegador
Después tenemos <html>, etiqueta de uso obligatorio, dentro de esta etiqueta va a ir todo el contenido de la página web
La siguiente etiqueta que tenemos es <head>, es la cabecera de la web, la información que aquí introduciremos se tiene en cuenta por los robots de búsqueda pero no es visible al visitante (salvo ciertos elementos), dentro de esta etiqueta incluiremos otras como:
La última etiqueta general de nuestra web es <body>, en la que irá el contenido visible para el usuario de la web, que veremos poco a poco en los siguientes temas.
HTML5 tiene una serie de etiquetas que nos van a permitir separar el contenido de nuestra página web. Son invisibles para el usuario pero aportan información estructural a los motores de búsqueda, dichas etiquetas son:
Es la cabecera de la página. Se encuentra en la parte superior y nos va a aportar cierta información sobre la web, como el logo, nombre de la página, descripción, acceso de usuario... Podemos incluir en ella una etiqueta de navegación (<nav>) o algún enlace a redes sociales o enlaces de interés (<aside>)
<body>
<header>
<h1>Título de la web</h1>
<h2>Subtítulo</h2>
</header>
</body>
Es el pie de la página web, aquí normalmente se pone información como autor, enlaces a términos y condiciones, copyright, mapa web, enlaces a documentos relacionados... Gracias a esta etiqueta le decimos a los robots de búsqueda que esta sección no es de las más importantes de la página, que contiene una información que no es importante para el usuario, tiene que buscar para encontrarla.
<body>
<header>
</header>
<footer>
Diseño y desarrollo web por www.todocursosonline.es
</footer>
</body>
Es el apartado principal de nuestra web, el contenido relevante de la temática de la web irá entre estas etiquetas.Podremos emplear nuevas etiquetas de título y puede tener un header y un footer propio. Es una etiqueta semántica que estructura el documento, pudiendo tener en su interior apartados relacionados con el tema principal de la web pero que no formen parte de él (<article>). Hay posibilidad de tener más de una etiqueta section en páginas con contenido extenso.
<body>
<header>
</header>
<section>
<p>Contenido principal de la web</p>
</section>
<footer>
</footer>
</body>
Dentro del contenido principal de la web, podremos hacer varias secciones cuyo contenido no sea de la misma temática al de la página, pero si similar, como por ejemplo una entrada de un blog, una noticia relacionada, un mapa... Como son contenido principal irán dentro de la etiqueta <section>, y podrán tener un header y un footer y haber tantos como queramos:
<body>
<header>
</header>
<section>
<p>Contenido principal de la web</p>
<article>
<header>
<p>Post externo</p>
</header>
<p>Texto del post</p>
<footer>
<p>Posteado por: </footer>
</footer>
</article>
<article>
<p>Noticia relacionada</p>
<footer>
<p>Fuente de la noticia</p>
</footer>
</article>
</section>
<footer>
</footer>
</body>
Con ella englobaremos el menú de nuestra web. El menú son enlaces a páginas de nuestra web, por lo que tienen que ser internos. Podremos tener más de una etiqueta para menús, por ejemplo, un menú debajo del header y uno en el footer...:
<body>
<header>
</header>
<nav>
<ul>
<li><a href=" ">Enlace 1</a></li>
<li><a href=" ">Enlace 2</a></li>
<li><a href=" ">Enlace 3</a></li>
</ul>
</nav>
<section>
</section>
<footer>
</footer>
</body>
Última etiqueta estructural. Habremos visto en casi todos los blogs y en la mayoría de las páginas web una sección horizontal a la izquierda o a la derecha de la sección principal que contiene páginas relacionadas con la temática pero externas, u otros post de un blog, noticias relacionadas con el contenido principal de la página...:
<body>
<header>
</header>
<aside>
<blockquote>Noticia relacionada 1</blockquote>
<blockquote>Noticia relacionada 1</blockquote>
</aside>
<nav>
</nav>
<section>
</section>
<footer>
</footer>
</body>
