7 etiquetas básicas en HTML

Autor: | Última modificación: 5 de agosto de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post: ,

HTML es un lenguaje de programación básico, su objeto principal es darle estructura a los contenidos para páginas web. HTML cuenta con varias etiquetas que utiliza para decirle a los buscadores cómo debe mostrar el contenido que se encuentra en el código. En este post, te mostramos las etiquetas básicas en HTML y la importancia de algunas de ellas dentro del posicionamiento en buscadores. 

Etiquetas básicas en HTML

Hay 7 etiquetas en HTML que podríamos considerar como las etiquetas básicas y estas son:

<!DOCTYPE>

Realmente no se puede considerar una etiqueta; esta declaración en HTML es, más bien, información que se le da al buscador para que este lea el documento en el formato que es. El doctype le dice al buscador que esa página es HTML. Todos los documentos deben empezar con esta declaración. 

Para las páginas actuales, el código se verá de la siguiente manera:

<!DOCTYPE html>

<html>

La etiqueta <html> representa la raíz de los documentos. Este es el contenedor donde se deben poner todos los elementos dentro de la página web. Es importante que incluyas dentro de la etiqueta HTML el atributo lang, pues este declara el lenguaje de la página, lo cual es importante para ayudar a los buscadores. Se vería de la siguiente manera:

<html lang=”es”>

Dependiendo del idioma se debe cambiar dentro de las comillas. 

<head>

El elemento <head> es un contenedor para los metadatos del sitio. Lo que se ponga dentro del head no se mostrará a los usuarios, pues es información para el buscador. Usualmente se definen el título del documento, los estilos, código de otros idiomas, como JavaScript y CSS, y otros

Este elemento es importante para el SEO, pues es el lugar donde se agregan las metaetiquetas de redes sociales y etiquetas de contenido que pueden ayudarle al buscador a entender tu contenido de manera más sencilla. 

etiquetas importantes de SEO

<title>

Title es una de las etiquetas básicas en HTML más importantes para el SEO. Es la forma en la que se nombrará el contenido dentro de los buscadores.

Estos títulos tienen unos parámetros que se deben seguir. La recomendación general es que los títulos deben estar entre 50 y 60 caracteres y deben ser descriptivos para ayudar al buscador a evaluar y posicionar el contenido. 

El título solo se le puede poner texto y se muestra en la barra de búsqueda y en el buscador. Es una etiqueta que está en todos los documentos HTML y solo se puede tener una por documento. 

<body>

En esta etiqueta se define el cuerpo del documento. Dentro de esta etiqueta se ponen todos los contenidos que se van a ver del documento HTML, como encabezados, párrafos, imágenes, vídeos… Igual que la etiqueta title, solo se puede poner una vez dentro del documento. 

<h1> – <h6>

Esta es otra de las etiquetas básicas en HTML que tienen una importancia en el SEO y, en general, en la estructura de la página. 

Estas etiquetas están hechas para poner los encabezados de la página, desde el primer encabezado, que debería ser el título, y de ahí se puede poner hasta el encabezado 6, aunque rara vez llegarás a este nivel.

Es importante para el SEO y para la estructura del sitio nunca tener más de un h1 por página y no saltarte ningún encabezado. Siempre debes tener en cuenta la jerarquía y seguirla. 

codigo de encabezado
ejemplo de encabezado

<p>

La etiqueta p define los párrafos dentro del sitio web. Usualmente se ponen después de los encabezados, pero esto depende de la página y las necesidades de cada una. 

🔴 ¿Quieres entrar de lleno al Marketing Digital? 🔴

Descubre el Bootcamp en Marketing Digital y Análisis de Datos de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp en Marketing Digital y Análisis de Datos por una semana

Un ejemplo de cómo se vería el código y la página podría ser el siguiente:

codigo general básico de html

Esta sería la forma en la que se ve el código básico.

ejemplo de página web básica

Y así se vería el texto básico dentro de un sitio web. Puedes seguir escribiendo de esta manera, para agregar formatos puedes hacerlo directamente dentro del documento o puedes enlazar una hoja de estilos CSS que hará más fácil mejorar el formato y la forma en la que se ve la página. 

¿Cómo funcionan las etiquetas básicas en HTML?

Los elementos están definidos por una etiqueta base, contenido y una etiqueta de cierre.

<etiqueta>Contenido</etiqueta>

Viéndolo con una las etiquetas básicas de HTML que vimos anteriormente, <head> se vería de la siguiente manera:

<head>

    <meta charset=»UTF-8″>

    <meta http-equiv=»X-UA-Compatible» content=»IE=edge»>

    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

    <title>Ejemplo HTML</title>

</head>

Hay algunos elementos que no tienen contenido, por ejemplo <br>, que se utiliza para crear espacio entre contenidos. Estos no tienen una etiqueta de cierre. 

Aprende más con nosotros

Si te interesa conocer más sobre el SEO y como potenciar un sitio web en buscadores, te interesará nuestro Bootcamp de Marketing digital y Análisis de datos, donde aprenderás todos los temas importantes para que puedas empezar a crear tus propios proyectos. ¡Apúntate ahora!

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.