Identificadores y clases en HTML

Identificadores y clases en HTML

Identificadores y clases en HTML

Una vez que conocemos las instrucciones de HTML y sabemos como emplearlas, estamos casi listos para comenzar a construir la estructura de una página web.

Aún falta un elemento clave: poder nombrar los bloques de la página en el código. Para ello utilizamos los identificadores y clases en HTML, sin ellos quedaría una maraña de código sin mucho sentido, imposible de dar formato mediante estilos en cascada.

Los elementos a los que invariablemente debemos poder identificar con algún indicador, son las instrucciones que forman bloques de elementos (<div></div>).

estructuraDivs

Para este fin, existen dos atributos que se consideran como atributos globales, es decir, que se le pueden incluir a cualquier instrucción:

  • Identificadores
  • Clases

Identificadores y clases en HTML

Identificador (id)

El atributo identificador se representa con las siglas id, seguidas por un signo de igual y, entre comillas, el nombre que se le asigna al elemento.

Las condiciones para utilizar un identificador son:

  • El nombre que le asignemos a este no debe repetirse en alguna otra instrucción de la página.
  • Cada instrucción solo puede tener un identificador.
<div id="encabezado">...</div>

Clase (class)

El atributo clase se representa con la palabra class, seguida por un signo de igual y, entre comillas, el nombre que se le asigna al elemento.

A diferencia del identificador, el mismo nombre de clase puede encontrarse en varias instrucciones de la página y cada elemento puede contener varias clases, separando el nombre de cada una de ellas con un espacio en blanco.

<div class="nota">...</div>
<div class="home nota">...</div>
Utilizar identificador o clase en una instrucción es indistinto, siempre y cuando se cumpla con las condiciones mencionadas anteriormente.

En el siguiente ejemplo, el bloque llamado “nota” se encuentra dos veces en la página, por lo que a estos bloques (nota), se les aplica el nombre mediante una clase. Los demás bloques no se repiten en la página, por lo que es correcto nombrarlos mediante un identificador (no es indispensable emplear un identificador en los elementos que no se repiten, también se pueden utilizar clases).

estructuraDivsCI
Uso adecuado de identificadores y clases en HTML
Los nombres que se le asignen a los identificadores y clases en HTML, no deben contener acentos, espacios ni caracteres especiales.

En HTML5 los nombres pueden iniciar con cualquier caracter, incluyendo números.

See the Pen clasesEidentificadores by Miguel Méndez (@codigo-web) on CodePen.0

Es recomendable hacer un comentario al final de cada bloque para indicar su cierre, de esta forma es mas sencillo leer el código.

<!-- Fin nombreBloque-->
Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz