Listado de las etiquetas HTML que deseo aplicar en mis proyectos

Div

Se trata de una etiqueta de bloque no semántica, en otras palabras se trata de un contenedor que por sí mismo no posee ningún valor semántico, por lo tanto se usa cuando no se halla un elemento que calce con las necesidades del código o cuando no se desea que algún elemento no tenga algún valor semántico en particular. Cuenta con atributos genéricos como:

• title
• id
• style
• lang: Información del lenguaje
• dir: indica la dirección del texto y las tablas

También cuenta con atributos específicos como:

• datasrc: Enlaza a una fuente de datos externa
• datafld: El nombre de una propiedad o columna de datasrc
• dataformatas: indica cómo deben ser tratados los datos obtenidos de datasrc
• align: alineación del texto

En otras palabras se puede usar como un contenedor simple para estructurar la página a través de clases o id.

Nota: la desventaja del "div" radica en que es tan fácil usarlos que puede mal acostumbrar al programador, usarlos en exceso conlleva que el mantenimiento y actualización del contenido serán más complejos de realizar, a la vez que pueden ocasionar un código poco legible

Span

Esta es una etiqueta no semántica de texto, por lo tanto su función es incorporarlo en el interior de un texto para hacer posible distinguir algún área del texto sin añadirle algún valor semántico. Esto se puede lograr usando el atributo "class" para poder incorporar css

Nota: por sí mismo el navegador no muestra algún estilo en particular al texto que se encuentre en este elemento

A

Significa "ancla", es la viñeta utilizada para definir los hipervínculos, el texto que se desee mostrar como enlace deberá estar ubicado dentro de esta etiqueta.
Esta etiqueta no solo redirige al usuario a otra página, sino que también puede llevarlo a una sección en específico de esta, esto se hace añadiendo un "#" seguido del id del elemento que se desee ubicar (todo esto escrito sin espacios), ya que el "#" hace referencia al id de un elemento. De la misma forma también se puede redirigir a una sección dentro del mismo documento, esto se hace únicamente escribiendo el "#" seguido del id del elemento seleccionado.

A continuación se muestran dos ejemplos: el primero es de una redirección a un elemento del mismo documento, y el segundo a una redirección a un área en particular de un documento externo.

Atributos

• href: Es el atributo designado para indicar la dirección http a la que el enlace dirigirá al usuario, puede ser una ubicación interna o externa de la página
• title: Este atributo define un texto explicativo que hará aparición si el usuario mantiene el ratón sobre el enlace, por lo tanto no será visible para usuarios que naveguen usando el teclado o dispositivos táctiles
• target: Este atributo define la ventana en la que se abrirá el nuevo enlace, si se usa el valor "_blank" se abrirá la nueva página en una pestaña diferente, en cambio si se omite este atributo el enlace se abrirá por defecto en la pestaña activa

Nota: cualquier elemento puede ir dentro de la etiqueta "a", por lo tanto casi cualquier cosa puede ser convertida en un enlace, desde contenedores e imágenes, etc.

Nota: Es recomendable que los enlaces brinden palabras claves o algún tipo de información sobre la información a la que redirigen ya que tanto los usuarios como los motores de lectura escanean la página y uno de los elementos resaltados en los que se guían son los enlaces

Nota: Otros consejos al crear enlaces son: que el texto que los componga sea breve, los textos excesivamente largos no son gratos, también es recomendable evitar que el texto de estos enlaces sea repetitivo, ejemplo de mala práctica: "Haz clic aquí"

Nota: Es recomendable usar las direcciones relativas de archivos siempre que sea posible, ya que pese a que deja de funcionar si el archivo en el que se encuentra el llamado cambia de lugar, estas son más eficientes en términos de procesamiento y más legibles en el código, por lo que darán un código más legible

Descargar un archivo en un enlace

Para indicar que se trata de la descarga de un elemento se utiliza el atributo "download", el cual no solo indicará que el navegador debe descargar el elemento seleccionado sino que también define el nombre que se vinculará al archivo al hacerlo (esto lo hace en base al texto que se indique en el atributo)

Enviar un correo mediante un enlace

Esta es otra función que ofrece la etiqueta "a", para hacer uso de esta se utiliza el valor "mailto" en el atributo "href" seguido del correo electrónico al que se desee que el usuario contacte, esto abrirá una ventana de correo electrónico con el correo en cuestión seleccionado como destinatario, a su vez otra opción es poner el atributo "href" únicamente con valor de "mailto", esto abrirá la ventana de correo pero no proveerá un destinatario en específico

El siguiente es un ejemplo de cómo se usa el atributo "mailto":

Abbr

Se trata de una etiqueta para definir las abreviaturas, su efecto es que la abreviatura o el acrónimo se mostrará con un subrayado punteado, y al posicionar el ratón sobre este se mostrará un texto emergente con la expresión completa del término

Para definir la expresión completa se utiliza el atributo "title", seguido de la expresión

Ejemplo de visualización

HTML

Address

Aporta la información de contacto de un article cercano o del elemento padre como el body.

Dentro de este no deben haber etiquetas contenedores, únicamente debe tener la información de contacto, ya que es una etiqueta semántica.

Nota: Se pueden incorporar hipervínculos dentro de este

B

Su función únicamente es la de mostrar el texto que se encuentre dentro de este en negritas, no añade ningún valor semántico a este

Br

La función de esta etiqueta es muy simple, indica un salto de línea, sin importar realmente en qué lugar o contenedor se encuentre siempre tendrá el mismo efecto el cual es equivalente a presionar Enter en un editor de texto

Si se utiliza en el interior de una etiqueta "p" (párrafo) esta etiqueta aplicará el mismo efecto que tendría un "punto y aparte", por lo tanto el texto saltará a la siguiente línea pero no se distanciará de la línea anterior ni tomará sangría, por lo tanto se puede usar para representar líneas cortas como las de un verso.

Details

Actúa como un widget de revelación, ya que tiene la funcionalidad de mostrar un texto oculto que se despliega cuando se clica sobre este, es necesario tener presente que se trata de una etiqueta bastante reciente por lo tanto no está habilitada en versiones antiguas de los navegadores, a su vez puede ser ubicada en cualquier elemento que acepte contenido dinámico

Atributos

• Details incluye los atributos globales
• open: Este atributo booleano indica si los detalles serán mostrados al usuario cuando la página se cargue, por defecto el valor es false y por lo tanto los detalles estarán ocultos.

Ejemplo

Efecto

Some details

More info about the details.

Em

Se usa para dar un poco de énfasis o relevancia a algún texto, el texto dentro de esta etiqueta se muestra en cursiva

Figcaption

Consiste en un elemento para indicar que un texto está vinculado con una imagen (pie de imagen), ya que es un elemento de texto no es necesario usar el elemento "p" dentro de este, se trata de un elemento con valor semántico

La forma de emplearlo es que junto al elemento de imagen ("img") esté contenido en un "figure"

Hr

Esta es otra etiqueta con una función simple, de aplicarse crea una línea horizontal en el contenedor en que se encuentre, se utiliza para crear divisiones visuales

Ejemplo de visualización

Primer elemento

---

Segundo elemento

I

Consiste en una etiqueta para mostrar el texto en cursiva o itálica, no brinda ningún valor semántico

Superíndice y Subíndice

En ocasiones puede ser necesario incorporar estos elementos en algún texto, para ello existen estas dos etiquetas:

• sup: Esta etiqueta se usa para definir el superíndice, lo hace encasillando a este en su interior

• sub: Esta etiqueta se usa para definir el subíndice, lo hace encasillando a este en su interior

Un ejemplo de ambos casos es el siguiente

Strong

Se usa para darle gran importancia al texto dentro de esta etiqueta, se muestra como texto en negritas

Time

Existen muchas formas de plasmar una fecha, sin mencionar que esto puede representarse de forma diferente en algunos lugares, para eso se utiliza el elemento "time", acompañado del atributo "datetime", ya que este elemento tiene la ventaja de que funciona para cualquier formato de fecha (hora, día, mes, año) así como para las mezclas de estos.

Su uso consiste en ingresar la fecha dentro del atributo "datetime" con el formato adecuado para que sea entendible por el navegador, a su vez dentro de la etiqueta se ingresa la fecha de la forma que será visible para los usuarios, de esa forma el usuario puede visualizar cualquiera que sea el formato de fecha con el que esté familiarizado, sin que el navegador presente algún error

Ejemplos de aplicación

U

Su función únicamente es la de mostrar el texto que se encuentre dentro de este subrayado, no añade ningún valor semántico a este

Componentes de una lista

• Ul

  La etiqueta "ul" define que una lista sea de carácter no ordenada, dentro de ella se ingresa la etiqueta "li" con el contenido

• Ol

  La etiqueta "ol" define que una lista sea de carácter ordenada, dentro de ella se ingresa la etiqueta "li" con el contenido

• Li

  El elemento li del inglés item list o elemento de lista declara cada uno de los elementos de una lista, sin importar si se trata de una lista ordenada o desordenada.

  Atributos

  • li incluye los atributos globales

  Eventos

  • onclick: El evento onclick ocurre cuando se hace clic sobre un elemento. Este atributo puede utilizarse con la mayoría de los elementos
  • onmousedown: El evento onmousedown ocurre cuando el botón del ratón se pulsa cuando está encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
  • onmouseup: El evento onmouseup ocurre cuando el botón del ratón se suelta cuando está encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
  • onmouseover: El evento onmouseover ocurre cuando el ratón se sitúa sobre un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
  • onmousemove: El evento onmousemove ocurre cuando el ratón se mueve mientras está sobre un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
  • onmouseout: El evento onmouseout ocurre cuando el ratón se aparta de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
  • onkeypress: El evento onkeypress ocurre cuando se pulsa y se suelta una tecla encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
  • onkeydown: El evento onkeydown ocurre cuando se pulsa una tecla encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
  • onkeyup: El evento onkeyup ocurre cuando una tecla se suelta encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.

• Listas de descripción

  Esta es otra variante de las listas, es menos común y su sintaxis cambia:

  Dl

  Se trata de la etiqueta contenedor de este tipo de listas, es decir cumple la misma función que "ul" u "ol"

  Dt

  Esta etiqueta define el término o elemento que será descrito, los estilos por defecto del navegador lo mostrarán con una sangría mucho menor que la de su respectiva descripción

  Dd

  Esta etiqueta alberga la descripción de un elemento, se mostrará con una sangría bastante mayor al de otros elementos

  Nota: un elemento puede tener múltiples descripciones

Meta

