Al igual que una casa se erige sobre unos cimientos, la base de un sitio web es su código HTML. Estas siglas significan lenguaje de marcado de hipertext (hypertext markup language, en inglés). Se considera un estándar para la creación de páginas web en Internet, ya que permite generar toda su estructura en secciones, párrafos, enlaces, etiquetas, atributos y otros muchos elementos.
En modo de resumen, el HTML sirve para el desarrollo de páginas web. Los desarrolladores escriben código HTML para diseñar la interfaz de un sitio web mediante elementos gráficos como las imágenes o los vídeos, texto, hipervínculos, etc.
Algo que cabe destacar es que, aunque para muchas personas fuera del ámbito de la informática y la programación sí lo sea, el HTML no es un lenguaje de programación, ya que no permite hacer cálculos, tomar decisiones lógicas o manipular datos de forma dinámica.
¿Quieres ver un ejemplo de HTML ahora mismo? ¡Pulsa el botón derecho del ratón y selecciona “Inspeccionar” para abrir una pantalla que te mostrará toda la estructura HTML.
Estructura principal de un elemento HTML
Todas las páginas HTML contienen una serie de elementos HTML que se componen de etiquetas y atributos en diferentes bloques. Una etiqueta le indica a los buscadores dónde empieza un elemento y dónde acaba, mientras que los atributos están destinados a describir las características gráficas de un elemento.
Las tres partes principales que podemos encontrar en todos los elementos HTML son:
- Apertura: se usa para indicar el comienzo de un elemento, y queda delimitada por antilambdas (< >). Por ejemplo, para crear un párrafo se ha de escribir un elemento <p>.
- Contenido: es la parte de la etiqueta que los usuarios van a ver, lo que le da sentido al elemento.
- Cierre: marca el final de un elemento de forma paralela a su comienzo, pero añadiéndole una barra oblicua o slash. Por ejemplo, el cierre del elemento <p> sería </p>.
Sin embargo, hay algunas excepciones como la etiqueta <img> o la etiqueta <a> que veremos más abajo. Estas etiquetas no tienen un cierre más allá de la antilambda correspondiente, ya que no pueden contener otros elementos anidados. A los elementos HTML que no llevan cierre se les denomina elementos vacíos.
Estructura principal de una página HTM
En cuestiones estructurales, los elementos básicos para crear una página en HTML son:
- <html>: Define el inicio y el final de un documento.
- <head>: Contiene información esencial no visual sobre el documento HTML en forma de metadatos.
- <body>: Alberga todo el contenido visible de una página web.
Con tan solo estos tres elementos de apertura y cierre se puede generar un documento HTML. Sin embargo, hay infinidad de elementos más que es necesario conocer para estructurar toda una página HTML y explotar sus funcionalidades al máximo.
Principales etiquetas HTML
A continuación, te listamos las principales etiquetas que se emplean en HTML para construir bloques comunes:
- Etiqueta <h1> a <h6>: Define los encabezados de diferentes niveles para crear una jerarquía de relevancia de contenidos de cara a los buscadores. El encabezado más importante de una página se encaja en un <h1> y el que menos, en un <h6>. Sin embargo, la mayoría de páginas solo suelen emplear los encabezados <h1>, <h2> y <h3>.
Ejemplo:
<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
- Etiqueta <p>: Define un párrafo.
Ejemplo:
<p>Este es un párrafo de ejemplo</p>
- Etiqueta <a>: Crea un enlace a otra página o recurso.
Ejemplo:
<a href="/en/»https://www.ejemplo.com»/">Enlace de ejemplo</a>
- Etiqueta <img>: Inserta una imagen en la página.
Ejemplo:
<img src="»ruta_de_la_imagen.jpg»" alt="»Descripción" de la imagen»>
- Etiqueta <ul> y <li> : Crea una lista desordenada. Para crear una lista ordenada con numeración, se sustituye <ul> por <ol>.
Ejemplo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
- Etiqueta <strong>: Define un texto fuerte o destacado que se muestra en negrita en la mayoría de los navegadores.
Ejemplo:
<p>Este es un texto <strong>importante</strong>.</p>
- Etiqueta <em>: Define un texto enfatizado que se lee en cursiva en la mayoría de los navegadores.
Ejemplo:
<p>Este es un texto <em>enfatizado</em>.</p>
Estos son solo algunos ejemplos que reflejan las etiquetas HTML más básicas, pero existen cientos de ellas que cumplen funciones muy importantes en la interfaz y estructura de un sitio web.
