Lo habré dicho mil veces, y creo que por una más no pasará nada. Nuestra web está dividida en la parte no visible que es todo lo que contiene <head> y la parte visible que es <body>
Dentro de la etiqueta <body> que funciona como contenedor (que por supuesto y sin duda alguna debes de decir: ¡SE CIERRA!), dentro de esta etiqueta vamos a diferenciar 6 partes que formarán la estructura básica de nuestra web, empezando por...
<header>
La etiqueta <header> en otro contenedor en el que se encuentra el logo, el titulo de la web que aparece arriba de la página y otras cosas que se nos pudieran ocurrir meter dentro del <header>, pero como es evidente, no vamos a meter el artículo de un blog en el header, ya que este contenedor es el encabezado, y eso poco tiene que ver con el articulo, si podemos poner dentro de un artículo el <header> pero eso ya lo veremos más adelante
Dentro de <header> podemos poner la imagen de un logo o podemos poner el titulo de nuestra web como hemos dicho antes, para ello aprenderemos 7 nuevas etiquetas, la <img> y las etiquetas de titulos que van desde <h1> hasta <h6> (Pasando por h2, h3, etc)
<img>
Esto es una de las cosas que más nos gusta poner en las webs, para utilizar la etiqueta <img> se hace uso de dos atributos que la autocompletan, por lo que no es necesario cerrar la etiqueta con </img>.
Estos dos atributos son src="" que define el lugar donde se encuentra la imagen (normalmente metemos la imagenes en la carpeta img o utilizamos una URL) y el atributo alt="", que sirve para mostrar un texto alternativo en caso de que la imagen no se encuentre y mostrar un texto cuando se posa el ratón encima (Creo que esta segunda ya está mas generalizada, cuando antes solo lo hacía Internet Explorer)
Un ejemplo de estructura sería:
<img class="imgPrincipal" src="img/foto.png" alt="Imagen principal de la web">
<h1> a <h6>
<h1> a <h6> son 6 etiquetas con un tamaño de letras predefinida por el navegador que nos ahorra tiempo y espacio en el archivo .css a la hora de definir titulos, subtitulos, y otros usos. Basicamente y como deberas de suponer <h1> es el tamaño de letra más grande que según se recomienda solo debe estar dentro del <header> como titulo de la web que el buscador tomará como una palabra clave en futuras busquedas, por lo que se recomienda solo utilizar un <h1> en toda la web para así no marear al buscador.
<h1>Texto aquí</h1>
<h2>Texto aquí</h2>
<h3>Texto aquí</h3>
<h4>Texto aquí</h4>
<h5>Texto aquí</h5>
<h6>Texto aquí</h6>
<p> </p>
Ya que estamos hablando de los textos creo que sería conveniente (y ya es hora) enseñar como poner un texto cualquiera en HTML, esto se hace poniendo las etiquetas <p> (que se cierran con </p>) en cualquier parte del body, donde quieras ahí puedes meter la etiqueta <p>, la cual introduce un texto cualquiera, dandole un tamaño normal como el que ven en esta app
<p>¡Hola amigos! ¿Qué pasa? ¿Aburrido? ¡Estas aprendiendo HTML!</p>
Ahora que ya sabemos como poner nuestra imagen de logo, y como crear el titulo, ademas de introducir textos en nuestra web, ya podemos avanzar y ver la segunda parte que es <nav> la etiqueta donde (evidentemente) irá el navegador de nuestra web.