Meta se utiliza para incluir y definir los metadatos de la página en el header, existen varios tipos de meta que pueden ser interpretados por el navegador

Un uso posible es definir que al ser compartida la página web en alguna red social el enlace se visualice con una descripción y alguna imagen predefinida, esto con la intención de que la vista sea más llamativa y brinde más información a los usuarios sobre el enlace de la página, por lo tanto brinde una mejor experiencia.
Para lograr esto muchas redes sociales crean sus propios protocolos de metadatos, los cuales son necesarios incluirlos en etiquetas "meta" para lograr este efecto al ser compartidas en una red social

Otros usos pueden ser: definir el autor de la página web, esto puede ser ventajoso utilizarlo por temas de contacto con el autor.
También puede ser utilizado para incluir una breve descripción del contenido de la página, es bueno utilizar palabras claves ya que esto puede ayudar a que la página se posicione de mejor manera en los buscadores

Atributos

• name: se utiliza para especificar el tipo de metadato del que se trata, es decir el tipo de información que contiene
• content: especifica el contenido del metadato en sí

Nota: una etiqueta meta con el name = description y un atributo content componen la descripción que se puede encontrar debajo del enlace de la página en las búsquedas de Google u otros buscadores

Definir iconos personalizados para la página web

Para enriquecer el diseño de la web se usan los iconos personalizados, los cuales se usan en diversos contextos

El más común de estos es el fav.icon consiste en un icono predefinido que se mostrará en la parte del navegador que contiene las pestañas abiertas, y también se visualizará al guardar la página como favoritos

Para implementarlo se necesita guardar la imagen icono en el directorio del proyecto y añadir el siguiente código al "head". Un caso de uso real es crear varios "fav.ico", para que se apliquen uno u otro dependiendo del dispositivo desde el cual se visite el sitio

Nota: Actualmente los navegadores aguantan formatos como png o incluso gif, sin embargo el formato .ico garantiza funcionar incluso en versiones desactualizadas

Nota: Nota: Si tu sitio web utiliza una política de seguridad de contenido (content security policy o CSP) para mejorar la seguridad, la política afecta al favicon. Si te encuentras con problemas como que el favicon no se carga, comprueba que la respuesta a Content-Security-Policy del header para la directriz img-src (en-US) en la cabecera no impide el acceso a este.

Link

Se trata de una etiqueta de metadatos, por lo cual siempre debe estar ubicada en el head de la página, esta etiqueta consta de varios usos entre los cuales están:

• Contener los llamados de archivos css: Al usarse de esta forma es necesario que se acompañe de dos de sus atributos con un valor en particular:
  • rel="stylesheet": Indica que se trata de la hoja de estilos del documento
  • href=: Como siempre este debe contener la ruta al archivo css en cuestión

  Dependiendo de la versión del lenguaje que se maneje también puede ir acompañado de otros atributos complementarios como por ejemplo type="text/css"

Script

Esta etiqueta se usa para introducir código JavaScript al documento, ya sea haciendo referencia a un archivo externo, para lo cual se usa el atributo "src" para definir la ruta del archivo, o incluyendo el código directamente en el interior de la etiqueta; en este caso no se utiliza ningún atributo en particular

Definir un Idioma

Es muy recomendable indicar el idioma en el que está escrito el contenido del sitio web, esto con el fin de que los buscadores y servicios puedan ubicar y trabajar de mejor forma con nuestro proyecto en base a las preferencias lingüísticas del usuario:

Para esto es necesario incluir el atributo "lang" dentro de la etiqueta "html" del documento; el valor de este atributo debe ser un código ISO, el cual define cuál es el lenguaje a utilizar

En HTML5 el atributo lang es aplicable a cualquier elemento html, por lo que se puede definir un lenguaje en particular para un elemento en específico, e incluso aplicar más de un lenguaje en la página de la siguiente forma:

De esta forma los buscadores pueden entender perfectamente los lenguajes e incluso aplicar la pronunciación correcta en el caso de que se use alguna acción de lectura en la página

En el caso de tener definido un lenguaje y necesitar aplicar otro en algún lugar sería así:

Si se diese el caso de ser necesario usar tan solo algunas palabras en otro lenguaje también se puede usar el elemento "span" con el atributo "lang" para definir el lenguaje de solo una fracción del texto de la siguiente manera

Nota: para saber el código de cada lenguaje basta con buscar "código ISO países" en Google

Inclusión de caracteres especiales en HTML

Audio

Se trata de una etiqueta para reproducir audio en la página, se utiliza de una forma similar a la etiqueta video. Debido a las patentes que poseen algunos formatos de audio no todos los navegadores pueden aceptar los mismos formatos; en la actualidad son dos los formatos más utilizados en la industria, estos son: "mp3" y "ogg", de modo que para que el archivo de audio esté disponible para casi todos los navegadores lo más recomendable es incluir el archivo en cuestión una vez por cada formato, es decir una vez por "mp3" y una vez por "ogg".

Para optimizar esto utilizamos el elemento "source", el cual se incluye dentro de la etiqueta "audio", usando el atributo "src" dentro de este; la función de los elementos source es que el navegador pueda elegir el formato de audio que sea compatible con este; para esto usa el atributo "type" del elemento "source", este atributo es leído por el navegador para ubicar el formato de audio que es compatible; si el atributo "type" no se incorpora el navegador probará cada elemento hasta encontrar el formato de audio que sea compatible, aumentando el tiempo de ejecución.

La etiqueta "audio", al tratarse de una etiqueta HTML5, existen navegadores que aún no están capacitados para ejecutarla, por lo tanto la estructura de esta etiqueta no solo debe de incluir los atributos de "src", sino que también una etiqueta "p" con un mensaje de notificación; este párrafo será visible en aquellos casos en los que no sea posible ejecutar el archivo de audio, ya sea por un tema de compatibilidad o de conexión; por lo tanto es recomendable que este párrafo contenga un texto de notificación y, si de verdad es muy necesario el audio, también un enlace directo al archivo de audio

Atributos

• Autoplay: indica que el audio se reproduzca automáticamente apenas se cargue; no es muy recomendable su uso ya que los usuarios pueden encontrarlo molesto
• buffered: Un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer. Este atributo contiene un objeto TimeRanges.
• Controls: ofrece controles para que el usuario pueda controlar la reproducción
• Muted: Hace que los medios se reproduzcan con el sonido apagado de forma predeterminada.
• Loop: Hace que el audio comience a reproducirse cada vez que finaliza. Esto puede en ocasiones resultar molesto, por lo que lo mejor es utilizarlo solo si es realmente necesario.
• Preload: Le indica al navegador qué implementación podría darle una mejor experiencia al usuario, puede tener alguno de los siguientes valores:
  • none le indica al navegador que el usuario no tendrá que consultar el audio, y no será necesario almacenarlo en caché
  • metadata le indica al navegador que el usuario tendrá que consultar el audio, es razonable almacenar los metadatos
  • auto indica que el audio tiene prioridad, es necesario descargarlo aun si el usuario no lo use

  Si el preload no está configurado su valor será definido por el navegador.

• src: Indica la url del audio que se va a usar. Su uso es opcional ya que también se puede usar el elemento source dentro del bloque de audio para indicar el audio que se va a insertar

  Las compensaciones de tiempo se especifican como valores float que indican el número de segundos que se va a compensar.

Nota: los atributos autoplay y preload no fuerzan al navegador a seguir el valor del atributo, son solo una sugerencia

Nota: los atributos width y height no tienen efecto en un elemento audio, ya que no hay un componente visual que estructurar

Nota: En cualquier momento se puede restablecer al principio el elemento de audio con JavaScript, ubicando el elemento "source" por su id y asignándole la propiedad "load()"

Incorporar subtítulos

Esto se realiza creando un archivo "WebVTT"; este tipo de archivo está creado con el fin de almacenar cadenas de texto junto con metadatos para indicar en qué momento se mostrará cada cadena de texto e incluso información de estilo y posicionamiento. Las cadenas de texto se denominan señales y existen diferentes tipos con diferentes usos:

• Subtitles (Subtítulos): Son traducciones de un lenguaje extranjero usado en el video o audio
• Captions (Leyendas): Son transcripciones de diálogos o sonidos significativos para que puedan ser entendidas en situaciones en las que no se puede escuchar el audio
• timed descriptions (descripciones cronometradas): Texto para conversión a audio, para atender a personas con discapacidad visual.

Un ejemplo de la vista de un código WebVTT sería:

Para que este archivo se muestre junto con la reproducción de medios HTML se debe:

1. Guardar el archivo ".vtt" en el lugar correcto
2. Enlazar el archivo ".vtt" con la etiqueta "track". La pista debe colocarse dentro de los elementos audio o video, pero después de todos los elementos de origen (source)
3. Usar la etiqueta "kind" para definir si el archivo se trata de subtítulos, leyendas o descripciones

El siguiente es un ejemplo del código resultante

Nota: en el ejemplo se usa un elemento "video" pero también se puede usar con uno "audio"

Nota: Se puede usar JavaScript para habilitar el botón de subtítulos, y elegir entre por ejemplo varios lenguajes

Nota: Los navegadores se nutren especialmente del texto, eso incluye incluso a los subtítulos de un elemento multimedia, lo cual le permite al navegador vincularse incluso con el fragmento del elemento multimedia que coincida con la búsqueda

Canvas

Se usa para crear gráficos a través de comandos JavaScript, también se puede usar para crear animaciones y hacer composiciones de fotos.

Es una etiqueta bastante reciente así que solo está disponible en versiones recientes de los navegadores

Atributos

• width: Se trata de la anchura del elemento, el valor predeterminado es de 300px
• height: Se trata de la altura del elemento, el valor predeterminado es de 150px

Sobre Accesibilidad

El elemento canvas no provee ninguna información adicional sobre los elementos que tiene dibujados. El contenido de la etiqueta canvas no se muestra a los lectores de pantalla como otras etiquetas semánticas. Como regla general, deberías evitar utilizar canvas en un sitio accesible.

Embed

Representa junto con el elemento "object" una herramienta de incrustación de propósito general; en otras palabras, se diferencia de "iframe" ya que "embed" puede incrustar múltiples tipos de contenido externo que incluyan tecnologías de complemento como Java Applets y Flash; en otras palabras, puede ejecutar contenido externo y sus plug-ins

Nota: Un plug-in (complemento) es un software que permite que el navegador ejecute un elemento con el cual no es compatible de forma nativa

En sí el "embed" es una tecnología heredada por HTML5, no es verdaderamente usado ya que los subprogramas con plug-in no se utilizan desde hace algunos años; pese a esto se puede dar alguna circunstancia de que se encuentre como puede ser en intranets o proyectos empresariales.

