HTML: Qué es y cómo utilizarlo

Tener una buena base de HTML es un pilar fundamental a la hora de aprender desarrollo web. Si ya sabes qúe es HTML y sus conceptos básicos, este artículo te servirá para profundizar un poco más en este lenguaje con el que se maqueta y estructura el contenido de los sitios web. ¡Vamos allá!

Suscríbete a nuestra newsletter
¡Suscríbete a nuestra newsletter!

No te enviaremos spam, ¡te lo prometemos!. A nuestros suscriptores les enviamos nuestros contenidos sobre WordPress, hosting, marketing digital y programación.

Tu primer documento HTML (cómo funciona HTML)

Un documento HTML es un archivo con la extensión .html o .htm cuyo contenido es leído e interpretado por el navegador web. De esta manera, cuando abres una página web en tu navegador, éste hace una petición al servidor donde se encuentra el documento, lo lee e interpreta y te lo muestra en tu pantalla.

Hacer un documento HTML es muy sencillo. Solamente tienes que crear un documento de texto y cambiar la extensión .txt por .html. Si lo abrieses con tu navegador verías una pantalla blanca, ya que todavía no tiene contenido, pero lo interpretaría. Para añadir ese contenido, basta con utilizar un editor de texto (desde el simple Bloc de notas de Windows hasta un programa más avanzado como Sublime Text).

crea un documento HTML

 

Conceptos básicos de HTML

En el artículo que enlazo en la introducción están explicados los conceptos básicos de HTML. De todas formas voy a repasar algunos de ellos a continuación:

Como te decía, el lenguaje HTML te permite organizar jerárquica y semánticamente el contenido de tu página web. Para ello dispones de una serie de elementos con los que crearás su estructura.

Etiquetas HTML: Construcción de elementos en HTML

Los elementos de HTML se construyen con etiquetas: por lo general, una etiqueta de apertura y otra de cierre entre las cuales va el contenido. Las etiquetas pueden contener una serie de atributos, que sirven para configurar o modificar aspectos y comportamientos de un elemento HTML. Te pongo un ejemplo ficticio para que lo entiendas mejor:

Este ejemplo llevado a un caso real podría ser:

Como puedes ver, las etiquetas se escriben entre los símbolos ‘< ‘y ‘>’ (en el caso de la etiqueta de cierre, también tienes que añadir una barra ‘/’). Los atributos se escriben dentro de la etiqueta seguidos de un símbolo ‘=’ y su valor entrecomillado. Entre las etiquetas de apertura y cierre va el contenido.

No todos los elementos de HTML tienen etiqueta de cierre y no todos tienen por qué llevar contenido entre las etiquetas.

Elementos en bloque y en línea

Los elementos de HTML pueden ser de dos tipos dependiendo del espacio que ocupan:

  • Elementos en bloque: Ocupan todo el ancho disponible, haciendo que el siguiente elemento se posicione justo debajo. Algunos elementos en bloque de HTML son: <address> <article> <aside> <blockquote> <div> <footer> <form> <h1>-<h6> <header> <hr> <li> <nav> <ol> <p> <pre> <section> <table> <ul> <video>.
  • Elementos en línea: Ocupan solamente el ancho mínimo necesario, haciendo que el siguiente elemento se posicione justo a su lado. Algunos de los elementos en línea que existen en HTML son: <a> <b> <br> <button> <img> <input> <label> <script> <select> <span> <strong> <textarea>.

Diferencias entre bloque y linea HTML

Si lo necesitas, puedes cambiar la disposición de un elemento mediante la propiedad ‘display’ de CSS.

Anidamiento de elementos en HTML

Los elementos de HTML se pueden anidar, es decir, puedes introducir algunos elementos dentro de otros como en el siguiente ejemplo:

Como puedes ver, dentro de un elemento <section> he introducido un encabezado <h1> y un elemento de párrafo <p>. A su vez, dentro del <p> he introducido un elemento <span> para dar un estilo concreto a una palabra.

