Primeros pasos con HTML – Lección 8 – Atributos universales de las etiquetas
Ya hemos hablado sobre cómo diferentes etiquetas tienen sus propios atributos. Ahora es momento de hablar sobre los atributos comunes a todas las etiquetas. Vamos a ver los más populares de ellos.
Atributo id
El atributo id muestra un nombre único para una etiqueta, estos nombres no deben repetirse, ya que esto puede causar problemas al trabajar con jQuery o Javascript. Aquí hay algunos ejemplos del uso del atributo id:
... <ul id="menu1"> <li id="item1">lorem</li> <li id="item2">ipsum</li> <li id="item3">hola</li> <li id="item4">mundo</li> </ul> ... <div id="header"></div>
El atributo id puede ser usado para aplicar estilos CSS específicamente a cada bloque, menú, elemento del menú u otras etiquetas. Además, los id son utilizados en Javascript (jQuery).
Atributo class
El atributo class muestra a qué clase pertenece una etiqueta. Al igual que id, el atributo class se puede usar para aplicar estilos CSS solo a todas las etiquetas de esa clase a la vez. Es decir, si el id es único, una clase puede ser asignada a muchas etiquetas simultáneamente:
<ul id="menu1"> <li class="item">lorem</li> <li class="item">ipsum</li> <li class="item">hola</li> <li class="item">mundo</li> </ul>
Atributo style
El atributo style se utiliza para escribir estilos CSS directamente en la etiqueta. No es necesario entrar en demasiados detalles sobre este atributo por ahora; lo abordaremos a fondo en el tutorial de CSS. Mientras tanto, escribiré algunos ejemplos comprensibles:
... <div style="width: 200px; height: 100px; background: #dddddd"> Bloque </div> ... <p style="font-size: 14px; color: #333333"> Texto </p>
El primer ejemplo muestra un bloque de 200 píxeles de ancho y 100 píxeles de alto con fondo #dddddd (cerca del gris). El segundo ejemplo es un párrafo de texto con un tamaño de fuente de 14 píxeles y color #333333 (cerca del negro, pero no tanto).
Atributo title
Este atributo se utiliza para mostrar una sugerencia emergente cuando pasamos el ratón sobre un elemento en la página:
... <img src="./images/image.jpg" alt="foto" title="este soy yo" /> ... <a href="html2.html" title="mi página">Enlace</a> ... <h2 title="encabezado">¡Hola, Mundo!</h2>
Por supuesto, existen otros atributos universales como: accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck, tabindex. Estoy seguro de que te encontrarás con ellos más adelante cuando trabajes en la maquetación de sitios multilingües. Por ahora, está bien conocer los atributos universales más importantes.