Hemos visto como es la estructura básica de una web, ahora vamos a comenzar a añadirle algo de contenido a nuestro documento, para ello utilizaremos dos nuevas etiquetas las cuales nos permitirán añadirle un título, y un encabezado.

La etiqueta title

El titulo de una página web se muestra en las pestañas de tu navegador, para añadir títulos a tus páginas web, se utiliza la etiqueta <title>, esta etiqueta va siempre en la cabecera del documento, es decir, entre las etiquetas <head></head> de apertura y cierre, para colocar el titulo solo debes añadir el título que desees entre las dos etiquetas <title></title>, tal como se muestra a continuación:

<!DOCTYPE html>
<html>
  <head> 
    <title>Aquí va el título de la página</title>
  </head>
  <body> 
  </body>
</html>

Las etiquetas h1, h2, h3, h4, h5 y h6

Ahora que ya sabemos colocar el título a nuestras páginas, vamos a ver que son los encabezados, estos son utilizados para añadir títulos o cabeceras en el documento, de ahí su nombre, y tienen mucha importancia para la semántica. Hay seis niveles de encabezados, siendo el más importante el de nivel uno y el menos importante el de nivel seis, segun la importancia el mismo navegador le da un tamaño a su fuente, siendo el mas grande tambien el de nivel uno y va reduciendose según sube el nivel hasta el seis.

Los encabezados son parte del código visible por el usuario, así que va entre las etiquetas <body>, excepto la etiqueta <title>, las demás etiquetas que muestren código de cara al usuario van entre las etiquetas <body>.

<!DOCTYPE html>
<html>
  <head> 
    <title>Aquí va el título de la página</title>
  </head>
  <body> 
    <h1>Esto es un encabezado de nivel 1</h1>
    <h2>Esto es un encabezado de nivel 2</h2>
    <h5>Esto es un encabezado de nivel 5</h5>
  </body>
</html>

Conforme vas programando el código se hace cada vez más grande, llegando incluso a miles de lineas en grandes proyectos, para no acabar perdido entre tanto código, en programación se utilizan comentarios entre el código, estos comentarios no son visibles al usuario, solo sirven para el programador, otra buena práctica de programación es acostumbrarse a comentar el código, ya que además de servir para orientarse entre tanto código, también será mas facil si trabajas en equipo con otros programadores. La manera de añadir un comentario en HTML es la siguiente:
<!-- Esto es un comentario -->
<!DOCTYPE html>
<html>
  <head> 
    <!-- Esto es un comentario -->
    <title>Aquí va el título de la página</title>
  </head>
  <body> 
    <!-- Esto es un comentario -->
    <h1>Esto es un encabezado de nivel 1</h1>
    <h2>Esto es un encabezado de nivel 2</h2>
    <h5>Esto es un encabezado de nivel 5</h5>
  </body>
</html>

Ejercicios

Escribe en la caja de texto un título para la pestaña del navegador en HTML con sus respectivas etiquetas de apertura y cierre.

<title>Título en la pestaña del navegador</title>

Escribe en la caja de texto un encabezado de nivel uno y añadele el texto Mi primer encabezado entre sus etiquetas.

<h1>Mi primer encabezado</h1>

Abre el editor de texto Sublime Text 3, crea un nuevo documento, escribe el código de la estructura básica de un documento html y añadele el título que desees, después crea un comentario justo debajo de la etiqueta <body>, a la que le seguirá un encabezado de de cada nivel, cuyo texto interior lo dejo a tu elección.

<!DOCTYPE html>
<html>
  <head> 
    <title>Título de la página</title>
  </head>
  <body> 
    <!-- Esto es un comentario -->
    <h1>Mi primer encabezado de nivel 1</h1>
    <h2>Mi primer encabezado de nivel 2</h2>
    <h3>Mi primer encabezado de nivel 3</h3>
    <h4>Mi primer encabezado de nivel 4</h4>
    <h5>Mi primer encabezado de nivel 5</h5>
    <h6>Mi primer encabezado de nivel 6</h6>
  </body>
</html>

Cuando hayas acabado guardalo en la carpeta raiz como pruebas.html.

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.