No todos los anidamientos son correctos. Por ejemplo, no puedes crear un elemento <footer> dentro un elemento <header>.

Comentarios en HTML

Los comentarios son muy útiles en cualquier lenguaje. Permiten añadir indicaciones que pueden ser útiles para entender un código creado por otra persona (o por uno mismo).

En HTML puedes crear comentarios metiendo un texto entre las etiquetas <!– –>. Te pongo un ejemplo:

Como ves en el ejemplo, también puedes comentar fragmentos de código que no quieres que se muestren en el resultado final.

Los comentarios de HTML no se muestran en la página, pero son visibles en su código fuente. Por lo tanto, si un usuario inspecciona la página desde el navegador podrá verlos. Tenlo en cuenta.

Comentarios en HTML

Atributos comunes

Existen una serie de atributos que son comunes a prácticamente todas las etiquetas de HTML. Los más importantes son:

Atributo «id»:

Permite asignar un nombre que identifica a un elemento concreto . El “id” debe ser único, es decir, no puede haber dos etiquetas con el mismo “id”. Es útil para identificar o llamar a ese elemento a través de una hoja de estilos o un script para manipularlo. El valor de un “id” no puede contener espacios ni tabulaciones. Te muestro un ejemplo aplicado a CSS:

Atributo id de HTMLEn el ejemplo, he asignado al <h1> el id “titulo-principal” y con CSS le he aplicado estilos para que se vea de color azul y en mayúsculas.

Atributo «class»:

El atributo class tiene un propósito muy parecido al id, pero en este caso sirve para asignar un nombre que identifica a varios elementos. La idea es identificar varios elementos con la misma clase para así poder aplicarle el mismo estilo a todos ellos. En el caso de este atributo, podemos asignar varias clases a un mismo elemento si las separamos con espacios. Lo entenderás mejor con el siguiente ejemplo:

Atributo class de HTMLEn el ejemplo anterior, los elementos <h2> tienen asignadas dos clases: ‘titulo-secundario’ y ‘texto-destacado’. Para cada una de esas clases he aplicado diferentes estilos CSS. Obviamente, podrías reutilizar estas clases en otros elementos HTML si así lo necesitases.

Atributo «style»:

El atributo style te permite añadir estilos CSS en línea a un elemento HTML. Aunque personalmente te recomiendo que apliques los estilos a través de una hoja CSS separada del documento HTML. Se hace de la siguiente manera:

Atributo style de HTMLComo ves, he incluido una etiqueta <span> dentro de la etiqueta <p> para aplicar un estilo concreto a un fragmento del texto. En este caso, he aplicado un color rojo y aumentado el grosor de la fuente.

Etiquetas en HTML

Ahora que ya sabes qué son y cómo funcionan las etiquetas de HTML, te voy a enseñar cuáles son las más importantes. Según su función, se pueden dividir en varios tipos.

Etiquetas estructurales

En HTML existen una serie de etiquetas que te van a servir para crear una estructura para tu página HTML. Antes de explicártelas te voy a poner un ejemplo muy básico de cómo está estructurado un documento HTML:

Lo primero que tienes que hacer es declarar el tipo de documento. Con esta instrucción, el navegador entiende que vamos a utilizar código HTML y la versión del mismo. En el caso de este ejemplo es HTML5.

Después tienes que crear la etiqueta <html> que englobará todo el documento y, dentro de ella, las etiquetas <head> y <body>.

La etiqueta <head> es la cabecera de la página. Dentro de ella puedes incluir información para el navegador (título, descripción, etc.), enlaces a hojas de estilo CSS, a archivos JavaScript, etc. Todo lo que añadas aquí es totalmente transparente para el usuario. No se muestra visualmente en la página.

La etiqueta <body> es el cuerpo de la página. Aquí incluyes el contenido de la misma.

Dicho esto, vamos a ver las etiquetas estructurales más utilizadas en HTML:

<!DOCTYPE>

Es lo primero que tienes que escribir en tu documento HTML y, más que una etiqueta, es una declaración. Sirve para decirle al navegador en que versión de HTML vamos construir el documento. En HTML 5 se ha simplificado muchísimo la declaración <!DOCTYPE> comparado con versiones anteriores.

Doctype para HTML 4.01:

 

Doctype para HTML 5:

 

<html>

Es la etiqueta principal del documento, dentro de la cual van el resto de elementos (excepto el <!DOCTYPE>). Admite el atributo ‘lang’ para especificar en qué idioma está el documento HTML en cuestión (por ejemplo ‘lang=”es”’ para español):

 

<head>

Lo primero que tienes que incluir dentro de las etiquetas <html></html> es la cabecera de tu documento. Esto se hace con las etiquetas <head></head>. Todo lo que va dentro de la cabecera es información acerca del documento HTML y en principio no es visible para el usuario. El título, la meta descripción, enlaces a hojas de estilo CSS o documentos JavaScript son ejemplos de lo que puedes añadir en la cabecera.

 

<title>

Dentro de esta etiqueta tienes que establecer el título de tu documento HTML. Este título es el que aparecerá, por ejemplo, en la pestaña del navegador y es obligatorio que lo incluyas. Además, es un elemento importante de cara al SEO on page de tu sitio web así que intenta que sea lo más descriptivo posible.

ejemplo de titulo html

 

<meta>

La etiqueta <meta> sirve para aportar información a los motores de búsqueda o al navegador acerca del documento. Puedes incluir varias etiquetas <meta> para añadir aportar la información necesaria (descripción, autor, codificación de caracteres de la página, etc.)

Te pongo unos ejemplos:

 

<base>

Esta etiqueta te permite establecer una URL base para el resto de URL (relativas) del documento. Una especie de prefijo que tomarán el resto de URL, por así decirlo. Por ejemplo, si creamos la siguiente etiqueta <base>:

Los siguientes elementos

tendrán las URL y , respectivamente.

Como puedes ver, es una etiqueta que no necesita contenido. En cuanto al cierre de la etiqueta, verás que no se hace con </base> sino que simplemente se añade una barra antes de “>”. Aunque esta barra de cierre no es obligatoria, es aconsejable ponerla.

 

<link>

Esta etiqueta se utiliza cuando necesitas enlazar algún recurso externo a tu documento HTML. Sobre todo, se utiliza para enlazar hojas de estilo CSS o añadir un favicon a tu sitio web.

El modo de añadir una hoja de estilo externa a tu documento es el siguiente:

En el atributo ‘rel’ tienes que poner el valor ‘stylesheet’ para indicar que vas a enlazar una hoja de estilos. En el atributo ‘href’ tienes que poner la ruta de dicha hoja.

 

<style>

Otra manera de añadir código CSS a tu documento es utilizar la etiqueta <style>. De esta manera, estarás incluyendo CSS en el propio documento y no de manera externa. Te pongo un ejemplo:

Personalmente, creo que es mejor y más organizado tener los archivos CSS separados y utilizar la etiqueta <link> para vincularlos.

 

<script>

Un script es una secuencia de instrucciones que se ejecuta e interpreta en el navegador del usuario. Utilizando scripts puedes programar funciones en código JavaScript para manipular elementos de la página web, validar formularios o crear efectos visuales, entre otras cosas.

Tienes dos maneras de hacer esto utilizando esta etiqueta:

  1. Insertar el script directamente dentro del documento HTML:
  2. Enlazar un archivo .js externo que contenga tus scripts:

En este último caso, tienes que utilizar el atributo src para indicar la ruta en la que se encuentra el archivo.

 

<body>

Justo después del <head> tienes que incluir el <body> o cuerpo de tu documento HTML. Dentro de éste irá el contenido visible de tu página: títulos, párrafos, secciones, imágenes, vídeos, etc. Todos estos elementos los tienes que meter dentro de las etiquetas <body></body>. Solamente puede haber un <body> en un documento HTML.

 

