El atributo id

El atributo id es un indentificador único y sirve para identificar elementos y poderles aplicar estilo a traves de css o interactividad con JQuery, en la lección anterior vimos la estructura básica de un <div>, ahora vamos a añadirle este atributo para después aplicarle un poco de estilo en css. Para añadir un identificador único escribimos la palabra id en la etiqueta que deseemos o necesitemos, el signo igual y entre comillas su nombre de identificador único [id="identificador"].

<div id="valor"></div>

Al ser único tal y como su nombre indica, solo puede haber uno en cada página o documento, eso quiere decir que solo podrás usar un id con ese valor por cada página de tu web, en este caso al decir página web, me estoy refiriendo a una sola página, y no el conjunto de páginas de la que se compone una web completa.

El atributo class

El atributo class, a diferencia del atributo id puede ser aplicado a todos los elementos que deseemos, elementos que tengan cosas en comun, como por ejemplo trozos de texto en color rojo destacando asuntos importantes, cajas con medidas iguales o tamaños de fuente por poner algunos ejemplos. Su estructura es similar [class="clase"].

<p class="rojo"></p>
<div class="rojo"></div>

Tambien podemos combinar los dos atributos en un mismo elemento como puedes ver a continuación.

<div id="caja" class="rojo"></div>

O incluso añadirle varias clases a la vez separadas por un espacio en blanco.

<div id="perfil" class="rojo negrita"></div>
Ten presente que los atributos se pueden utilizar en otras etiquetas como es el caso de los atributos id y class, sin embargo hay algunos que son específicos para ciertas etiquetas, como puede ser href de las etiquetas de enlaces o el atributo src para las imágenes, así podríamos aplicarle el atributo class tranquilamente a un párrafo <p>, un encabezado <h2>, un enlace <a>, etc.. Tdos estos ejemplos que ves abajo son totalmente válidos.
<div id="perfil" class="azul"></div>
<p id="parrafo" class="negrita"></p>
<h1 class="negrita azul"></h1>
<img id="imagenMini" src="imagenes/miImagen.jpg">

Ejercicios

Escribe en la caja de texto una etiqueta <div> con una id de nombre principal y una clase de nombre naranja, escribe dentro del <div> la siguiente frase, Esto es un div.

<div id="principal" class="naranja">Esto es un div</div>

Escribe en la caja de texto una etiqueta span con una clase de nombre negrita, escribe dentro del <span> la siguiente frase, Esto es un span.

<span class="negrita">Esto es un span</span>

Daniel Fernández Velázquez

Me encanta aprender y practicar la programación web, Autodidacta y apasionado de la tecnología.