Cómo colocar un encabezado en HTML (pasos y ejemplo)

Descarga nuestras plantillas gratuitas de código HTML, CSS y JavaScript
Claudio Frisoli
Claudio Frisoli

Actualizado:

Publicado:

En tu trayectoria como programador, es probable que hayas notado que el encabezado en HTML, definido mediante la etiqueta , es una parte fundamental de cualquier página web. Aunque no es visible directamente en el navegador, desempeña un papel crucial al proporcionar información y configuración que afecta a la página en su conjunto.

Encabezado en HTML

El encabezado HTML es como el cerebro de una página web. Contiene elementos y metadatos que ayudan a los motores de búsqueda a indexar y entender el contenido, además de brindar instrucciones al navegador sobre cómo interpretar y mostrar la página correctamente.

Al aprovechar al máximo esta sección, podemos mejorar sustancialmente la experiencia del usuario y la visibilidad de nuestro sitio web. En este artículo, exploraremos a fondo la importancia y la utilidad del encabezado en HTML.

<< [Plantilla gratuita] >> Plantillas de códigos de programación para HTML.

Elementos de un encabezado HTML

<meta>

Se utiliza para especificar metadatos sobre la página, como el conjunto de caracteres utilizado, la descripción de la página, palabras clave relevantes y otros detalles importantes para los motores de búsqueda y navegadores web.

<title>

Define el título de la página web que aparece en la barra de título del navegador y se utiliza como el título predeterminado cuando los usuarios guardan la página en sus marcadores.

<link>

Se utiliza para vincular hojas de estilo externas (CSS) y otros recursos, como iconos de favicon, al documento HTML.

<script>

Se usa para incluir scripts de JavaScript u otros lenguajes de programación en la página web.

<base>

Define una URL base para todas las URL relativas dentro de la página.

Existen otros elementos específicos según las necesidades, como etiquetas para enlaces a archivos CSS, favicons, etiquetas OpenGraph para compartir en redes sociales, etc.

Cómo se pone un encabezado en HTML

Para poner un encabezado en HTML, debes seguir estos pasos básicos:

1. Abre un editor de texto

Utiliza un editor de texto simple, como Notepad en Windows, TextEdit en macOS o cualquier editor de código como Visual Studio Code, Sublime Text, Atom, o cualquier otro de tu elección.

2. Inicia un documento HTML

Comienza tu documento HTML con la declaración DOCTYPE y la etiqueta <html> para definir que estás creando una página web.


<!DOCTYPE html>
<html>

3. Crea el encabezado <head>

Agrega la etiqueta <head> dentro de la etiqueta <html>. El encabezado es donde configurarás la información y metadatos de la página, incluyendo el título.


<head>
    <!-- Metadatos y configuración van aquí -->
</head>

4. Define el título de la página

Utiliza la etiqueta <title> dentro del encabezado para especificar el título de tu página web. Este título se mostrará en la barra de título del navegador y es importante para el SEO (la optimización para motores de búsqueda).


<head>
    <title>Título de la página</title>
    <!-- Otros metadatos y enlaces van aquí -->
</head>

5. Agrega otros elementos al encabezado según sea necesario

Dentro del encabezado, puedes incluir otros elementos como metadatos, enlaces a hojas de estilo (CSS), enlaces a scripts, etiquetas <meta>, etc., según las necesidades de tu página web.

6. Cierre el encabezado y abre el cuerpo <body>

Después de definir el encabezado, cierra la etiqueta </head> y abre la etiqueta <body>. El cuerpo es donde colocarás el contenido visible de tu página web, como texto, imágenes y otros elementos.


<head>
    <!-- Metadatos y enlaces van aquí -->
</head>
<body>
    <!-- Contenido visible de la página va aquí -->
</body>

7. Cierra el documento HTML

Finaliza tu documento HTML cerrando las etiquetas <body> y <html>.


</body>
</html>

Asimismo, agrega contenido al cuerpo: en el área del <body> puedes agregar el contenido de tu página, como nuevos encabezados, párrafos, imágenes, enlaces, listas, tablas y otros elementos HTML.