<nav>

Esta etiqueta sirve para agrupar una serie de enlaces (tanto dentro del propio documento o externos) en una misma sección de navegación. La etiqueta <nav> se utiliza, por ejemplo, para crear un menú o una tabla de contenidos.

Etiqueta nav de HTML<section>

Con las etiquetas <section></section> puedes crear secciones genéricas para organizar y agrupar tu contenido semánticamente. Es decir, secciones de una temática concreta y con significado propio.

Puede que en algún momento dudes entre usar <section> o <div> (etiqueta que te explicaré más adelante). La diferencia entre ellas es la siguiente:

Imagina que estás maquetando una página HTML y vas a incluir 3 apartados: “Quién soy”, “Mis trabajos” y “Opiniones”. Lo lógico es que dividas cada apartado en una <section>. Ahora imagina que en esas secciones necesitas hacer divisiones para estructurar el contenido en columnas o para aplicarle distintos estilos. En este caso, utilizarás etiquetas <div> para hacerlo.

Etiqueta section de HTML <article>

La etiqueta <article> es muy parecida a <section> pero, en este caso, la utilizarás para bloques de contenido independientes. Es decir, bloques de contenido que tendrían sentido por sí mismos y podrían ser reutilizados fuera del documento HTML. Por ejemplo, un post de un blog, una noticia, etc.

Técnicamente funciona igual que la etiqueta <section>, pero semánticamente es diferente. Es por ello que, de cara al SEO, es importante saber elegir la etiqueta en función del contenido.

Etiqueta article de HTML<aside>

Un elemento <aside> sirve para contener cierta información relacionada con el documento HTML o la sección a la que pertenece. Se suele utilizar, por ejemplo, para crear una barra lateral en la estructura de un blog para mostrar enlaces relacionados.

De todas formas, puedes posicionarla en la parte que quieras del documento (no necesariamente en un lateral). Por ejemplo, dentro de una etiqueta <section> para mostrar alguna información relevante para dicha sección.

Etiqueta aside de HTML
<header>

La etiqueta <header> sirve para englobar un grupo de información introductoria o un conjunto de enlaces de navegación. Puede contener encabezados (<h1>, <h2>, <h3>, etc.), un logo, un campo de búsqueda, enlaces u otros elementos.

Puedes utilizar varios <header> en tu documento HTML si lo necesitas, pero tienes que tener en cuenta que no puedes anidar un <header> dentro de un elemento <address>, <footer> u otro elemento <header>.

Te pongo un código de ejemplo en el que utilizo dos elementos <header>:

Etiqueta header de HTML
<footer>

Esta etiqueta sirve para indicar el fin del documento o de una sección. Dentro de esta etiqueta puedes incluir información como el copyright, autoría, enlaces a políticas de privacidad o de cookies, etc.

Al igual que pasa con <header>, puedes tener varios elementos <footer> en tu documento y no se puede anidar dentro de <address>, <header> u otro <footer>.

Etiqueta footer de HTML <address>

Lo recomendado para que coloques información de contacto en tu documento es usar la etiqueta <address>. Dentro de ella puedes añadir, por ejemplo, una dirección física o de correo electrónico, números de teléfono, enlaces a tus redes sociales, etc.

Lo ideal es que coloques la etiqueta <address> dentro de una etiqueta <footer>, como en el siguiente ejemplo:

Etiqueta address de HTML <div>

Con <div> puedes definir una sección o división. Este elemento te permite agrupar en un contenedor un conjunto de elementos HTML. A diferencia de otros elementos contenedores como <section> o <article>, el elemento <div> carece de significado semántico. Es simplemente un contenedor genérico mediante el que organizar el contenido del documento. Es útil para aplicar estilos a grupos de elementos HTML o manipularlos mediante JavaScript.

