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?
- Tags HTML para la estructura básica de un documento
- Tags HTML para ordenar una web
- Comandos de HTML para el tipo de letra
- Resaltar y marcar párrafos
- Crear tablas y listas con tags HTML
- Insertar contenido multimedia en HTML
- Tags de HTML para un formulario
- Incrustar enlaces en HTML
- Otros comandos importantes de HTML
¿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>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.
Artículos similares
Comandos de Docker
Los comandos de Docker se utilizan para controlar Docker Engine en el host local. Una vez introducidos en la línea de comandos, se traducen en llamadas API para el daemon de Docker. En cuanto a su función, los comandos de Docker pueden utilizarse para gestionar imágenes, contenedores y volúmenes. Si trabajas mucho con el software, es útil conocer bien los comandos de Docker.
Una presentación de los comandos Telnet
Con ayuda de los comandos de Telnet puedes controlar la conexión entre tu ordenador y un sistema externo, por ejemplo, un servidor web. En estos casos no solo es importante conocer los comandos correspondientes, sino también las opciones disponibles, pues los comandos de Telnet solo se hacen efectivos si se especifican los parámetros.
Opciones para insertar vídeo en HTML en tu web
HTML5 hace que la integración de contenido multimedia en una web sea una tarea fácil y rápida. La última versión del lenguaje de marcado define el elemento <video> y sus respectivos atributos de programación de manera muy sencilla. Otra de las alternativas para integrar vídeos la ofrecen plataformas como YouTube o Vimeo. Visita nuestra guía y consigue más información al respecto.
_target: define el destino de los enlaces en HTML
Cuando añadas enlaces a tu web, puedes utilizar el atributo de HTML _target para determinar dónde debe abrirse el enlace. Podrás decidir si el usuario se queda en tu web o si en cambio se va a ir a otra página. A continuación, te explicamos cómo se usa _target, te indicamos los distintos valores y explicamos otra información de interés relacionada.
DOCTYPE html: definición y ejemplos
La etiqueta DOCTYPE html debe colocarse al comienzo de los documentos HTML y de sus subpáginas. Con la etiqueta DOCTYPE se especifica la sintaxis y la gramática que se está utilizando en un documento. Los navegadores reconocen inmediatamente de qué tipo de documento se trata. La ausencia de la etiqueta puede dar lugar a problemas en la visualización de la web. Descubre lo que necesitas saber sobre…
¿Qué es HTML (Hyper Text Markup Language)?
¿Quieres que tu página web tenga un carácter inconfundible? Puedes hacerlo con el lenguaje de marcado HTML. La particularidad de HTML es que ofrece una sintaxis clara e intuitiva y, como lenguaje de código abierto, es gratuito. Además, es la introducción ideal al mundo de la programación para los no profesionales. Te mostramos lo que HTML puede hacer y cómo funciona.
