Elementos en la cabecera en HTML

Autor: | Última modificación: 4 de mayo de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

Existen dos secciones primordiales en la estructura de una página web en HTML: el <body>(cuerpo o contenido) y el <head> (cabecera). En este artículo, veremos cuáles son los elementos en la cabecera en HTML más usados.

Elementos en la cabecera en HTML

Para empezar, debes saber que el <head> es la parte que no vemos al navegar, esa que está oculta y solo es vista e interpretada por el navegador. Aunque tiene hay una excepción, la etiqueta <title>.

El primer elemento importante en la cabecera es el título de la página. Dentro de esta etiqueta ponemos el nombre de todo el documento HTML, que será el de nuestra página.

<!DOCTYPE html>
<html>
  <head>
    <title>"Titulo de mi pagina web"</title>
  </head>

Cabe señalar que existe una confusión generalizada en los programadores novatos y es pensar que la etiqueta <title> y el encabezada <h1> son exactamente lo mismo. Craso error. Ambos son totalmente distintos. El elemento <title> es un metadato de todo el documento HTML y el <h1> es un encabezado de contenido.

Elementos de codificación

Existe otra etiqueta que se usa en la cabecera en HTML y es el elemento <meta>. Con este elemento definimos qué tipo de codificación de caracteres debe usarse en la página. Para el siguiente ejemplo, usamos la codificación más usada, utf-8.

<meta charset="utf-8">

Esa sería la línea de código y así se vería dentro del <head>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>"Titulo de mi pagina web"</title>
  </head>

Elementos de autor y contenido

Otro forma de utilizar la etiqueta <meta> es para especificar el autor y una descripción que incluya las palabras clave de nuestra web. Veamos primero el ejemplo y luego la explicación:

<meta name="Autor" content="KeepCoding">
<meta name="descrición" content="Fórmate a nivel avanzado con nuestros Bootcamps en Desarrollo Web, Mobile, Big Data, DevOps, Ciberseguridad, Marketing y programación desde Cero.">

En la primera línea del código, se especifica el autor de la pagina web; en la segunda línea, se da una metadescripción de la página web. Si analizas la estructura, verás que se usaron dos atributos: name y content.

El atributo name especifica qué tipo de metadato vamos a usar y el content expone el contenido o la información del metadato.

Más sobre HTML

Los elementos en la cabecera en HTML contienen metadatos y descripciones muy importantes para que los navegadores entiendan de qué trata nuestra página web. Adicional a esto, son muy importantes las etiquetas y palabras claves en la cabecera a la hora de mejorar el SEO. Si quieres aprender cómo crear una cabecera en HTML como todo un profesional, te recomendamos inscribirte en este curso Fundamentos de HTML y CSS, con el que no tardarás en dominar todos estos elementos.

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

La IA no te quitará el trabajo, lo hará quien sepa usarla

Conviértete en Desarrollador Web con el único Bootcamp que además te formará en Inteligencia Artificial Generativa para potenciar tu perfil.