El lenguaje HTML incluye varios elementos. Estos incluyen los de uso común componentes del sitio web como párrafos, títulos, enlaces e imágenes. También hay una serie de elementos más nuevos que se introdujeron con HTML5, incluidos el encabezado, la navegación, el pie de página y más. Todos estos elementos HTML se utilizan para crear la estructura de un documento y darle significado. Para agregar aún más significado a los elementos, puede darles atributos.
Una etiqueta de apertura HTML básica comienza con el carácter <. a esto le sigue el nombre de la etiqueta y finalmente completa con car>. Por ejemplo, la etiqueta de párrafo de apertura se escribiría así:
Para agregar un atributo a su Etiqueta HTML, primero ponga un espacio después del nombre de la etiqueta (en este caso, es la "p"). Luego, agregaría el nombre del atributo que desea usar seguido de un signo igual. Finalmente, el valor del atributo se colocaría entre comillas. Por ejemplo:
Las etiquetas pueden tener varios atributos. Separaría cada atributo de los demás con un espacio.
Elementos con atributos obligatorios
Algunos elementos HTML realmente requieren atributos si desea que funcionen según lo previsto. El elemento de imagen y el elemento de enlace son dos ejemplos de esto.
La elemento de imagen requiere el atributo "src". Ese atributo le dice al navegador qué imagen desea usar en esa ubicación. El valor del atributo sería una ruta de archivo a la imagen. Por ejemplo:
Notará que agregamos otro atributo a este elemento, el "alt" o atributo de texto alternativo. Técnicamente, este no es un atributo obligatorio para las imágenes, pero es una buena práctica incluir siempre este contenido por motivos de accesibilidad. El texto que aparece en el valor del atributo alt es lo que se mostrará si un la imagen no se carga por alguna razón.
Otro elemento que requiere atributos específicos es el ancla o etiqueta de enlace. Este elemento debe incluir el atributo "href", que significa "referencia de hipertexto". Esa es una forma elegante de decir "donde este vínculo debe ir ". Al igual que el elemento de imagen necesita saber qué imagen cargar, la etiqueta de vínculo debe saber dónde debería a. Así es como puede verse una etiqueta de enlace:
Ese enlace ahora llevaría a una persona al sitio web especificado en el valor de un atributo. En este caso, es la página principal de Dotdash.
Atributos como enlaces CSS
Otro uso de los atributos es cuando se utilizan como "ganchos" para Estilos CSS. Porque los estándares web dictan que debe mantener la estructura de su página (HTML) separada de sus estilos (CSS), utiliza estos enlaces de atributos en CSS para dictar cómo se mostrará la página estructurada en la web. navegador. Por ejemplo, podría tener este marcado en su documento HTML.
Si quisiera que esa división tuviera un color de fondo negro (# 000) y un tamaño de fuente de 1.5em, agregaría esto a su CSS:
.featured {color de fondo: # 000; tamaño de fuente: 1.5em;}
El atributo de clase "destacado" actúa como un gancho que usamos en el CSS para aplicar estilos a esa área. También podríamos usar un atributo de ID aquí si quisiéramos. Tanto las clases como los ID son atributos universales, lo que significa que se pueden agregar a cualquier elemento. También pueden dirigirse a ambos con estilos CSS específicos para determinar la apariencia visual de ese elemento.
Respecto a Javascript
Finalmente, el uso de atributos en ciertos elementos HTML también es algo que puede usar en Javascript. Si tiene un script que busca un elemento con un atributo de ID específico, ese es otro uso de esta pieza común del lenguaje HTML.