Aprende HTML: guía definitiva

En este tutorial vamos a aprender los conceptos básicos de HTML, además de ver también algo acerca de la historia de este lenguaje de marcado. Aprenderás los aspectos esenciales de HTML, gracias a los cuales podrás embarcarte en la aventura de aprender CSS, JavaScript y las tecnologías relacionadas con este último lenguaje, como por ejemplo React o Vue. Si pretendes convertirte en un desarrollador Frontend o Full Stack, éste debería ser uno de tus primeros pasos.

Para seguir este tutorial no necesitarás ningún conocimiento previo, ya que partimos totalmente de cero.

No te preocupes si no comprendes algunos conceptos de los que hablo en la historia del lenguaje, ya que no son relevantes a día de hoy. Solamente se incluyen a título informativo. Tampoco es necesario que te quedes con todo; con una lectura y algo de práctica será más que suficiente.

Es un tutorial largo, pero si sabes de antemano que he condensado aquí todo lo que necesitarás saber de HTML incluso a nivel avanzado, quizás lo veas de otro modo 😉.

Contenidos

1 Coceptos Básicos de HTML
2 Estructura de un Documento HTML
3 Secciones de un Documento HTML
- 3.1 Head del Documento HTML
- 3.2 Body del Documento HTML
4 Elementos de un Documento HTML
5 Plantilla Básica HTML

Coceptos Básicos de HTML

Para empezar, vamos a aprender qué es HTML y para qué se utiliza. HTML es un lenguaje de marcado que se utiliza para estructurar documentos que pueden ser representados por otras aplicaciones, como por ejemplo un navegador web como el que posiblemente estés utilizando ahora.

Para ver qué es HTML con más detalle, consulta la siguiente definición:

Definición de HTML: Qué es HTML y para qué se utiliza

Puedes editar archivos HTML con cualquier editor de texto plano, como por ejemplo Notepad++, Gedit, Atom, VS Code e incluso el bloc de notas de Windows o cualquier otro editor de texto plano.

Lo primero que debes escribir en el archivo es la declaración DOCTYPE o Document Type Declaration. Esta declaración debe estar en la primera línea del documento, ya que es el modo mediante el cual le decimos al navegador la versión de HTML que estamos usando. A día de hoy suele usarse la siguiente declaración DOCTYPE para indicarle al navegador que estamos usando HTML5:

<!DOCTYPE html>

Si quieres conocer las declaraciones DOCTYPE que se usaban en versiones antiguas de HTML, consulta la siguiente definición, en donde se explica en detalle qué es y cómo se usa la declaración DOCTYPE, aunque es recomendable que primero aprendas algo más de HTML:

La declaración DOCTYPE: Qué es y cómo se usa la declaración DOCTYPE

A continuación vamos a ver cómo es la estructura básica de cualquier documento HTML.

Estructura de un Documento HTML

El lenguaje HTML se compone principalmente de elementos, representados mediante etiquetas. A su vez, las etiquetas pueden contener atributos. En este apartado explicaremos lo que son tanto las etiquetas como los atributos, además de explicar también el tratamiento de ciertos caracteres como los espacios en blanco.

HTML es un lenguaje que no es sensible a las mayúsculas, por lo que podrás escribir las etiquetas tanto en minúscula como en mayúscula, funcionando éstas del mismo modo. Antaño era habitual escribir las etiquetas en mayúscula, aunque a día de hoy son preferibles las minúsculas, siendo la convención.

Por convención deberías escribir las etiquetas en minúscula, tal que así:

<p>Soy un párrafo</p>

Aunque también funcionará, no deberías escribir las etiquetas en mayúscula:

<P>Soy un párrafo</P>

Etiquetas HTML

Tal y como hemos explicado, los elementos HTML están formados principalmente por etiquetas. Los elementos HTML tienen una etiqueta de apertura y otra de cierre, aunque en ocasiones solamente se representen mediante una única etiqueta de apertura que sirve tanto de apertura como de cierre.

Los elementos que usan etiquetas tanto de apertura como de cierre se componen de la etiqueta de apertura, el contenido y otros posibles elementos definidos en el interior de la etiqueta y finalmente la etiqueta de cierre. En el siguiente ejemplo usamos una etiqueta de apertura <p> y otra de cierre </p> para representar un párrafo:

<p>Esto es el contenido de un párrafo</p>

Si un elemento solamente se compone de una única etiqueta, no puede incluir ni contenido ni otros elementos en su interior. En el siguiente ejemplo usamos una única etiqueta <img> para representar una imagen:

<img src="/imagen.jpg">

Sin embargo, es habitual usar los términos «elemento» y «etiqueta» indistintamente para referirse a los elementos HTML salvo que se mencione explícitamente que se está hablando de una etiqueta de apertura o de cierre.

Atributos HTML

Las etiquetas de apertura de HTML pueden contener atributos que agregan información a las mismas. Los atributos en HTML siguen el esquema nombre="valor". Es decir; primero se escribe el nombre del atributo seguido del símbolo = y finalmente el valor del atributo entre comillas simples o dobles.

A pesar de que es posible usar tanto comillas simples como dobles para encapsular el valor del atributo, suele ser habitual usar comillas dobles.

En el siguiente ejemplo representamos un párrafo con el atributo style, usado para definir estilos CSS en su interior:

<p style="color: blue;">Soy un párrafo</p>

Un elemento HTML puede contener múltiples atributos, tal y como vemos en el siguiente ejemplo:

<p style="color: blue;" id="mi-parrafo">Soy un párrafo</p>

En caso de que un atributo sea de tipo booleano, cuyos posibles valores son verdadero o falso, es posible especificar simplemente el atributo sin ningún valor. Si el atributo está presente, se interpretará que su valor es verdadero, siendo falso en su ausencia:

<input type="checkbox" checked>

Algunos de los atributos más utilizados son class e id, utilizados para agregar clases CSS y para identificar individualmente a cada elemento HTML respectivamente. El atributo id debería ser único en todo el documento HTML, conteniendo un único valor. Por el contrario, el atributo class puede contener múltiples clases CSS separadas por espacios.

Es posible usar el id de un elemento para agregar estilos CSS a dicho elemento, aunque de repetirse los estilos en otro elemento, lo más habitual es agregar clases CSS mediante el atributo class, ya que una única clase puede aplicarse a múltiples elementos:

<p id="mi-parrafo" class="clase-a clase-b">Soy un párrafo</p>

Tal y como ves, las clases CSS del atributo class se separan mediante espacios en blanco.

Aunque no es un requisito en sí mismo, existe una convención que establece que los nombres de las clases CSS deben separar sus palabras mediante guiones -, y lo mismo sucede con el valor del atributo id.

Algunos atributos pueden usarse en cualquier etiqueta HTML, mientra que otros se aplican únicamente a una etiqueta específica.

Espacios en HTML

Los espacios anidados en HTML colapsan en uno solo, por lo que si existen varios seguidos, se representarán como un único espacio.

Los siguientes elementos HTML se representarán exactamente del mismo modo:

Elemento sin espacios:
```
<p>Soy un párrafo</p>
```
Elemento con varios espacios seguidos:
```
<p>        Soy un párrafo</p>
```
Elemento con varios grupos de espacios dispuestos en varias líneas:
```
<p>Soy
   un
               párrafo  </p>
```

Que todos los espacios consecutivos se representen como uno solo tiene sus inconvenientes, ya que no es fácil agregar más de uno. Es por ello que suelen agregarse mediante CSS o también puede usarse el carácter &nbsp. Sin embargo, hoy en día siempre es preferible agregarlos mediante CSS para separar la estructura del documento de su representación visual.

