img

Glosario Técnico de HTML con términos y explicaciones detalladas.

Diseñada para servir como referencia en un curso de HTML, CSS y JavaScript.

DOCTYPE

Declaración del tipo de documento
Especifica la versión de HTML que se utiliza en la página. Es fundamental para asegurar la correcta interpretación del código por parte del navegador y evitar errores de renderizado.

<!DOCTYPE html> (HTML5)

La declaración DOCTYPE debe ser la primera línea del documento HTML.

html

Elemento raíz del documento
Contiene todo el contenido de la página HTML. Debe ser el primer y último elemento en el documento.

El elemento html puede tener el atributo lang para especificar el idioma del contenido (<html lang="es">).

head

Encabezado del documento
Contiene metadatos, enlaces a hojas de estilo, scripts y otra información no visible directamente en la página, pero esencial para el funcionamiento, la optimización y la accesibilidad.

El elemento head debe contener el elemento title.

title

Título de la página
Define el título que se muestra en la pestaña del navegador, en los resultados de búsqueda y en las redes sociales al compartir la página. Es importante para el SEO y la experiencia del usuario.

<title>Mi página web</title>

El título debe ser descriptivo y conciso.

link

Enlace a hojas de estilo
Enlaza hojas de estilo externas (CSS) para dar formato y estilo a la página, separando la estructura del contenido de la presentación visual. Esto facilita el mantenimiento y la reutilización del código.

Se pueden enlazar varias hojas de estilo. El atributo rel especifica la relación entre el documento actual y el archivo enlazado.

style

Estilos en línea o internos
Permite agregar estilos CSS directamente en el documento HTML, ya sea dentro de la etiqueta <style> en el <head> o como atributo style en elementos individuales. Se recomienda usar hojas de estilo externas para un mejor mantenimiento y organización.

Los estilos en línea deben usarse con moderación, ya que dificultan el mantenimiento del código.

script

Scripts son fragmentos de código.
Permite incluir scripts (generalmente JavaScript) en la página para agregar interactividad, funcionalidad y dinamismo. Se pueden incluir directamente en el HTML o enlazar archivos externos.

Los scripts se pueden colocar en el <head> o en el <body>, dependiendo de cuándo se necesiten ejecutar. Es recomendable usar el atributo defer o async para optimizar la carga de la página.

body

Cuerpo del documento
Contiene el contenido visible de la página, como texto, imágenes, enlaces, etc. Es la parte principal del documento HTML.

El elemento `body` solo puede aparecer una vez en el documento.

h1 al h6

Encabezados
Definen los encabezados de la página, desde el más importante (h1) hasta el menos importante (h6). Se utilizan para estructurar el contenido, mejorar la accesibilidad y el SEO.

<h1>Título principal</h1>

Los encabezados deben usarse de forma jerárquica, sin saltarse niveles.

p

Párrafo
Define un párrafo de texto. Da un pequeño espacio de separacion al inicio y al final del texto.

<p>Este es un párrafo de ejemplo.</p>

Los párrafos se utilizan para agrupar texto en bloques.

a

Enlace
Crea un enlace a otra página, a una sección de la misma página, a un recurso externo o a un correo electrónico.

<a href="https://www.ejemplo.com" target="_blank">Enlace a ejemplo.com</a>

El atributo href especifica la URL del enlace. El atributo target="_blank" se puede usar para abrir el enlace en una nueva pestaña.

img

Imagen
Inserta una imagen en la página. Requiere el atributo src para especificar la ruta de la imagen y el atributo alt para una descripción alternativa (obligatorio para accesibilidad).

El atributo alt es importante para usuarios con discapacidad visual y para el SEO. Se pueden usar los atributos width y height para especificar las dimensiones de la imagen, pero es recomendable usar CSS para un mejor control.

ul

Lista no ordenada
Crea una lista de elementos sin un orden específico (usualmente con viñetas).

<ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul>

Los elementos de la lista se definen con la etiqueta li.

o

Lista ordenada
Crea una lista de elementos con un orden específico (usualmente con números).

<ol> <li>Elemento 1</li> <li>Elemento 2</li> </ol>

Los elementos de la lista se definen con la etiqueta li.

li

Elemento de lista
Define un elemento dentro de una lista (ya sea ul, u, ol,).

<li>Elemento de la lista</li>

Los elementos de lista pueden contener otros elementos, como párrafos, imágenes o enlaces.

dl, dt, dd

Lista de descripción
Se utiliza para crear listas de términos y sus definiciones.
dl define la lista,
dt define el término y
dd define la descripción.

<dl> <dt>HTML</dt> <dd>Lenguaje de marcado para crear páginas web.</dd> </dl>

Las listas de descripción son útiles para glosarios y diccionarios.

div

División
Crea un contenedor genérico para agrupar elementos y aplicar estilos. No tiene un significado semántico específico, pero es muy útil para la estructura y el diseño.

Los `div` se utilizan a menudo con CSS para crear diseños complejos.

span

Tramo
Crea un contenedor en línea para agrupar texto y aplicar estilos. Similar a div, pero se utiliza para elementos en línea (como palabras dentro de un párrafo).

<span>Este texto está dentro de un span.</span>

Los span se utilizan a menudo con CSS para aplicar estilos a palabras o frases específicas.

br

Salto de linea
Agrega un salto de linea para separar el objeto, imagen, texto o contenedor...
Para aumentar un espacio de separacion mas amplio utiliza propiedad en CSS (margin)

<br>

Es muy util para separar texto.

hr

Linea Horizontal
Crea una linea de separacion que se puede ajustar al porcentaje de longitud.
Para dar estilos mas avanzados usar propiedades en CSS.

<hr>

Las lines horizontales pueden ser usadas para separar dos parrafos.

form

Formulario
Crea un formulario para que el usuario introduzca datos, que luego se pueden enviar a un servidor para su procesamiento.

Los formularios contienen elementos de entrada como input, textarea y select.

input

Campo de entrada
Define un campo para que el usuario introduzca datos. Hay varios tipos de input, como
text (para texto),
password (para contraseñas),
email (para direcciones de correo),
submit (para enviar el formulario),
radio (para opciones),
checkbox (para casillas de verificación),
file (para seleccionar archivos), etc.

Cada tipo de input tiene atributos específicos. El atributo name es importante para identificar el campo en el servidor.

textarea

Área de texto
Define un área de texto multilínea para que el usuario pueda escribir texto más largo.

Se pueden especificar las dimensiones del área de texto con los atributos rows y cols.

button

Botón
Crea un botón que puede realizar una acción al hacer clic. Se puede usar dentro de un formulario o con JavaScript para realizar acciones personalizadas.

<button type="submit">Enviar</button>

El atributo type especifica el tipo de botón (submit, reset o button).

select

Lista desplegable
Crea una lista desplegable de opciones para que el usuario seleccione una o varias.

<select name="pais"> <option value="es">España</option> <option value="mx">México</option> </select>

Los elementos de la lista desplegable se definen con la etiqueta option.

option

Opción de lista desplegable
Define una opción dentro de una lista desplegable (select).

<option value="es">España</option>

El atributo value especifica el valor que se enviará al servidor cuando el usuario selecciona esa opción.

Recuerda que este es solo un glosario básico. HTML tiene muchos más elementos y atributos que puedes explorar. ¡Te invito a seguir aprendiendo y experimentando!

📚 Volver a HTML5 desde Cero: Estructura y Etiquetas Semánticas

Etiquetas

Buscar en este blog