Este artículo forma parte del Curso HTML5 desde cero.
Haz click aquí para ver el índice.
En los módulos anteriores has aprendido la estructura básica de un documento HTML5, cómo añadir información esencial para definir el contenido del mismo, tanto para el usuario como para los buscadores y las etiquetas más usadas al definir ciertos formatos como títulos y subtítulos, párrafos, negritas y subrayados, enlaces, etc. Hoy te explicaré un listado de etiquetas que probablemente no son las más usadas pero que sin duda debes conocerlas.
Contenido del artículo
- 1 Etiqueta <base>
- 2 Etiqueta <noscript> … </noscript>
- 3 Etiqueta <code> … </code>
- 4 Etiqueta <samp> … </samp>
- 5 Etiqueta <kbd> … </kbd>
- 6 Etiqueta <var> … </var>
- 7 Etiqueta <mark> … </mark>
- 8 Etiqueta <cite> … </cite>
- 9 Etiqueta <sub> … </sub>
- 10 Etiqueta <sup> … </sup>
- 11 Etiqueta <ins> … </ins>
- 12 Etiqueta <del> … </del>
- 13 Etiqueta <abbr> … </abbr>
- 14 Etiqueta <address> … </address>
- 15 Etiqueta <bdo> … </bdo>
- 16 Etiqueta <dfn> … </dfn>
- 17 Etiqueta <pre> … </pre>
- 18 Etiqueta <q> … </q>
- 19 Etiqueta <blockquote> … </blockquote>
- 20 Etiqueta <bdi> … </bdi>
- 21 Etiquetas <ruby> … </ruby>, <rt> … </rt> y <rp> … </rp>
- 22 Etiqueta <dialog> … </dialog>
- 23 ¡A practicar!
Etiqueta <base>
Esta etiqueta se usa para especificar una URL por defecto y un destino por defecto para todos los enlaces relativos del documento HTML5.
Se añade dentro del grupo de etiquetas de metadatos (en la cabecera), sólo puede aparecer una vez en el documento y es una etiqueta sin cierre. Su formato es el siguiente:
<base href=»valor» target=»valor» />
Atributos:
- href: Establece la URL base para todas las URL relativas.
- target: Permite especificar el destino por defecto para todos los enlaces y formularios. Ya te he mostrado anteriormente el tipo de valores que puede recibir este tipo de atributos, pero hagamos un repaso:
- _blank: Especifica que el destino sea una nueva ventana de navegador, o una nueva pestaña.
- _self: Es el valor por defecto. Abre el destino en el mismo lugar donde se haya realizar el clic (misma ventana o pestaña).
- _parent: Abre el destino en un marco asociado.
- _top: Abre el destino ocupando todo el cuerpo de la ventana.
- Framename: Abre el destino en el marco del cual se especifica el nombre.
Etiqueta <noscript> … </noscript>
Esta etiqueta es complementaria a la etiqueta <script> que viste en el segundo módulo de este curso (estructura de un documento html).
Se utiliza para definir un contenido alternativo en el documento HTML5 cuando un navegador no soporta la ejecución de scripts o cuando están desactivados.
Si se utiliza dentro de la cabecera del documento es necesario ponerla dentro de las etiquetas <head> y </head>, y afecta de esta forma a las etiquetas <link>, <style> y <meta>, permitiendo cargar de forma alternativa estos elementos.
A continuación te muestro un ejemplo práctico del sentido de esta etiqueta y de cómo usarla:
Etiqueta <code> … </code>
Con esta etiqueta definimos que un texto ha de mostrarse de forma especial dado que el texto encerrado es interpretado como un código fuente de programación, o código de ordenador.
Etiqueta <samp> … </samp>
Esta etiqueta es parecida a la anterior, e indica al navegador que el texto ha de ser interpretado igualmente como código fuente de programación o código de ordenador. La diferencia es que esta etiqueta debe mostrar el texto como texto de salida. Sin embargo, hoy en día, más allá del significado semántico, la mayoría de navegadores no hacen distinción entre ésta y la anterior.
Etiqueta <kbd> … </kbd>
De nuevo, parecida a las anteriores. En este caso el texto encerrado tendrá un formato de texto para distinguir lo que el usuario tendría que teclear en la solicitud del programa. Y, de nuevo, lo habitual es que el navegador muestre este texto de la misma forma que las anteriores dos etiquetas.
Te dejo a continuación un ejemplo del uso de las tres últimas etiquetas y un ejemplo de cómo se visualiza en cualquier navegador actual (pruébalo tu mismo creando un archivo HTML y abriéndolo en tu navegador):
Si abres el código anterior en tu navegador, se mostrará el siguiente texto de la misma manera:
Etiqueta <var> … </var>
En este caso, resaltaremos el texto encerrado indicando que es una definición de variables en un programa de ordenador o código de programación. Los navegadores suelen diferenciarla de las anteriores mostrando el texto encerrado en cursiva o itálica.
Etiqueta <mark> … </mark>
Esta etiqueta indica al navegador que tiene que mostrar el texto encerrado en ella como si hubieramos pasado un bolígrafo resaltador de texto por encima (el típico subrayador amarillo que hemos usado todos alguna vez).
Etiqueta <cite> … </cite>
Utilizada para resaltar el texto de una cita o cualquier trabajo similar, como una obra, autor, película, etc. Como en las etiquetas anteriores, tiene más un significado semántico que visual, ya que el navegador mostrará el texto en cursiva o itálica.
Etiqueta <sub> … </sub>
Esta etiqueta permite definir un texto en subíndice, que aparece por debajo de la línea base del texto standar. El ejemplo más habitual es su uso en formulas químicas, como la del agua: H2O
Etiqueta <sup> … </sup>
Es la opuesta a la anterior, permite definir un texto en superíndice, y se utiliza de forma habitual para añadir notas a pié de página o añadir cualquier referencia: referencia1
Etiqueta <ins> … </ins>
Permite definir que un texto ha sido actualizado o insertado en el documento web, y los navegadores suelen representarlo subrayado. Esta etiqueta dispone de los siguientes atributos:
- cite: Establece la URL en la que se encuentra el documento donde se explican los detalles o motivos de la inserción de este texto.
- datetime: Define la fecha y hora en la que se ha añadido este texto al documento HTML.
Te muestro un ejemplo de su estructura:
<ins cite=»https://www.letswebbing.com/detalles.html» datetime=»2017-10-16T10:43:00Z»>Añadido por Nicolau Roca</ins>
Etiqueta <del> … </del>
Definimos el texto encerrado como borrado en una fecha determinado. Sería el significado contrario a la etiqueta anterior <ins>. Tiene los mismos atributos y su sintaxis es la misma. Los navegadores suelen mostrar este texto tachado.
Etiqueta <abbr> … </abbr>
Utilizada para indicar un texto como abreviatura o acrónico, como WWW o NASA. Los navegadores muestran este texto sin un formato especial, pero al pasar el ratón por encima mostrarán el atributo title que esté definida en el código, a modo de explicación. Te muestro un ejemplo práctico:
<p> ¿Sabes qué es la <abbr title=»Administración Nacional de la Aeronáutica y del Espacio»>NASA</abbr>?
Si quieres ver un ejemplo de qué hace esta etiqueta, pon el ratón encima de esta palabra: NASA.
Etiqueta <address> … </address>
Dentro de esta etiqueta definimos información de contacto del autor o propietario del documento o artículo, y si se encuentra dentro del cuerpo (<body>) representa la información de contacto del documento completo. Los navegadores suelen mostrar esta información en cursiva. Te muestro un ejemplo:
Etiqueta <bdo> … </bdo>
Permite definir la dirección de visualización del texto contenido en la misma. Es decir, si estamos escribiendo el texto de izquiera a derecha, o de derecha a izquierda. Te muestro un ejemplo con su sintaxis, donde la dirección del texto se indica dentro del atributo dir, y a continuación cómo es mostrado el código por el navegador:
Etiqueta <dfn> … </dfn>
Se utiliza para la definición de un término. Los navegadores suelen mostrar la palabra en cursiva, pero lógicamente el significado semántico es diferente.
Etiqueta <pre> … </pre>
Sirve para definir lo que se denomina texto con formato o preformateado. Como sabes, el texto HTML no respeta saltos de línea ni espaciados, y se limita a interpretar el texto libre de etiquetas sin saltos de línea y con un único espacio entre palabras. Sin embargo, si encierras texto dentro de la etiqueta <pre> … </pre> le navegador entenderá que ya has dado el formato al texto, por lo que mostrará el texto tal y como tu lo escribas, incluyendo saltos de línea, espaciados dobles, triples, etc.
Etiqueta <q> … </q>
Se utiliza para insertar un texto acotado entre comillas dobles.
Etiqueta <blockquote> … </blockquote>
Permite insertar texto para que el navegador aplique una sangría a la izquierda, y semánticamente se utiliza para realizar una distinción sobre un texto al que se quiere hacer referencia.
Por cada etiqueta <blockquote> anidada dentro de otra, se realiza un nuevo sangrado sobre el texto encerrado. Su sintaxis es la siguiente:
<blockquote cite=»valor«> texto encerrado </blockquote>
El atributo cite sirve para indicar una URL como origen del texto encerrado.
Etiqueta <bdi> … </bdi>
Permite definir lo que se denomina aislamiento bidireccional. Es decir, el texto encerrado es un texto contenido en otra etiqueta del que desconocemos la dirección en la que está escrito.
Etiquetas <ruby> … </ruby>, <rt> … </rt> y <rp> … </rp>
El objetivo de la etiqueta <ruby> es la de crear anotaciones en formato ruby, que se utilizan para la tipografía de Asia Oriental, permitiendo mostrar la pronunciación de los caracteres del este asiático.
Se utiliza en conjunto con las otras dos etiquetas <rt> y <rp>; la primera permite realizar la explicación del trexto, y la segunda permite visualizar un texto en los navegadores que no soportan la etiqueta anterior.
Te dejo un código usando estas etiquetas y a continuación cómo visualizan los navegadores este mismo código:
Etiqueta <dialog> … </dialog>
Semánticamente representa un diálogo, a modo de representación de una conversación de chat o dialogo entre programa y usuario.
También se utiliza para abrir un cuadro de dialogo en la ventana del navegador para que muestre información al realizar un clic sobre un elemento del documento, aunque es cierto que a día de hoy pocos navegadores soportan esta característica.
¡A practicar!
Ahora que ya conoces más de 40 etiquetas de HTML5, te prongo lo siguiente: Crea un documento HTML5 que, al abrirlo en tu navegador, muestre el siguiente texto con el mismo formato:
Recuerda añadir no sólo las etiquetas que dan formato, si no todas las etiquetas necesarias para estructurar correctamente tu documento HTML.
