HTML Tags: esquema de los comandos más importantes

Con los comandos de HTML puedes construir fácilmente tu web e incluir toda la información importante para todos los navegadores. Además de tags para la estructura básica, también las hay para integrar contenido multimedia, crear formularios o determinar el tipo de letra.

¿Qué son las tags de HTML?

Si quieres aprender a usar HTML o escribir tu propio código, las etiquetas son probablemente la herramienta más importante y eficaz. Las tags de HTML también sirven para transmitir información a los distintos navegadores, que sirve para que tu web esté mejor estructurada y pueda visualizarse en todos los navegadores.

Las etiquetas HTML están formadas por una etiqueta de inicio y una de cierre. Los comandos HTML van dentro de antilambdas (“<” y “>”) y contienen la información. La etiqueta final va tachada con una barra. El conjunto compuesto por etiqueta de apertura, información y etiqueta de cierre se llama elemento. Puedes asignar un atributo al elemento, que aportará información adicional.

He aquí un ejemplo de estructura de una tag de HTML:

<h1>Esto es un encabezado</h1>

La etiqueta <h> indica que se trata de un encabezado.

Hay una infinidad de tags HTML distintas y probablemente no las necesites todas. Además, desde la llegada de HTML 5 y luego de HTML 5.1, hay tags HTML que ya no se utilizan, por lo que tener a mano un esquema con los comandos HTML más importantes es de gran utilidad. A continuación, te mostramos una tabla con las tags HTML más populares divididas por categorías.

Tags HTML para la estructura básica de un documento

Las siguientes tags de HTML sirven para dar estructura a una web y crear el marco dentro del cual estarán el resto de elementos del documento.

Tag HTML Descripción
<!DOCTYPE> Esta tag de HTML determina el tipo de documento.
<html> Con esta etiqueta, el documento se definirá como documento HTML.
<head> En la sección <head> se almacenan los metadatos del documento.
<title> Este comando contiene el título del documento, que además se mostrará en la barra de título del buscador.
<body> <body> es la sección principal y engloba todo el contenido que verás en el navegador.
<nav> La sección de navegación de una web.
<section> Con <section> puedes resumir los elementos en un grupo.
<article> <article> es la sección de contenido de una web.
<header> <header> define el encabezado de una web o una sección.
<footer> <footer> define el pie de página de una web o una sección.

Estructura básica de una web con etiquetas HTML 

<!DOCTYPE html>
<html>
<head>
<title>El título de tu web</title>
</head>
<body>Aquí va el texto o las imágenes.</body>
</html>

Tags HTML para ordenar una web

Hay una multitud de tags HTML con las que puedes estructurar y subdividir secciones concretas o páginas enteras.

HTML Tag Descripción
<h1> a <h6> Los titulares van en las distintas tags h. Cuanto menor sea la cifra, mayor será el encabezado.
<p> <p> indica que se trata de un párrafo.
<br> Con la tag HTML <br> se fuerza un salto de línea.
<hr> <hr> crea una línea divisoria física entre dos tipos de contenido.

Tags HTML para estructurar un documento

Un ejemplo de cómo usar las tags HTML estructurales:

<body>
<h1>Aquí está el titular</h1>
<p>Aquí va el texto continuo.</p>
<h2>Aquí el subtítulo divide el contenido</h2>
<p>Más texto y en medio <br> un salto de línea.</p>
</body>

Comandos de HTML para el tipo de letra

Puedes cambiar la tipografía de tu documento con distintos comandos HTML.

Tag HTML Descripción
<b> Poner en negrita palabras sueltas, frases o párrafos.
<i> Poner en cursiva palabras sueltas, frases o párrafos.
<u> El fragmento seleccionado estará subrayado.
<s> El texto seleccionado estará tachado.
<sup> Con la etiqueta <sup>, el carácter seleccionado será un superíndice, p. ej. 1o.
<sub> Con <sub> puedes escribir caracteres en subíndices, como el 2 de H2O.

Ajusta el texto de tu documento

He aquí un ejemplo de cómo ajustar la tipografía con tags HTML:

<body>
<p>Aquí va un ejemplo de texto y <i>esta parte está escrita en cursiva</i>.</p>
</body>
Nota

Para cambiar el color de la fuente, es mejor usar CSS. En nuestra Digital Guide tienes un extenso tutorial de CSS, ¡échale un vistazo!

Resaltar y marcar párrafos

Para resaltar o marcar párrafos concretos, puedes utilizar las siguientes tags de HTML:

