Vamos a ver que un documento HTML contiene etiquetas o elementos HTML, dichas etiquetas interpretan o describen algo, para que el navegador que lo reciba pueda interpretarlo y visualizarlo en pantalla.

¿Que es una etiqueta o elemento HTML?

Una etiqueta describe un contenido que será interpretado en el navegador, y también para dar la estructura al documento HTML.

Una etiqueta tiene una de apertura y una de cierre la cual se indica en el ejemplo, también hay etiquetas que se cierran por si solas con la barra invertida (self closing).

Recordar que hay Dos tipos de Elementos, un elemento en línea que no provoca salto de línea y otra elemento en bloque que si provoca saltos de línea y usa todo el ancho del documento.

Pero en HTML5 No es necesario poner la barra invertida en etiquetas auto-cierre, y tampoco poner comillas a los valores de atributos y podemos poner tanto en minúscula o mayúsculas porque igual el navegador lo interpretara.

Ejemplo de una etiqueta: 

<elemento>Un texto cualquiera</elemento>

Comentarios en HTML

Ahora los comentarios nos ayuda a entender lo que hace dicho trozo de etiquetas, y sera también visualizadas en el navegador.

Ejemplo de comentarios HTML 

<!-- aquí vemos un elemento HTML -->
<elemento>Un texto cualquiera</elemento>
<!-- un elemento de salto de linea y autocierre -->
<br>

Así de sencillo es entender que son las Etiquetas, Atributos, Comentarios.

Ahora vayamos a ver la estructura fundamental de un documento HTML5.

Recordar que un Atributo agrega información adicional a la etiqueta.

nota

Etiquetas de Estructura de un Documento HTML.

  • <!DOCTYPE html> : declarativa que indica que se trata de un documento HTML5.
  • <html></html> : indica el inicio y fin de un documento HTML.
  • <head></head> : indica el inicio y fin de la cabecera del documento.
  • <body></body> : indica el comienzo y final del cuerpo (contenido) de la pagina.
  • <title></title> : indica el titulo de la pagina.

Etiquetas Semánticas para la estructura que nos trae HTML5

  • <header> : indica la cabecera de la pagina.
  • <nav> : indica el menú de navegación de la pagina.
  • <main> : indica el contenido principal.
  • <section> : indica la sección donde ira un contenido especificado.
  • <article> : indica los artículos de contenido de la pagina.
  • <aside> : indica el contenido tangencial de la pagina.
  • <footer> : indica el contenido para el pie de pagina.

Un ejemplo empleando estas etiquetas aprendidas. 

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Mi Titulo</title>
    <meta charset="UTF-8">
</head>
<body>
    <header>La cabecera de mi web</header>
  
        <nav>

            <ul>
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
            </ul>
        </nav>

        <section>
            <article>

                <h2>mi titulo</h2> mi contenido
            </article>

            <article>

            </article>

            <article>

                <h2>mi titulo</h2> mi contenido

            </article>

        </section>
        <aside>

            <h2>Enlaces</h2>

            <li><a href="#">Enlace 1</a></li>
            <li><a href="#">Enlace 2</a></li>
            <li><a href="#">Enlace 3</a></li>
            <li><a href="#">Enlace 4</a></li>

        </aside>

        <footer>
            <h3>Pie de pagina</h3>
        </footer>

    </body>

</html>