Elementos en la cabecera en HTML

Contenido del Bootcamp Dirigido por: | Última modificación: 27 de febrero de 2024 | Tiempo de Lectura: 2 minutos

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 Curso de Desarrollo Web con HTML5 y CSS, con el que no tardarás en dominar todos estos elementos.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado