Etiquetas básicas de contenido

Cuando recién comenzamos a aprender HTML, las etiquetas que más nos van a servir, además de las etiquetas para la estructura básica de un documento¹, son las siguientes.

Comentario

Nos ayuda a evitar que algunas líneas de texto sean interpretadas como código, de esta manera podemos dejar mensajes o recordatorios para nosotros mismos u otros desarrolladores.

<!-- Esto es un comentario -->
<!-- Esto no se mostrará al usuario en la página web -->

Títulos o encabezados

Las etiquetas heading, por título o encabezado. Van de <h1> a <h6>. Nos ayudan a dividir los temas y subtemas de nuestra página. Son como títulos y subtítulos en un libro de texto.

<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>

Párrafo

La etiqueta <p>, por paragraph (párrafo) nos ayuda a agregar bloques de texto.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
  Maiores perspiciatis accusantium dolorum deleniti ducimus modi eum. Assumenda,
  itaque?
</p>
<p>
  Dolorem pariatur repellat explicabo consectetur id itaque architecto corrupti
  velit fuga recusandae!
</p>

Lista desordenada

la etiqueta <ul>, por unordered list o lista desordenada, nos ayuda a mostrar elementos usando viñetas.

<ul>
  <li>Elemento A</li>
  <li>Elemento B</li>
  <li>Elemento C</li>
</ul>

Elemento de lista

Para poder usar las listas correctamente se debe usar el elemento <li>, por list item o elemento de lista, por cada artículo que queramos agregar a la lista.

Lista ordenada

la etiqueta <ol>, por ordered list o lista ordenada, nos ayuda a mostrar elementos de forma numerada. También hace uso de los elementos <li>.

<ol>
  <li>Elemento A</li>
  <li>Elemento B</li>
  <li>Elemento C</li>
</ol>

Salto de línea

La etiqueta <br>, por line break o salto de línea, nos ayuda a crear un espacio entre bloques de contenido.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<br />
<p>
  Dolorem pariatur repellat explicabo consectetur id itaque architecto corrupti
  velit fuga recusandae!
</p>

Regla horizontal

La etiqueta <hr>, por horizontal rule o regla horizontal, nos ayuda a crear una línea de separación en el contenido.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<hr />
<p>
  Dolorem pariatur repellat explicabo consectetur id itaque architecto corrupti
  velit fuga recusandae!
</p>

Ancla (enlace)

La etiqueta <a>, por anchor o ancla, nos ayuda a crear enlaces a otras páginas y secciones. Necesita el atributo href donde el valor es el link a donde queremos que nos lleve.

Este es el ejemplo más básico:

<a href="https://iniz.lol">Ir a mis redes sociales</a>

Opcionalmente podemos agregar target="_blank" para hacer que el enlace se abra en una nueva pestaña.

<a href="https://iniz.lol" target="_blank">Ir a mis redes sociales</a>

Imagen

La etiqueta <img>, por image o imagen, nos ayuda a mostrar imágenes en el documento. Necesita el atributo src donde el valor debe ser la dirección donde se encuentra alojado el archivo. Opcionalmente se puede poner el atributo alt donde el valor debe ser una descripción de la imagen. Nos ayuda cuando la imagen no carga y para los usuarios con lector de pantalla activado.

<img src="https://placebear.com/200/300" alt="Foto de dos osos" />

División

La etiqueta <div>, por division o división, nos ayuda a crear separaciones en el contenido, usualmente para agregar estilos a bloques de contenido que están relacionados visualmente.

<div style="color: orange">
  <h1>Título</h1>
  <p>Contenido</p>
  <p>Contenido</p>
</div>

Abarcar

La etiqueta <span> o abarcar es similar a div. Sólo que nos ayuda a agrupar frases o palabras en un renglón para hacer separaciones, en lugar de hacerlo por bloques.

<p>Contenido <span style="color: pink">con estilo</span></p>

Comentarios