Conceptos de HTML: elementos y atributos
Una etiqueta delimita una parte del documento; un atributo añade información a esa etiqueta. Esta lección ocupa una dirección histórica de temario, pero su explicación y sus ejemplos son nuevos. Puedes conservar la dirección exacta y estudiar un concepto actual sin presentar el contenido antiguo como si siguiera aquí.
Distingue contenido, elemento y atributo
En <p>Hola</p>, la palabra Hola es el contenido y el elemento p marca que se trata de un párrafo. En <a href="/tutorial-html/">Tutorial</a>, el contenido visible es Tutorial y el atributo href indica el destino del enlace. El navegador necesita esa dirección para navegar. Cambiar el texto no cambia automáticamente el destino, y cambiar el destino no cambia el texto que lee la persona.
Algunos elementos, como img, no encierran texto entre una apertura y un cierre. Su atributo src señala el recurso y alt ofrece una alternativa textual cuando corresponde. Una descripción útil explica qué información aporta la imagen en su contexto. Si la imagen solo repite un adorno que ya no añade contenido, el texto alternativo puede estar vacío. Esa decisión depende del propósito, no de una regla de poner siempre el nombre del archivo.
Prueba dos enlaces y dos imágenes
<a href="/que-es-html/">Entender HTML</a> <a>Texto sin destino</a> <img src="images/esquema.png" alt="Esquema de una página con encabezado y dos secciones"> <img src="images/separador.png" alt="">
Copia los ejemplos en una página de práctica. El primer enlace tiene un destino que el navegador puede abrir; el segundo conserva texto, pero no lleva a ningún sitio. La primera imagen comunica una estructura y necesita una descripción; la segunda puede ser decorativa. Sustituye los nombres de archivo por imágenes tuyas y comprueba la ruta desde la ubicación del HTML. Si un recurso no aparece, no cambies al azar la etiqueta: busca primero la carpeta y el nombre exactos.
Corrige un atributo sin romper la etiqueta
Escribe un enlace cuyo destino sea una sección del mismo documento, por ejemplo href="#ejercicio", y añade id="ejercicio" al encabezado de destino. Prueba una versión con un carácter diferente y observa que deja de coincidir. Luego restaura la coincidencia. El ejercicio demuestra que los valores de atributo tienen una función precisa aunque no siempre se vean en la página.
Coloca los valores entre comillas, especialmente cuando contienen espacios u otros caracteres especiales. Usa nombres de atributo que respondan a la tarea: lang para indicar idioma, href para un destino y alt para texto alternativo. No añadas atributos solo porque aparecen en un ejemplo ajeno. Antes de seguir, señala en tu código dónde empieza y termina cada elemento y cuáles son los valores que cambiarías para modificar únicamente el destino, el idioma o la descripción.
En las herramientas de desarrollo puedes seleccionar un elemento y leer sus atributos sin modificar el archivo original. Compara esa vista con el código que guardaste. Si el navegador reparó una etiqueta incompleta, la estructura que muestra puede diferir de la que escribiste. Por eso conviene corregir el archivo y recargarlo, en vez de asumir que una página aparentemente visible es un documento bien formado. Haz la comprobación con un enlace y con una imagen.