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.
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.](https://no-cache.hubspot.com/cta/default/53/bb3e5cad-5b6c-4956-a702-59b9da03864a.png){kind=small}
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><h1></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code> y <code><h6></code>, se utilizan para jerarquizar el contenido. El <code><h1></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>© 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.
Ahora sabes cómo crear tu encabezado HTML. Comienza tu propia página web gratuita y haz que despeguen tus proyectos digitales.
