5 tag y atributos html que quizás no conozcas

Como bien sabes, sobre todo si has seguido en profundidad nuestra guía de html y css, HTML es un lenguaje que te permite crear y construir páginas web y mostrar textos, imágenes, enlaces, etc. Este es el acrónimo de Hyper Text Markup Language, de hecho, HTML es un lenguaje de markup, no un lenguaje de programación, como lo son, en cambio, por ejemplo, los diversos C #, Python y todos aquellos que necesitan lógica a script interno para poder ser ejecutados. El lenguaje HTML te permite maquetar y formatear páginas, incluso enlazadas entre sí. A menudo es necesario combinar un lenguaje para obtener un contenido más rico y elaborado dentro de la página (como, por ejemplo, el lenguaje JavaScript o el lenguaje CSS).

¿Te acuerdas? Decíamos que para insertar elementos de varios tipos en el texto (párrafos, títulos, subtítulos, listas con viñetas…) que se muestra, utilizamos marcadores o las famosas etiquetas.
Las etiquetas pueden ir acompañadas de uno o más atributos html que se utilizan para especificar mejor la función que debe realizar la etiqueta o el tipo de elemento o almacenar datos para enriquecer el contenido con significado.

Las etiquetas son necesarias para insertar hipervínculos, imágenes, videos, listas y tablas de datos, pero también para administrar formularios o formularios para ingresar datos.
Recordemos que, la sintaxis de las etiquetas se define de la siguiente manera:

<title>
…
</title>

Es decir, insertando entre las dos instrucciones lo que quieres mostrar en la página web que estás creando. Lo que se inserte, por supuesto, depende del tipo de etiqueta. En el caso de la etiqueta de título, por ejemplo, se trata de insertar un título para asignar al documento.

Y hasta aquí todo bien, no?

Sin embargo, al profundizar en las etiquetas y atributos html, encontrarás que hay una amplia gama de ellos para aprovechar cuando estás a punto de crear un sitio web. Vamos a enumerar 5 que, sobre todo si eres principiante, ¡quizás no conozcas! Verás que estas etiquetas pueden ser realmente útiles en momentos de necesidad, especialmente si quieres darle ese toque extra a tu página web: pero, no más charlas, ¡comencemos!

1. El tag <script>

La etiqueta <script> se usa para añadir un script de lenguaje JavaScript del lado del cliente. El elemento contiene un script o accede a archivos que contienen un script a través del atributo src. Ejemplo para escribir "¡Hola mundo!" en JavaScript a través de la etiqueta:

<script>
   document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

2. El atributo múltiple

Todos conocemos la etiqueta <input>, que define un control de input según el valor del atributo obligatorio type, que es un atributo muy potente para especificar el input en la que el usuario debe ingresar datos o presionar un botón. Este es el elemento más importante del formulario que se está estructurando y depende totalmente del atributo type.
Pero a menudo es útil insertar otro atributo, ¡y es él quien puede ser extraño para ti! - o múltiple, que permite (combinado el atributo de type) ingresar múltiples valores en input. Fundamental si, por ejemplo, en un campo quieres insertar varios archivos o correos electrónicos.

<input type="email" multiple>

3. El tag <abbr>

La etiqueta <abbr> permite mostrar, al pasar el cursor sobre una palabra abreviada o una sigla, su significado completo, que se insertará en un atributo de título.
¡Nos explicamos mejor con un ejemplo práctico para ver cómo funciona!

<p> L’<abbr title=" Hyper Text Markup Language"> HTML </abbr> es un lenguaje de markup </p>

Cuando se desplaza el acrónimo HTML, aparecerá la palabra “hyper text markup language”. Cómodo, ¿no?

4. El atributo download

El atributo download es uno de los más poderosos y se usa para descargar un recurso diciéndole al navegador que descargue la URL especificada en el campo en lugar de acceder a ella. Se puede usar a menudo, pero hay que tener cuidado porque solo funciona con URL del mismo origen, siguiendo la same-origin policy. Se puede usar fácilmente con la etiqueta <area> que define un área dentro de un mapa de imagen. Estos elementos siempre están anidados en la etiqueta <map> que define un mapa dentro de una imagen del lado del cliente.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap"
width="400" height="379">
  <map name="workmap">
     <area shape="rect" coords="34,44,270,350" alt="Computer"
     href="computer.htm">

     <area shape="rect" coords="290,172,333,250" alt="Phone"
     href="phone.htm">

     <area shape="circle" coords="337,300,44" alt="Cup of coffee"
     href="coffee.htm">
  </map>

5. El atributo contenteditable

Otro atributo muy poderoso que debe conocer es contenteditable, lo que hace que el contenido de la página web que estás creando sea editable. Es un atributo global, común a todo HTML, pero que se vuelve flexible cuando se usa con la etiqueta <button>. Esta es una etiqueta muy simple, pero si la usas con JavaScript como en el ejemplo que se muestra, será muy divertido usarla en una página web. De esta forma puedes, por ejemplo, quitar o poner la negrita en un párrafo editable mediante un botón, todo dentro de la página web.

<p contenteditable>
  Hello world!
</p>

<button onclick="document.execCommand('bold')">
   Negrita
</button>

Esperamos que estas etiquetas y atributos te hayan sido de utilidad. Y tú, ¿conoces a otros?