Tabla de contenidos
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.
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. |
<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. |
<!-- 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
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. |
<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. |
<!-- 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
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>
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>
dark
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:
& | & |
< | < |
" | “ |
> | > |
© | © |
÷ | ÷ |
€ | € |
Aquí puedes ver una tabla ASCII estándar con los nombres de las entidades en HTML: ascii.cl/es/codigos-html.htm
span
: