La estructura de la información en una página web incluye muchos detalles y matices. Por ejemplo, no solo se puede especificar el tipo de elemento, sino también proporcionar información adicional que será procesada por el navegador. Pase el cursor sobre el siguiente texto:
Pase el cursor sobre esta línea de texto. Es mejor hacerlo desde una computadora
Al pasar el cursor sobre el elemento, aparece una pequeña ventana con el texto "Tooltip. Aquí se puede proporcionar información adicional". Este comportamiento se establece mediante atributos, que son construcciones especiales que pueden afectar la visualización de la información en la página. Cada etiqueta en HTML tiene varios atributos estándar que se escriben según el patrón atributo="valor", donde:
title.Ejemplo de estructura con tooltip:
<p title="Tooltip. Aquí se puede proporcionar información adicional">Pase el cursor sobre esta línea de texto. Es mejor hacerlo desde una computadora</p>
El atributo title se puede utilizar no solo en párrafos, sino en cualquier elemento de la página. Estos atributos se llaman globales, ya que no dependen del elemento. Por otro lado, existen atributos que son únicos para una o varias etiquetas. Por ejemplo, el atributo colspan, que indica la combinación de celdas en tablas. Su uso fuera de las tablas no tiene sentido.
Los atributos pueden afectar indirectamente la visualización de la información. Por ejemplo, al utilizar el lenguaje de estilos CSS, se encuentra el atributo class, cuya tarea es diferenciar elementos similares entre sí mediante el valor del atributo. Aprenderá sobre el trabajo con clases en el curso de CSS, pero por ahora es importante saber que este atributo no tiene ningún efecto en la visualización de la información en la página.
<p class="lead">Párrafo con la clase lead</p>
<p class="mega-paragraph">Párrafo con la clase mega-paragraph</p>
Una etiqueta puede tener varios atributos especificados al mismo tiempo. Se escriben en secuencia y el orden no importa:
<p class="text-center" title="Este elemento tiene varios atributos">Párrafo con varios atributos</p>
En esta lección hemos aprendido el concepto de atributo y su escritura. Hemos estudiado los atributos title y class, y también hemos aprendido que los atributos pueden ser globales o únicos para los elementos HTML. Los atributos globales se pueden utilizar en cualquier etiqueta, mientras que los atributos únicos solo se aplican a etiquetas específicas.
Crea un párrafo con un texto arbitrario y un tooltip. Asígnale la clase hexlet.
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.
Puedes encontrar todos los atributos globales en MDN Web Docs