Estructura basica de una pagina web en HTML5

Comencemos hablando de semantica, y por su puesto la pregunta obvia es ¿ Que es la semantica ? La semantica no es mas que el significado que les damos a las palabras. Dejando a un lado esto hablemos un poco de la importancia en la semantica de HTML, sucede que el lenguaje esta hecho para que cada “etiqueta HTML” signifique algo, es así que el explorador sabe que pasa cuando encuentra un <img>, sabe que es una imagen, o cuando encuentra un <p> sabe que es un párrafo etc… Lo mismo sucede con los buscadores, es por eso que para un buscador es mas importante un <h1> que un <p>.

Con forme han pasado los años y la web ha evolucionado se han “depreciado” algunas etiquetas HTML y se han implementado nuevas, con la llegada de HTML5 las nuevas etiquetas semánticas, son mas precisas, y cumplen funciones que no se habían tomado en cuenta anteriormente, como por ejemplo la llegada de la etiqueta <nav> que es donde debemos poner nuestro menu.

Todo esto es muy interesante per seamos un poco prácticos, empecemos haciendo la estructura basica de un sitio web en HTML5, asi que abramos nuestro explorador de preferencia, y creemos un archivo .html

Recordemos que HTML es un tipo de documento, no un programa, asi que lo primero es declarar el tipo de documento que vamos a usar, en versiones anteriores a HTML5 de usaban una seria de cosas muy feas ;)

ejemplo HTML 4 Transicional

1
2
3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Doctype en HTML5

1
<!Doctype html>

Como pueden ver es bastante facil, así que ya le dijimos a el explorador que eso es un documento HTML5 ahora toca comenzar a escribir el documento eso lo hacemos con la etiqueta <html> a la cual le pondremos un atributo “lang” en este atributo pondremos el idioma que preferimos en nuestro caso “es”. Recordemos que en HTML5 debemos cerrar todas las etiquetas de la siguiente manera.

 

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="es">
<head>
    <!-- aqui pondremos el contenido html -->
</head>
<body>
</body>
</html>

 

Espero hayan notado dos cosas, la primera, como escribí el doctype, y es que en HTML5 este se puede escribir en altas, bajas o mesclado como tipo “metro%$&·$%”, perdón por la grosería.

La otra es que dentro de la etiqueta <html> escribí un  texto que no debe aparecer, y es que esta es la syntaxis para los comentarios, así que si guardan esta pagina y la ejecutan en su explorador no debería salir nada hasta el momento.

Estructura basica de una pagina HTML5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Estructura basica de una pagina web en HTML5</title>
</head>
<body>
        <header>
            <nav>
                <a href="inicio.html">Inicio</a>
                <a href="nosotros.html">Nosotros</a>
                <a href="opcion.html">Opcion</a>
                <a href="opcion.html">Opcion</a>
            </nav>
        </header>
        <!-- Cuerpo de la pagina -->
        <footer>
            <p>Derechos reservados</p>
            <p>Contactenos en info@tumaestroweb.com</p>
        </footer>
</body>
</html>

<head>: Nos delimita el encabezado de la pagina, el contenido de esta etiqueta no se ve pero es muy importante ya que es donde declararemos hojas de estilos o CSS  ( siguiendo este curso veremos CSS3)

<body>: dentro de body tendremos el contenido visible del sitio

Las etiquetas mas importantes en HTML5

<header>: Delimita el encabezado visible del sitio dentro de esta etiqueta generalmente encontraremos el menu, logotipo, y encabezados del sitio.

<nav>: Dentro de <nav> pondremos siempre las ligas mas importantes del sitio.

<footer>: dentro de footer generalmente se ponen cosas como otras ligas, derechos de autor etc, pero no es exclusivo, podemos usarlos para desplegar lo que necesitemos, siempre y cuando este en el “pie” de la pagina.

¿Header y footer siempre van en el encabezado y pie de pagina de una pagina?

No estos pueden repetirse y ser contenidos en otras etiquetas, por su puesto la etiqueta en una posición con mayor valor jerárquico en el documento tendra mas peso que otras

Apliquemos ahora Section, article y aside…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Estructura basica de una pagina web en HTML5</title>
</head>
<body>
        <header>
            <nav>
                <a href="inicio.html">Inicio</a>
                <a href="nosotros.html">Nosotros</a>
                <a href="opcion.html">Opcion</a>
                <a href="opcion.html">Opcion</a>
            </nav>
        </header>
        <aside>
            <p>el contenido de aside es algo que no tiene gran relevancia en la pagina, como un submenu, buscador, formulario de contacto etc...</p>
        </aside>
        <section>
            <p>un section es una manera de dividir la pagina por "secciones" de tal modo que podemos dividir el contenido de esta por temas</p>
            <article>
                <h1>El article es la parte mas importante del sitio</h1>
                <p>Basicamente en el article pondremos lo mas importante de la pagina, la informacion jerarquicamente mas importante, un article puede tener header y footer, sin estropear el SEO.</p>
            </article>
        </section>
        <footer>
            <p>Derechos reservados</p>
            <p>Contactenos en info@tumaestroweb.com</p>
        </footer>
</body>
</html>


¿ Te Gusto ? Comenta y compartelo!