Comentarios en HTML

Los comentarios en HTML se muestran en el código del documento, pero no se representarán visualmente en el navegador. Pueden ser útiles para aclarar ciertos aspectos del código. Para agregar comentarios en HTML debes inicial el comentario con los caracteres , tal y como puedes ver en el siguiente ejemplo:

<!-- Esto es un comentario -->

Los comentarios pueden ocupar más de una línea:

<!-- Esto es un comentario
y esto es el mismo comentario
-->

Es muy habitual comentar código HTML que no se incluye en el resultado final cuando se quiere probar una funcionalidad o sencillamente eliminar temporalmente algún bloque de código:

<!-- La siguiente imagen no se mostrará
<img src="imagen.jpg" alt="Descripción">
-->

Para ver los comentarios con más detalle, consulta el siguiente tutorial:

Comentarios en HTML: Cómo agregar comentarios en HTML

A continuación vamos a ver cuáles son las secciones básicas que debe tener todo documento HTML:

Secciones de un Documento HTML

Vamos a crear un documento HTML básico. Primero declararemos el tipo de documento y luego definiremos las etiquetas básicas de todo documento HTML.

Información! De ahora en adelante, es recomendable que mediante un editor de texto plano como Notepad++, Gedit o el bloc de notas crees un archivo vacío con extensión .html en el que ir probando el resultado de lo que vamos haciendo.

Tras agregar el DOCTYPE del documento debemos incluir las etiquetas de apertura y de cierre de html:

<!DOCTYPE html>
<html>
...
</html>

Todo lo que se incluya entre estas dos etiquetas será interpretado como código HTML. La etiqueta <html> se usa para indicar el inicio del documento y suele situarse justo después de la declaración DOCTYPE. La etiqueta de cierre </html> se usa para indicar el último elemento HTML presente en el documento. Tal y como ya hemos visto, la etiqueta de cierre es igual que la de apertura, salvo porque contiene una barra inclinada /.

Entre las etiquetas <html> y </html> debemos definir ahora dos componentes fundamentales en todo documento HTML que son la cabecera o head y el cuerpo o body, definidos mediante las etiquetas <head> y <body> respectivamente:

<!DOCTYPE html>
<html>
  <head>
  ...
  </head>
  <body>
  ...
  </body>
</html>

Head del Documento HTML

La cabecera o head de un documento HTML se define entre la etiqueta de apertura <head> y la de cierre </head>. Esta sección es esencial a la hora de crear una página web, ya que contiene el título y ciertos recursos como las hojas de estilos o ciertos scripts. Los recursos pueden ser tanto internos como externos, pudiendo estar situados en un servidor externo o en el propio servidor o sistema local en el que reside el archivo HTML.

Muchos de los elementos que se definen en esta sección no son directamente visibles en la página. En la sección head también se definirán ciertas etiquetas que permitirán ayudar tanto al navegador del usuario como a los bots o scrapers de Google que accedan a la página.

La etiqueta <head> no debe incluir atributos en su definición. Se trata sencillamente de una etiqueta contenedora que incluye otras etiquetas en su interior, como por ejemplo las etiquetas title, script, noscript, link, style, base o meta.

Body del Documento HTML

El cuerpo o body de un documento HTML se define entre la etiqueta de apertura <body> y la de cierre </body>. En esta sección se definen los elementos visibles de la página, siendo la sección en la que está el contenido de la misma.

Elementos de un Documento HTML

En este apartado vamos a aprender a crear un documento HTML. Para ello vamos a ver cómo agregar los elementos o etiquetas fundamentales.

Antes de comenzar a ver cada uno de los elementos vamos a hablar de su disposición. Diremos que los elementos visuales son aquellos que se definen en el cuerpo o body de la página. Estos pueden ser elementos en línea inline o elementos de bloque o block.

Los elementos de bloque o block son aquellos que no aceptan que otros elementos si sitúen a su lado, ocupando todo el ancho de la pantalla. Estos elementos son los párrafos, los elementos divisores, los encabezados o las listas. Mediante CSS es posible alterar las dimensiones, los márgenes o el padding de estos elementos.

Algunos elementos de bloque pueden contener elementos dispuestos en línea en su interior. Incluso ciertos elementos como las etiquetas <div> pueden contener otros elementos dispuestos en bloque en su interior. Sin embargo, otros elementos como los párrafos <p> no pueden contener elementos dispuestos en bloque:

<div> <!-- Elemento en bloque -->
  <div>
    <p>Párrafo</p> <!-- Elemento en bloque -->
  </div> <!-- Elemento en bloque -->
  <div>
    <span>Texto</span> <!-- Elemento en línea -->
    <span>Otro texto</span> <!-- Elemento en línea -->
  </div>
</div>

Los elementos en línea o inline son las etiquetas que dividen los textos, los enlaces o las imágenes, que aceptan que otros elementos estén situados a ambos lados. A diferencia de los elementos de bloque, no es posible modificar parámetros como las dimensiones o los márgenes de estos elementos. Estos elementos no pueden contener elementos dispuestos en bloque en su interior.

Sin embargo, es posible modificar el comportamiento por defecto de ambos tipos de elementos mediante CSS, haciendo que un enlace se disponga en bloque o que un párrafo se disponga el línea.

Título del Documento

Para agregar el título del documento se usa la etiqueta title. Esta etiqueta se coloca en las sección head de la página y se mostrará tanto en los buscadores como en la pestaña o ventana del navegador y es especialmente importante cuando quieres optimizar tu página para los motores de búsqueda.

Para agregar la etiqueta de título basta con introducir el título de la página entre la etiqueta de apertura y de cierre de la misma:

<title>Título de la página</title>

URL Base de la Página

La etiqueta base se usa en el head del documento y sirve para especificar la URL raíz de la página, de la cual descienden todas las páginas del sitio web en el que está. En el caso de esta página, sería la siguiente:

<!DOCTYPE html>
<html>
  <head>
    ...
    <base href="https://neoguias.com/">
    ...
  </head>
  ...
</html>

Cómo Agregar Scripts

Es posible agregar scripts JavaScirpt a un documento HTML mediante la etiqueta script. Puedes incluir código JavaScript directamente entre la etiqueta de apertura y de cierre de este elemento:

<script>
...código JavaScript
</script>

A este método de agregar código JavaScript también se le llama código JavaScript «inline».

También puedes cargar scripts externos mediante el atributo src de este elemento:

<script src="js/archivo.js"></script>

Es posible especificar el tipo del script mediante el atributo type:

<script src="js/archivo.js" type="text/javascript"></script>

Sin embargo, cuando lo que agregas es código JavaScript no es necesario especificar el atributo type, ya que su valor por defecto es text/javascript.

Los scripts pueden residir en cualquier parte del documento, pero lo recomendable es situarlos o bien en la sección head del documento o bien al final de la página. la decisión acerca del lugar idóneo depende del código del scripts y del orden de carga de los mismos, en vez de haber más de un script.

Cuando cargas un script en la cabecera del documento se bloquea el renderizado de la página hasta que el renderizado de la misma se completa. De este modo, el script se ejecutará antes de que el código HTML se haya mostrado, lo cual también podría ser un problema si el código hace referencia a ciertos elementos de la página que todavía no se hayan mostrado.

Lo idóneo es colocar los scripts al final de la página, justo antes del cierre de la etiqueta body, de modo que la página ya se haya mostrado en el navegador y podamos hacer referencia a cualquier elemento HTML de la página desde el script sin errores en el mismo. De este modo mejoramos el rendimiento de la misma. A día de hoy es una mala práctica incluir scripts JavaScript en la cabecera de la página.

Sin embargo, en las últimas versiones de JavaScript se incluye un método todavía más óptimo que agregar los scripts al final de la página, mediante el cual podemos agregar scripts en la cabecera. Se trata de usar el atributo defer:

<script defer src="js/archivo.js"></script>

De este modo, la carga de los scripts se optimizará automáticamente. Existe otro atributo llamado async con una utilidad similar, aunque actualmente está por detrás de defer en cuanto a rendimiento. Sin quieres saber las diferencias entre ambos atributos, consulta cuáles son las diferencias entre los atributos async y defer.

Si quieres saber más detalles acerca de cómo optimizar la carga de scripts, consulta cómo y en dónde incluir scripts para cargarlos de forma óptima.

Cómo Sustituir Scripts

En ocasiones los usuarios tendrán el código JavaScript desactivado en su navegador, por lo que los scripts que incluyas no se cargarán. Los usuarios podrás activar o desactivar la carga de script desde las opciones de su navegador, por lo que no es algo que podamos controlar.

Sin embargo, podemos usar la etiqueta noscript, que se usa para detectar cuándo el navegador del usuario no acepta código JavaScript. Esta etiqueta se usa de un modo diferente si está situada en la sección head o en la sección body de la página.

Cuando sitúas la etiqueta noscript en la cabecera, únicamente puede contener estas otras etiquetas en su interior:

Etiquetes de enlace link
Etiquetas de estilos style
Meta etiquetas meta

De este moddo, podemos agregar hojas de estilos, elementos o meta etiquetas adicionales si los scripts están desactivados en el navegador del usuario. En el siguiente ejemplo agregamos estilos CSS en el interior de la etiqueta noscript.

<!DOCTYPE html>
<html>
  <head>
    ...
    <noscript>
      <style>
        .alerta-no-script {
          display: inline-block;
        }
      </style>
    </noscript>
    ...
  </head>
  ...
</html>

Las propiedades de la clase alerta-no-script solamente entrarán en juego si los scripts están desactivados.

Por otro lado, si la etiqueta noscript está en la sección bodym provocará que los elementos definidos en su interior solamente se muestren cuando los scripts están desactivados en el navegador del usuario:

<!DOCTYPE html>
<html>
  ...
  <body>
    ...
    <noscript>
      <div>Solamente visible con los scripts desactivados</div>
    </noscript>
    ...
  </body>
</html>

Cómo Agregar Recursos

Puedes agregar recursos externos al documento en la sección head del documento mediante la etiqueta link. Esta etiqueta no contiene etiqueta de cierre y se suele usar cuando quieres agregar hojas de estilos CSS. En el siguiente ejemplo cargamos una hoja de estilo situada en el directorio css/estilos.css:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="css/estilos.css" rel="stylesheet">
    ...
  </head>
  ...
</html>

Mediante el atributo href especificamos la localización de la hoja de estilos, ya sea interna o externa. Mediante el atributo rel especificamos el tipo de recurso.

Existe otro atributo que podemos aplicar para cargar diferentes hojas de estilos diferentes en función del dispositivo en el que veamos la página. Se trata del atributo media:

<link href="css/estilos.css" media="screen" rel="stylesheet">
<link href="css/estilos-print.css" media="print" rel="stylesheet">

Podemos enlazar a recursos que no sean hojas de estilos, como por ejemplo el favicon de la página, que es el icono que se muestra en la pestaña o ventana del navegador cuando visualizas tu página:

<link rel="icon" type="image/png" href="/img/favicon.png">

También es posible agregar iconos en varias dimensiones para mostrarlos en función del tipo del tamaño de la pantalla del dispositivo en el que se muestre:

<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">

Mediante la etiqueta link también podemos enlazar feeds RSS, tal y como puedes ver en este ejemplo:

<link rel="alternate" type="application/rss+xml" href="/img/favicon.png">

Otro uso habitual de al etiqueta link consiste en indicar el enlace a la siguiente página o a la página anterior de contenidos multipágina, mediante los atributos rel="prev" y rel="next". Sin embargo, ya no es necesario indicar esto para que buscadores como Google indexen correctamente los contendios, ya que los scrapers son ya capaces de indagar la correcta estructura de los contenidos.

Cómo Agregar Estilos

Ya hemos visto cómo agregar hojas de estilos externas. Sin embargo, también podemos agregar estilos en el propio documento mediante la etiqueta style:

<style>
  .ejemplo {
    color: blue;
  }
</style>

También es posible usar el atributo media para indicar al navegador que solamente use los estilos CSS especificados en ciertos dispositivos:

<style media="print">
  .ejemplo {
    color: blue;
  }
</style>

Los estilos agregados de este modo pueden estar tanto en la sección head como en la sección body. Si usamos los estilos en la sección body, podemos usar el atributo scoped para aplicarlos solamente a los elementos que estén al mismo nivel que la etiqueta style correspondiente o a un nivel inferior. Sin embargo ya no es recomendable usar este atributo, puesto que será eliminado en próximas implementaciones de CSS.

Cómo Agregar Meta Etiquetas

Las meta etiquetas se agregan en la sección head de la página y sirven para llevar a cabo una gran variedad de tareas. Se representan mediante la etiqueta meta y solamente incluyen etiqueta de apertura, por lo que no incluyen otros elementos en su interior.

Las mayor parte de las meta etiquetes usan el atributo name para que así el navegador pueda identificarlas.

La meta etiqueta más utilizada es la meta etiqueta description, usada para describir el contenido de la página. Esta etiqueta es usada por buscadores como Google, que usan la descripción para mostrarla en la lista de resultados, tras el título de cada resultado. Sin embargo, no siempre se utiliza, ya que el algoritmo de Google seleccionará o bien la descripción o bien el contenido de la página según perciba qué es aquello que mejor representa al contenido de la misma en función de los términos de búsqueda introducidos por el usuario.

La meta etiqueta charset se usa para definir la codificación de caracteres de la página, que en la mayor parte de los casos será utf-8, que incluye un amplio abanico de caracteres, por lo que tiene un alto grado de compatibilidad:

<meta charset="utf-8">

La meta etiqueta robots se usa para indicar a los buscadores qué comportamiento deberán adoptar a la hora de indexar la página. Las órdenes se indican mediante el atributo content. Por ejemplo, el valor noindex se usa para indicar a los buscadores que no indexen la página:

<meta name="robots" content="noindex">

El valor nofollow se usa para que los buscadores no sigan los enlaces de la página:

<meta name="robots" content="nofollow">

El atributo content puede contener varios valores separados por comas, por lo que podemos escribir las dos etiqueta anteriores en una sola:

<meta name="googlebot" content="noindex, nofollow">

También es posible especificar el scraper que debe seguir las reglas indicadas sustituyendo el el valor robots del atributo name por el nombre específico del scraper. En este ejemplo indicamos que solamente el bot de Google tendrá que seguir los valores especificados en el atributo content:

<meta name="googlebot" content="noindex, nofollow">

También podemos indicar a Google que desactive la funcionalidad de traducción de la página:

<meta name="google" content="notranslate">

Otra meta etiqueta muy utilizada es aquella que se usa para especificar el viewport del documento, indicando al navegador que configure el ancho de la página en base al ancho del dispositivo:

<meta name="viewport" content="width=device-width, initial-scale=1">

Incluso existe una meta etiqueta mediante la cual podemos indicar al navegador que redirija al usuario a otra página al transcurrir un tiempo determinado. En el siguiente ejemplo, redirigimos al usuario a la página indicada al instante:

<meta http-equiv="refresh" content="0;url=https://neoguias.com">

Por otro lado, en este otro ejemplo redirigimos al usuario a la página indicada al cabo de 5 segundos:

<meta http-equiv="refresh" content="5;url=https://neoguias.com">

Existen muchas otras meta etiquetas, aunque las que hemos visto son las más utilizadas. El resto son poco frecuentes, por lo que no tiene sentido entrar en ellas en este tutorial de introducción.

Cómo Agregar Párrafos

Puedes agregar párrafos usando la etiqueta p, que es un elemento que se dispone en bloque. A continuación puedes ver un ejemplo:

<p>Esto es un párrafo</p>

En su interior podemos agregar otros elementos dispuestos en línea como por ejemplo etiquetas de texto span o enlaces a, pero no podemos agregar elementos dispuestos en bloque, incluyendo otros párrafos.

En este ejemplo insertamos un enlace en el contenido del párrafo:

<p>Esto es un párrafo con <a href="https://neoguias.com">un enlace</a></p>

Los navegadores aplican un margen a los párrafos automáticamente, aunque varían en función del navegador utilizado. De esta forma siempre habrá espacio entre dos párrafos consecutivos.

Cómo Agregar Spans

Las etiquetas span se usan para dividir un texto en varias partes, pudiendo así identificarlas o aplicarles diferentes estilos a cada una de ellas.

En este ejemplo agregamos un párrafo con una etiqueta span a cuyo contenido le aplicamos estilos CSS:

<p>Esto es un párrafo con <span style="color:red;">un texto rojo</span></p>

Cómo Agregar Saltos de Línea

Puedes agregar saltos de línea usando la etiqueta br, que es un elemento dispuesto en línea que carece de etiqueta de cierre. Cuando incluyes un salto de línea en un párrafo, sencillamente se saltará de línea en lugar de crearse un párrafo nuevo.

A continuación agregamos un salto de línea en el interior de un párrafo:

<p>Esto está en una línea<br>y esto en otra</p>

Cómo Agregar Encabezados

Mediante HTML puedes agregar encabezados y organizarlos en seis niveles diferentes. Estos encabezados se corresponden con las etiquetes h1, h2, h2, h4, h5 y h6:

<h1>Esto es un encabezado h1</h1>
<h2>Esto es un encabezado h2</h2>
<h3>Esto es un encabezado h3</h3>
<h4>Esto es un encabezado h4</h4>
<h5>Esto es un encabezado h5</h5>
<h6>Esto es un encabezado h6</h6>

Los encabezados y su organización son esenciales cuando quieres optimiza tu página para los diferentes buscadores, siendo utilizados por estos de diferentes formas. En general, toda página debería tener un encabezado de primer nivel h1, siendo también recomendables encabezados de nivel y sucesivos en función del contenido de la página.

Los navegadores renderizan los diferentes tipos de encabezados en diferentes tamaños, siendo el más grande el encabezado h1, siguiéndole el h2 y así sucesivamente hasta el h6. Estos tamaños pueden personalizarse mediante CSS.

Los encabezados solamente pueden contener texto, por lo que no pueden incluirl otros elementos en su interior.

Cómo Agregar Estilos de Escritura

Mediante HTML es posible modificar los estilos del texto plano, pudiendo ponerlo e negrita o en cursiva.

Texto en Negrita

Para resaltar el texto en negrita se usa la etiqueta strong, tal y como puedes ver en el siguiente ejemplo:

<strong>Soy un texto en negrita</strong>

Es importante resaltar que la etiqueta strong es una etiqueta semántica y no visual cuyo significado es «fuerte», por lo que su interpretación depende del navegador y de otros factores. Sin embargo, navegadores suelen poner este texto en negrita.

Si te quieres asegurar de que el texto esté en negrita, has de usar la etiqueta b, inicial de «bold», que indicará al navegador que el estilo deseado es el tipo de letra negrita, sin otras posibles interpretaciones:

<b>Soy un texto en negrita</b>

Texto en Cursiva

Para resaltar el texto en cursiva se usa la etiqueta em, tal y como puedes ver en el siguiente ejemplo:

<em>Soy un texto en cursiva</em>

Es importante resaltar que la etiqueta em es una etiqueta semántica y no visual cuyo significado es «enfatizado», por lo que su interpretación depende del navegador y de otros factores. Sin embargo, navegadores suelen poner este texto en cursiva.

Si te quieres asegurar de que el texto esté en cursiva, has de usar la etiqueta i, inicial de «italics», que indicará al navegador que el estilo deseado es el tipo de letra cursiva, sin otras posibles interpretaciones:

<i>Soy un texto en negrita</i>

Texto Subrayado

Para subrayar un texto debes usar la etiqueta ins. El texto del siguiente ejemplo se mostrará subrayado:

<ins>Soy un texto resaltado</ins>

Texto Resaltado

Mediante HTML también puedes resaltar un texto utilizando la etiqueta mark. El texto del siguiente ejemplo se mostrará resaltado:

<mark>Soy un texto resaltado</mark>

Texto Tachado

Con HTML también puedes tachar un texto usando la etiqueta mark. El texto del siguiente ejemplo se mostrará tachado:

<del>Este texto está tachado</del>

Letra Pequeña

Usando la etiqueta small puedes mostrar una porción de texto con un tamaño de letra más pequeño. Independientemente del tamaño del texto, incluyéndolo en esta etiqueta se mostrará con un tamaño inmediatamente inferior:

<small>Este texto será más pequeño</small>

Superíndice

Para agregar un superíndice debes usar la etiqueta sup de HTML. Cuando agregas un superíndice, el texto se mostrará en pequeño, en la mitad superior del espacio que debería ocupar un carácter estándar. Para crear un superíndice debes usar la etiqueta sup:

<sup>Este texto es un superíndice</sup>

Subíndice

Para crear un subíndice debes usar la etiqueta sub de HTML. Cuando agregas un subíndice, el texto se mostrará en la mitad inferior del espacio que debería ocupar un carácter estándar, con un tamaño de letra más pequeño. Para agregar un subíndice debes usar la etiqueta sub:

<sub>Este texto es un subíndice</sub>

Cómo Agregar Citas

Para agregar citas puedes usar la etiqueta blockquote. el navegador aplicará márgenes tanto a la izquierda como a la derecha. En Chrome, por ejemplo, se agregan márgenes de 40px. La etiqueta blockquote es una etiqueta de bloque e incluye tanto etiqueta de apertura como de cierre, por lo que la cita debe estar entre ambas. Aquí tienes un ejemplo:

<blockquote>Esto es una cita de texto.</blockquote>

También es posible agregar citas en línea mediante la etiqueta q:

<q>Esto es una cita de texto en línea.</q>

Las citas en línea podrás insertarse en un texto sin saltar de línea.

Cómo Agregar Líneas Horizontales

Puedes agregar líneas mediante la etiqueta hr, que permite agregar una línea horizontal en la página, algo que resulta útil cuando quieres separar secciones, entre otras cosas. En el siguiente ejemplo separamos dos párrafos mediante una línea horizontal:

<p>Texto 1</p>
<hr>
<p>Texto 2</p>

Cómo Agregar Bloques de Código

