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 o etiquetas para la estructura básica, también las hay para integrar contenido multimedia, crear formularios o determinar el tipo de letra.

Crear una página web
Estás de suerte, tu página web ahora con IA
  • Creador de páginas web rápido e intuitivo
  • Imágenes y textos instantáneos con SEO optimizado por IA
  • Dominio, SSL y buzón de correo electrónico incluidos

¿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. De esta forma, tu web estará mejor estructurada y podrá visualizarse en todos los navegadores.

Las etiquetas HTML están formadas normalmente por una etiqueta de inicio y una de cierre. Los comandos HTML van dentro de signos de menor y mayor que (“<” y “>”) y contienen la información. La etiqueta final se indica con una barra inclinada (“/”). 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.

Aquí tienes un ejemplo de estructura de una tag HTML (en este caso, para encabezados):

<h1>Esto es un encabezado</h1>
html
Nota

No todos los elementos HTML están compuestos por una etiqueta de apertura y otra de cierre. Las llamadas self-closing tags (o etiquetas vacías) son elementos HTML que no necesitan contenido entre una etiqueta de apertura y una de cierre. Por eso, constan únicamente de una sola etiqueta, como por ejemplo <br> para un salto de línea. Estas etiquetas se cierran a sí mismas y están sintácticamente completas sin necesidad de una etiqueta de cierre adicional.

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, encontrarás los comandos HTML más comunes organizados en forma de tabla y clasificados por categorías. Todos los comandos que se muestran aquí son compatibles con la versión actual HTML 5.2, así como con el estándar HTML Living Standard, que refleja el estado más reciente de las tecnologías web y se actualiza de forma continua.

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á el resto de los elementos del documento.

Tag HTML Descripción
<!DOCTYPE> Esta tag 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.

Este sería un ejemplo de estructura básica de una página web:

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

Tags HTML para ordenar una web

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

Tag HTML Descripción
<h1> a <h6> Los encabezados 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.
<div> Con la etiqueta HTML <div> se pueden agrupar contenidos relacionados en bloques. **

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

<body>
<h1>Aquí está el encabezado</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>
html

Etiquetas HTML para el formato de texto

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.

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>
html
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.
<code> La etiqueta <code> da formato a un fragmento como código de programación.

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

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

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.

Aquí tienes 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>
html

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.

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

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

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.
<option> La etiqueta <option> representa un elemento dentro de una lista desplegable.

Crear un formulario

En la práctica, puedes crear un formulario como el que se muestra a continuación. Ten en cuenta que se utilizan atributos adicionales para especificar, por ejemplo, el tipo de petición HTTP, como en este caso POST.

<body>
<form method="post" action="mailto:correo@ejemplo.com">
Name: <input type="text" name="nombre" />
Password: <input type="password" name="contraseña" />
</form>
</body>
html

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>
html

Insertar 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.

Además, el atributo href se usa para definir la URL de destino de un enlace. Así puedes insertar un enlace en HTML:

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

Otros comandos importantes de HTML

Hay muchas otras etiquetas 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 <style> introduce los códigos CSS que determina el aspecto de tu web.
<label> <label> se utiliza junto con <input> y define un campo de texto de <input>.
<iframe> Con la tag <iframe> puedes incluir contenido externo en tu web.
<!-- … --> <!-- … --> te permite insertar comentarios en el código HTML.
Consejo

Personaliza tu página web a tu gusto: con el editor de páginas web de IONOS puedes diseñar tu web exactamente como la imaginas. Y si necesitas ayuda, nuestro equipo de expertos estará encantado de ayudarte.

Tu página web con dominio propio
Crea tu página web en minutos
  • Plantillas profesionales
  • Modificación del diseño con un solo clic
  • Dominio, SSL y correo electrónico
¿Le ha resultado útil este artículo?
Ir al menú principal