Etiqueta div de HTML
<span>

El elemento <span> es muy parecido a un <div>, con la diferencia de que es un elemento en línea en lugar de en bloque. En este caso lo puedes utilizar, por ejemplo, para dar estilo a una parte concreta de un texto.

Etiqueta span de HTML<hr />

Un elemento <hr /> es un separador a modo de línea horizontal que representa una división para un cambio de tema entre párrafos.

Etiqueta hr de HTML

Etiquetas de texto

En HTML dispones de una serie de etiquetas para crear elementos de texto.

<h1> – >h6>

Las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> sirven para crear títulos o encabezados. Su nivel de importancia dentro del documento va de mayor a menor, siendo <h1> el de mayor rango y <h6> el de menor.

Los títulos se utilizan para describir el contenido del documento o la sección a la que pertenecen. Por cada documento HTML solo debe existir un <h1>, que actuará como título del documento en cuestión. Para las secciones que crees en el documento tendrás que utilizar el resto de encabezados (<h2>, <h3>, etc.) según la forma en la que organices la información. Obviamente, tienes que seguir un orden y no saltarte un rango (es decir, no incluyas un <h4> si no tienes ningún <h3>).

Etiquetas H1-H6 de HTML
<p>

Con la etiqueta <p> puedes definir un párrafo para agrupar diferentes fragmentos de texto en bloques.

Etiqueta p de HTML
<pre>

Utilizando esta etiqueta puedes definir un párrafo de texto preformateado. La diferencia con respecto a la etiqueta <p> es que <pre> mostrará el texto tal cual lo redactes en el código. Es decir, mantendrá los saltos de línea, tabulaciones o espacios. Te pongo un ejemplo:

Etiqueta pre de HTML
<blockquote>

Con <blockquote> puedes crear una cita de otra fuente. Normalmente, los navegadores agregan un sangrado a este elemento.

Etiqueta blockquote de HTML
<br />

Puedes insertar saltos de línea en un texto con esta etiqueta. Puede resultarte útil para, por ejemplo, escribir direcciones. Este elemento no tiene etiqueta de cierre.

Etiqueta br de HTML
<ol>

Si quieres crear una lista en HTML, puedes hacerlo con la etiqueta <ol> (ordered list). Con ella crearás una lista ordenada (numérica o alfabéticamente). Para crear una lista ordenada en HTML tienes que abrir una etiqueta <ol> y, dentro de ella, añadir elementos <li> (elementos de lista). Te pongo un ejemplo:

Etiqueta ol de HTML
<ul>

También puedes crear listas desordenadas en HTML. En este caso cada elemento, en lugar de ir precedido por un número o letra, irá precedido por un círculo. Este círculo es personalizable con código CSS. Crear una lista desordenada se hace de la misma forma que una ordenada, pero cambiando el <ol> por <ul> (unordered list).

Etiqueta ul de HTML

 Puedes crear listas HTML anidadas. Tan solo tienes que introducir otra lista dentro de uno de los elementos <li>.

Etiquetas de enlace

<a>

Un elemento fundamental en un sitio web son los enlaces. Para crear un enlace o hipervínculo en HTML tienes que usar la etiqueta <a> y meter dentro de ella lo que quieres que sea un enlace (un texto, una imagen, etc.).

La etiqueta <a> tiene un atributo ‘href’ mediante el cual indicar a dónde apunta ese enlace (bien sea otro documento de nuestro sitio o un enlace externo).

 

También puedes hacer que un enlace abra directamente un gestor de correo electrónico para enviar un email con la instrucción ‘mailto:’:

 

O puedes enlazar a un número de teléfono con la instrucción ‘tel:’

 

También puedes hacer que un enlace se abra en una nueva ventana con el atributo ‘target’:

 

Si no especificas el atributo ‘target’, el enlace se abrirá por defecto en la misma ventana.

A continuación, te dejo un ejemplo de todo lo anterior: