Saltar al contenido principal

Etiquetas y atributos

La etiqueta (tag) — es un elemento del lenguaje de marcado de hipertexto. Estos son los bloques básicos más pequeños de los que se compone cualquier página web. Cada etiqueta representa una entidad: título, lista, párrafo de texto, imagen. Para resaltar las etiquetas entre el texto del documento, se utilizan corchetes angulares que especifican el nombre de la etiqueta y sus atributos.

<nombre_de etiqueta>...</nombre de_etiqueta>

La etiqueta de apertura indica dónde comienza el elemento, la etiqueta de cierre indica dónde termina. La etiqueta de cierre se forma agregando una barra (/) antes del nombre de la etiqueta. Entre las etiquetas de apertura y cierre se encuentra el contenido de la etiqueta. Ejemplos de etiquetas.

<section>Sección</section>
<p>Párrafo</p>
<a>Enlace</a>
<button>Botón</button>

Los comentarios​

Los comentarios se utilizan para dejar una explicación, una nota en el código fuente, comentar temporalmente una parte del código, etc.

<!-- Es un comentario, su contenido no se mostrará en la página  -->

<p>Es un párrafo de texto, su contenido se mostrará en la página.</p>

<!--
  Un comentario puede ser multilínea.
  Es conveniente para las descripciones más amplias.

-->

Los atributos​

Atributo es una configuración de etiqueta avanzada que permite modificar las propiedades y la acción de un elemento. Cada etiqueta tiene atributos obligatorios y opcionales, puede tener varios atributos o existir sin ningún atributo.

Los atributos se escriben dentro de la etiqueta de apertura y sus valores se colocan dentro de las comillas dobles. Varios atributos están separados por un espacio.

<a href="https://google.com" class="link">...</a>

<img src="cat.jpg" alt="cute cat" />

<input type="text" name="user_name" />

<button type="submit">...</button>

<p class="text">...</p>

Vamos a ver algunos atributos de la etiqueta <a>.

<a href="http://google.com" target="_blank" title="Motor de búsqueda de Google">
  Google.com
</a>
  • href - Es la dirección de la página a la que se dirigirá el usuario después de hacer clic en el texto del enlace.
  • target - Especifica en qué pestaña se abrirá la página al hacer clic en un enlace.
  • title - Agrega un globo al texto del enlace.

Vamos a ver algunos atributos de la etiqueta <img>.

<img
  src="https://picsum.photos/640/480"
  alt="La imagen arbitraria del generador"
/>
  • src - La dirección de la imagen.
  • alt - Texto alternativo que se muestra en el caso si la imagen no se carga.
Es útil

Para conocer los atributos de etiqueta disponibles y su propósito se puede consultar la documentación o el directorio, por ejemplo htmlreference.io.

Las etiquetas emparejadas​

Consisten en etiquetas de apertura y cierre que envuelven el contenido, lo que le permite cambiar sus propiedades o mostrar y agrupar el contenido por su significado. Dentro de las etiquetas emparejadas se puede colocar otras etiquetas, como muñeca rusa.

<!-- Artículo con título y párrafo  -->
<article>
  <h1>Brevemente sobre las etiquetas emparejadas</h1>
  <p>
    La mayoría de las etiquetas son emparejadas. Su contenido está encerrado entre la etiqueta de apertura y etiqueta de cierre.
  </p>
</article>

Las etiquetas individuales/únicas​

Consisten solo en una etiqueta de apertura, no contienen contenido de texto y obtienen contenido o comportamiento de los atributos. Sirve para cambiar las propiedades de un documento, conectar archivos, etc.

<!-- Metainformación acerca de la codificación -->
<meta charset="utf-8" />

<!-- Campo de entrada -->
<input type="text" />

<!-- Imagen -->
<img src="cat.jpg" alt="cool cat" />
Es interesante

En los estándares HTML anteriores, las etiquetas individuales se escribían obligatoriamente con una barra inversa / delante del paréntesis cerrado. Por ejemplo <img /> o <input />. En el estándar moderno no tiene el carácter obligatorio y no afecta en nada.

Anidamiento de etiquetas​

Siguiendo algunas reglas, las etiquetas se pueden colocar entre sí. Al adjuntar, hay que observar el orden de su clausura según el principio de muñeca rusa.

<etiqueta1>
  <etiqueta2>
    <etiqueta4>...</etiqueta4>
    <etiqueta5>...</etiqueta5>
  </etiquetaг2>
  <etiqueta3>
    <etiqueta6>...</etiqueta6>
  </etiqueta3>
</etiqueta1>

Aquí tienes un marcado de párrafo válido con referencia y texto resaltado, así como una lista de beneficios con una descripción.

<p>
  <a href="squoosh.app">Squoosh</a> - servicio <em>optimización</em> de imágenes.
</p>

<p>Beneficios</p>
<ul>
  <li>Funciona en el navegador</li>
  <li>El sistema no funciona</li>
  <li>La interfaz es fácil</li>
</ul>

Y en esta versión hay problemas (las líneas están resaltadas).

<!-- No se sigue el orden de cierre de etiquetas -->
<p><a href="squoosh.app">Squoosh</a> - servicio <em></a>optimización</p> de imágenes.</em>

<!-- No se siguen las reglas específicas de anidamiento de etiquetas -->
<ul>
  <p>Beneficios</p>
  <li>Funciona en el navegador</li>
  <li>El sistema no funciona</li>
  <li>La interfaz es fácil</li>
</ul>

Especificación HTML​

La especificación HTML Living Standard - es el documento principal que describe los estándares, las capacidades y el desarrollo futuro del lenguaje HTML.

Para estudiar el diseño, en primer lugar, son importantes las secciones que describen qué tipos de elementos son, qué significa cada uno de ellos , y cómo se pueden anidar entre sí..

Es útil

Elemento HTML - Es un término que describe una determinada entidad semántica en el estándar HTML. Por ejemplo, un párrafo, encabezado, lista o enlace. En un documento HTML, un elemento está representado por una etiqueta (emparejada o única) que es una construcción sintáctica del lenguaje HTML.

Las etiquetas de anidamiento​

El algoritmo para determinar si una etiqueta es encajable es bastante simple..

  • Vamos a la especificación y encontramos el elemento requerido.
  • Comprobamos el modelo de contenido del elemento (Content model), en el que estamos anidando.
  • Comprobamos las categorías del elemento (Categories), que estamos anidando.
  • Se puede invertir si la categoría es adecuada y las restricciones no lo prohíben, de lo contrario, no se puede.

Después de un par de días de usar HTML, se acostumbrará a anidar los elementos correctamente, ya que las reglas de anidamiento se volverán intuitivas después de conocer las etiquetas principales

Los directorios​

Además de la especificación, es útil tener a mano libros de referencias. No es necesario recordar todo de memoria, siempre se pueden espiar cosas más específicas o que se usan con poca frecuencia.