Fundamentos de HTML

En este documento vamos a ver las principales etiquetas HTML para insertar texto dentro de un documento web

Las etiquetas HTML tienen dos tipos de comportamiento fundamentales en cuanto al flujo del texto del documento, esto es a como se distribuye el contenido de la etiqueta por la pantalla: O son elementos de bloque, o son elementos en línea. Más abajo veremos qué significa esto.

A nivel formal las etiquetas siempre van entre los signos "<" y ">", eso hace que el navegador entienda que esa palabra que viene a continuación es especial, tiene un sentido de marca para el contenido del documento. No hay que olvidar que HTML es un lenguaje de marcas, y las etiquetas son exactamente eso, las marcas para mostrar el documento correctamente.

La gran mayoría de etiquetas se presentan por pares, divididas en etiqueta de apertura, y etiqueta de cierre. Eso sirve para delimitar el contenido que queda marcado por esa etiqueta, que es justamente todo lo que queda comprendido entre la etiqueta de apertura y la etiqueta de cierre correspondiente. La forma de diferenciar la apertura del cierre es mediante una barra (/) que aparece delante del nombre de la etiqueta en el cierre.

Por lo tanto, la estructura de cualquier etiqueta con apertura y cierre será esta:
<etiqueta>...contenido a marcar por la etiqueta...</etiqueta>

Otra característica de HTML es que las etiquetas son anidables, esto es que una etiqueta puede contener dentro a una o más etiquetas HTML, que a su vez pueden tener anidadas más etiquetas. Esta es una propiedad fundamental de HTML y sirve para construir el DOM del documento, que se puede estender como la estructura de árbol que contiene a todo el documento.

Además, las etiquetas suelen ir acompañadas de los llamados atributos, que siempre aparecen dentro de etiqueta de apertura, y sirven para modular o completar el significado y funcionamiento de la etiqueta. También lo veremos más abajo con detalle.

Etiquetas base

Vamos a conocer las principales etiquetas del lenguaje HTML. Empezando con las 3 etiquetas que definen un documento

html
head
body

Etiqueta HTML

Esta etiqueta define el documento entero entre su inicio y su etiqueta de fin. Todo el contenido del archivo debe estar dentro de ella. A excepción de la definición del documento (DOCTYPE).

Etiqueta head

En esta etiqueta incluimos toda la información sobre el documento que el navegador necesita para poder mostrarlo correctamente. Pero no debe ir aquí ninguna etiqueta con contenido del documento.

La información que habitualmente se define en el head del documento son los estilos CSS, los scripts que usa la página, y datos para ayudar al posicionamiento en los buscadores, entre otros.

Principales etiquetas para head

Trabajo con estilos CSS

Dentro de head podemos encontrar etiqueta para referenciar hojas de estilos externas (etiqueta <link>)

Si el estilo se declara de forma interna se utiliza la etiqueta <style>

Trabajo con JavaScript

Para usar código javaScript en el documento utilizamos la etiqueta <script>. Tanto si el script está en un archivo externo como si lo queremos incluir en el propio documento.

Meta-información del documento

Para añadir información sobre el propio documento, como la codificación de caracteres que utiliza, o su descripción y palabras clave usaremos la etiqueta<meta>

Título del documento

Y una etiqueta especial que se usa una sola vez en el head del documento es la que permite definir su título. Este título aparece en la pestaña de la página en el navegador, y se insertas con la etiqueta <title>

Etiqueta body

Esta etiqueta es la que contiene toda la parte visible del documento. Todo el contenido se incluye aquí: textos, títulos, listas, imágenes, audios o vídeos.

Visualmente la etiqueta body se corresponde con el espacio disponible en la ventana del navegador.

Principales etiquetas para body

Todo el contenido de la web va a estar dentro del body, por lo que no tiene mucho sentido hablar de principales etiquetas. Es más adecuado hablar de categorías de etiquetas.

Etiquetas estructurales

Estas etiqueta ayudan a organizar el documento por bloques, diferenciando tipos de contenido y definiendo su estructura.

Algunas etiquetas son: <header>, <main>, <footer>, <aside>, <article>, <section>, <nav>, <table>.

Todas estas etiquetas son etiquetas semánticas definidas en HTML5, no sólo estructuran en documento, sino que además definen qué es cada uno de esos bloques.

Además de las etiquetas semánticas, la etiqueta que más se ha usado en html para estructurar los documentos es la etiqueta <div>, que es un contenedor de elementos sin ningún significado especial.

Etiquetas de texto

Para mostrar texto tenemos las siguientes etiquetas:

Los encabezados los mostramos con etiquetas <h> seguidas de un número que indica la jerarquía del título en el documento, siendo 1 el nivel más alto y 6 el más bajo: <h1>, <h2>...

Si queremos añadir párrafos en el documento usamos la etiqueta <p>.

Para definir listados tenemos las etiquetas <ul>, <ol> y <dl>, que generan listas con viñetas, listas numeradas y listas de definición respectivamente.

Si necesitamos añadir enlaces en el documento usaremos la etiqueta <a>.

Y para resaltar fragmentos de texto podemos usar las etiquetas <code> y <em> que ponen el texto en negrita o cursiva cada una de ellas.

Etiquetas de medios

Las etiquetas de medios permiten vincular archivos externos dentro de nuestro documento:

<img>: Sirve para insertar imágenes en el documento
<audio>: Permite reproducir un archivo de audio
<video>: Sirve para insertar archivos de video en el documento
<iframe>: Permite insertar un documento web dentro del documento actual

Más información: El sitio web de Mozilla para desarrolladores tiene una documentación muy completa sobre los lenguajes web. En este caso puede ser útil la página de referencia de elementos HTML

Etiquetas estructurales

header En el header añadimos el contenido que va a formar el encabezado del documento. Normalmente será el título principal del sitio, un menú de navegación y el logo del sitio, junto a algún otro elemento más.
main La etiqueta main sirve para definir la zona principal del documento. En ella colocamos el contenido que sea definitorio del documento actual.
aside La etiqueta aside sirve para definir contenido qie está relacionado con el contenido principal directamente. Normalmente se usa para mostrar listados de elementos vinculados al contenido principal, o listas de entradas de un blog relacionadas también con el contenido principal. A nivel de formato se suele presentar como un menú lateral junto al contenido principal, tanto a la izquierda como a la derecha de este.
footer Usamos la etiqueta footer para colocar en ella el contenido de pie de página de nuestro documento. Se suele mostrar en el footer información de contacto, política de privacidad, navegación del sitio, etc.

Tipos de Encabezados

HTML entiende una estructura del documento que se organiza a través de una jeraquía de contenido.De esta forma, tenemos 6 tipos de encabezado, que se refieren a 6 niveles jerárquicos de título.

Las etiquetas se escriben con la letra h seguida de un número del 1 al 6, en función del nivel de título:

<h1>: título principal

<h2>: Títulos nivel 2

<h3>: Títulos nivel 3

<h4>: Títulos nivel 4

<h5>: Títulos nivel 5

<h6>: Títulos nivel 6

Cuando el documento no tiene asociada ninguna hoja de estilos, el único formato que muestra es el que por defecto asigna el navegador a cada etiqueta. En este caso vemos que los títulos aparecen todos en negrita, y que cada nivel jerárquico es un poco menor que el nivel superior.

Trabajar con texto

La principal etiqueta para añadir texto a un documento es la etiqueta de párrafo (<p>). Sirve para añadir un fragmento de texto que tiene sentido de forma completa, del mismo modo que usamos los párrafos en la redacción de cualquier documento.

Otras etiquetas muy utilizadas en HTML para añadir contenido son las listas de texto, que sirven para enumerar y estructurar el contenido del documento. Tenemos tres tipos de listas en HTML: Las listas numeradas, también conocidas como listas ordenadas, y que usan la etiqueta <ol>, las listas con viñetas, llamadas en HTML listas desordenadas, con etiqueta <ul>, y las listas de definición de términos que usan la etiqueta <dl>. Las dos primeras identifican cada elemento de la lista con la etiqueta <li>, mientras que la tercera usa el par de etiquetas <dt> y <dd> para marcar el término y su definición respectivamente.

Resaltado de texto

