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.

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.

Etiquetas de 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 &lt;. Y para escribir > uso &gt;

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:

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

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 provincias de la Comunidad, del tipo lista con viñetas haremos esto:

		
		  	<ul>
				<li>Castellón</li>
				<li>Valencia</li>
				<li>Alicante</li>
		  	</ul>
		 
		

Y tendré este resultado:

Para hacer esto mismo como lista numerada haremos esto:

		
		<ol>
			<li>Castellón</li>
			<li>Valencia</li>
			<li>Alicante</li>
		</ol>
		
		

Y tendré este resultado:

  1. Castellón
  2. Valencia
  3. Alicante

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.

Inserción de hipertexto

Los enlaces del documento se configuran con la etiqueta <a>. Esta etiqueta sirve para englobar tanto texto como imágenes y su función es que al pinchar sobre el elemento que contiene la etiqueta, el navegador cargue el contenido de destino.

Para especificar el destino del hipervínculo es necesario incluir un atributo href en la etiqueta, sin él la etiqueta no funciona.

Si queremos que el texto Pincha aquí para ir a Google sea un enlace a la página de Google, debemos rodear ese texto con la etiqueta <a>, y dentro de esa etiqueta definir un atributo href="https://www.google.es/".

Ejemplo de enlace externo

En el siguiente texto puedes <a href="https://www.google.es"> pinchar aquí para ir a la web de Google </a>, pero si pinchas aquí no pasará nada.

Ejemplo de enlace interno

Este enlace abre un documento del mismo sitio en el que se encuentra él, para eso usamos un vínculo relativo. Puedes <a href="ejemplo.html">pinchar aquí para ver el otro documento</a>

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>

En la actualidad, es preferible definir los puntos de ancla con el atributo id, en lugar de el atributo name. Con lo que 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.html#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

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://estaticos.muyinteresante.es/media/cache/1140x_thumb/uploads/images/gallery/59a669fc5bafe88febb3d6cc/gatito-cesped_0.jpg"
			alt="Foto enlazada directamente desde la web" title="Este gatito viene de muy lejos">

Con este resultado:

Foto enlazada directamente desde la web

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