La etiqueta code resulta útil cuando quieres incluir código en la página. Cuando la usas, el navegador pasará a usar un tipo de fuente monoespaciada en la que todos los caracteres ocupan el mismo espacio. En el siguiente ejemplo agregamos algo de código JavaScript:

<code>
const x = 4;
console.log(x * 5);
</code>

Cada navegador aplica sus propios estilos a esta etiqueta, aunque la mayoría sencillamente aplica el valor monospace al atributo font-family mediante CSS:

code {
  font-family: monospace;
}

Sin embargo, la etiqueta code ignora tanto espacios en blanco consecutivos como saltos de línea. Es por ello que la etiqueta code suele usarse en el interior de la etiqueta pre. Al igual que ocurría con la etiqueta code, cada navegador aplica sus propios estilos a la etiqueta pre. Chrome, por ejemplo, aplica los siguientes estilos a esta etiqueta, aplicando una disposición en bloque y evitando que los espacios se fusionen:

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0px;
}

Cómo Agregar Listas

En HTML existen diferentes tipos de listas que además de resultar útiles pro su representación visual, también ayudan a los scraper de los diferentes buscadores a organizar el contenido. Podemos agregar listas no ordenadas, listas ordenadas o listas de definiciones. Los navegadores aplicarán diferentes estilos a las listas según si tipo. A continuación vamos a ver cada uno de los tipos de lista.

Listas Ordenadas

Las listas ordenadas se crean mediante la etiqueta de bloque ol, que significa «ordered list». Entre la etiqueta de apertura y la de cierre de esta etiqueta podemos agregar diferentes elementos a la lista mediante la etiqueta li. En el siguiente ejemplo agregamos una lista ordenada:

<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
</ol>

Los navegadores agregarán por defecto una sangría al comienzo de cada elemento de la lista, además de un número que indicará el ordinal de cada elemento de la lista.

Listas No Ordenadas

Las listas no ordenadas se crean mediante la etiqueta de bloque ul, que significa «unordered list». Entre la etiqueta de apertura y la de cierre de esta etiqueta podemos agregar diferentes elementos a la lista mediante la etiqueta li. En el siguiente ejemplo agregamos una lista no ordenada:

<ul>
  <li>Un elemento</li>
  <li>Otro elemento</li>
</ul>

Los navegadores agregarán por defecto una sangría al comienzo de cada elemento de la lista, además de un punto o bullet point.

Listas de Definiciones

Las listas de definiciones se crean mediante la etiqueta de bloque dl, que significa «definition list». Entre la etiqueta de apertura y la de cierre de esta etiqueta podemos agregar diferentes término mediante la etiqueta dt. Además, también podemos agregar definiciones mediante la etiqueta dd. Lo habitual es agregar un término y, seguidamente, su definición. En el siguiente ejemplo agregamos una lista de definiciones:

<dl>
  <dt>Eduardo Lázaro</dt>
  <dd>Mi nombre</dd>
  <dt>35</dt>
  <dd>Mi edad</dd>
</dl>

Los navegadores agregarán por defecto una sangría antes de cada término, además de una sangría adicional antes de cada definición. Lo cierto es que las listas de definiciones no son tan utilizadas como las listas ordenadas o las listas no ordenadas.

Cómo Agregar Enlaces

Con la etiqueta a de HTML podrás agregar enlaces. Incluye una etiqueta de apertura y otra de cierre, por lo que el texto o el contenido que esté en su interior será el texto del enlace, también llamado anchor. En cuanto a la localización a la que debe enlazar el texto, podrás definirla mediante el atributo href.

En el ejemplo que ves a continuación, creamos un enlace con el texto «Haz clic aquí» que enlaza a la URL absoluta indicada en el atributo href:

<a href="https://neoguias.com/tutoriales">Haz clic aquí</a>

Cuando enlazas a una URL de forma absoluta debes especificar el enlace completo, incluyendo el protocolo y el dominio al que quieres enlazar.

Los enlaces relativos no incluyen ni el protocolo ni el dominio, ya que se asume que es un enlace cuya ruta es relativa al dominio actual. Es decir, las rutas siempre son relativas al origen actual. Si estás en la web https://neoguias.com, el siguiente enlace relativo te llevará a la URL https://neoguias.com/tutoriales.

<a href="/tutoriales">Haz clic aquí</a>

Es importante que agregues la barra inclinada / la comienzo de una URL relativa, ya que de lo contrario, se considerará que el origen es la URL completa actual en lugar del dominio actual. Para explicarlo mejor, vamos a proponer el siguiente ejemplo:

Si haces clic en un enlace que usa la URL /enlace como valor del atributo href y estás en la página https://neoguias.com/pagina/, irás a la URL https://neoguias.com/enlace/.
Si haces clic en un enlace que usa la URL enlace como valor del atributo href y estás en la página https://neoguias.com/pagina/, irás a la URL https://neoguias.com/pagina/enlace/.

Demás de insertar texto, un enlace también puede contener cualquier otro elemento, como por ejemplo una imagen, tal y como puedes ver en este ejemplo:

<a href="https://neoguias.com">
  <img src="imagen.jpg">
</a>

Lo único que debes tener en cuenta es que no deberías insertar otros enlaces en el interior de un enlace.

Es posible que quieres que el enlace se abra en la propia página o en una pestaña o ventana nueva, para lo cual puedes usar el atributo target, que puede tener los siguientes valores:

_blank: El destino del enlace se abrirá en una nueva ventana o pestaña cuando se haga clic sobre él.
_self: El destino del enlace se abrirá en el propio frame, pestaña o ventana en la que se hace clic.
_parent: El destino del enlace se abrirá en el frame de nivel superior al actual.
_top: El destino del enlace se abrirá el frame origen con respecto al actual.

En general, los valores más habituales del campo target son _blank y _self.

También puedes usar el atributo download de HTML, que sirve para descargare el archivo o elemento referenciado en lugar de navegar hasta él:

<a href="archivo.pdf" download="mi-archivo.pdf">Descargar</a>

Cómo Agregar Divisiones

En HTML puedes agregar una serie de etiquetas cuya única funcionalidad es la de contener a otras etiquetas en su interior. Un ejemplo de ello es la etiqueta div, que se usa de forma genérica para crear divisiones o secciones en un documento HTML.

La etiqueta div se suele usar también con el fin de asignarle estilos CSS a manipularla mediante JavaScript. Es muy habitual también asignarle una clase CSS o un identificador id a los elementos div, de forma que podamos personalizarlos. Es posible incluir cualquier otro elemento en su interior, sin limitación alguna.

En el siguiente ejemplo agregamos una etiqueta div con un encabezado y un párrafo en su interior:

<div class="division">
  <h2>Esto es un encabezado</h2>
  <p>Y esto un párrafo</p>
</div>

Es importante destacar que los elementos div no transmiten ningún significado, al contrario de lo que ocurre con las etiquetas semánticas.

Cómo Agregar Imágenes

Puedes mostrar imágenes de diversos formatos en cualquier documento HTML. Para ello se suele utilizar la etiqueta img, además de otras etiquetas de apoyo como las etiquetas figure y picture.

Etiqueta `img`

Para mostrar una imagen en HTML puedes usar la etiqueta img. Para establecer la ruta u origen de la imagen debes usar el atributo src (source):

<img src="/ruta/casa.png">

Puedes usar diferentes formatos de imagen, siendo los formatos JPG, PNG, GIF o WebP los más habituales. Las imágenes pueden estar localizadas tanto en tu servidor o sistema local como en un servidor remoto, pudiendo especificar también una URL como atributo src:

<img src="https://www.neoguias.com/ruta/imagen.png">

Es recomendable establece ruan descripción para las imágenes. Puedes establecerla mediante el atributo alt, de modo que la descripción se muestre en caso de que no sea posible mostrar la imagen. Además, este atributo también ayudará a poder identificar la imagen, proporcionando una descripción que las personas con problemas de visión puedan escuchar:

<img src="/ruta/casa.png" alt="Imagen de una casa">

Para ver cómo agregar imágenes mediante la etiqueta img con más detalle, consulta el siguiente tutorial:

La etiqueta «img» de HTML: Cómo usar la etiqueta «img» de HTML

Etiqueta `figure`

La etiqueta figure puede encapsular a la etiqueta img, mostrando una descripción de la misma por pantalla:

<figure>
  <img src="/ruta/casa.png"
    alt="Imagen de una casa">
    <figcaption>Imagen de una casa</figcaption>
</figure>

Para ver la etiqueta figure con más detalle, consulta el siguiente tutorial:

La etiqueta «figure» de HTML: Cómo usar la etiqueta «figure» de HTML

Etiqueta `picture`

La etiqueta picture se usa para mostrar una misma imagen en diferentes tamaños, o también para que una imagen pueda mostrase en diferentes formatos dependiendo del navegador del usuario:

<picture>
    <source type="image/webp" srcset="/ruta/casa.webp">
    <img src="/ruta/casa.png" alt="Imagen de una casa">
</picture>

Para ver la etiqueta picture con más detalle, consulta el siguiente tutorial:

La etiqueta «picture» de HTML: Cómo usar la etiqueta «picture» de HTML

Cómo Agregar Etiquetas Semánticas

Las etiquetas semánticas de HTML definen la estructura de un documento HTML, algo que resulta útil a los motores de búsqueda que visitan una página. Habitualmente, en casi cualquier documento HTML podrás encontrar una cabecera, un cuerpo, un pié o un menú de navegación.

Al igual que las etiquetas div, las etiquetas semánticas no definen un estilo, siendo algo que se suele delegar a otros componentes o a los estilos CSS asignados. Sin embargo, mientras que las etiquetas semánticas tienen un significado semántico, las etiquetas div no representan nada en concreto. A continuación vamos a ver cuáles son las etiquetas div más utilizadas.

Etiqueta `navigation`

La etiqueta nav se usa para definir en su interior el menú de navegación de una página. Esta etiqueta suele contener una lista ol o ul con diferentes elementos li, en donde se incluyen uno o varios enlaces a las páginas principales de un sitio web.

A continuación puedes ver un ejemplo básico de un menú de navegación:

<nav>
  <ul>
    <li>
      <a href="/">Inicio</a>
    </li>
    <li>
      <a href="/informacion">Información</a>
    </li>
    <li>
      <a href="/noticias">Noticias</a>
    </li>
  </ul>
</nav>

header

Etiqueta `main`

La etiqueta main se utiliza para indicar cuál es el contenido principal de una página.

A continuación puedes ver un ejemplo de uso de la etiqueta aside:

<body>
  <main>
    <p>Algo de texto</p>
  </main>
</body>

Etiqueta `aside`

La etiqueta aside se suele utilizar para agregar información relacionada con el contenido principal de una página, pero que no forma parte directamente del mismo. Un ejemplo de ello son las típicas sidebars que puedes encontrar en casi cualquier página. Otro ejemplo podría ser una pequeña caja que contiene una cita con información extra o algún enlace.

Cuando usas la etiqueta aside, indicas que su contenido no forma parte de la sección en la que se incluye.

A continuación puedes ver un ejemplo de uso de la etiqueta aside:

<div>
  <p>Contenido</p>
  <aside>
    <p>Información extra</p>
  </aside>
  <p>Más contenido</p>
</div>

Etiqueta `section`

Las secciones representan las diferentes partes de un documento y se usan de un modo similar a las divisiones. Sin embargo, se considera que las secciones son elementos principales en los que se divide el contenido principal de la página. Suelen contener un encabezado de cualquier nivel, ya sea h1, h2 … y hasta h6.

Para agregar una sección debes usar una etiqueta section, tal y como puedes ver en este ejemplo:

<section>
  <h2>Una sección cualquiera</h2>
  <p>Esto es parte del contenido de la sección</p>
  <img src="logo.png">
</section>

Si un artículo es demasiado largo, suele ser habitual dividirlo en diferentes secciones. Sin embargo, debes tener en cuenta que las sección no son contenedores genéricos como sí lo son las etiquetas div.

Etiqueta `header`

La etiqueta header representa la parte de la página que incluye la introducción a la misma. Por ejemplo, podría contener un título h1 o también un título h1 y un subtítulo h2, aunque no existe ninguna normal al respecto acerca de esto, puedo incluir un número indeterminado de encabezados o de cualquier otro tipo de elemento.

A continuación puedes ver un ejemplo de uso de la etiqueta header:

<article>
  <header>
    <h1>Título del post</h1>
  </header>
  <p>Un párrafo</p>
  <p>Otro párrafo</p>
  ...
</article>

Etiqueta `footer`

La etiqueta footer se utiliza para identificar el pié de un artículo, en donde se suelen incluir enlaces extra o información de contacto.

A continuación puedes ver un ejemplo de uso de la etiqueta footer:

<article>
  <footer>
    <a href="/enlace-1">Enlace 1</a>
    <a href="/enlace-2">Enlace 2</a>
  </footer>
</article>

Cómo Agregar Formularios

Para agregar formularios en HTML se usa la etiqueta form, que puede contener cualquier otro tipo de elemento. Los formularios permiten que el usuario interatúe con la página, pudiendo introducir información en diversos campos que podrá ser enviada a un servidor:

<form>
...
</form>

Los formularios incluyen habitualmente un botón de envío, aunque también es posible que los datos se envíen al servidor automáticamente si se programa dicha funcionalidad. Es posible establecer una URL de destino, de modo que cuando se pulse el botón de envío, el navegador envíe los datos y redirija al usuario a dicha página. Puedes especificar la URL de destino mediante el atributo action:

<form action="/destino">
..
</form>

En caso de que no se introduzca ninguna página, el navegador enviará los datos a la URL actual refrescando la página en la que se encuentra el usuario.

Los formularios pueden usar dos tipos de métodos a la hora enviar los datos, que son el método GET y el método POST. Cada uno de estos métodos tiene sus ventajas e inconvenientes, aunque lo habitual es usar POST.

Cuando usas el método GET, los datos del formulario se envían junto con la propia URL, estando al final de la misma como pares de parámetro y valor, tras el símbolo de interrogación ?. Estas peticiones se guardan en el historial del usuario y salvo que se use un certificado SSL, los datos enviados son visibles por cualquier usuario que escanee la red.
Cuando usas el método POST, los datos se enviarán en una cabecera de la petición. Estas peticiones no serán almacenadas en el historial del navegador y son más seguras, además de aceptar un mayor número de datos, ya que la longitud de una URL de las peticiones GET siempre es limitada.

El método de envío de un formulario se especifica mediante el atributo method. Vamos a modificar el formulario anterior para que envíe los datos a la URL https://neoguias.com/destino usando el método POST:

<form action="https://neoguias.com/destino" method="POST">
..
</form>

También podemos especificar una URL relativa como destino. Dando por hecho que estamos en la URL https://neoguias.com, el siguiente formulario enviará los datos a la URL https://neoguias.com/destino:

<form action="/destino" method="POST">
...
</form>

En el siguiente tutorial podrás encontrar cómo crear formularios HTML, además de ver ejemplos de uso de cada uno de los campos que más se utilizan a la hora de crear formularios:

Formularios HTML: Cómo crear formularios con HTML

Vamos ahora con la parte más interesante, que son los datos del formulario. Los datos los tendrán que proporcionar los usuarios mediante una serie de elementos que podemos utilizar para crear formularios.

Campo Input: Se trata del elemento más versátil de HTML, con multitud de atributos que permiten personalizar tanto la funcionalidad del campo como su apariencia.
Campo Select: Un campo que permite seleccionar opciones, también muy versátil.
Campo Textarea: Un campo que permite introducir texto en varias líneas.

A continuación vamos a ver cada uno de los campos que henmos visto.

Etiqueta `input`

La etiqueta input es una de las que más utilizarás cuando crees formularios mediante. Es muy versátil, ya que modificando el atributo type puede adoptar una amplia variedad de comportamientos.

Por defecto se mostrará un campo de control en el que podrás introducir una línea de texto:

<input>

Si obviamos el atributo type, su valor será text, que es su valor por defecto, por lo que la etiqueta anterior es equivalente a esta otra:

<input type="text">

Si pretendes enviar este formulario a tu servidor deberías darle un nombre para así poder identificarlo. Para ello debes usar el atributo name:

<input type="text" name="nombre">

Además, también puedes usar el tributo placeholder para que se muestre texto en el campo. Este texto se mostrará en gris cuando el campo esté vacío, pudiendo así dar alguna pista o consejo al usuario acerca del contenido que debe introducir:

<input type="text" name="nombre" placeholder="Introduce tu nombre">

Según el valor del atributo type, podemos preparar el campo para la introducción de diferentes tipos de datos:

Text: Si usas el atributo type="text" crearás un campo por defecto que aceptará una cadena de texto:
```
<input type="text" name="nombre">
```
Mail: Usando el atributo type="email" el campo validará la introducción de una dirección de email en el navegador, verificando que la dirección de correo sea válida antes de enviar el formulario:
```
<input type="email" name="email" placeholder="Introduce tu email">
```
Tel: Para crear un campo input que acepte un número de teléfono debes usar el atributo type="tel". En navegadores de escritorio funcionará como un campo de texto, pero en navegadores móviles es posible mostrar un teclado numérico.
```
<input type="tel" name="telefono">
```
El navegador no validará los número de teléfono, pero podrás validarlo mediante una expresión regular, tal y como veremos más adelante.
Password: Mediante el atributo type="password" el campo representará con asteriscos todos los caracteres que introduzcamos en él, algo que resulta muy útil cuando quieres ocultar contraseñas:
```
<input type="password" name="password" placeholder="Introduce tu contraseña">
```
Number: Mediante el atributo type="number" el campo solo aceptará números. En la mayor parte de los navegadores, este campo mostrará dos flechas que sirven para aumentar o reducir el valor del número en una unidad:
```
<input type="number" name="edad" placeholder="Introduce tu edad">
```
También puedes agregar opcionalmente los atributos min y max para establecer el valor mínimo o el máximo del número introducido:
```
<input type="number" name="edad" placeholder="Introduce tu edad" min="16" max="120">
```
Además, también es posible establecer pasos o saltos entre los diferentes valores mediante el atributo step, de modo que el el campo aumente o reduzca su valor en las unidades indicadas:
```
<input type="number" name="decada" min="0" max="90" step="10">
```
Submit: Puedes crear un botón que envíe el formulario a la URL especificada en el atributo action del formulario usando el atributo type="submit". Para establecer el texto del botón tendrás que usar el campo value:
```
<input type="submit" value="Enviar">
```
File: También puedes cargar un archivo en un campo input para subirlo al servidor. Para ello debes usar el atributo type="file":
```
<input type="file" name="documento">
```
En caso de que quieras subir más de un archivo, puedes usar el atributo multiple:
```
<input type="file" name="documentos" multiple>
```
Puedes establecer el tipo de archivo mediante el atributo accept, agregando el tipo de archivo, ya sea audio/*, video/* o image/*:
```
<input type="file" name="foto" accept="image/*">
```
También puedes ser más concreto y especificar la extensión del archivo:
```
<input type="file" name="foto" accept=".jpg">
```
En caso de aceptar varias extensiones o tipos de archivo, puede separar los valores mediante una coma:
```
<input type="file" name="foto" accept=".jpg, .png, .jpeg">
```
Finalmente, también puedes especificar el tipo MIME del archivo aceptado:
```
<input type="file" name="documento" accept="application/json">
```
Button: Para crear un botón, debes agregar el atributo type="button". Estos botones no serán botones de tipo submit como los que ya hemos visto, sino que se utilizan para agregar otras funcionalidades que debemos programar mediante JavaScript:
```
<input type="button" value="Haz clic aquí">
```
Reset: Existe un botón especial que permite resetear todos los campos de un formulario, devolviéndolos a su estado inicial. Puedes crearlo mediante el atributo type="reset":
```
<input type="reset">
```
Radio: Los botones de radio se utilizan para crear un conjunto de opciones que el usuario podrá seleccionar. Cuando se seleccione una de ellas, las otras se desactivarán. El nombre de este campo deriva de las botoneras que usaban antaño las radios, cuyos botones se desactivaban a excepción del botón que presionabas. Puedes agregar un conjunto de botones agregando campos input con el atributo type="radio". Para que los botones estén asociados correctamente debes asignarles el mismo nombre mediante el atributo name:
```
<input type="radio" name="marca" value="Ford">
<input type="radio" name="marca" value="Renault">
<input type="radio" name="marca" value="Seat">
```
Cuando envíes el formulario, el campo marca del ejemplo tendrá el valor de la opción seleccionada, definida en el campo value. Siempre habrá un elemento seleccionado, que por defecto será el primero de la lista. Sin embargo, podrás cambiar el elemento que se selecciona por defecto mediante el atributo checked, aunque solamente podrás usarlo una vez por cada grupo de campos radio:
```
<input type="radio" name="marca" value="Ford">
<input type="radio" name="marca" value="Seat" checked>
```
Checkbox: Las checkboxes se usan para crear un conjunto de opciones que el usuario puede seleccionar. Se crean asignando el atributo type="checkbox" a un campo input y a diferencia de los botones de radio, el usuario podrá seleccionar más de una opción a la vez. Cuando una opción se active, las otras se mantendrán en su estado, ya estén activadas o desactivadas. Cada grupo de checkboxes deberá tener el mismo valor en su atributo name. Cuando el formulario se envíe, se enviarán todos los elementos seleccionados como un array o conjunto de valores:
```
<input type="checkbox" name="marca" value="Ford">
<input type="checkbox" name="marca" value="Renault">
<input type="checkbox" name="marca" value="Seat">
```
Si quieres que alguna opción esté seleccionada por defecto, debes agregar el atributo checked a las opciones deseadas:
```
<input type="checkbox" name="marca" value="Ford">
<input type="checkbox" name="marca" value="Seat" checked>
```
Url: Puedes crear un campo que acepte una URL mediante el atributo type="url". El navegador validará las URLs, pero también podrás validarlas mediante una expresión regular, tal y como veremos más adelante:
```
<input type="url" name="pagina">
```
Color: Si quieres, puedes dejar que los usuarios escojan un color mediante el atributo type="color", que mostrará un pequeño panel o colorpicker mediante el cual el usuario podrá escoger un color:
```
<input type="color" name="color">
```
También puedes escoger un color que esté seleccionado por defecto asignando un valor al atributo value:
```
<input type="color" name="color" value="#007cba">
```
Sin embargo, la implementación del colorpicker depende del navegador, y además no siempre estará presente, por lo que en ocasiones es preferible crearlo mediante JavaScript para que funcione igual en todos los navegadores.
Range: Este elemento incluye un slider que permite seleccionar un rango de valores mediante dos selectores. Para crearlo debes asignar el atributo type="range" al campo input. Puedes establecer el valor mínimo mediante el atributo min, el valor máximo mediante el atributo max y el valor por defecto mediante el atributo value:
```
<input type="range" name="edad" min="10" max="110" value="18">
```
También es posible definir el salto entre los valores usando el atributo step. Por ejemplo, podrías querer que los valores vayan de 10 en 10:
```
<input type="range" name="edad" step="10" min="10" max="110" value="20">
```
Date: Este elemento permite introducir fechas y puede agregarse mediante el atributo type="date". Las fechas pueden seleccionarse mediante un selector de fechas si el usuario así lo desea. La apariencia del selector de fechas depende del navegador utilizado:
```
<input type="date" name="fecha">
```
Puedes usar las propiedades range y step para acotar los valores de este campo.
Time: Este elemento permite introducir horas o tiempos y puede agregarse mediante el atributo type="time". El usuario puede usar el selector de tiempos que el navegador mostrará si así lo desea. La apariencia del selector de tiempos depende del navegador utilizado:
```
<input type="time" name="cita">
```
Puedes usar las propiedades range y step para acotar los valores de este campo.
Month: Este elemento permite introducir un mes y un año. Para crear un campo de este tipo debes agregar el atributo type="month":
```
<input type="month" name="mes">
```
Puedes usar las propiedades range y step para acotar los valores de este campo.
Week: Este elemento permite introducir una semana y un año. Para crear un campo de este tipo debes agregar el atributo type="week":
```
<input type="week" name="semana">
```
Puedes usar las propiedades range y step para acotar los valores de este campo.
Datetime: Mediante el atributo i podrás introducir una fecha y un tiempo.
```
<input type="datetime-local" name="datetime">
```

Si quieres, puedes ocultar cualquier campo del usuario mediante el atributo hidden, de modo que puedas establecer un valor y enviarlo al servidor de forma totalmente transparente al usuario. Resulta útil cuando por ejemplo quieres enviar una cadena de seguridad al servidor como por ejemplo un token CSRF.

También puedes usar el atributo value para darle un valor por defecto al campo, que estará presente en el mismo hasta que el usuario lo modifique:

<input type="number" name="edad" value="60">

Si estableces un valor por defecto y a su vez hasta usado un placeholder, este último valor solamente aparecerá cuando el usuario elimine el valor que el campo tiene por defecto.

Puedes establecer también que el campo sea un requisito. Para ello debes agregar el atributo required. No es necesario que le asignes ningún valor, ya que por defecto los atributos booleanos tienen el valor true. Si un campo requerido no tiene ningún valor, la validación del formulario fallará, por lo que el navegador no enviará el formulario:

<input type="text" name="nombre" required>

Además, como ya hemos visto, puedes establecer una validación del campo estableciendo el tipo del mismo. Por ejemplo, un input de tipo email validará una dirección de email. Del mismo modo, también puedes usar los atributos min o max para establecer un rango de valores en campos numéricos. Sin embargo, también puedes crear validaciones más complejas con expresiones regulares mediante el atributo pattern, mediante el cual podrás establecer el patrón que debe seguir el valor del campo:

<input type="text" name="nombre" pattern="[a-zA-Z]{12}">

Por ejemplo, los números de teléfono no incluyen validación por parte del navegador, pero puedes validarlos mediante una expresión regular:

<input type="tel" name="telefono" pattern="[0-9]{3}-[0-9]{10}" >

También podrías validar un campo que acepte una URL:

<input type="url" name="pagina" pattern="https://.*">

Por último, decir que en caso de que tengas varios campos input en el formulario, que es lo más probable, el cursor se posicionará por defecto en el primero de ellos. Sin embargo, puedes cambiar este comportamiento mediante el atributo autofocus.

Etiqueta `select`

La etiqueta select se utiliza para crear selectores dropdown que permiten escoger una opción de una lista desplegable. Debes agregar un nombre al elemento select mediante el atributo name para así poder obtener la opción seleccionada en el servidor cuando se envíe el formulario.

Las opciones del menú se agregan mediante la etiqueta option, entre la etiqueta de apertura y la de cierre del elemento select. Cada opción debe tener un valor, que puedes agregar mediante el atributo value. A continuación puedes ver un ejemplo:

<select name="marca">
  <option value="seat">Seat</option>
  <option value="nissan">Nissan</option>
</select>

Es habitual que algún elemento esté vacío, en caso de que el campo no sea obligatorio o que no se desee que una de las opciones esté seleccionada por defecto:

<select name="marca">
  <option value="">Ninguna</option>
  <option value="seat">Seat</option>
  <option value="nissan">Nissan</option>
</select>

También puedes desactivar algunas opciones, de modo que no se puedan seleccionar:

<select name="marca">
  <option value="seat" disabled>Seat</option>
  <option value="nissan">Nissan</option>
</select>

Puedes agrupar opciones utilizando la etiqueta optgroup. Cada etiqueta optgroup necesita un nombre que podrás agregar mediante el atributo label:

<select name="marcas">
  <optgroup label="Turismos">
    <option value="seat">Seat</option>
    <option value="nissan">Nissan</option>
  </optgroup>
  <optgroup label="Camiones">
    <option value="scania">Scania</option>
    <option value="man">Man</option>
  </optgroup>
</select>

Campo `textarea`

La etiqueta textarea permite agregar un campo en el que poder introducir texto multilínea. A diferencia del campo input, un elemento textarea necesita una etiqueta de cierre. Al igual que ocurre con otros campos, debes introducir un valor para el atributo name, ya que determinará el nombre del campo, imprescindible cuando quieras obtener su valor en el servidor al enviar el formulario:

<textarea name="direccion"></textarea>

Puedes configurar el tamaño del campo mediante los atributos rows y cols, que permiten establecer el número de filas y de columnas del campo respectivamente:

<textarea name="direccion" rows="30" cols="15"></textarea>

Esta etiqueta también el atributo autofocus, mediante el cual podrás hacer que el cursor se posicione en este campo cuando se cargue la página.

Plantilla Básica HTML

Ya hemos visto las etiquetas básicas mediante las cuales podrás crear páginas HTML. Sin embargo, cada vez que crees una página tendrás que repetir ciertas tareas básicas, por lo que resulta útil tener una plantilla a mano.

En el siguiente enlace podrás encontrar una pantalla con aquellos elementos imprescindibles, como la declaración DOCTYPE, la codificación de caracteres, el viewport y otros elementos:

Plantilla HTML: Plantilla Básica HTML5

1 comentario en “Aprende HTML: guía definitiva”

José Aguilar dice:

18 marzo, 2023 a las 6:38 am

Saludos Edu, te doy las gracias por la facilidad y entendible de los tutoriales, me han ayudado a en la programación con mis alumnos, gracias nuevamente y Que Dios lo Bendiga siempre.

Responder

📚 Tutoriales

💘 Seguir

🏷️ Etiquetas