Para resaltar texto tenemos dos etiquetas más comunes, una para poner el texto en negrita, y otra para poner el texto en cursiva.

Usamos la etiqueta <strong> para resaltar en negrita, y la etiqueta <em> para resaltar en cursiva. Se pueden combinar las dos juntas sobre un mismo texto, y que aparezca en cursiva y negrita al mismo tiempo.

El uso de estas etiquetas hace referencia al signicado del texto, realmente no estamos diciendo que el texto aparezca en negrita o cursiva, lo que estamos diciendo con estas etiquetas es que ese texto debe ser resaltado o enfatizado dentro del párrafo en el que se encuentra porque tiene una relevancia especial.

En este párrafo este texto está reforzado y este otro texto está enfatizado. Además vemos que estas dos etiquetas son de tipo línea, porque solo afectan a las palabras que engloban.

Nota:Para imprimir en el documento los caracteres "mayor que" y "menor que" usamos el código HTML correspondiente de cada caracter. Estos códigos siempre empiezan por "&" y terminan por ";". Para escribir < uso el código <. Y para escribir > uso >

Ejemplo de resaltado de texto

Dentro de un párrafo <strong> Uso la etiqueta strong para resaltar el texto con un caracter de reforzado, que el navegador muestra como negrita </strong> y uso <em> la etiqueta em para resaltarlo de forma enfatizada, que el navegador muestra como cursiva</em>. Ambas etiquetas se pueden anidar una con otra.

Crear listados en HTML

Las listas son elementos muy útiles y muy usados dentro del lenguaje HTML. Permiten crear grupos de información, organizar los datos en el documento y aplicar jerarquía a la información.

Existen tres tipos de listados en HTML:

Las listas ordenadas, que son las que añaden automáticamente un número al principio de cada elemento
las listas sin ordenar, que son las que añaden una viñeta o símbolo delante de cada elemento
y las listas de definición, que sirven para crear listados al estilo de los glosarios, con un término y su definición en cada elemento del listado.

Estructura de las listas

Cada lista está formada, en primer lugar por la etiqueta del tipo de lista correspondiente. Esta etiqueta engloba dentro ella a todos los elementos de lista. Y a su vez, cada elemento está formada por su etiqueta específica.

Tipos de etiquetas de listas

Para crear una lista ordenada usamos la etiqueta <ol> con su cierre correspondiente </ol>.
Para crear una lista con viñetas, usamos la etiqueta <ul>, también con su cierre.
Y para añadir elementos a estas dos listas, usaremos la etiqueta <li>, que englobará a cada elemento de la lista con su cierre </li>

Las listas de definición usan una sintaxis diferente. Para crear la lista usamos la etiqueta <dl>, y para añadir cada pareja de término y definición usamos las etiquetas <dt> para el término, y <dd>para incluir su definición. Todas ellas siempre con su cierre.

Ejemplos

Si queremos hace una lista que incluya las tres tecnologías frontend del tipo lista con viñetas haremos esto:

			
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Y tendré este resultado:

HTML
CSS
JavaScript

Para hacer esto mismo como lista numerada haremos esto:

		
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Y tendré este resultado:

HTML
CSS
JavaScript

Si tenemos que hacer una lista de definiciones, haremos esto:

			
<dl>
  <dt>Etiqueta</dt>
  <dd>Son el conjunto de marcas con las que trabajamos en HTML. Van siempre dentro de los caracteres <em><strong><...></strong></em></dd>
  <dt>Atributo</dt>
  <dd>Son las propiedades que se pueden aplicar a una etiqueta HTML. Se escriben siempre con la forma <em>nombre_de_atributo="valor_de_atributo"</em>.</dd>
</dl>

Tendremos este resultado:

Etiqueta: Son el conjunto de marcas con las que trabajamos en HTML. Van siempre dentro de los caracteres <...>
Atributo: Son las propiedades que se pueden aplicar a una etiqueta HTML. Se escriben siempre con la forma nombre_de_atributo="valor_de_atributo".

Elementos de bloque y elementos de línea

Las etiquetas de texto y estructura de HTML tienen dos comportamientos posibles, desde el lado de la presentación, en la ventana del navegador: elementos en bloque o elementos en línea

