Dominando los títulos HTML: Un enfoque estructurado para el contenido web

Introducción

Los encabezados HTML son esenciales cuando se trata de crear una página web bien estructurada. Proporcionan una jerarquía y ayudan a los lectores a navegar rápidamente por un sitio web. En este laboratorio, aprenderás a crear los diferentes niveles de encabezados HTML utilizando las etiquetas <h1> a <h6>.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 90%. Ha recibido una tasa de reseñas positivas del 89% por parte de los estudiantes.

Agregar la plantilla HTML

El primer paso es crear un archivo HTML llamado index.html. Puedes utilizar cualquier editor de texto como Bloc de notas, TextEdit o Sublime Text.

Agrega la estructura básica de HTML a tu archivo index.html escribiendo <!DOCTYPE html> en la primera línea y las etiquetas <html></html> en la segunda y última líneas respectivamente.

<!doctype html>
<html>
  <head></head>
  <body></body>
</html>

Agregar la sección de encabezado

Dentro de las etiquetas <html>, crea la sección <head> utilizando la etiqueta <head>. Dentro de la sección <head>, agrega el título de tu página web utilizando la etiqueta <title>.

<!doctype html>
<html>
  <head>
    <title>Mi página web</title>
  </head>
</html>

Creando la sección del cuerpo

Crea la sección <body> utilizando las etiquetas <body></body>. Dentro de la sección <body>, agrega los diferentes niveles de encabezados utilizando las etiquetas <h1> a <h6>.

<!doctype html>
<html>
  <head>
    <title>Mi página web</title>
  </head>
  <body>
    <h1>Título principal</h1>
    <h2>Primer subtítulo</h2>
    <h3>Segundo subtítulo</h3>
    <h4>Tercer subtítulo</h4>
    <h5>Cuarto subtítulo</h5>
    <h6>Quinto subtítulo</h6>
  </body>
</html>

Asegúrate de reemplazar "Título principal" y los subtítulos con tus propios títulos relevantes.

Agrupando títulos utilizando

Puedes agrupar múltiples encabezados utilizando la etiqueta <hgroup>. En el ejemplo siguiente, estamos agrupando los últimos tres encabezados utilizando <hgroup>.

<!doctype html>
<html>
  <head>
    <title>Mi página web</title>
  </head>
  <body>
    <h1>Título principal</h1>
    <h2>Primer subtítulo</h2>
    <h3>Segundo subtítulo</h3>
    <h4>Tercer subtítulo</h4>
    <hgroup>
      <h4>Parte 1 del cuarto subtítulo</h4>
      <h5>Parte 2 del cuarto subtítulo</h5>
      <h6>Parte 3 del cuarto subtítulo</h6>
    </hgroup>
  </body>
</html>

Guarda tu archivo index.html y ábralo en un navegador web para ver los encabezados que has creado.

Resumen

En este laboratorio, has aprendido cómo crear encabezados HTML utilizando las etiquetas <h1> a <h6>. Los encabezados son esenciales para crear una página web bien estructurada y también ayudan con la optimización para motores de búsqueda. Recuerda que cada archivo HTML debe contener solo una etiqueta <h1>, para el encabezado principal de la página.

Títulos HTML de varios niveles