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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70769{{"Títulos HTML de varios niveles"}} html/head_elems -.-> lab-70769{{"Títulos HTML de varios niveles"}} html/text_head -.-> lab-70769{{"Títulos HTML de varios niveles"}} html/doc_flow -.-> lab-70769{{"Títulos HTML de varios niveles"}} html/inter_elems -.-> lab-70769{{"Títulos HTML de varios niveles"}} end

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

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>

Crear la sección

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.

Agrupar encabezados con `<hgroup>`

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