Atributos

• Embed incluye los atributos globales
• height: altura mostrada en px
• width: ancho mostrado en px
• src: La dirección URL del recurso que se está incrustado
• type: El tipo MIME que se va a usar para la selección del plug-in para crear una instancia

Figure

Es una etiqueta HTML5, se trata de un contenedor con la función de vincular una imagen con un texto de pie de imagen; cumple un rol semántico

La forma de emplearlo consiste en que este elemento contenga en su interior el elemento "img" y el elemento "figcaption"

Iframe

Esta etiqueta se utiliza para incorporar documentos web en el documento actual; esto es bueno para poder incluir contenido de terceros sobre el cual no se tenga el control dentro de nuestra web; por ejemplo de esto está el siguiente video el cual, pese a visualizarse en esta página, realmente ningún elemento de este se encuentra en la página; en su lugar se tomó una sección directamente de la página de YouTube y se insertó aquí de la siguiente manera:

Primero que nada recordemos que YouTube brinda la opción de incrustar videos en otras páginas web muy fácilmente a través de los siguientes pasos:

1. Primero nos dirigimos al video que deseamos incorporar
2. Luego hacemos clic en el botón "Compartir"
3. Seleccionamos la opción de "insertar", y se nos brindará un código HTML con la etiqueta "iframe" ya incorporada (podemos configurar algunas cosas sobre cómo queremos que se visualice el video en nuestra página)
4. Copiamos el código y lo incrustamos en el archivo HTML deseado

El resultado es el siguiente:

Google Maps también permite hacer algo muy similar, de la siguiente forma:

• Vamos a Google Maps y buscamos el mapa que deseamos incorporar
• Hacemos clic en el menú de la esquina superior izquierda de la página
• Seleccionamos "Compartir o insertar mapa"
• Seleccionamos la opción de "insertar", la cual nos dará un código HTML ya estructurado
• Copiamos el código y lo insertamos en nuestro archivo HTML para incorporarlo

Nota: Es muy importante tomar en cuenta el tema de los derechos de autor al usar un "iframe", lo mejor es nunca mostrar contenido del que no se sea el propietario o el dueño brindado un consentimiento por escrito; en el caso de que el contenido sea licenciado se deben obtener y cumplir los términos de la licencia

Atributos

• allowfullscreen: Si está configurado, el "iframe" se puede colocar en modo pantalla completa usando el Full Screen API
• frameborder: Al asignarle un valor de "1" añade un borde alrededor de todo el elemento incrustado; su valor mínimo es "0", actualmente no es recomendable su uso ya que se obtiene el mismo o mejores resultados con CSS
• src: Al igual que en los elementos "video", "audio" e "img", contiene la ruta que apunta al documento a incrustar
• Contenido de reserva: Al igual que un elemento "audio" o "video", el "iframe" incluye un texto que se mostrará en caso de que el navegador no soporte esta etiqueta (actualmente es poco probable que se encuentre un navegador que no lo ejecute); se incorpora mediante un elemento "p" dentro de la etiqueta de apertura y de cierre del "iframe" (suele contener un enlace al documento que se pretendía insertar)
• width: Define la anchura del elemento
• height: Define la altura del elemento
• sandbox: Este atributo solicita una mayor configuración de seguridad en el "iframe" (requiere versiones de navegadores más recientes)

Nota: Es recomendable establecer el atributo "src" con JavaScript luego de que se cargue el contenido principal para que de esa forma la página se pueda usar antes y cargue de forma más rápida

Seguridad

Los "iframes" son "vectores de ataque", es decir objetivos de ataque de crackers, por lo tanto pudiesen llegar a ser vulnerabilidades en una página web; para esto se han desarrollado varios mecanismos y buenas prácticas para hacerlos más seguros.

Configurar el Servidor: Una de estas prácticas consiste en incluir en el servidor en el que albergue la página una configuración para evitar que la página sea incrustada en "iframes", ya que de esta forma se evita que se robe el contenido de la página y otros lo reclamen como propio o que inserten el sitio web en una página maliciosa para robar información del usuario, sin mencionar que el costo del ancho de banda consumido por ejecutar el "iframe" correría por parte de la página que está siendo insertada.

Aplicarlo solo si es necesario: Ya que los "iframes" representan un cierto riesgo siempre es bueno limitar su uso a solo aquellos casos en los que sea necesaria su implementación.

Usar HTTPS: HTTPS es la versión encriptada de HTTP; pese a su costo se debería de incorporar a la página web siempre que sea posible, ya que brinda dos grandes ventajas:

1. Reduce las posibilidades de que el contenido remoto sea manipulado mientras se encuentra en tránsito
2. Impide que el contenido manipulado acceda al contenido padre y viceversa

Nunca se debería de insertar contenido de terceros mediante HTTP debido al gran peligro que conlleva. Una buena solución es GitHub Pages, el cual permite usar HTTPS por defecto, por lo tanto no es necesario tramitar el certificado de seguridad

Siempre usar el atributo "sandbox": Básicamente consiste en brindarle al elemento y su contenido únicamente los permisos necesarios para hacer su trabajo; un contenido sin restricciones puede hacer muchas cosas como por ejemplo ejecutar JavaScript. Es por eso que se restringe la funcionalidad del elemento y su contenido para reducir las opciones de un cracker. El atributo "sandbox" por defecto aplica todas las restricciones posibles al elemento "iframe", pero de ser necesario se pueden volver a conceder permisos uno por uno. Un recordatorio de seguridad importante es nunca conceder el permiso de allow-scripts junto con allow-same-origin, ya que estos eventos pudiesen saltarse las medidas de seguridad y ejecutar scripts para desactivar el "sandbox" por completo

Nota: sandbox no evita que un usuario pueda ser engañado por contenido malicioso; si existe alguna posibilidad de que el contenido pudiese ser malicioso, lo mejor es publicarlo desde un dominio diferente al principal

Configurar directivas CSP: Esto es con exactitud la configuración de servidor que se nombró con anterioridad; consiste en programar un envío de encabezados HTTP (metadatos) para evitar que la página web se presente en un iframe

Nota: Una buena regla de oro para la seguridad web es "Nunca puedes ser demasiado cauteloso. Si lo hizo, verifíquelo de todos modos. Si alguien más lo hizo, asuma que es peligroso hasta que se demuestre lo contrario".

Img

Esta etiqueta tiene la función de vincular archivos de imagen para que se visualicen en la página; para esto se utiliza el atributo "src"

Atributos

• src: Lugar en el que se almacena la URL del archivo de imagen
• width: Define el ancho de la imagen
• height: Define el alto de la imagen
• alt: Se trata de un texto alterno que describa la imagen; se usa en aquellas situaciones en las que la imagen no pueda ser mostrada, por ejemplo si existe algún error en la carga de las imágenes, o si se utiliza algún motor de lectura en la página
• title: Asigna un título a la imagen; sin embargo no es muy utilizado ya que únicamente muestra el título si se posiciona el ratón sobre la imagen, a la vez que puede causar errores en los motores de lectura

Nota: Los motores de búsqueda tienen en cuenta el texto alternativo al realizar una búsqueda; pueden hacer coincidir la búsqueda con este texto

Nota: Desactivar las imágenes es una actividad común en lugares con poco ancho de banda o un costo de internet muy alto; en estos casos el "alt" es muy útil

Nota: Normalmente se utiliza el width y el height en CSS; sin embargo si se usa en HTML, la página reservará el espacio asignado para la imagen aun si esta aún no ha terminado de cargar

Imágenes Adaptables

En la web existen dos tipos de formatos de imagen: los vectoriales y las rasterizadas. Estas últimas son los formatos como PNG y JPG, los cuales consisten en código que le indica al navegador la posición de cada píxel que compone la imagen; por ello es que la imagen se puede distorsionar cuando se altera el tamaño o proporción de esta, ya que el navegador seguirá esta estructura sin importar qué, empezará a hacer ajustes para seguir cumpliendo con esta estructura.

[Image of vector vs raster image comparison]

Debido a esto es que el cómo se aprecie una imagen en nuestra página se verá enormemente determinado por el dispositivo desde el que se ingrese y, por lo tanto, por el tamaño de la pantalla de este. Por ejemplo, si agrandamos una imagen para que cumpla con un tamaño adecuado para visualizarse desde una gran pantalla es muy probable que esta pierda calidad y se pixele; por otro lado, si tomamos la misma imagen y la reducimos hasta poder visualizarla adecuadamente en un teléfono móvil, es probable que al ser tan pequeña no podamos apreciar adecuadamente el contenido de esta.

A esto es a lo que se refiere una imagen adaptable: se trata de ajustar la imagen al tamaño en el que será visualizada. Para ello, la solución que se encontró consiste en incorporar varias imágenes en un elemento img, cada una editada para visualizarse adecuadamente en un diferente radio de píxeles; por defecto este solo permite vincular una imagen por uso, debido a esto existen los atributos "srcset" y "sizes"

srcset: Define el conjunto de imágenes y su tamaño que el navegador podría elegir según cuál sea la más conveniente para el dispositivo. La estructura para separar cada conjunto de información es con una coma; cada conjunto de información está compuesto por:

1. El nombre del archivo de imagen
2. El ancho intrínseco de la imagen en píxeles (este será el tamaño real de la imagen). Es importante tener en cuenta que se utiliza la unidad "w" no "px" como en otros casos

sizes: Define el conjunto de condiciones de medios en los que se muestra cada imagen (por ejemplo el ancho de la pantalla); por lo tanto define en qué ancho de pantalla sería correcto mostrar cada imagen. Está compuesto por:

1. La condición de medios en la que se indica mostrar cada imagen, por ejemplo: (max-width: 600px)
2. El ancho que finalmente ocupará la imagen cuando la condición de medios se cumpla, por ejemplo: (440px). Por lo general esta se define como menor al ancho de la pantalla para no afectar la experiencia del usuario

Nota: En el ancho de la ranura se debe indicar una longitud absoluta (px, em) o una relativa (porcentaje),

El siguiente es un ejemplo de código; se puede apreciar que el último conjunto de datos en el atributo "sizes" no posee condición de medios; esto se debe a que es el caso por defecto que se utilizará si ninguno de los casos anteriores se cumple. Es importante tener en cuenta el orden de los elementos, ya que el navegador elegirá el primer caso que sea compatible e ignorará todo lo que esté posterior a este.

En este código el navegador hace lo siguiente:

1. Verifica el ancho del dispositivo
2. Buscará la primera condición de medios que se cumpla
3. Verificará la medida dada a la imagen en esa consulta de medios
4. Cargará la imagen en el atributo "srcset" que mejor coincida con la medida asignada para la imagen