Ejemplo de cómo colocar un encabezado HTML


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Aprende cómo usar encabezados en HTML">
    <meta name="keywords" content="HTML, encabezados, importancia de encabezados">
    <title>Cómo poner encabezados HTML</title>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
    <h1>Importancia de los encabezados en HTML</h1>
    <p>Los encabezados son elementos esenciales en la creación de páginas web. Sirven para estructurar y organizar el contenido de tu página, proporcionando un esquema lógico y facilitando la comprensión tanto para los visitantes como para los motores de búsqueda.</p>

    <p>Los encabezados, que se definen con las etiquetas <code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;h4&gt;</code>, <code>&lt;h5&gt;</code> y <code>&lt;h6&gt;</code>, se utilizan para jerarquizar el contenido. El <code>&lt;h1&gt;</code> generalmente se usa para el título principal de la página, mientras que los encabezados más pequeños se utilizan para subsecciones.</p>

    <p>Además de mejorar la legibilidad y la organización de tu contenido, los encabezados también tienen un impacto en la optimización de motores de búsqueda (SEO). Los motores de búsqueda utilizan los encabezados para entender la estructura y relevancia de tu página, lo que puede afectar tu posición en los resultados de búsqueda.</p>

    <p>En resumen, utilizar encabezados apropiados en tu código HTML es esencial para crear páginas web bien estructuradas, fáciles de leer y amigables para SEO.</p>

    <!-- Agrega más contenido según sea necesario -->

    <footer>
        <p>&copy; 2023 Mi Sitio Web</p>
    </footer>
</body>
</html>

Desglosaré el código línea por línea:

  • <!DOCTYPE html>: esta línea declara el tipo de documento que estás utilizando, que es HTML5 en este caso.
  • <html>: aquí comienza el elemento raíz <html>, que envuelve todo el contenido de la página.
  • <head>: dentro del elemento <html>, el <head> es el encabezado de la página. Contiene metadatos y configuraciones para la página, como el conjunto de caracteres, descripción, palabras clave y el título de la página.
  • <meta charset="UTF-8">: esta línea establece el conjunto de caracteres utilizado en la página como UTF-8, que es un estándar ampliamente aceptado que admite caracteres especiales y múltiples idiomas.
  • <meta name="description" content="Aprende cómo usar encabezados en HTML">: aquí se define una etiqueta de metadatos para la descripción de la página, que puede ser utilizada por motores de búsqueda y navegadores para proporcionar información sobre el contenido de la página.
  • <meta name="keywords" content="HTML, encabezados, importancia de encabezados">: esta línea establece palabras clave relacionadas con el contenido de la página, lo cual también puede ser útil para el SEO.
  • <title>Cómo poner encabezados HTML</title>: define el título de la página web, que aparecerá en la barra de título del navegador.
  • <link rel="stylesheet" type="text/css" href="estilos.css">: vincula una hoja de estilo externa llamada "estilos.css" a la página. Esta hoja de estilo se utilizará para aplicar estilos CSS a los elementos de la página.
  • <body>: después del encabezado, el <body> es donde comienza el contenido visible de la página. Aquí es donde puedes agregar texto, imágenes y otros elementos.
  • <h1>Importancia de los encabezados en HTML</h1>: se define un encabezado principal <h1> que describe el tema principal de la página.
  • <p>...<p>: se utilizan etiquetas HTML de párrafo <p> para agregar texto explicativo que resalta la importancia de los encabezados en HTML.
  • <footer>...</footer>: en el pie de página (<footer>), se incluye una declaración de copyright.

Ejemplo de encabezado HTML y cuerpo

Ahora sabes cómo crear tu encabezado HTML. Comienza tu propia página web gratuita y haz que despeguen tus proyectos digitales.

New Call-to-action
Temas: HTML

Artículos relacionados

Pop up para DESCARGA NUESTRAS PLANTILLAS GRATUITAS DE CÓDIGO HTML, CSS Y JAVASCRIPT PLANTILLAS DE PROGRAMACIÓN GRATUITAS

Descarga nuestras plantillas gratuitas de código HTML, CSS y JavaScript, y obtén acceso a repositorios de GitHub.

    Pop up para DESCARGA NUESTRAS PLANTILLAS GRATUITAS DE CÓDIGO HTML, CSS Y JAVASCRIPT PLANTILLAS DE PROGRAMACIÓN GRATUITAS

    CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

    START FREE OR GET A DEMO