Tag HTML Descripción
<strong> Usa <strong> para resaltar párrafos.
<em> Con <em> puedes enfatizar fragmentos de texto.
<q> Con <q> puedes marcar citas dentro de un texto.
<blockquote> <blockquote> marca todo un párrafo como cita.

Dar formato a un texto con etiquetas HTML

Este es un ejemplo de cómo aplicar estas tags HTML:

<body>
<p>Esto es un texto continuo. <strong>Esta parte está resaltada</strong>.</p>
</body>

Crear tablas y listas con tags HTML

También puedes crear tablas y listas en un documento HTML con estas tags HTML:

Tag HTML Descripción
<table> Con la etiqueta <table> creas una tabla.
<caption> <caption> define el título de la tabla.
<tr> Las líneas de la tabla se etiquetan con <tr>.
<td> <td> define una casilla de la tabla.
<th> La celda del encabezado de una tabla se define mediante <th>.
<ol> <ol> crea una lista con números ordinales.
<ul> <ul> crea una lista con viñetas.
<li> <li> indica cada punto de la lista.
<dl> <dl> indica una lista de definiciones.
<dt> <dt> define un concepto o posición en la lista de definiciones.
<dd> <dd> indica la descripción de una definición dentro de la lista.

Listas en HTML

He aquí un ejemplo de cómo se ve una lista (no numerada) en un documento HTML:

<body>
<ul>
<li>Primer punto</li>
<li>Segundo punto</li>
<li>Tercer punto</li>
</ul>
</body>

Insertar contenido multimedia en HTML

Hay etiquetas que te permiten insertar imágenes, vídeos y archivos de audio en un documento y darles formato. Estos archivos multimedia suelen activarse desde una URL. Estas son las tags HTML más utilizadas:

Tag HTML Descripción
<img> La tag HTML <img> indica una imagen
<map> Con <map> puedes insertar un mapa en un documento.
<audio> <audio> te permite insertar un sonido.
<video> Con <video> puedes añadir contenido en vídeo.

Insertar una imagen con un comando HTML

Si quieres insertar contenido multimedia, además deberás introducir el atributo HTML src para la fuente y alt para el texto alternativo. Quedaría algo así:

<body>
<img src="img/ejemploimagen.png" alt="descripción de la imagen" />
</body>

Tags de HTML para un formulario

Usa los siguientes comandos para añadir un formulario a tu página web:

Tag HTML Descripción
<form> <form> inserta un formulario.
<input> <input> se utiliza para controlar lo que se escribe.
<button> Con <button> puedes añadir un botón.
<select> <select> te permite crear una lista de opciones.

Crear un formulario

A nivel práctico, puedes crear un formulario así:

<body>
<form method="post" action="mailto:mail@ejemplo.com">
Name: <input type="text" name="name" />
Password: <input type="password" name="password" />
</form>
</body>

Añadir un botón

Así se añade un botón:

<body>
<h2>Aquí estaría el botón</h2>
<button type="button">Haz clic</button>
</body>

Incrustar enlaces en HTML

Puedes añadir enlaces en tu documento HTML con las siguientes etiquetas:

Tag HTML Descripción
<a> Con <a> se establece el hipervínculo.
<link> <link> crea un vínculo entre el documento y una fuente externa.
<nav> Con <nav> se crean los enlaces de navegación.

Enlaces con tag HTML

Así puedes crear enlaces en un documento HTML:

<body>
<h2>Contacto</h2>
<p>Puedes escribirnos a <a href="mailto:mail@ejemplo.es">por correo</a>.</p>
</body>

Otros comandos importantes de HTML

Hay muchas otras tags HTML que puedes utilizar en un editor HTML para facilitar tu trabajo. Estas son solo algunas de ellas:

Tag HTML Descripción
<style> La tag de HTML <style> introduce los códigos CSS que determina el aspecto de tu web.
<div> La tag HTML <div> define ciertos párrafos de un documento.
<label> La tag HTML <label> se utiliza junto con <input> y define un campo de texto de <input>.
<iframe> Con la tag HTML <iframe> puedes incluir contenido externo en tu web.
<!-- … --> <!-- … --> te permite hacer comentarios en el código HTML.

Consejo

Única y no típica: con el editor de páginas web de IONOS puedes crear la web que te imaginas. Si necesitas ayuda para hacerlo, puedes recurrir a nuestro equipo de expertos, que está al quite para echarte una mano.

¿Le ha resultado útil este artículo?