Los navegadores desactualizados que no soporten esta característica simplemente la ignorarán y continuarán con la carga común del atributo "src"

Una imagen en disco de 480px siempre tendrá un tamaño mucho menor que una de 800px; de ese modo se puede ahorrar ancho de banda y tiempo de carga al iniciar la página web

Nota: Algunos dispositivos móviles mienten sobre el ancho de su pantalla, lo cual no es muy útil para diseños receptivos; incluyendo <meta name="viewport" content="width=device-width"> entre los metadatos de la página los obligas a utilizar su ancho real

Cambiar la resolución de la imagen

Otra forma de mejorar el consumo de ancho de banda así como el tiempo de carga de nuestra página es el de ofrecer como opción al navegador la misma imagen pero con diferentes resoluciones; para esto se utiliza un método similar al anterior, es decir se utiliza el atributo "srcset" haciendo referencia a múltiples imágenes, con la diferencia de que en esta ocasión el tamaño en píxeles de las imágenes no es diferente, sino que se diferencia entre sí por la calidad de cada una.

Esto se realiza con la intención de que el navegador detecte la resolución a la que está trabajando el computador y seleccione la imagen acorde a esta. Por lo tanto, si el computador está configurado con una resolución alta el navegador seleccionará una imagen con buena resolución; por otro lado, si la configuración es para una resolución baja el navegador seleccionará la imagen con menor resolución. Esto cobra sentido cuando tenemos en cuenta el espacio en memoria de cada imagen, ya que mientras mayor resolución mayor será el peso de la imagen; de este modo podemos buscar la eficiencia de recursos cargando solo los que sean necesarios en base al dispositivo desde el que se ingrese. Un ejemplo de este código sería el siguiente:

Object

Representa junto con el elemento "embed" una herramienta de incrustación de propósito general; en otras palabras, se diferencia de "iframe" ya que "object" puede incrustar múltiples tipos de contenido externo que incluyan tecnologías de complemento como Java Applets y Flash; en otras palabras, puede ejecutar contenido externo y sus plug-ins

Nota: Un plug-in (complemento) es un software que permite que el navegador ejecute un elemento con el cual no es compatible de forma nativa

En sí el "object" es una tecnología heredada por HTML5, no es verdaderamente usado ya que los subprogramas con plug-in no se utilizan desde hace algunos años; pese a esto se puede dar alguna circunstancia de que se encuentre como puede ser en intranets o proyectos empresariales.

Picture

Se trata de un elemento contenedor al igual que "audio" y "video", que contiene varios elementos de origen los cuales proporcionan varias fuentes diferentes para que el navegador elija entre ellas; este elemento se utiliza para volver las imágenes en elementos responsive. La estructura del elemento es la siguiente:

Como se puede observar el elemento "picture" está compuesto por varios elementos "source", de los cuales cada uno llama a una imagen alternativa a disposición del navegador; estos elementos contienen el atributo "media" el cual define las condiciones de medios bajo las cuales se ejecuta cada imagen alternativa, así como también poseen el atributo "srcset" el cual contiene el llamado al archivo de imagen adecuado para esas condiciones de medios.

En todo caso siempre es necesario incluir el elemento "img" antes del cierre del elemento "picture" esto ya que brinda el "medio" en el cual se mostrarán las imágenes así como también actuará como un recurso alternativo para aquellos casos en los que algún navegador no sea compatible con el elemento "picture".

Para crear imágenes responsive no se puede utilizar JavaScript; esto es ya que lo primero que el navegador carga es el HTML, eso incluye las imágenes. Si hacemos que se analice el ancho de la pantalla con JavaScript o CSS, para cuando estos sean interpretados las imágenes ya estarán siendo cargadas; por lo tanto sería igual a seleccionar cuál elemento se utilizará luego de haberlo descargado. En este caso se produciría una sobrecarga de los elementos; este sería el peor de los casos para un elemento responsive

También podemos usar el elemento "picture" y el elemento "source" de una forma más tradicional para los navegadores antiguos, la cual es utilizando los atributos "type" y "sizes" por ejemplo:

Algunas cosas a tener en cuenta son:

• El atributo "media" solo se utiliza si se necesita crear imágenes responsive
• En el elemento "source" solo se puede referenciar imágenes del tipo definido en "type"
• También se puede crear listas de referencias de elementos en los atributos "srcset" y "sizes" separando los conjuntos de datos con una coma

Nota: recordar que el computador simplemente elegirá el primer elemento que arroje un verdadero, por lo que la posición de los elementos es importante

Nota: También hay que recordar que el atributo "srcset" puede referenciar varias imágenes e incluso un atributo de tamaño por lo que se pudiera ofrecer un conjunto de imágenes de varios tamaños e incluso diferentes resoluciones; sin embargo, siendo realistas es poco probable que sea necesario hacerlo

Nota: Cuando utilice "media", no ofrezca también condiciones de medios dentro del atributo de "sizes"

Video

La etiqueta video fue incorporada en HTML5 por lo que no está disponible en versiones antiguas de los navegadores así como en aquellos que estén basados exclusivamente en el texto. Esta etiqueta permite incorporar videos fácilmente en la página. La estructura de este elemento es:

Atributos

Posee diversos atributos, algunos de los cuales son exclusivos de este elemento:

• src: Al igual que en otras ocasiones, en este se almacena la ruta al archivo de video a reproducir
• controls: Este elemento es exclusivo de el elemento "video", indica al navegador que se deben de incluir la interfaz de control de video del navegador; también se puede usar para crear una propia usando JavaScript
• El párrafo dentro de la etiqueta Video: Se mostrará en aquellas situaciones en las que el navegador no soporte la etiqueta "video"
• width: Define el ancho del recuadro de video en la página
• height: Define el alto del recuadro de video en la página
• autoplay: Indica una reproducción automática del elemento mientras la página se carga; no es muy recomendable usarlo ya que los usuarios pueden encontrarlo molesto
• loop: Hace que el vídeo (o audio) comience a reproducirse cada vez que finaliza. Esto también puede llegar a resultar molesto para los usuarios
• muted: Hace que los medios se reproduzcan con el sonido apagado de forma predeterminada
• poster: La URL de una imagen que se mostrará antes de reproducir el vídeo. Está destinado a ser utilizado para la miniatura del vídeo
• preload: Se utiliza para almacenar en memoria los archivos grandes; puede tomar uno de estos tres valores:
  • none: no almacena el archivo en el búfer
  • auto: almacena el archivo multimedia
  • metadata: almacena solo los metadatos del archivo

Compatibilidad

Ya que se están incluyendo elementos multimedia a la página entra en vigor un tema bastante importante: el formato del elemento. Este es un aspecto indispensable al incorporar videos a una página web; esto debido a que existen varios formatos de audio y video, así como varias formas de reproducirlos; por ello, dependiendo del navegador que se utilice, algunos de estos pueden no ser compatibles. Esto puede originar que, según cuál sea el formato del elemento que se esté incorporando en la página, este no podrá ser visualizado en algunos navegadores.

Esta discrepancia entre los navegadores se debe a que algunos de los formatos de audio y video están sujetos a patentes, lo que imposibilita su empleo en aquellos que no se encuentren autorizados; por lo tanto estos navegadores recurren a formatos alternos que les brinden desempeños similares.

A la hora de implementar un video en la página existen en la actualidad dos formatos establecidos: el formato "mp4" (principalmente soportado en Internet Explorer y Safari) y el formato "webm" (principalmente soportado por Firefox y Chrome).

Lo recomendable al incorporar un video en una página web es que se incluya el elemento una vez por cada formato dentro de la etiqueta "source", es decir se utiliza dos veces el elemento "source" con el atributo "src" en su interior; una ocasión para el elemento en formato "mp4" y otra para el elemento en formato "webm" de la siguiente forma:

Esto ya que el elemento "source" apunta a la propia fuente del navegador; por lo tanto el navegador elegirá el primer formato que este soporte. El elemento "source" también cuenta con el atributo "type", el cual le indica al navegador el formato en el que se encuentra cada elemento; el navegador puede leer este atributo y de este modo omitir los formatos no compatibles ejecutando solo los que sea capaz de reproducir, ahorrando de este modo recursos y tiempo. Con la implementación de estos dos formatos el video debería de poder ser ejecutado en casi todos los navegadores

Nota: Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen.

Incorporar subtítulos

Esto se realiza creando un archivo "WebVTT"; este tipo de archivo está creado con el fin de almacenar cadenas de texto junto con metadatos para indicar en qué momento se mostrará cada cadena de texto e incluso información de estilo y posicionamiento. Las cadenas de texto se denominan señales y existen diferentes tipos con diferentes usos:

• Subtitles (Subtítulos): Son traducciones de un lenguaje extranjero usado en el video o audio
• Captions (Leyendas): Son transcripciones de diálogos o sonidos significativos para que puedan ser entendidas en situaciones en las que no se puede escuchar el audio
• timed descriptions (descripciones cronometradas): Texto para conversión a audio, para atender a personas con discapacidad visual.

Un ejemplo de la vista de un código WebVTT sería:

Para que este archivo se muestre junto con la reproducción de medios HTML se debe:

1. Guardar el archivo ".vtt" en el lugar correcto
2. Enlazar el archivo ".vtt" con la etiqueta "track". La pista debe colocarse dentro de los elementos audio o video, pero después de todos los elementos de origen (source)
3. Usar la etiqueta "kind" para definir si el archivo se trata de subtítulos, leyendas o descripciones

El siguiente es un ejemplo del código resultante:

Incrustar imágenes vectoriales

Existen dos tipos de imágenes: las rasterizadas, es decir, todos aquellos formatos comunes como PNG, JPG y BMP. Estas están compuestas por código que le indica al computador dónde va cada píxel; este código permanecerá sin cambio sin importar el tamaño de la imagen, por ello al agrandarla se empezará a "pixelar" y verse borrosa, esto ya que el navegador debe compensar el lugar de cada píxel de la imagen.

[Image of raster vs vector graphics comparison]

El segundo tipo son las imágenes vectoriales; estas están compuestas por algoritmos que definen la forma y ruta de esta, por lo tanto estos algoritmos pueden ser interpretados por el navegador para definir cómo debería verse la imagen, pudiendo de este modo adaptar la imagen a cambios de sus dimensiones sin que la nitidez de esta se vea afectada. Otra característica es que las imágenes vectoriales son mucho más ligeras que sus contrapartes ya que, en vez de contener la información de cada píxel, solo necesitan contener los algoritmos de esta. El formato en el que se encuentran todas las imágenes vectoriales es el SVG.

