Etiquetas html de contenido y texto
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 esta preformateado y que este formato debe ser preservado. |
<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> | Establece una figura ilustrada como parte del documento. |
<figcaption> | Representa la leyenda de una figura. |
<div> | Representa un contenedor genérico sin ningún significado especial. |
<!-- 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
0
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 unoa 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. Aquí tienes una descripción de algunos de los atributos más comunes para ambos tipos de listas:
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:
0
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
0
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
dark
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 aparte 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
dark
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).
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 caracter o símbolo especial:
0
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. Aquí hay 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.
Ejercicio propuesto
Test