Etiquetas html de contenido y texto

3. 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.

Tabla 3.1: Etiquetas de contenido

Elemento	Descripción
<p>	Define una parte que debe mostrarse como un párrafo.
<hr>	Representa un cambio temático entre párrafos.
<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 artículos.
<ul>	Determina una lista de artículos 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.

Ejemplo

<!-- 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> 

0

3.2. Etiquetas de texto

Las etiquetas de texto son las que dan significado a los textos que contienen.

Tabla 3.2: Etiquetas de texto

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.
<var>	Representa a una variable, es decir, una expresión matemática o una variable de un programa o similar.
<samp>	Determina la salida de un programa.
<kbd>	Representa el texto que debe introducir o la tecla que debe pulsar el usuario.
<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.

Ejemplo

<!-- 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>

0

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

Valores del atributo target: 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.3. Sintaxis para 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 que suele disponer de un ampersand seguido de su nombre identificativo y un punto y coma. A continuación se muestra un ejemplo de entidades:

&	&
&lt;	<
&quot;	“
&gt;	>
&copy;	©
&divide;	÷
&euro;	€

Aquí puedes ver una tabla ASCII estándar con los nombres de las entidades en HTML: ascii.cl/es/codigos-html.htm

Comprueba tu aprendizaje