SVG

Se trata de un lenguaje de marcado (al igual que HTML) el cual contiene numerosos elementos para definir las formas que se desean que aparezcan en las imágenes; por lo tanto, SVG únicamente está pensado para marcar gráficos, no contenido; por ello todos sus elementos y atributos van enfocados a esto.

El siguiente es un ejemplo de código y su respectivo resultado:

Puede parecer que el SVG es fácil de codificar; sin embargo, al tratarse de imágenes complejas deja de ser viable hacerlo a mano, por ello muchas veces se utilizan editores de gráficos vectoriales como Inkscape o Illustrator, los cuales permiten utilizar herramientas gráficas para, por ejemplo, crear aproximaciones a fotos..

Otras de sus características positivas son:

1. El texto de las imágenes sigue siendo accesible para los motores de búsqueda, lo que es positivo para el SEO de la página.
2. Pueden integrarse muy bien con el estilo de la página ya que cada elemento de la imagen es un elemento al que se le puede dar CSS o scripting a través de JavaScript.

Sin embargo, también cuenta con ciertas desventajas como:

• El código puede complicarse rápidamente, por lo que el tamaño y peso de los archivos se vuelve un factor a tener en cuenta, sin mencionar que también puede requerir un tiempo de procesamiento considerable.
• Pueden llegar a ser más difíciles de crear que las imágenes rasterizadas según cuál sea el tipo de imagen que se quiera crear.
• No es compatible con versiones antiguas de los navegadores.

Por estas razones, los gráficos rasterizados son mejores para imágenes de precisión como las fotos; aún así se puede leer este artículo para preparar SVG para la web.

Agregar SVG a la página

Existen tres formas de hacer esto, las cuales son:

1. Incluirlo en un elemento "img"

   Esta es la forma más rápida de hacerlo; para esto solo se necesitarían los atributos de width y height para delimitar el tamaño en el caso de que no posea una relación de aspecto inherente.

   Ventajas

   • Sintaxis simple con el texto equivalente en el atributo "alt".
   • Se puede convertir la imagen fácilmente al incluir el "img" dentro de un "a".
   • El navegador puede almacenar el SVG en la caché, lo que resulta en tiempos de carga más rápidos para las páginas que usen la imagen.

   Contras

   • No se puede manipular la imagen con JavaScript.
   • Si se desea incorporar CSS a la imagen se debe incluir en el código SVG; de otra forma no tendrá efecto.
   • No puede cambiar el estilo de la imagen con pseudoclases CSS (como :focus).

   Compatibilidad con versiones anteriores de los navegadores

   Ya que las imágenes vectoriales (SVG) solo son ejecutables en versiones recientes de los navegadores, en aquellos casos en los que el usuario acceda a la página desde uno desactualizado, este no podrá visualizar los archivos SVG. Por ello, para evitar que la experiencia del usuario se vea afectada, existe una forma de solucionar la compatibilidad con estos casos.

   Para los navegadores que no admiten SVG lo recomendable es hacer referencia a una imagen rasterizada como PNG o JPG y usar el atributo "srcset" para hacer referencia al archivo SVG; ya que solo los navegadores actualizados reconocen este atributo, serán capaces de visualizar adecuadamente la imagen SVG mientras que los que no, visualizarán la imagen rasterizada. El código resultante sería el siguiente:

   

   También se puede incorporar una imagen SVG como imagen de fondo del sitio web usando la táctica de compatibilidad expuesta anteriormente; sin embargo, al hacerlo está sujeta al mismo tipo de restricciones, es decir, no podrá ser manipulado por JavaScript y podrá interactuar de forma limitada con el CSS. El resultado sería el siguiente:

   

   Nota: Si las imágenes vectoriales no se visualizan en el sitio web pudiese deberse a que el servidor no está configurado correctamente para ejecutarlas.

2. Incluir el código SVG en el documento HTML

   Otra forma de incluir imágenes SVG en nuestra página es incluir el código SVG directamente en nuestro documento HTML; para esto se utiliza la etiqueta "svg", dentro de esta se debe desarrollar todo el texto SVG, ya que sería una mala práctica intentar incluirlo fuera de esta. Al implementarlo de esta forma se dice que se está utilizando SVG en línea; a continuación se muestra un ejemplo de código:

   

   Ventajas

   • Incluir el código SVG directamente en el documento HTML ahorra una llamada HTTP, por lo que el tiempo de carga se ve un poco reducido.
   • Se puede implementar el CSS en plenitud; se puede añadir clases e identificadores a los elementos. De hecho, puede utilizar cualquier atributo de presentación SVG como propiedad CSS.
   • Usar el SVG en línea es la única forma en la que se pueden usar interacciones y animaciones CSS en la imagen SVG.
   • Puede usar el elemento SVG como hipervínculo envolviéndolo por un elemento "a".

   Desventajas

   • Este método solo es oportuno si se utiliza el SVG en un solo lugar, ya que la duplicación hace que el mantenimiento requiera muchos recursos.
   • El código SVG aumenta el tamaño del código HTML.
   • Con este método de inclusión el navegador no podrá almacenar la imagen SVG en la caché, por lo que no se podrán agilizar las cargas futuras del elemento.
   • Se puede incluir un respaldo en un objeto "foreignObject" para aquellos navegadores obsoletos que no puedan aceptar la imagen SVG; sin embargo, los navegadores modernos también descargarán la imagen de respaldo, por lo tanto es necesario analizar si es necesario provocar esa sobrecarga solo para incluir los navegadores desactualizados.
   
   

3. Incrustar el SVG en un elemento "iframe"

   Esta es la tercera forma de incluir el SVG en la página, aunque definitivamente no es la mejor forma de hacerlo; para aplicar este método se utiliza un "iframe" de forma común, haciendo referencia al archivo SVG e incluyendo un elemento "img" con una imagen rasterizada para mostrar en aquellos casos en los que el navegador no acepte la etiqueta "iframe" de la siguiente forma:

   

   Desventajas

   • Los "iframes" incluyen un respaldo que se muestra en caso de que la etiqueta no pueda ser ejecutada por el navegador.
   • A menos que el elemento SVG y la página tengan el mismo origen (ruta), no se puede usar JavaScript para manipular la imagen.

Table

Esta se trata de la etiqueta contenedora de la tabla en sí; marca su inicio y final, todos los elementos de esta se deben incluir en su interior.

Una recomendación a la hora de crear tablas es incluir una etiqueta "caption" en su interior; esta actúa como el título de la tabla, es beneficioso para que los usuarios puedan reconocer el contenido de la página rápidamente, esto incluye a los usuarios con problemas visuales que utilicen motores de lectura, por ello es que se recomienda que el título sea una descripción del contenido y que se coloque este elemento directamente debajo de la etiqueta "table" (fuera de la estructura de las celdas).

Td

Este elemento define las celdas de la tabla; dentro de esta etiqueta se encuentra el contenido de la misma, ya sea otros elementos HTML o algún texto. Un aspecto positivo de las tablas es que cualquier otro elemento puede ser albergado en sus celdas; una característica de las celdas es que por defecto cada celda nueva se ubicará a la derecha de la anterior en la misma fila.

Tr

Las tablas se estructuran en base a las filas de la misma; el elemento "tr" almacena en su interior todas las celdas que pertenezcan a una misma fila, por lo tanto cada fila es un conjunto de código independiente de otras filas. Dentro de este elemento se mantiene la característica de que las nuevas celdas que se añadan se insertarán de izquierda a derecha.

Th

Este elemento define los encabezados de la tabla; básicamente funciona de la misma forma que lo hace una celda común con el extra de incluir un poco de estilos al texto que se encuentra en el interior, esto ya que se visualiza por defecto en negritas, con el fin de resaltar los encabezados del resto de la información de la tabla. También incluye el atributo "scope", el cual permite mejorar la accesibilidad de la tabla ya que vincula un encabezado con sus respectivos datos de la misma fila o columna; por lo tanto los lectores web pueden trabajar adecuadamente.

Profundizando en las tablas

Los eventos son acciones o respuestas preestablecidas que el navegador puede ejecutar al ocurrir un suceso previamente determinado, principalmente la interacción con un usuario, por ejemplo al hacer clic sobre un elemento.

Los eventos disponibles pueden variar en función del elemento en cuestión, aún así existen algunos eventos que son de un carácter relativamente universal, por lo tanto están disponibles para la mayoría de los elementos HTML

Algunos de estos elementos son:

• onclick: El evento onclick ocurre cuando se hace clic sobre un elemento. Este atributo puede utilizarse con la mayoría de los elementos
• onmousedown: El evento onmousedown ocurre cuando el botón del ratón se pulsa cuando está encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
• onmouseup: El evento onmouseup ocurre cuando el botón del ratón se suelta cuando está encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
• onmouseover: El evento onmouseover ocurre cuando el ratón se sitúa sobre un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
• onmousemove: El evento onmousemove ocurre cuando el ratón se mueve mientras está sobre un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
• onmouseout: El evento onmouseout ocurre cuando el ratón se aparta de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
• onkeypress: El evento onkeypress ocurre cuando se pulsa y se suelta una tecla encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
• onkeydown: El evento onkeydown ocurre cuando se pulsa una tecla encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.
• onkeyup: El evento onkeyup ocurre cuando una tecla se suelta encima de un elemento. Este atributo puede utilizarse con la mayoría de los elementos.

Formularios

Los formularios son herramientas web en los que los usuarios pueden ingresar datos, los cuales pueden ser enviados a una base de datos o aplicados en el lado del usuario (por ejemplo configuraciones de la página), básicamente son elementos HTML en los que el usuario puede ingresar datos los cuales pueden ser empleados o almacenados por la página. En los formularios los datos ingresados con frecuencia son validados para corroborar que cumplen con los requerimientos o características del caso de uso, no hay que olvidar que los elementos HTML únicamente aportan la estructura a la página, por ello es que todo lo relacionado con funcionalidad (envío de datos, validaciones etc) son realizados empleando JavaScript, a su vez al igual que el resto de la página suelen ser decorados con estilos CSS por lo tanto en estos elementos es muy común que las tres tecnologías sean incorporadas.

Contenedores de un formulario

