Saltar al contenido principal

Semántica a nivel de texto

En este apartado, se introducen algunos elementos HTML de utilidad a nivel semántico.

Elemento <a>

Este elemento hace que el texto encerrado entre las etiquetas se convierta en un hipervínculo.

<a href="https://es.wikipedia.org/">Wikipedia</a>

El atributo más importante es href, que indica la URL del vínculo. A veces se usa href="#" para refererirse a la propia página en la que aparece el vínculo.

El atributo target permite elegir donde se abrirá el vínculo. Los valores más usados son:

ValorDescripción
target="_blank"El enlace se abre en una ventana/pestaña nueva.
target="_self"El enlace se abre en la misma. Es el valor por defecto.

Por ejemplo:

<a href="https://es.wikipedia.org/" target="_blank">Wikipedia</a>
<a href="https://es.wikipedia.org/" target="_self">Wikipedia</a>

Elemento <strong>

El elemento <strong> permite representar que el texto marcado es importante.

El texto es <strong>importante</strong>

Elemento <em>

El elemento <em> permite indicar énfasis (texto en cursiva).

Un elemento HTML puede ser <em>inline</em>

Elemento <br>

El elemento <br> introduce un salto de línea.

Línea 1<br>
Línea 2<br>
Línea 3

Elemento <small>

El elemento <small> permite insertar comentarios accesorios, como lo que suelen aparecer en letra pequeña.

Texto marcado <small>con el elemento small</small>

Elemento <abbr>

El elemento <abbr> permite indicar el significado de una abreviatura o sigla.

<abbr title="Hypertext Markup Language">HTML</abbr>

Ejemplo completo

A continuación, un ejemplo que incluya todos los elementos introducidos en este apartado:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Semántica a nivel de texto</title>
</head>
<body>
Texto marcado como <strong>importante</strong>.
<br>
Texto con <em>énfasis</em>
<br>
Texto marcado <small> con el elemento small </small>
<br>
Pulsa <a href="https://www.w3.org/">aquí</a> para ir a la página del <abbr title="World Wide Web Consortium">W3C</abbr>.
</body>
</html>

El resultado sería:

Probar en el navegador
MDN Docs

En la web Mozilla Developer Network (MDN) puede consultar más información sobre los elementos HTML.