Más elementos de HTML

En esta sección vamos a ver otros elementos de HTML.

Importancia y énfasis al texto

La etiqueta <strong> se utiliza para darle importancia al texto y la etiqueta <em> se utiliza hacer énfasis en el texto.

Generalmente <strong> se muestra en negrilla y <em> en itálica, pero este comportamiento se puede modificar a través de CSS.

<p>Esto es <strong>importante</strong> y quiero <em>hacer énfasis</em> en esto.</p>

Nota: También existen las etiquetas <b> e <i> que muestran el texto en negrilla e itálica respectivamente. Sin embargo, no se considera buena práctica usarlas porque es mejor aplicar el formato por CSS.

Saltos de línea y línea horizontal

La etiqueta <br> se utiliza para forzar un salto de línea (lo equivalente a oprimir la tecla Enter cuando estás escribiendo un documento)

<p>Hola<br>Amigos</p>

La etiqueta <br> no necesita una etiqueta de cierre.

La etiqueta <hr> muestra una línea horizonal en el documento.

Listas

Puedes crear listas ordenadas y no ordenadas.

Una lista ordenada está enumerada mientras que una lista no ordenada utiliza viñetas.

Un ejemplo de lista ordenada es la siguiente:

1. Item 1

2. Item 2

3. Item 3

Un ejemplo de lista no ordenada es la siguiente:

• Item 1

• Item 2

• Item 3

Una lista ordenada se crea con la etiqueta <ol> y los items con la etiqueta <li>:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Una lista no ordenada se crea con la etiqueta <ul> y los items con la etiqueta <li>:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Nota: Por ningún motivo utilices la etiqueta <li> por fuera de un <ul> o <ol>.

Etiquetas invisibles

Existen dos etiquetas que no son visibles en el documento pero se utilizan para agrupar otros elementos y aplicarles estilos: <div> y <span>.

Veamos un ejemplo de <div> en donde estamos agrupando un título <h1>, una imagen <img> y un párrafo <p>:

<div class="main-section">
  <h1>Título</h1>
  <img src="imagen.jpg" alt="Imagen">
  <p></p>
</div>

<span> se utiliza para aplicarle estilos a un texto (generalmente dentro de un parrafo):

<p>Hola, tu saldo es <span class="saldo">$12000</span></p>

Elementos de bloque y en línea

Existen elementos que, independiente de su contenido, ocupan todo el ancho de la página como p, ol, ul, li y div. A estos elementos se les conoce como elementos de bloque.

Otros elementos como span, strong y em ocupan solo el espacio que ocupa su contenido interno. A estos elementos se les conoce como elementos en línea.