• Form

  Esta etiqueta se trata de un elemento contenedor especializado en contener el formulario, cuenta con algunos atributos específicos para definir el comportamiento del formulario, si bien todos sus atributos son opcionales se considera una buena práctica el incluir como mínimo los atributos: "action" y "method"

  • Action: Define la ubicación (URL) a la que se deben enviar los datos recopilados por el formulario
  • method: Define el método HTTP en el que se realizará la transferencia de datos ya sea la recepción o el envío de estos

  Nota: No se debe anidar un formulario dentro de otro, ya que esto causaría que ambos se comporten de forma impredecible

  Los elementos de un formulario pueden ser utilizados perfectamente fuera de uno, aunque no tengan nada que ver con el formulario, para estos casos si es lo que se desea también hay formas de vincularlos a este pese a encontrarte fuera del formulario

• Fieldset y Legend

  El elemento "fieldset" se trata de un elemento contenedor especializado en agrupar widgets que comparten un mismo propósito, esto con fines semánticos y de estilos

  Por otro lado el elemento "legend" se utiliza para etiquetar un elemento "fieldset", esto con el fin de brindar un guía a los motores de lectura, su método de implementación es incorporándolo justamente luego de la etiqueta de apertura de "fieldset" y su efecto es que los motores vincularán el valor de "legend" con todos los elementos dentro de "fieldset", a continuación se muestra un ejemplo de código:

  

  Otra característica del elemento "legend" es que su valor se puede anexar a otros elementos de etiquetados, como se puede ver en el caso anterior, ya que para cada "input" se complementa el valor de su respectivo label con el valor de legend, por lo que un lector de pantalla leería: "Fruit juice size + valorLabel" para cada "input"

  Nota: Comúnmente los motores de lectura leerán el contenido de la etiqueta "legend" antes que los "widgets" del formulario

  Como tal el elemento "fieldset" no altera la funcionalidad del formulario, lo que sí hace es mejorar la accesibilidad del formulario para los motores de búsqueda, por lo tanto es una etiqueta basada en mejorar la experiencia de personas con discapacidad visual

• Li y Ul

  Estas etiquetas por sí solas conforman una lista, sin embargo en los formularios pudiese ser útil el incorporarlas para actuar como contenedores para cada sección del formulario, esto se hace con el fin de poder aplicar los estilos CSS de mejor forma, como se puede ver en la siguiente imagen:

  

Label

Este elemento define los encabezados de los elementos del formulario, la función de este es plenamente de accesibilidad, tanto para usuarios comunes como para los motores de lectura. Un elemento "label" se debe vincular con el elemento al que este hace referencia; al vincularlo correctamente, los motores de lectura pueden funcionar de una forma más entendible para sus usuarios.

Para vincularlo con el elemento controlador se utiliza el atributo "for" con un valor igual al atributo "id" del controlador al que este hace referencia, por lo tanto el valor de "for" en el label y de "id" del controlador deben ser el mismo. Como tal, a la hora de expresarlo en código existen dos formas de estructurarlo:

1. La primera se trata de estructurar el "label" e "input" como dos elementos separados

   

2. La segunda forma consta de anidar el "input" dentro del elemento "label"

   

Nota: sea cual sea la forma en la que se estructure en código, siempre es recomendable que se vinculen los elementos mediante el "for" y el "id", para asegurar que todos los motores de lectura lo interpreten adecuadamente

Una ventaja de vincular correctamente los label con su respectivo widget es que al hacerse un clic sobre este automáticamente se activa el widget, esto es muy útil para el diseño y accesibilidad del formulario. El siguiente es tanto un ejemplo de uso así como del código en cuestión:

I like cherry

Incluir varios label

En la mayoría de los casos, pese a que se puede hacer, esto no es muy recomendable ya que los motores de lectura no interpretan bien esto, sin embargo existe una forma de ejecutar esto de forma adecuada: consiste en anidar una etiqueta "span" dentro de "label" como se puede ver a continuación:

Pudiese darse el caso en el que sea necesario o conveniente incorporar más de un "label" para ayudar a los motores de lectura a interpretar adecuadamente el "label". Por ejemplo, este es un código estructurado correctamente ya que se usa el atributo "aria-label", cuyo valor siempre es leído por estos (importante recordar que el * representa que el campo es obligatorio):

Nota: Este tipo de prácticas son necesarias ya que los motores de lectura tienen formas definidas de describir los símbolos; por ejemplo, al * lo describen como estrella. Por lo tanto, en este caso estructuramos el valor contextual del símbolo para su adecuada interpretación.

Nota: El resultado de la interpretación de un motor de lectura puede variar dependiendo de cuál se utilice, sin embargo esta es la forma más clara de estructurar el código.

Estructura de un formulario

Como ya se ha visto en ejemplos anteriores, es muy común e incluso recomendable el no utilizar únicamente elementos especializados para estructurarlos. Por ejemplo, es muy común el uso de listas ("ul", "ol", "li") para estructurarlos, así como elementos "p", títulos y subtítulos (h1, h2, h3...) e incluso se recomienda utilizar contenedores como "div" o "section" para estructurar el formulario en secciones.

Básicamente, estructurar un formulario consiste en hallar una estructura que le permita al desarrollador crear formularios accesibles y utilizables por todo tipo de usuarios. Una de las únicas recomendaciones es estructurarlo de forma que cada sección separada en funcionalidad deba estar contenida en un contenedor propio con elementos de conjunto de campo para incluir los botones de opción.

Atributos básicos

Los elementos de entrada de texto son los widgets más básicos de un formulario; permiten que el usuario ingrese texto en ellos. Por defecto, estos elementos únicamente soportan texto sin formato (negrita, cursiva, etc.), por lo que todos los elementos que soporten texto enriquecido son personalizados con la implementación de CSS y de JavaScript.

Algunos atributos comunes en los elementos de entrada de texto son:

• Readonly: En elementos en los que se aplique este atributo, el valor de entrada no podrá ser modificado por el usuario; a su vez, el valor de este será enviado junto a los datos provistos por el usuario.
• Disabled: Este atributo directamente desactiva el widget, por lo que no se podrá modificar el valor inicial de este elemento; a su vez, el valor de este no será enviado junto a los datos ingresados por el usuario.
• Placeholder: El valor de este atributo es una sugerencia o ayuda visual que se muestra antes de ingresar texto en el elemento en cuestión.
• Size: Define el tamaño físico del cuadro de texto.
• maxlength: Define la cantidad máxima de caracteres que recibirá el elemento de texto.
• Spellcheck: Activa la función de corrección de ortografía del navegador (si es que este lo soporta).

Algunos atributos comunes en los elementos de un formulario son:

• Autofocus: Este atributo define que el elemento en el que se aplique tendrá el foco de entrada cuando se carga la página. Solo un elemento asociado a un formulario puede usar este atributo; su valor por defecto es "false".
• Disabled: Desactiva un elemento para que el usuario no pueda interactuar con este; su valor por defecto es "false".
• Form: Este atributo vincula un elemento externo con un formulario del mismo documento; para hacerlo correctamente, el valor del atributo debe ser igual al "id" del formulario al que se desea vincular el elemento. Esta relación funciona incluso si el elemento se encuentra anidado dentro de un formulario diferente.
• Name: El nombre del elemento se envía junto con los datos del formulario.
• Value: Define el valor inicial del elemento.

Input

La etiqueta "input" se trata del elemento de entrada de datos; en este elemento el atributo más importante con diferencia es "type". Este elemento cuenta con multitud de valores; la característica más resaltante del elemento "input" es que puede cambiar su forma según el valor del atributo "type". Este elemento se utiliza para crear la mayoría de los widgets de un formulario.

Formas del elemento "Input"

• Text: Traducido como Campos de texto de una sola línea. Para definir esta forma, el valor del atributo "type" tiene que ser "text". Otra forma de lograr que el input tome esta forma es ignorar el atributo "type" por completo, ya que este es el valor predefinido del input.

  Nota: Este valor también se utilizará en caso de que el navegador desconozca el valor del atributo "type"

  

  Nota: La limitación de un campo de texto de una sola línea es que cualquier salto de línea que se ingrese será eliminado al momento de enviar los datos

• password: En esta forma de "input" se visualiza un cuadro de texto con la particularidad de que el texto ingresado en este no es visible; permanece oculto, representado por puntos o asteriscos. En sí, esta es la única característica distintiva de esta forma de "input", la cual es únicamente una función de la interfaz de usuario, ya que en sí no incluye ningún tipo de característica de seguridad adicional en los datos ni en el envío de estos.

  Para la seguridad, lo más recomendable es subir la página (al menos la de login) en un servicio HTTPS, ya que este tipo de conexión web cifra los datos antes de ser enviados. Si la página se encontrara en un formato con conexión HTTP, los datos serían enviados sin encriptar, lo que los expondría a poder ser interceptados por terceros.

  Para definir la utilización de este tipo de "input", el valor del atributo "type" tiene que ser igual a "password".

  

  Nota: Los navegadores reconocen la implementación de un campo de contraseña y tienen notificaciones que alertarán a los usuarios si están por enviar un formulario que no cumple con los requerimientos de seguridad adecuados o no incluyen conexiones HTTPS.

• Hidden: Traducido como "contenido oculto". Un input de tipo "hidden" consiste en un elemento oculto para los usuarios; por lo tanto, nunca se mostrará en pantalla ni mucho menos el usuario podrá enfocarse en este. Este elemento no solo puede almacenar datos, sino que estos son enviados junto a la información del formulario.

  Ya que el usuario nunca interactuará con este elemento, su valor puede ser definido a través de JavaScript. Es importante tener en cuenta que al tratarse de un elemento oculto, este no debe estar vinculado a ningún "label" y, por lo mismo, ya que no se muestra en pantalla, es importante definir los atributos "name" y "value".

  

• Checkbox: Este tipo de "input" se define con el valor "checkbox" en el atributo "type" y se trata de un elemento verificable, lo que significa que su estado puede cambiar dependiendo de si se encuentra verificado o no. Otra característica es que al enviarse el formulario únicamente se envían los campos que se encuentren verificados; si el elemento no lo está, no será enviado absolutamente ningún dato.

  

  En este tipo de elementos es importante mantener una buena estructura de código para asegurar la accesibilidad de la página. Los elementos que estén relacionados deben encontrarse en un mismo conjunto de campos con una leyenda que brinde una descripción general de la lista. Por lo general, cada conjunto de elementos "label/input" debe encontrarse en su propio elemento de lista (li).

  En este tipo de "input", generalmente los elementos "label" se incorporan directamente antes o después del "input" y, por último, las instrucciones para el conjunto de checkbox generalmente son el contenido de la leyenda.

  Nota: se puede crear un checkbox que esté verificado por defecto utilizando el atributo "checked".

  Nota: si el elemento se encuentra verificado pero no tiene un valor definido, este se enviará como "on".

  Nota: Es importante recordar que cualquier "label" o elemento relacionado con el "checkbox" debe usar el mismo nombre en el atributo "name".

  A continuación se muestra un ejemplo de código de este elemento:

  

  Nota: por último, muchos desarrolladores consideran al "checkbox" como un botón de alternancia (ya que su visualización cambia al estar o no verificado), por lo que aplican estilos CSS para presentarlo como tal.

