3. Etiquetas de contenido y texto
En este apartado vamos a ver dos tipos de etiquetas HTML: las etiquetas que agrupan el contenido y las etiquetas que contienen fragmentos de texto (dan significado a esas palabras o fragmentos). Veamos cada una de ellas.
3.1. Etiquetas de contenido
Las etiquetas de contenido son las que agrupan el contenido que hay en su interior.
| Elemento | Descripción |
|---|---|
<p> | Define una parte que debe mostrarse como un párrafo. |
<hr> | Representa un cambio temático entre párrafos. Suele representar una línea horizontal. |
<pre> | Indica que su contenido está preformateado y que este formato debe ser preservado. (En HTML, cuando no usas <pre>, los espacios en blanco múltiples, saltos de línea o tabulaciones se comprimen a un solo espacio) |
<blockquote> | Representa un contenido citado desde otra fuente. |
<ol> | Especifica una lista ordenada de elementos. |
<ul> | Determina una lista de elementos sin orden. |
<li> | Define un elemento de una lista. |
<dl> | Especifica una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas. |
<dt> | Representa un término definido por el siguiente <dd>. |
<dd> | Indica la definición de los términos listados antes que él. |
<figure> | Agrupa cualquier contenido que forme parte de un bloque o unidad independiente de información visual o multimedia, que puede ir acompañado de una descripción (<figcaption>). Esto incluye imágenes, videos, audios, y cualquier otro tipo de contenido relacionado. |
<figcaption> | Representa la leyenda o título de un elemento <figure>. |
<div> | Representa un contenedor genérico sin ningún significado especial. |
La diferencia entre usar y no usar la etiqueta <figure> al insertar una imagen radica en su propósito semántico y accesibilidad. Con <figure>, se marca el contenido como una unidad independiente relacionada con el texto principal, lo que es útil para imágenes, gráficos o multimedia. Sin <figure>, la imagen simplemente se inserta sin esa estructura semántica ni la opción clara de agregar un pie de foto.
En HTML (cuando no usas <pre>), los espacios en blanco múltiples, saltos de línea o tabulaciones no se muestran tal cual; se comprimen a un solo espacio en la mayoría de los casos. Esto significa que, si introduces varios espacios seguidos en el texto, el navegador los tratará como un único espacio. Para incluir múltiples espacios en el flujo normal de texto, es necesario usar entidades HTML como . Sin embargo, como veremos más adelante, es preferible usar CSS para controlar el espaciado de manera más flexible y manejable, utilizando propiedades como margin o padding.
<!-- Elemento <p> -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia beatae aliquam non natus aut id sint ea? Natus tempore hic reprehenderit temporibus minima nisi, quia, magnam omnis, officiis molestiae earum.</p>
<!-- Elemento <hr> -->
<hr>
<!-- Elemento <pre> -->
<pre>Contenido preformateado Conserva los espacios,
los saltos de línea y los tabuladores del texto original.
</pre>
<!-- Elemento <blockquote> -->
<blockquote>Con blockquote representamos un contenido citado desde otra fuente.</blockquote>
<!-- Elemento <ol> -->
<ol>
<li>Lista ordenada</li>
<li>Lista ordenada</li>
<li>Lista ordenada</li>
</ol>
<!-- Elemento <ul> -->
<ul>
<li>Lista sin orden</li>
<li>Lista sin orden</li>
<li>Lista sin orden</li>
</ul>
<!-- Elementos <dl> <dt> <dd>-->
<dl>
<dt>Término 1</dt>
<dd>Definición del término 1.</dd>
<dt>Término 2</dt>
<dd>Definición del término 2.</dd>
<dt>Término 3</dt>
<dd>Definición del término 3.</dd>
</dl>
<!-- Elementos <figure> y <figurecaption>-->
<figure>
<img src="https://www.eniun.com/wp-content/uploads/eniun-icon-user-experience.svg"
alt="Usabilidad">
<figcaption>Figura 1</figcaption>
</figure>
<!-- Elemento <div>-->
<div>Contenedor tipo div</div>
Ejemplo
3.1.1. Atributos más utilizados en etiquetas
Los atributos más usados son id y class.
- id: se utiliza para identificar de manera única a un elemento. Como es un atributo identificativo único, no debemos añadir dos bloques con el mismo valor de id en el mismo documento HTML.
<div id="identificador">Contenedor</div>
- class: se utiliza para asignar una o varias clases a un elemento HTML. Las clases son muy útiles para aplicar estilos CSS. El mismo valor de class se puede asignar a varios elementos.
<div class="clase1 clase2">Contenedor</div>
3.1.2. Atributos de las listas en HTML
Los atributos de las listas en HTML te permiten personalizar tanto las listas ordenadas como las listas no ordenadas. A continuación se muestra una descripción de algunos de los atributos más comunes para ambos tipos de listas:
Los atributos type y start no son soportados en algunas versiones de HTML (por ejemplo en HTML 4.01 strict). En cualquier caso, lo recomendable es hacer uso de hojas de estilo CSS, usando propiedades como list-style-type u otras, como veremos en la unidad de CSS.
Atributo «type» (para listas ordenadas):
- «1»: Numeración decimal (1, 2, 3, …).
- «A»: Letras mayúsculas (A, B, C, …).
- «a»: Letras minúsculas (a, b, c, …).
- «I»: Números romanos mayúsculos (I, II, III, …).
- «i»: Números romanos minúsculos (i, ii, iii, …).
Atributo «type» (para listas no ordenadas):
- «disc»: Puntos sólidos (●, ●, ●, …).
- «circle»: Círculos (○, ○, ○, …).
- «square»: Cuadrados (■, ■, ■, …).
Atributo «start» (solo para listas ordenadas): Establece el valor inicial de la numeración de la lista.
Atributo «reversed» (solo para listas ordenadas): Invierte el orden de numeración de la lista.
A continuación se muestra un ejemplo del uso de estos atributos:
<h3>Lista ordenada 1:</h3> <ol type="A" start="3"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> <h3>Lista ordenada 2:</h3> <ol type="1" reversed> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> <h3>Lista no ordenada 3:</h3> <ul type="square"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ul>
En este ejemplo, la lista ordenada 1 comenzará en la letra «C» y la lista ordenada 2 invertirá el orden numérico de los elementos. La lista no ordenada utilizará cuadrados como viñetas. Ver ejemplo en CodePen:
Más adelante, en el tutorial de CSS veremos cómo dar estilo a las listas mediante CSS.
3.2. Etiquetas de texto
Las etiquetas de texto son las que dan significado a los textos que contienen.
| Elemento | Descripción |
|---|---|
<a> | Representa un hiperenlace. |
<em> | Especifica un texto enfatizado. |
<strong> | Establece un texto importante. |
<small> | Define un comentario aparte, es decir, textos de políticas de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento. |
<s> | Representa contenido que no es exacto, tiene el estilo tachado. |
<cite> | Indica el título de una obra. |
<q> | Representa una cita textual entre comillas. |
<dfn> | Sirve para marcar el término que se quiere definir. |
<abbr> | Envuelve un texto que al pasar el puntero por encima despliega un tooltip. El contenido del tooltip se detalla mediante el atributo title. |
<time> | Determina un valor de fecha y hora. |
<code> | Establece un código de programación. |
<sub><sup> | Establece un subíndice y un superíndice respectivamente. |
<i> | Muestra el texto marcado con un estilo en cursiva o itálica. |
<b> | Representa el texto marcado con un estilo en negrita. |
<u> | Muestra el texto subrayado. |
<mark> | Representa un texto marcado o resaltado. |
<span> | Especifica texto en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea. |
<br> | Inserta un salto de línea. |
<wbr> | Indica una oportunidad de salto de línea, es decir, un punto sugerido donde el texto puede ser dividido para mejorar su legibilidad. |
<!-- Elemento <a>-->
<a href="https://www.eniun.com">Esto es un hiperenlace</a>
<!-- Elemento <em>-->
<em>Esto es un texto enfatizado.</em>
<!-- Elemento <strong>-->
<strong>Esto es un texto importante.</strong>
<!-- Elemento <small>-->
<small>Nota de derechos</small>
<!-- Elemento <s>-->
<s>Este texto no es exacto</s>
<!-- Elemento <cite>-->
<cite>Este es el título de una obra</cite>
<!-- Elemento <q>-->
<q>Representa una cita textual entre comillas.</q>
<!-- Elemento <dfn>-->
<p>El <dfn>HTML</dfn> es un lenguaje de marcado.</p>
<!-- Elemento <abbr>-->
<p>Pasa el puntero por encima de la siguiente etiqueta abbr: <abbr title="Hypertext Markup Language">HTML</abbr></p>
<!-- Elemento <time>-->
<time>15s</time>
<!-- Elemento <code>-->
<code>h1{color:red;}</code>
<!-- Elemento <var>-->
<p>El bucle no se detiene hasta que <var>centinela</var> sea igual a 0.</p>
<!-- Elemento <samp>-->
<p>Al presionar e botón aparecerá una ventana con el mensaje: <samp>Bienvenido</samp>
</p>
<!-- Elemento <kbd>-->
<p> Si está conforme escriba presione <kbd>sí</kbd>. Si no, pulse <kbd>no</kbd>.
</p>
<!-- Elementos <sub> <sup>-->
<p>La fórmula química de agua es H<sub>2</sub>O</p>
<p>Trade Mark <sup>TM</sup></p>
<!-- Elemento <i>-->
<i>Texto en italica</i>
<!-- Elemento <b>-->
<b>Texto en negrita</b>
<!-- Elemento <u>-->
<u>Texto subrayado</u>
<!-- Elemento <mark>-->
<p>El siguiente texto tiene mucha importancia y quiero resaltarlo: <mark>HTML5</mark></p>
<!-- Elemento <span>-->
<span>Texto </span><span>en </span><span>línea.</span>
<!-- Elemento <br>-->
<br>
<!-- Elemento <wbr>--> <p>https://www.eniun.com<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>
Ejemplo
3.2.1. Hiperenlaces: valores del atributo href
Como hemos visto, el elemento <a> o hiperenlace crea un enlace a otra página o archivo. Además, también puede enlazar a una sección de la misma página mediante marcadores, a un correo electrónico o a un teléfono, entre otras opciones.
Valores del atributo href: vamos a ver cómo crear un enlace para llamar a un número de teléfono con tel y para enviar un correo con mailto.
<!-- Enviar un correo con mailto--> <a href="mailto:info@eniun.com">Enviar correo a Eniun</a><br> <!-- Llamar por teléfono con tel--> <a href="tel:+34666666666">Llamar por teléfono a 666 666 666</a>
Ejemplo
3.2.2. Hiperenlaces: valores del atributo target
El atributo «target» en HTML se utiliza para especificar dónde se debe abrir el enlace cuando un usuario hace clic en él. A continuación se presentan algunos de los valores más comunes utilizados para el atributo «target»:
| Valor | Descripción |
|---|---|
| «_blank» | Abre el enlace en una nueva ventana o pestaña del navegador. |
| «_self» | Abre el enlace en la misma ventana o pestaña del navegador (valor predeterminado). |
| «_parent» | Abre el enlace en el marco principal o padre en caso de que se esté utilizando frames. |
| «_top» | Abre el enlace en la ventana principal del navegador, reemplazando cualquier frame existente. |
En el siguiente ejemplo vamos a abrir un enlace en una página distinta mediante el atributo target y el valor _blank.
<!-- Abrir enlace en una página aparte --> <a href="https://www.eniun.com" target="_blank">Enlace 1</a> <!-- Abrir enlace en la misma página --> <a href="https://www.eniun.com" target="_self">Enlace 2</a>
Ejemplo
3.2.3. Hiperenlaces: atributo download
El atributo «download» en HTML se utiliza para especificar que un enlace debe ser descargado al hacer clic en él en lugar de navegar hacia él. Permite proporcionar un nombre de archivo sugerido para el archivo descargado. Así es como funciona el atributo «download»:
<a href="ruta/al/archivo.pdf" download="miarchivo.pdf">Descargar PDF</a>
En este ejemplo, cuando el usuario hace clic en el enlace «Descargar PDF», en lugar de abrirse en el navegador, se descargará el archivo especificado en el atributo «href» (ruta/al/archivo.pdf). El atributo «download» especifica el nombre de archivo sugerido para el archivo descargado (miarchivo.pdf).
El anchor text (o texto de anclaje) es el texto visible y clicable de un hipervínculo (<a>) en una página web. Es lo que los usuarios ven y hacen clic para navegar a otra página o recurso. El texto de anclaje suele estar subrayado y aparece en un color diferente al texto normal, aunque esto puede variar según los estilos CSS aplicados.
3.3. Caracteres especiales
Dentro de una página web no podemos poner directamente los caracteres «<» Y «>» porque el navegador los confundiría con los caracteres que se utilizan para la creación de etiquetas HTML.
Para cierto tipo de caracteres, es necesario utilizar otra sintaxis o codificación de caracteres. A continuación veremos la representación ASCII de los símbolos mediante entidades, código decimal y hexadecimal.
- Entidades HTML: Las entidades HTML son secuencias de caracteres que representan símbolos especiales en HTML. Comienzan con un ampersand (&), seguido de un nombre o número y terminan con un punto y coma (;). Las entidades HTML son fáciles de leer y entender, lo que las hace convenientes para usar en el código HTML.
- Códigos decimales: Los códigos decimales son valores numéricos que representan símbolos en la tabla ASCII. Estos códigos se escriben en la forma «&#n;», donde «n» es el número decimal correspondiente al símbolo. Los códigos decimales son útiles cuando no se puede utilizar una entidad HTML específica o cuando se necesita una representación numérica precisa del símbolo.
- Códigos hexadecimales: Los códigos hexadecimales son valores numéricos en base 16 que representan símbolos en la tabla ASCII. Los códigos hexadecimales son similares a los códigos decimales, pero utilizan una representación en base 16 en lugar de base 10. Estos códigos se escriben en la forma «&#xn;», donde «n» es el valor hexadecimal correspondiente al símbolo.
En la tabla 3.3 se muestran algunos símbolos y su correspondiente código decimal y su entidad HTML:
| Símbolo | Código decimal | Entidad |
| & | & | & |
| < | < | < |
| “ | " | " |
| > | > | > |
| © | © | © |
| ÷ | ÷ | ÷ |
| € | € | € |
| ← | ← | ← |
Aquí puedes ver una tabla ASCII estándar con los códigos y los nombres de las entidades en HTML: ascii.cl/es/codigos-html.htm. En el siguiente enlace puedes ver más símbolos especiales webusable.com/CharsExtendedTable.htm
Ejemplo en CodePen
Diferentes formas de representar un carácter o símbolo especial:
3.4. Ejercicio resuelto
Crea un menú de navegación con los enlaces a Inicio, Acerca de, Servicios y Contacto.
Para crear un menú de navegación en HTML, generalmente se utiliza una lista no ordenada (<ul>) junto con elementos de lista (<li>) para cada elemento del menú. Luego, puedes agregar enlaces (<a>) dentro de los elementos de lista para vincular a las páginas o secciones relevantes. Veamos un ejemplo básico de cómo crear un menú de navegación horizontal:
<!DOCTYPE html>
<html>
<head>
<title>Menú de Navegación</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</body>
</html>
En este ejemplo:
<ul>crea una lista no ordenada que contiene elementos de lista.<li>crea elementos de lista para cada elemento del menú.<a>crea enlaces dentro de los elementos de lista y utiliza el atributohrefpara especificar la URL a la que se dirigirá cada enlace. En este caso, hemos utilizado «#» como marcador de posición, ya que no se han proporcionado URLs reales.
Puedes dar estilo a tu menú de navegación utilizando CSS para controlar la apariencia y la disposición, esto lo veremos en la unidad de CSS.