HTML
Tutorial HTML: Atributos
HTML atributos: cómo usarlos correctamente. Aprende a usar atributos en HTML de manera correcta con ejemplos prácticos y detallados.
Los atributos en HTML son una forma de proporcionar información adicional sobre los elementos HTML. Cada atributo está formado por un par clave-valor que amplía o detalla la funcionalidad del elemento que lo contiene. Los atributos son siempre especificados en la etiqueta de inicio del elemento.
Tipos de atributos
Algunos de los atributos más comunes son:
class
: se usa para especificar una o más clases para un elemento HTML. Las clases se usan para seleccionar elementos con CSS o JavaScript.id
: se usa para especificar un identificador único para un elemento HTML. No se deben tener dos elementos con el mismoid
en la misma página.style
: se usa para aplicar estilos CSS a un elemento específico.src
: se usa para especificar la fuente de un archivo incrustado. Comúnmente se usa en etiquetas como<img>
,<audio>
, y<video>
.href
: se usa para especificar el destino de un enlace en las etiquetas<a>
.alt
: se usa para especificar un texto alternativo para elementos de medios como<img>
.
Ejemplos de atributos
<!-- Ejemplo de uso del atributo 'class' -->
<div class="mi-clase">Este es un div con la clase 'mi-clase'</div>
<!-- Ejemplo de uso del atributo 'id' -->
<p id="mi-parrafo">Este es un párrafo con el id 'mi-parrafo'</p>
<!-- Ejemplo de uso del atributo 'style' -->
<h1 style="color:blue;">Este es un título con estilo aplicado directamente</h1>
<!-- Ejemplo de uso del atributo 'src' -->
<img src="mi-imagen.jpg" alt="Descripción de mi imagen">
<!-- Ejemplo de uso del atributo 'href' -->
<a href="https://www.ejemplo.com">Este es un enlace a ejemplo.com</a>
<!-- Ejemplo de uso del atributo 'alt' -->
<img src="mi-imagen.jpg" alt="Descripción de mi imagen">
Atributos globales
Además, existen los atributos globales, que son aquellos que pueden ser usados en cualquier elemento HTML. Algunos ejemplos de estos son:
class
id
style
title
data-*
(Atributos de datos personalizados)hidden
contenteditable
Estos atributos proporcionan una amplia gama de funcionalidades, desde cambiar el estilo de un elemento hasta ocultarlo o hacerlo editable.
Atributos booleanos
Algunos atributos son booleanos, lo que significa que sólo con incluir el nombre del atributo, este se considerará verdadero, independientemente de si se le asigna un valor o no. No necesitan tener un valor asignado, y si se les asigna cualquier valor, siempre se considerarán verdaderos. Ejemplos de estos atributos incluyen disabled
, required
, autofocus
, entre otros.
<!-- Ejemplo de uso del atributo booleano 'disabled' -->
<input type="text" disabled>
<!-- Ejemplo de uso del atributo booleano 'required' -->
<input type="text" required>
<!-- Ejemplo de uso del atributo booleano 'autofocus' -->
<input type="text" autofocus>
En resumen, los atributos en HTML son una herramienta esencial que permite personalizar los elementos HTML para satisfacer las necesidades del desarrollo web.
Ejercicios de esta lección Atributos
Evalúa tus conocimientos de esta lección Atributos con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Audio
Tablas
Formularios (form, input, select, textarea, button)
Tablas (table, tr, td, th)
Enlace
Video
Imágenes
Contraste y legibilidad
DOCTYPE
Atributos de elementos
Introducción a HTML
Metadatos
Imágenes vectoriales
Anidación de etiquetas
Encabezados
Compatibilidad con navegadores
Validación de HTML
Optimización de la carga de la página (Lazy loading)
Atributos de ARIA
Listas
Página web completa con Bootstrap
Párrafos
Uso de DOCTYPE
Etiquetas semánticas (article, section, header, footer, nav, aside)
Navegación por teclado
Etiquetas semánticas
Listas (ul, ol, li)
Estilos
Divisiones
Uso de atributos
Atributos
Comentarios
Incrustación de contenido (iframe)
Uso de elementos y etiquetas
Elementos y etiquetas
Formularios
Todas las lecciones de HTML
Accede a todas las lecciones de HTML y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Html
Introducción Y Entorno
Doctype
Sintaxis Y Estructura
Elementos Y Etiquetas
Sintaxis Y Estructura
Atributos
Sintaxis Y Estructura
Anidación De Etiquetas
Sintaxis Y Estructura
Comentarios
Sintaxis Y Estructura
Encabezados (H1-h6)
Textos Y Enlaces
Enlace (A)
Textos Y Enlaces
Párrafo (P)
Textos Y Enlaces
Listas (Ul, Ol, Li)
Textos Y Enlaces
Imagen (Img)
Textos Y Enlaces
División (Div)
Estructura De Página
Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)
Estructura De Página
Tablas (Table, Tr, Td, Th)
Estructura De Página
Formularios (Form, Input, Select, Textarea, Button)
Estructura De Página
Imágenes Vectoriales (Svg)
Elementos Multimedia
Incrustación De Contenido (Iframe)
Elementos Multimedia
Audio (Audio)
Elementos Multimedia
Video (Video)
Elementos Multimedia
Estilo Incorporado (Style)
Metadatos Y Estilización Incorporada
Metadatos (Meta, Title, Link)
Metadatos Y Estilización Incorporada
Atributos De Aria
Metadatos Y Estilización Incorporada
Navegación Por Teclado
Metadatos Y Estilización Incorporada
Contraste Y Legibilidad
Características Avanzadas Y Optimización
Validación De Html
Características Avanzadas Y Optimización
Compatibilidad Con Navegadores
Características Avanzadas Y Optimización
Optimización De La Carga De La Página (Lazy Loading)
Características Avanzadas Y Optimización
Certificados de superación de HTML
Supera todos los ejercicios de programación del curso de HTML y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender la importancia y función de los atributos en HTML.
- Conocer los atributos más comunes y su aplicación en diferentes elementos HTML.
- Familiarizarse con los atributos globales y su uso en cualquier elemento HTML.
- Reconocer los atributos booleanos y cómo afectan el comportamiento de los elementos en la página web.
- Aprender a personalizar elementos y mejorar la accesibilidad mediante la correcta utilización de atributos en HTML.