Como hemos visto, el HTML está formado por etiquetas. Muchas etiquetas. Cada etiqueta tiene una misión y tarea y contendrá cierto contenido relacionado con su misión. Y además tenemos los atributos, que son palabras clave de texto que modifican ligeramente el comportamiento de la etiqueta que lo contiene.
En este apartado vamos a ver una lista de atributos comunes que tienen cierta relación con CSS y que pueden ser utilizados en prácticamente cualquier etiqueta HTML:
| Atributo | Valor | Descripción |
|---|---|---|
id | nombre | Establece un identificador único a la etiqueta HTML. Sólo el mismo nombre una vez por documento. |
class | nombre | Establece una clase (género) a una etiqueta HTML. Puede repetirse por documento. |
style | estilos CSS | Aplica propiedades CSS directamente al elemento HTML en cuestión. |
Veamos cada uno de ellos por separado para entenderlo bien.
Identificador: El atributo id
En HTML, podemos darle un identificador a una etiqueta HTML y de esta forma darle un nombre. Simplemente, añadimos el atributo id y colocamos el nombre como valor de ese atributo.
Ese identificador único tiene unas normas:
- No debe empezar nunca por un número, pero puede contenerlos más adelante.
- El texto debe estar en
kebab-case, es decir, minúsculas y separados por un guión. - Es preferible que no contenga carácteres raros, acentuados o emojis.
- En un documento HTML no pueden existir dos elementos con el mismo
id.
Veamos un ejemplo de código:
<div id="pagina">
<div>Aquí irá un anuncio</div>
<div id="articulo">Aquí irá el contenido de texto del artículo</div>
<div>Aquí irá un anuncio</div>
</div>
El detalle principal más importante de los id, es que no pueden existir dos con el mismo nombre en un mismo documento. Ejemplos correctos de id serían:
- ✅ «
pagina» (contiene el fragmento de código HTML que incluye toda el contenido de la página) - ✅ «
comentarios» (contiene toda la zona de comentarios de la página) - ✅ «
header» (contiene la parte con el logo y la cabecera de la página)
Lo importante que hay que saber de los id es que se suelen utilizar cuando queremos localizar zonas específicas que sabemos que no se van a repetir en esa misma página.
Mi consejo es que, salvo que se necesite identificar una zona única en la página, se evite usar
id. El uso principal de unides para crear enlaces de tipo ancla (que veremos más adelante, en el apartado de enlaces o hipervínculos), que no son más que enlaces de acceso rápido en la misma página.
Clases: El atributo class
Las clases funcionan de una forma muy similar a los id, pero son mucho más flexibles. Utilizaremos el atributo class, donde le asignaremos el nombre de clase deseado. En primer lugar, no tienen la limitación de los id, por lo que pueden existir elementos con la misma clase en un documento. De hecho, la idea de las clases es establecer géneros o tipos de etiquetas, a los que les asociemos características comunes.
Sigamos con el ejemplo anterior:
<div id="pagina">
<div class="anuncio">Aquí irá un anuncio</div>
<div id="articulo">Aquí irá el contenido de texto del artículo</div>
<div class="anuncio">Aquí irá un anuncio</div>
</div>
Obsérvese que, al tener la misma clase «anuncio», podemos realizar acciones para todas las etiquetas de ese tipo y no tener que hacerlo para cada una de ellas por separado. Un ejemplo clásico donde se ve bien su utilidad, es respecto a utilizar ids y clases para dar estilo CSS, donde aplicaremos unos estilos concretos a todas las etiquetas HTML con clase «anuncio».
Además, a diferencia de los id, una etiqueta puede tener múltiples clases diferentes, no necesariamente una sola. Esto nos da más flexibilidad a la hora de crear clases específicas, donde cada una se ocupa de un detalle diferente:
<div id="pagina">
<div class="anuncio primero">Aquí irá un anuncio</div>
<div id="articulo">Aquí irá el contenido de texto del artículo</div>
<div class="anuncio ultimo">Aquí irá un anuncio</div>
</div>
Nótese que en la primera etiqueta del anuncio hemos aplicado las clases anuncio y primero, mientras que en el último anuncio hemos aplicado las clases anuncio y último. Esto nos permitiría asignar atributos comunes al anuncio en la clase anuncio, y atributos que sólo dependan de la posición donde esta colocado en primero y/o ultimo.
Recuerda que para indicar múltiples clases se deben separar las clases por espacio, dentro del mismo atributo
class. Si se indican múltiples atributosclassen la misma etiqueta, el navegador ignorará los primeros y sólo utilizará el valor del últimoclass.
Estilos en línea: El atributo style
El atributo style es un atributo que se utiliza en las etiquetas HTML para incrustar código CSS directamente en la propia etiqueta. Este tipo de CSS se denomina Estilos CSS en línea.
Generalmente, la mejor forma de aplicar estilos CSS es colocar el código CSS en un documento .css independiente de nuestro documento HTML. Esto garantiza que nuestro código esté bien separado y modularizado. Sin embargo, hay situaciones donde puede ser conveniente (o incluso necesario) añadir el código CSS en la propia etiqueta. En ese caso, se haría de la siguiente forma:
<p style="background: indigo; color: white;">Esto es un mensaje con estilos CSS</p>
Sin embargo, en la mayoría de los casos, no se recomienda añadir los estilos de esta forma, y suele ser considerado una mala práctica, ya que estás acoplando el código CSS al documento HTML, cuando deberían estar separados. Una buena práctica, por ejemplo, sería utilizar el atributo style para definir variables CSS en nuestro elemento y elementos hijos.
