Elementos en la cabecera en HTML

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

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]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!