• Radio: El botón de radio es definido con un valor "radio" en el atributo "type". Esta etiqueta puede parecer similar al "checkbox", sin embargo su funcionamiento es diferente ya que está pensado para que el usuario únicamente seleccione uno de varios elementos. Conceptualmente funciona como una lista de "checkbox" en los que solo un elemento puede estar marcado a la vez; para lograr este funcionamiento hay que relacionar los diversos elementos "radio" con un mismo valor en el atributo "name". Al hacer esto se considera que estos elementos conforman un grupo.

  

  Al enviarse el formulario únicamente se envía el elemento que esté verificado. Si se da el caso de que ninguno de los elementos está verificado, no se enviará ningún dato desde el grupo de elementos.

  Nota: A diferencia del "checkbox", el elemento "radio", una vez verificado algún elemento, este no puede ser desmarcado por el usuario a menos que restablezca el formulario.

• Botones: Los valores del atributo "type" en el elemento "input" son tan versátiles que incluso puede llegar a mostrarse y actuar como un botón. En particular, el "input" tiene tres valores con los que actúa como botón, los cuales son los siguientes:

  • Submit: Esta modalidad tiene específicamente la función de enviar los datos de un formulario. Se define con el valor "submit" en el atributo "type".

    Nota: En los elementos "button", omitir o utilizar un valor desconocido en el atributo "type" genera un botón de tipo submit, ya que es la función por defecto.

  • Reset: Restablece todos los widgets del formulario a su valor predeterminado. Se define con un valor "reset" en el "type" del elemento.

  • Button: No tiene una función definida; se trata de un botón personalizable con JavaScript. Se define con el valor "button" en el atributo "type".

  No confundir el "input" con el elemento "button", el cual puede realizar las mismas funciones ya que este elemento se especializa en crear botones. No obstante, se diferencian en que el elemento "button" puede albergar texto y elementos de formato de texto en su interior; por otro lado, en el input el texto del botón se define con el atributo "value", por lo que no puede contener estos elementos. En cambio, la ventaja del "input" es que es más fácil de diseñar. A continuación se muestran ejemplos de cada caso con ambos elementos:

  

  Nota: la visualización de ambos elementos es básicamente la misma.

• Image: Este tipo de "input" mezcla las características de los elementos "img" y "button". Por lo tanto, se visualiza igual que un "img" con la característica de que se comporta como un botón submit al hacer clic en este. Se define con un valor "image" en el atributo "type". Por sus características, soporta todos los atributos de un elemento "img" así como los compatibles con los botones de un formulario.

  

  Este elemento no envía los datos de un formulario de forma tradicional; en su lugar, envía las coordenadas del lugar de la imagen en el que se realizó el clic. Para esto, el valor de las coordenadas se define en base al eje X y el eje Y dentro de la imagen, tomando como punto inicial (0X, 0Y) la esquina superior izquierda de esta.

  • La clave de valor del eje X es el valor del atributo name seguido de la cadena ".x"
  • La clave de valor del eje Y es el valor del atributo name seguido de la cadena ".y"

  Por ejemplo, si se realizó un clic en las coordenadas x=123, y=456 de la imagen, entonces los datos se enviarían de la siguiente forma:

  

• File: Este tipo de "input" tiene la función de recibir un archivo para enviarlo junto con los datos de un formulario. Para definirlo como tal es necesario utilizar el valor "file" en el atributo "type". Otros atributos muy utilizados en este elemento son:

  • Multiple: Este atributo le permite al usuario seleccionar más de un archivo a la vez.
  • Accept: Este atributo se utiliza para definir los formatos de archivo que serán aceptados por el elemento.
  

  Nota: En algunos teléfonos este atributo puede aceptar fotos, videos y audio tomados directamente con el dispositivo. En este caso, se añade información de la captura al atributo de aceptación de la siguiente manera:

  

• Email: Se trata de un tipo de "input" más moderno ya que fue introducido en HTML5; consiste en un campo de texto con una validación con respecto al tipo de dato que recibe. Está configurado para aceptar únicamente direcciones de correos electrónicos; cualquier texto ingresado que no cumpla con el formato de uno será automáticamente rechazado. Se define como tal aplicando un valor "email" en el atributo "type".

  

  Nota: Utilizando el atributo multiple puede ser posible para el usuario ingresar varias direcciones de correo a la vez (separadas entre sí por comas).

  En este tipo de elementos, la validación de los datos es ejecutada automáticamente en el lado del cliente por el navegador antes de enviar los datos, lo cual ahorra tiempo y consultas al servidor. No obstante, las validaciones ejecutadas en el lado del cliente no son seguras, ya que son muy fáciles de desactivar; por lo tanto, es indispensable implementar validaciones exhaustivas de los datos en el servidor, para evitar vulnerabilidades que terceros malintencionados puedan aprovechar.

  Nota: La validación del correo por parte del navegador no comprueba que el correo exista en realidad.

• Search: Este tipo de "input" también es reciente y, al aplicarse, muestra un cuadro de texto especializado en realizar búsquedas en la página. Para utilizar este tipo de elemento es necesario aplicar el valor "search" en el atributo "type". Un cuadro de búsqueda se diferencia de un cuadro de texto normal principalmente en la apariencia de este, ya que suele mostrar características particulares como:

  • Bordes redondeados
  • Una "X" en un costado la cual eliminará el texto ingresado automáticamente
  • Los teclados dinámicos mostrarán "buscar" o mostrarán un icono de lupa
  
  

  Otra característica positiva de estos es que los datos del atributo "search" se guardarán automáticamente para facilitar búsquedas dentro de la página.

• Tel: Se trata de un tipo de "input" especializado en recibir números de teléfono. Su efecto aplica para aquellos dispositivos que utilicen un teclado dinámico, ya que al seleccionar el elemento automáticamente se muestra un teclado numérico.

  No cuenta con ninguna validación respecto a los datos ingresados en este, ya que existen muchos formatos de números de teléfonos en el mundo; por lo tanto, también puede recibir letras. Cuenta con un atributo llamado "pattern", el cual permite definir los formatos de número de teléfono que se desea aceptar. Para aplicar este tipo de "input", se utiliza el valor "tel" en el atributo "type".

  

• Url: Este tipo de "input" se define con un valor "url" en el atributo "type". Este elemento cuenta con varias validaciones ejecutadas en el lado del cliente, las cuales rechazarán cualquier dirección que no cuente con un protocolo HTTP o si la dirección tiene un formato incorrecto.

  Al igual que con el "input" "email", estas validaciones son inseguras ya que pueden ser desactivadas fácilmente, por lo que lo mejor siempre es implementar validaciones en el servidor que comprueben los datos recibidos.

  

  Nota: Estas validaciones del lado del cliente no verifican que la dirección ingresada realmente exista.

• Number: Este "input" muestra un campo de texto con la validación de exclusivamente aceptar números. También suelen mostrarse unas flechas ascendentes y descendentes en el costado derecho del recuadro; estas flechas son otra alternativa para ingresar o modificar el texto sin el uso del teclado, ya que permiten aumentar o disminuir los números.

  En este elemento se pueden usar los atributos "min" y "max" para definir los valores mínimos y máximos del elemento respectivamente. También se puede usar el atributo "step" para definir el aumento y disminución de las flechas; de forma determinada (incluyendo si el atributo se omite), el valor de este atributo es "1". Para incluir números flotantes, se puede ingresar un valor "any" en este.

  Por ejemplo:

  1. Control numérico restringido entre el 1 y el 10, con un incremento y reducción en sus botones de 2.

     

  2. Control numérico restringido entre el 0 y el 1 con un incremento o reducción establecido de 0.01.

     

  Nota: este elemento es útil en aquellos casos en los que se ingresen números dentro de un rango establecido. Si el número se encuentra dentro de un rango ilimitado o demasiado grande, es mejor optar por el elemento "tel".

• Range: Se trata de otra forma de seleccionar un número, la cual consiste en la implementación de un menú desplazable, el cual abarca un rango de valores definibles. Se trata de un elemento menos preciso que los campos de texto, por lo que se utiliza en aquellos casos en los que el valor exacto no es muy importante. Se define este elemento aplicando un valor "range" al atributo "type".

  Al utilizar este tipo de elemento es muy importante definir los atributos "min", "max" y "step", ya que cada uno define el valor mínimo, el valor máximo y el valor incremental del elemento respectivamente.

  

  En este ejemplo se utiliza el atributo "value" para definir el valor inicial del elemento.

  El elemento "range" no provee de un elemento visual que ayude a conocer el valor actual del elemento; por esto es que suele acompañarse por el elemento output, el cual permite mostrar un valor de entrada o salida de un elemento dentro de cualquier otro. Este elemento se caracteriza por funcionar igual que un "label"; es decir, con el atributo "for" es posible relacionarlo con los elementos que generan la salida.

  Nota: para que el elemento output funcione es necesario comandarlo con JS, he aquí un ejemplo:

  


• Date y Time: En esta ocasión no se trata de un tipo de "input" en particular, sino que en su lugar se refiere a un conjunto de "inputs" de los cuales cada uno cumple con el rol de manejar los datos referentes a la hora y fecha provista por el usuario. En este caso existen varios tipos de "input" para un mismo tipo de función, ya que en realidad existen diversas formas de expresar la hora y fecha; por lo tanto, cada tipo cuenta con características propias que lo hacen adaptarse a un formato hora/fecha en específico.

  Los elementos Hora/Fecha son:

  • Datetime-local: Crea un widget para mostrar y elegir una fecha con hora sin información de zona horaria específica.

    

  • Month: Crea un widget para mostrar y elegir un mes con un año.

    

  • Time: Crea un widget para mostrar y elegir un valor de tiempo. Si bien la hora puede mostrarse en formato de 12 horas, el valor devuelto está en formato de 24 horas.

    

  • Week: Crea un widget para mostrar y elegir un número de semana y su año.

    

    Nota: En este formato la semana comienza el lunes y termina el domingo.

  Nota: Un aspecto que vuelve complejo el uso de este tipo de elementos es el tema de la compatibilidad, ya que se tratan de elementos HTML5.

  Restricción de valores fecha/hora: Todos los controles de fecha y hora se pueden restringir mediante los atributos "min" y "max", y se pueden restringir aún más mediante el atributo "step" (cuyo valor varía según el tipo de "input"), tal y como se puede apreciar a continuación:

  

