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 o etiquetas para la estructura básica, también las hay para integrar contenido multimedia, crear formularios o determinar el tipo de letra.
- 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>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>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>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>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>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>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>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>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>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>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.
|
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.
- Plantillas profesionales
- Modificación del diseño con un solo clic
- Dominio, SSL y correo electrónico