Elementos en bloque

Los elementos en bloque hay que entenderlos como cajas que ocupan todo el espacio disponible del documento. Siempre empiezan en una línea nueva, y siempre ocupan el 100% de la anchura del documento. Cuando hay otra etiqueta en el flujo del documento anterior a un elemento en bloque, el elemento en bloque buscará el primer espacio libre por debajo de este elemento y se posicionará ahí, con independencia del espacio libre que pueda dejar el elemento anterior.

Ejemplos de etiquetas de bloque son los títulos y párrafos de texto, y también las listas y los elementos de cualquier lista. Todas las etiquetas semánticas que sirven para estructurar un documento son elementos de bloque: main, article, section, header, footer, aside, nav, etc. También, el omnipresente elemento div, que semánticamente no significa mucho, simplemente es un divisor, pero que se utiliza de forma excesiva en el diseño web.

Elementos en línea

Los elementos en línea forman parte del flujo de texto. Aparecen en el documento tan pronto como encuentran espacio para mostrase, y su anchura viene definida por el propio contenido, es decir no ocupan más espacio del de las palabras que contienen. Del mismo modo, permiten que otro contenido en línea pueda situarse al lado de ese elemento si hay espacio suficiente.

Ejemplos de etiquetas en línea son aquellas que marcan parte del texto, como strong o em, también las etiquetas de enlaces y las imágenes son elementos en línea.

Ejemplo de bloques de una sola palabra

uno

dos

tres

Ejemplo de elementos en línea

uno dos tres

Atributos de etiquetas

Las etiquetas HTML pueden incluir atributos que ayuden a definir su acción, o que pueden utilizarse como selectores de formato CSS.
Los atributos siempre se definen dentro de la etiqueta de apertura, nunca en la de cierre. La estructura de los atributos siempre es igual, con independencia del tipo de atributo que sea, o de la etiqueta a la que acompañe ese atributo. Siempre será: nombre_de_atributo="valor_de_atributo", sin espacio de separación entre el nombre, el signo igual y el valor. Una etiqueta puede tener uno, varios o ningún atributo. Aunque hay etiquetas que necesariamente necesitan de un atributo para definir su funcionamiento, como los enlaces y las imágenes, que veremos a continuación.

Atributo href

Este atributo se usa para indicar la dirección o URL del elemento al que estamos enlazando. Se usa en las etiquetas a y link, sobre todo. También se usa en las etiquetas area y base pero estas son menos habituales.

Los valores de este atributo pueden ser rutas absolutas del tipo https://mistiodeejemplo.com/docs/archivo.php, o pueden ser rutas relativas definidas desde la ubicación en el equipo del archivo desde el cual estamos definiendo el enlace, como por ejemplo carpeta/archivo.php.
Otro tipo de ruta relativa es la que se define desde la raíz del sitio, tomando como base el directorio principal de todo nuestro sitio. Para hacer referencia a la raíz en una ruta relativa usamos la barra (/), por ejemplo /documentos/apuntes/html/archivo.php

Ejemplo

Este enlace lleva a la página destino.php que se encuentra en la misma carpeta que este documento, usando una ruta relativa en su atributo href: Ir a destino. Para eso hemos configurado el enlace así: href="destino.php".

Para hacer un enlace con ruta relativa que apunta a un archivo que se encuentra dentro de la carpeta llamada apuntes, que está junto a este documento. sería así: <a href="apuntes/destino2.php">Ir a destino 2</a>.