• Color: Esta es otra forma de "input"; puede crear este elemento utilizando el valor "color" en el atributo "type". Los colores son siempre un poco difíciles de manejar. Hay muchas formas de expresarlos: valores RGB (decimales o hexadecimales), valores HSL, palabras clave, etc.

  Su funcionamiento consiste en hacer clic en un control de color; generalmente se muestra la funcionalidad de selección de color predeterminada del sistema operativo.

  

Textarea

El elemento "textarea" se caracteriza por ser un cuadro de texto de múltiples líneas con una extensión virtualmente infinita (sus dimensiones nunca cambian pero se puede navegar por el texto). Es importante resaltar que, pese a que su función es similar a un elemento "input", posee dos diferencias bastante significativas con este último: la primera consiste en que este elemento conserva cualquier salto de línea que se ingrese en el texto; la segunda diferencia radica en la estructura del código de la etiqueta "textarea" en sí, ya que no se trata de un elemento cerrado como "input", sino que requiere de una etiqueta de cierre adecuada. Esta diferencia entre ambas etiquetas cambia la forma en que se incorpora un texto predeterminado en cada una; la forma en que esto se define en estas etiquetas es la siguiente:

Nota: Por las características del elemento "textarea", pese a que se puede anidar contenido HTML, CSS y JS en su interior, todo se representa como si fuese contenido de texto sin formato.

Atributos

Textarea cuenta con tres atributos exclusivos para poder definir su representación del texto:

• cols: Define el ancho del control de texto en base a las columnas mostradas. Este puede ser considerado un ancho inicial ya que las dimensiones del elemento pueden ser cambiadas utilizando CSS. En caso de que este atributo no sea especificado, su valor por defecto es 30.

• rows: Define el alto del control de texto en base a las filas mostradas. En este caso también se puede considerar que se trata de un alto inicial, ya que las dimensiones nuevamente pueden ser cambiadas aplicando estilos CSS. En caso de que este atributo no sea definido, su valor por defecto es de 10.

• wrap: Define la envoltura del texto del elemento. Cuenta con dos valores posibles, los cuales son:

  1. soft: Indica que el texto enviado no será envuelto, pero a su vez el texto representado por el navegador sí lo estará.
  2. hard: Indica que tanto el texto enviado como el representado están envueltos (requiere el atributo cols).

Modificar su tamaño utilizando CSS

Para cambiar las dimensiones del elemento "textarea" se utiliza la propiedad "resize", la cual puede adoptar cualquiera de los siguientes valores:

• both: Se trata del valor predeterminado y permite cambiar el tamaño horizontal y verticalmente.
• horizontal: Permite cambiar el tamaño del elemento horizontalmente.
• vertical: Permite cambiar el valor del elemento verticalmente.
• none: No permite cambiar el tamaño del elemento.
• block y inline: Se tratan de valores experimentales que permiten cambiar el tamaño en bloque o en línea en función de la dirección del texto.

Button

Por último, pero no menos importante, se encuentra el elemento "button". Se trata de un botón el cual puede ser configurado para realizar varias acciones; un ejemplo de su estructura es el siguiente:

Al igual que el elemento "input", "button" acepta el atributo "type", el cual puede tomar cualquiera de tres valores:

• Submit: Al hacer clic en el botón cuando tenga indicado un valor "submit", los datos del formulario serán enviados a la dirección (URL) definida por el atributo "action" del elemento "form".
• Reset: Al dar clic en el botón mientras posea este "type", todos los elementos del formulario (widgets) se restablecerán a su valor por defecto. Desde el punto de vista de UX, esto es una mala práctica; lo mejor es solo incluirlo en los casos en los que de verdad sea necesaria su implementación.
• Button: El valor button por sí mismo literalmente no hace nada, ya que la función de esta opción es permitir crear una funcionalidad personalizada con JavaScript.

Nota: También se puede crear un botón usando el elemento "input" con el atributo "type", el cual posee ciertos valores que mostrarán el "input" como un botón. Sin embargo, la diferencia radica en que la etiqueta "button" permite contenido HTML completo, lo que significa un contenido de botón más completo y creativo.

Select

Este elemento consiste en un cuadro de selección con uno o más elementos de opción como elementos secundarios, de los cuales cada uno especifica una de las opciones del "select". Este elemento secundario se trata de un elemento "option"; en otras palabras, el "select" es un cuadro de selección y cada una de las opciones es definida por una etiqueta "option", las cuales se encuentran albergadas en el interior de la etiqueta select.

Si es necesario mostrar alguna de las opciones como dato seleccionado por defecto, se puede definir utilizando el atributo "selected" en el "option" que lo contenga.

También es posible anidar los elementos "option" dentro de una etiqueta "optgroup" con el fin de agrupar las opciones que posean algún tipo de relación entre sí. Por lo tanto, si se incorpora un elemento "optgroup" dentro del "select", este mostrará a aquellos elementos "option" que se encuentren en su interior como un grupo de opciones, como se puede apreciar a continuación:

Nota: Para mostrar un encabezado en los grupos de opciones se utiliza el atributo "label" en el elemento "optgroup".

Nota: Los encabezados de los grupos de opciones únicamente son eso y no son seleccionables como opción.

Los elementos "select" cuentan con otros atributos particulares, los cuales son:

• value: Este, en caso de que se utilice, define el verdadero valor del dato que se enviará con el formulario. Por lo tanto, asigna el valor implícito de la opción; se utiliza en aquellas situaciones en las que sea necesario que el usuario visualice un valor pero sea más eficiente enviar otro, como se puede ver en el ejemplo:

  

  Nota: en caso de que no se aplique este atributo, el contenido del elemento "option" se enviará como valor de esta opción.

• size: Permite definir el número de opciones visibles en el elemento "select" cuando este no se encuentre seleccionado.

  Nota: Por defecto su valor es 1.

• multiple: este atributo permite que sea posible seleccionar más de una opción a la vez; para hacerlo, el usuario debe mantener presionada la tecla Ctrl.

  Nota: Todos los navegadores que son compatibles con la etiqueta "select" también lo son con el atributo "multiple".

Datalist

El elemento "datalist" o lista de datos se trata de un elemento el cual brinda al usuario diversas opciones que pueden ser ingresadas en un cuadro de texto. No se trata de un controlador en sí, sino de un elemento complementario para cuadros de texto. A diferencia del elemento "select", el "datalist" tiene la función de autocompletar el texto del usuario. Para albergar las opciones del elemento se utiliza el elemento "option" al igual que en los "select". Su estructura es la siguiente:

Como se puede ver en el ejemplo, el controlador utilizado es un "input" de tipo text, el cual se vincula con el elemento "datalist" para que este realice su función de autocompletado y lista en el cuadro de texto. La forma de vincular ambos elementos es a través del uso del "id" del "datalist" y del atributo "list" del elemento "input"; para que ambos elementos estén correctamente vinculados, ambos atributos deben coincidir.

A continuación se muestra un ejemplo de implementación de este elemento:

Nota: Este elemento está soportado por la gran mayoría de los navegadores; sin embargo, en las versiones antiguas puede que este no sea el caso. Para estos casos existe un truco para asegurar la implementación de la lista: consiste en anidar un "select" justo debajo del "datalist". En los navegadores compatibles, todo elemento dentro de un "datalist" que no sea un "option" es ignorado; sin embargo, cuando el navegador no soporta la etiqueta, se visualizará el "select" que se encuentra anidado.

Nota: El elemento "datalist" puede ser utilizado en conjunto con cualquier otro elemento siempre y cuando este requiera una entrada de datos por parte del usuario; sin embargo, el efecto de la etiqueta en otros elementos no está estandarizado, por lo tanto se podría comportar diferente según desde cuál navegador se ejecute.

Progress

Se trata de una barra de progreso la cual representa un valor numérico, el cual cambia con el tiempo hasta alcanzar un valor máximo, el cual se define con el uso del atributo "max". Este elemento se utiliza en todas aquellas situaciones en las que se requiera representar el progreso de una tarea; por ejemplo, el porcentaje de descarga de un archivo.

Nota: el contenido dentro de este elemento realmente solo es una alternativa para aquellos navegadores que no sean compatibles con esta etiqueta, así como para que los motores de lectura los lean.

Meter

Se trata de una barra de medidor; representa un valor fijo delimitado entre valores mínimos y máximos. Este valor se representa visualmente como una barra. Para saber cómo se ve esta barra, comparamos el valor con otros valores establecidos:

• Los atributos "low" y "high" dividen el rango en tres partes:

  • La parte inferior se encuentra entre los valores min y low.
  • La parte media del elemento se encuentra entre los valores low y high.
  • La parte superior se encuentra entre los valores high y max.

• El atributo "optimum" define el valor óptimo para el elemento medidor; junto con los atributos "low" y "high", define qué parte del rango se prefiere:

  • Si el valor óptimo se encuentra en la parte inferior, esta se considera la parte preferida, la parte media se considera promedio y la parte alta una mala área.
  • Si el valor se encuentra en la parte media, esta se considera la parte preferida, mientras que las partes inferior y superior se consideran promedio.
  • Si el valor óptimo se encuentra en la parte superior, esta se considera la parte preferida, la parte media se considera una parte promedio y la parte baja se considera una mala área.

Según el área en la que se encuentre el valor óptimo, el color de la barra cambiará:

• Si se encuentra en la parte preferida, la barra será de color verde.
• Si se encuentra en la parte promedio, la barra será de color amarilla.
• Si se encuentra en la parte mala, la barra será de color roja.

Nota: un ejemplo de uso sería la representación visual del espacio de memoria de un disco; al tener poco espacio ocupado se visualiza verde, al estar a la mitad de su capacidad amarillo y al estar casi lleno se visualiza rojo.

Nota: el contenido dentro de este elemento realmente solo es una alternativa para aquellos navegadores que no sean compatibles con esta etiqueta, así como para que los motores de lectura los lean.

Nota: el soporte para esta etiqueta es bueno; entre los navegadores grandes, el único que no lo soporta es Internet Explorer.

Envío de datos del formulario

Como ya se ha dicho anteriormente, el envío de los datos se realiza según el valor de los atributos "action" y "method". Sin embargo, el primer paso para enviar los datos del formulario es proveer a todos los elementos (controladores) nombres propios; estos son muy importantes tanto en el lado del cliente como en el lado del servidor, ya que le indican al navegador qué nombre darle a cada dato. Por parte del servidor, los datos se manejan en relaciones de nombre-valor.

A continuación se muestra un ejemplo de código: