HTML (HyperText Markup Language) es el lenguaje fundamental para estructurar y organizar el
contenido de las páginas web, como textos, imágenes, videos y enlaces, usando etiquetas para
definir su función y presentación, siendo la base sobre la cual navegadores interpretan y
muestran la información que vemos en internet, trabajando junto a CSS (estilo) y JavaScript
(interactividad) para crear sitios completos.
¿Qué es?
Lenguaje de Marcado: No es un lenguaje de programación, sino de marcado; usa
etiquetas (como <p> para párrafos o <img> para imágenes) para "marcar" o describir
el contenido y su estructura.
Fundamento de la Web: Es el esqueleto de cualquier página web, presente en todas
ellas.
¿Para qué sirve?
Estructurar Contenido:
Organiza y da significado a los elementos de una página: encabezados, listas, tablas, botones,
etc..
Crear Hipervínculos:
Permite enlazar páginas entre sí, formando la "red" de la World Wide Web.
Integrar Multimedia:
Incluye imágenes, videos y otros recursos.
Base para Diseño y Funcionalidad:
Define la estructura inicial, sobre la cual CSS añade el diseño visual y JavaScript la
interactividad.
En resumen: HTML le dice al navegador qué es cada cosa en una página (un título, un párrafo,
una imagen) para que pueda mostrarla correctamente, siendo esencial para la creación y
visualización de cualquier sitio web.
Las etiquetas (tags) en HTML son palabras clave encerradas en corchetes angulares
(ej. <p>, <h1>) que definen la estructura y tipo de contenido, marcando dónde inicia y termina
un elemento. Los atributos son modificadores que se colocan dentro de la etiqueta de
apertura para proporcionar información adicional, comportamientos o propiedades específicas
(ej. src, href, class).
Puntos Clave:
Etiquetas: Actúan como etiquetas contenedoras (ej. <div> para
contenedores, <img> para imágenes, <a> para enlaces). La mayoría tiene
apertura <tag> y cierre </tag>.
Atributos: Siempre se incluyen dentro de la etiqueta de apertura y generalmente
vienen en pares de nombre="valor". Ejemplo: <a
href="[Link] (donde href es el atributo).
Estructura: Un elemento completo consta de: Etiqueta de apertura + Atributos +
Contenido + Etiqueta de cierre.
Ejemplo Práctico: <img src="[Link]" alt="Descripción de la foto">
o Etiqueta: <img>
o Atributos: src (fuente de la imagen) y alt (texto alternativo).
Los atributos pueden ser globales (aplicables a cualquier etiqueta, como class o id) o
específicos de un elemento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de la página</title>
</head>
<body>
<h1>Hola Mundo</h1>
<p>Este es el contenido visible.</p>
</body>
</html>Anatomía de una Etiqueta HTML
Apertura: Indica el inicio del elemento, ej. <p>.
Contenido: El texto o elemento que se mostrará.
Cierre: Similar a la apertura pero con una barra diagonal </>, ej. </p>.
Ejemplos Funcionales
Tipo Etiqueta Ejemplo de Código Función
Párrafo <p> <p>Texto del párrafo.</p> Define un párrafo.
Título <h1> a <h6> <h1>Título Principal</h1> Títulos jerárquicos (H1 principal, H6
menor).
Divisió <div> <div>Contenido agrupado</div> Agrupa bloques de contenido.
n
Enlace <a> <a href="url">Enlace</a> Crea hipervínculos.
Imagen <img> <img src="[Link]" alt="desc"> Inserta imágenes (etiqueta
autocontenida).
Salto <br> Línea 1<br>Línea 2 Fuerza un salto de línea.
Negrita <strong> <strong>Texto Resalta texto en negrita.
importante</strong>
Las etiquetas HTML son comandos estructurales que indican al navegador cómo mostrar el
contenido. Se abren con <nombre> y se cierran con </nombre>, envolviendo el texto o
elemento, excepto las etiquetas autocerradas (como <br>). Son esenciales para definir títulos
(<h1>), párrafos (<p>), enlaces (<a>), imágenes (<img>) y contenedores (<div>).
Este video explica la estructura básica de las etiquetas HTML:
Miniatura de un video relacionado
52s
Simón Rivera
YouTube • 6 abr 2022
Ejemplos de Etiquetas HTML, Función y Cierre
La mayoría de las etiquetas funcionan en pares (apertura y cierre), mientras que otras son
"vacías" o autocerradas.
Etiqueta Función ¿Cómo se abre y cierra?
<h1> - <h6> Define títulos y subtítulos jerárquicos (1 es mayor, 6 menor).
<h1>Título</h1>
<p> Define un párrafo de texto. <p>Contenido del párrafo</p>
<a> Crea hiperenlaces (links) a otras páginas o secciones. <a href="url">Texto</a>
<img> Inserta imágenes en la web. <img src="[Link]" alt="descripción">
(Autocerrada)
<div> Agrupa bloques de contenido para estructurar. <div>...</div>
<br> Realiza un salto de línea. <br> o <br /> (Autocerrada)
<strong> Define texto importante (negrita). <strong>Texto</strong>
<ul> / <li> Crea listas no ordenadas (puntos) y sus elementos.
<ul><li>Elemento</li></ul>
<a> Define una sección de navegación. <nav>...</nav>
Cómo se abren y cierran (Anatomía)
Apertura: Se utiliza el signo menor que < seguido del nombre de la etiqueta y cierra con mayor
que >.
Ejemplo: <p>
Cierre: Es idéntico a la apertura, pero incluye una barra diagonal / antes del nombre de la
etiqueta.
Ejemplo: </p>
Etiquetas Autocerradas (Void Tags): No necesitan etiqueta de cierre porque no envuelven
contenido, como <img />, <br>, o <hr>.
¿Qué son las
En este video puedes ver c
etiquetas HTML?
Las "tags" HTML, o "etiquetas" HTML, son códigos utilizados para
"marcar" el texto de una página web, con el fin de dar instrucciones al
navegador sobre cómo mostrarlo.
Es decir, las etiquetas HTML son el lenguaje utilizado
para estructurar y definir el contenido en un documento HTML.
Estas etiquetas se encuentran en el HTML (o Lenguaje de Marcado de
Hipertexto) de cada página.
Cada etiqueta contiene instrucciones sencillas que indican al
navegador cómo dar formato al texto y a definir los diversos
elementos de la página web. Al aplicar estas etiquetas de marcado a
los diferentes elementos del texto, se indica al navegador cómo
mostrarlos al usuario, lo que permite crear páginas web estructuradas
y con un diseño coherente.
¿Para que sirven las etiquetas
HTML?
Por ejemplo, puedes utilizar etiquetas HTML para aplicar cursivas,
crear saltos de línea, insertar objetos multimedia, crear listas con
viñetas o para definir diferentes tipos de contenido en una página
web, como encabezados, párrafos, imágenes, enlaces, formularios y
mucho más.
En resumen, las etiquetas HTML son esenciales para diseñar y
organizar el contenido de una página web de manera efectiva y clara.
¿Cómo leen las páginas web
las tags HTML?
Los servidores leen el código HTML para entender y mostrar el
contenido. Leerá el HTML de arriba abajo, de forma muy parecida a
como estás leyendo esta guía.
Puedes utilizar tantas o tan pocas etiquetas como quieras para dar
formato al contenido. Sin embargo, hay algunas reglas y tags HTML
esenciales que deberás seguir.
¿Cómo se compone una
etiqueta en HTML?
Una tag HTML contiene tres partes:
1. Una etiqueta de apertura — esta empezará con un símbolo < >.
2. Contenido — unas breves instrucciones sobre cómo mostrar el
elemento en la página.
3. Una etiqueta de cierre — cerrará con un símbolo </ >.
Sin embargo, algunas tags HTML pueden no cerrarse. Esto significa
que la etiqueta HTML no necesita cerrarse con un </ >. Normalmente,
usarás etiquetas no cerradas para metadatos o saltos de línea.
¿Cuál es la diferencia entre
atributo, elemento y etiqueta
HTML?
Pese a que esta guía trata sobre las tags HTML, es importante
conocer la diferencia entre etiquetas, elementos y atributos HTML.
Aunque los términos "atributo", "elemento" y "etiqueta" suelen
utilizarse indistintamente, hay diferencias sutiles entre ellos.
Un elemento HTML es un elemento de la página; forma parte del
contenido de la misma. Una tag HTML afecta a la apariencia de un
elemento HTML. Un atributo HTML describe las características de ese
elemento.
Aquí tienes un desglose de cómo funcionan juntos los elementos, las
etiquetas y los atributos:
Las etiquetas HTML contienen instrucciones para definir un
elemento HTML específico e indican cómo mostrarlo en la
página. Cada etiqueta HTML comienza con un símbolo de menor
que "<" y termina con un símbolo de mayor que ">",
y preceden y siguen al contenido del elemento. Por ejemplo, la
etiqueta <p> define un párrafo en HTML.
Un elemento HTML es un conjunto completo de etiquetas y
contenido que define un elemento específico en una página
web. Es decir, los elementos HTML son el contenido de la
página intercalado entre las etiquetas. Por ejemplo, el elemento
<p> incluiría tanto la etiqueta de apertura <p> como el
contenido del párrafo, así como la etiqueta de cierre </p>.
Los atributos HTML proporcionan información adicional a los
elementos HTML sobre cómo se debe procesar o mostrar el
contenido. Los atributos se agregan a las etiquetas HTML
utilizando la sintaxis de "nombre de atributo=valor". Por
ejemplo, la etiqueta <img> puede incluir un atributo src que
especifique la ubicación de la imagen en la página, o la etiqueta
<html> puede incluir un atributo lang que especifique el idioma
y país: <html lang="en-US">.
Etiquetas Elementos Atributos
Tipo HTML HTML HTML
Contiene Instrucciones El contenido Información
sobre cómo de la página adicional sobre
mostrar un que debe los elementos
elemento en la mostrarse. de la página.
página.
Aparienci Empiezan por < Intercalado Aparecen en la
a y terminan por en una etiqueta inicial
>. etiqueta antes de
HTML. cualquier
elemento.
En resumen, las etiquetas HTML son los bloques de construcción
básicos de una página web, los elementos son los bloques completos
que incluyen etiquetas y contenido, y los atributos se utilizan para
proporcionar información adicional sobre cómo procesar o mostrar los
elementos.
¿Qué son las etiquetas HTML
básicas?
Las etiquetas HTML básicas son las etiquetas más comúnmente
utilizadas en la estructura de una página web.
Estas etiquetas básicas suelen conformar la estructura básica de una
página web y son esenciales para el desarrollo web. Sin embargo, hay
muchas otras etiquetas HTML más avanzadas y especializadas que se
pueden utilizar para diseñar páginas web más complejas. Te hablo de
ellas más adelante.
¿Cuáles son las etiquetas
HTML básicas?
Las etiquetas HTML más utilizadas son:
<!DOCTYPE>: Se utiliza para especificar la versión de HTML
que se está utilizando en la página.
<html>: Define el inicio y el final de la página web.
<head>: Define la sección de encabezado de la página, donde
se incluyen elementos como el título de la página,
metaetiquetas, scripts, entre otros.
<title>: Define el título de la página web que aparece en la
pestaña del navegador.
<body>: Define la sección del cuerpo de la página web, donde
se incluyen todos los elementos que se mostrarán en la página.
<h1> a <h6>: Define los encabezados o títulos de diferentes
niveles de jerarquía en la página web. El uso de esta etiqueta
formateará cualquier texto entre la etiqueta <h> de apertura y
la etiqueta </h> de cierre como un Título o subtítulo. Por
ejemplo, en <h>Etiqueta de encabezamiento</h2>, <h2> y
</h2> serían las etiquetas HTML y "Etiqueta de
encabezamiento" es el elemento HTML, es decir, el
encabezamiento de la página.
<a>: Define un enlace que el usuario puede hacer clic para ir a
otra página web o a una sección diferente de la misma página.
<img>: Define una imagen que se mostrará en la página web.
<p>Etiqueta de párrafo</p>: Define un párrafo de texto.
Las etiquetas <p> y </p> son etiquetas HTML y la "Etiqueta de
párrafo" es el elemento HTML, es decir, el texto de la
página. Esta etiqueta formatea cualquier texto entre la etiqueta
<p> de apertura y la etiqueta </p> de cierre como un párrafo
estándar o texto de cuerpo principal.
<b>Etiqueta de negrita</b>: Esta etiqueta dará formato de
negrita a cualquier texto que se encuentre entre la etiqueta
<b> de apertura y la etiqueta </b> de cierre. Aquí, <b> y
</b> son las etiquetas HTML y la "etiqueta de negrita" es el
elemento HTML, es decir, el texto de la página.
<i>Etiqueta de cursiva</i>: Esta etiqueta formateará como
cursiva cualquier texto entre la etiqueta de apertura <i> y la
etiqueta de cierre </i>. Aquí, <i> y </i> son las etiquetas
HTML y "Etiqueta cursiva" es el elemento HTML (el texto de la
página).
<u>Etiqueta de subrayado</u>: Esta etiqueta formateará
cualquier texto entre la etiqueta <u> de apertura y la etiqueta
</u> de cierre como subrayado. Aquí, <u> y </u> son las
etiquetas HTML y "Etiqueta de subrayado" es el elemento HTML,
es decir, el texto de la página.
Listado de etiquetas
HTML comunes
Hay casi 100 tipos diferentes de tags HTML que puedes utilizar en tus
páginas. Aquí tienes una lista de las etiquetas HTML más comunes:
Etiqueta Tipo Qué es
<p> Etiquetas de Párrafo
texto HTML
<h1> Etiquetas de Título 1
texto HTML
<h2> Etiquetas de Título 2
texto HTML
<h3> Etiquetas de Título 3
texto HTML
<h4> Etiquetas de Título 4
texto HTML
<h5> Etiquetas de Título 5
texto HTML
<h6> Etiquetas de Título 6
texto HTML
<strong> Etiquetas de Strong
texto HTML
<em> Etiquetas de Énfasis
texto HTML
<abbr> Etiquetas de Abreviatura
texto HTML
<address> Etiquetas de Información de contacto
texto HTML
<bdo> Etiquetas de Anular la dirección actual del
texto HTML texto
<blockquot Etiquetas de Contenido de otra fuente
e> texto HTML
<cite> Etiquetas de Título del libro, trabajo o web
texto HTML
<q> Etiquetas de Cita online
texto HTML
<code> Etiquetas de Visualizar una parte del código
texto HTML de programación
<ins> Etiquetas de Texto insertado
texto HTML
<del> Etiquetas de Texto borrado del documento
texto HTML
<dfn> Etiquetas de Término definido dentro de una
texto HTML frase
<kbd> Etiquetas de Entrada del teclado
texto HTML
<pre> Etiquetas de Texto preformateado
texto HTML
<samp> Etiquetas de Muestra de salida de un
texto HTML programa informático
<var> Etiquetas de Nombre de variable utilizado en
texto HTML contexto matemático o de
programación
<br> Etiquetas de Salto de línea sencillo
texto HTML
<div> Etiquetas de División
texto HTML
<a> Etiquetas de Etiqueta de anclaje de un enlace
enlace HTML
<base> Etiquetas de Url base para todas las Url
enlace HTML relativas dentro del documento
<img> Etiquetas Imagen
HTML de
imagen y
objeto
<area> Etiquetas Área de un mapa de imagen
HTML de
imagen y
objeto
<map> Etiquetas Mapa de imagen
HTML de
imagen y
objeto
<param> Etiquetas Parámetro para un elemento
HTML de <Objeto>
imagen y
objeto
<object> Etiquetas Insertar un objeto
HTML de
imagen y
objeto
<ul> Etiquetas de Lista desordenada
lista HTML
<ol> Etiquetas de Lista ordenada
lista HTML
<li> Etiquetas de Lista
lista HTML
<dl> Etiquetas de Lista de descripciones
lista HTML
<dt> Etiquetas de Término en la lista de
lista HTML descripciones
<dd> Etiquetas de Definición/Descripción de un
lista HTML término en la lista de
descripciones
ómo se aplican las etiquetas de texto más c