Uso de la almohadilla (#) en los atributos href

La almohadilla sirve para enlazar al propio documento en el que se encuentra el enlace, y resulta muy útil combinada con atributos id, porque en ese caso el navegador se situa justo donde se encuentra el elemento con el id.

Por ejemplo, si añadimos un enlace con esta configuración href="#" el vínculo nos llevará al principio del documento: Ir arriba

Si en el documento tengo definido un atributo id puedo usarlo en combinación con la almohadilla para hacer que el navegador se desplace hasta ese punto concreto.

En este documento hemos configurado así una etiqueta: <h3 id="dest_1">Atributo href</h3>. Podemos navegar hasta ese punto con el siguiente enlace, usando este valor para su href="#dest_1": Ver atributo href

Puntos de ancla

Las etiquetas a también pueden funcionar como destino de un hipervínculo dentro de un documento. Es lo que llamamos punto de ancla, y sirve para navegar entre difetentes secciones del mismo documento. Para hacer eso cada sección del documento debe ir identificada por su correspondiente punto de ancla. Y esos se consigue añadiendo un atributo name a la etiqueta.

Nota: En la actualidad se utiliza más el atributo id del elemento de destino para realizar estas tareas que la etiqueta a

Ejemplo de punto de ancla

En primer lugar vamos a añadir un punto de ancla al inicio del documento modificando el título h1 así:

			  
	<h1><a name="inicio">Fundamentos de HTML</a></h1>

Y a continuación enlazamos al punto de ancla con una etiqueta de enlace normal, pero modificando el atributo href incluyendo al principio del valor la almohadilla, y a continuación el nombre del punto de ancla:

<a href="#inicio">Ir a inicio</a>

Pero, como hemos dicho, hoy en día el ejemplo anterior sería más correcto haciendo esto sobre el punto de ancla:

<h1 id="inicio">Fundamentos de HTML</h1>

También se puede añadir los puntos de ancla en url absolutas o relativas dentro de un enlace para que el navegador cargue el contenido por el punto de ancla exacto. Sería algo así:

							 
	<a href="index.php#interno">Volver</a>

Otros atributos para los enlaces

Una misma etiqueta puede incluir tantos atributos como sea necesario. En el ejemplo anterior vemos que el enlace se abre en la misma pestaña del documento que lo contiene, si queremos que ese enlace se abra en una pestaña nueva añadiremos un nuevo atributo con este contenido target="_blank". De este modo cada enlace de la página con ese atributo se abre en una pestaña nueva del navegador, pero cada uno en una distinta. En cambio, si usamos el atributo target="blank" (sin el guión bajo primero) cada enlace con este atributo se abre en la misma ventana nueva que ya abrió el primer enlace, no usa una diferente para cada enlace.

Y otro atributo interesante es el de title. Su función es la misma que cuando lo añadimos a las imágenes: cuando dejamos el ratón pausado sobre el enlace aparecerá el contenido del atributo en un cuadro emergente. Se configura así: title="Texto que queremos que aparezca en el cuadro emergente"

Ejemplo

Pincha aquí para ir a Google

Atributo id

Este atributo sirve para establecer un identificador único en un elemento html. Es una tributo global, lo que quiere decir que se puede aplicar a cualquier elemento, y es opcional, podemos hacer todo un documento sin definir ningún atributo id en él.

Pero si lo usamos debemos tener la precaución de no usar valores repetidos para diferentes elementos, porque de lo contrario el id afectará al primer elemento con ese valor, y dejará de tener efecto en los demás.

Para definir el valor de este atributo usaremos letras minúsculas y números, evitando el uso de caracteres especiales y de espacios. Y teniendo en cuenta que el primer carácter tiene que ser una letra obligatoriamente, o un guión bajo, pero no un número.

Algunos usos del atributo id pueden ser para definir puntos de navegación en el documento, como hemos hecho en este mismo archivo, para crear selectores CSS que formateen únicamente a ese elemento, o para acceder al elemento desde javaScript para modificar sus propiedades.

Ejemplo

Supongamos que tenemos un párrafo con el atributo id="mi_id" dentro de un documento.

Si queremos usar el id para navegar hasta ese párrafo tendremos que configurar un enlace así:
<a href="#mi_id">Ir a párrafo</a>

Si queremos usar un selector CSS que afecte solamente a ese párrafo, haremos esto:
#mi_id {...todo el css para el elemento...}

Si necesitamos seleccionar el elemento desde javaScript para trabajar con él, haremos:
let parrafo = document.getElementById("mi_id"); o también:
let parrafo = document.querySelector("#mi_id");

Ir a inicio

Atributo src

Este atributo se utiliza para indicar el origen de un elemento externo. Su nombre es la abreviatura de la palabra source, que se traduce como origen o fuente.

Lo podemos usar en etiquetas como img, script, audio, video, iframe, y en general, en cualquier etiqueta que haga referencia a medios.

A la hora de definir su valor podemos establecer rutas de tipo absoluto y relativo teniendo en cuenta las mismas consideraciones que hemos visto para el atributo href.

Insertar imágenes

Las imágenes en HTML son archivos externos que vinculamos dentro del documento. Por lo tanto tienen que estar guardadas en una ubicación que sea accesible desde el documento que las tiene que mostrar. Es fundamental que en la estructura del sitio esté perfectamente definido el directorio para guardar las imágenes y que siempre que vayamos a usar una, le copiemos en ese directorio previamente y la enlacemos desde ahí.

La etiqueta que usamos para insertar una imagen en un documento HTML es <img>, en la que incluimos un atributo src que contendrá la ruta donde se encuentra la imagen.Esa ruta tiene que estar disponible para el navegador. De forma que lo más cómodo es copiar las imágenes a usar junto al documento HTML que las muestra.

La etiqueta img no lleva etiqueta de cierre, porque simplemente es un marcador de posición de donde se debe insertar la imagen en el documento. Pero el espacio que ocupe la imagen viene definido por las propias dimensiones de la imagen, a través de su anchura y altura expresada en píxeles. De todos modos esto es algo que puede ser modificado mediante CSS.

El atributo src(y en general todos los vínculos en el documento web) acepta dos tipos de ruta, las absolutas y las relativas.

Rutas absolutas: Son aquellas que contienen la URL completa donde se encuentra la imagen, incluyendo el protocolo http y el dominio del sitio.
Ejemplo: src="http://www.misitiodeimagenes.com/fotos/animales/gatitos/peluso.jpg"

Rutas relativas:Son las que se definen desde la ubicación del documento que las contiene. De forma que si desde este documento en el que me encuentro quiero enlazar a una imagen que se encuentra en la misma carpeta que el documento y se llama peluso.jpg haré esto: src="peluso.jpg"
Si desde el documento actual quiero enlazar al mismo archivo, pero este se encuentra en una carpeta llamada imgs, y esta está en el mismo directorio que el documento, la ruta queda así: src="imgs/peluso.jpg"
Para apuntar a un directorio que se encuentra junto al directorio que contiene al documento actual usamos la expresión ../, quedando en este caso así: src="../imgs/peluso.jpg".

Ejemplo

Vamos a insertar a continuación una imagen descargada de internet, que vamos a guardar en la misma carpeta del documento actual con el nombre de gatito.jpg. Para ello escribimos:


	<img src="gatito.jpg" alt="Imagen de un gato recién salido de la ducha" title="Me pareció ver un lindo gatito!">

Y obtendremos:

Imagen de un gato recién salido de la ducha

En cambio, si quiero usar una imagen que se encuentra en un servidor externo, pondré su ruta completa en el atributo, quedando de la siguiente forma:

Cuidado! Esto no funcionará cuando subamos el archivo a nuestro servidor, si el servidor de destino tiene configurada una regla de tipo same domain access, que impide a otros dominios usar sus contenidos.


	<img src="https://media.gettyimages.com/id/2241645103/es/foto/a-majestic-bengal-tiger-rests-on-a-grassy-bank-by-a-water-source-in-its-natural-habitat.webp?s=2048x2048&w=gi&k=20&c=q9Q9UWLG5kGATJlwgOKH8KoR2BguNaV-mwioYoms_Ro="
				alt="Foto enlazada directamente desde la web" title="Este gatito viene de muy lejos">

Con este resultado:

Otros atributos

Las etiquetas <img> aceptan varios atributos. Los de anchura y altura (width y height) están desaconsejados y en su lugar se usa CSS para cambiar el tamaño de la imagen en el documento.
Un atributo que sí se usa mucho con las imágenes es el atributo alt. Este atributo sirve para definir un texto alternativo si la imagen no puede ser cargada, y también para ser leído en los navegadores para personas invidentes.

Otro atributo interesante para las imágenes es el atributo title, que sirve como texto emergente al poner el ratón sobre la imagen. Pruébalo!
Este atributo también se puede definir para los enlaces, obteniendo el mismo efecto.

Ejemplo

Pincha aquí para ir a Google