En este nuevo apunte voy a estudiar los fundamentos de HTML.

¿Por qué aprender sobre HTML ahora? Bueno, realmente no hay ninguna mala oportunidad para empezar a aprender algo. Todo es nuevo cuándo no conocemos cómo funciona.

Pero principalmente, encuentro dos ventajas para estudiar un poco de HTML:

1- No tiene muchos requerimientos para empezar. Necesito solamente tener un editor de texto sin formato para crear el documento y un navegador de internet para mostrarme los resultados. Solo con eso ya puedo empezar a crear cosas nuevas.

2- Incluso si parece difícil al principio, muchas partes de sus sintaxis se repiten una y otra vez. Luego de un poco de práctica es sencillo entender lo que estamos haciendo incluso antes de revisarlo en el navegador.

Y otro detalle importante: puedo avanzar en la creación de un nuevo sitio web trabajando completamente dentro de mi computadora. De este modo puedo estudiar y entender cómo funciona desde un directorio. Luego si quiero puedo publicar la página en un servidor para acceder a la misma desde internet.

Por eso sin más excusas, lo siguiente es…

¿Qué es HTML?

Las siglas HTML quieren decir:

HTML = Hypertext markup language

De esto necesito saber que “Hypertext” viene por la idea de un “texto con links”. Un texto que se conecta con otros textos.

Y la parte de “markup language” me habla de un lenguaje por anotaciones. Se trata de una forma de decirle al navegador, por medio de etiquetas o “tags”, qué es lo que contiene cada parte de la página.

Por ejemplo estas etiquetas crean una estructura donde un a parte de la página web es el título (heading) y otra parte es un párrafo (paragraphs).

Este lenguaje lleva varias revisiones desde su creación. La versión HTML 5.4 es la más actual al momento de escribir todo esto.

El HTML se encarga de la estructura estática de la página web. Cuáles son los títulos, los bloques de texto, y ese tipo de cosas.

Y para cerrar este apartado, el desarrollo web en HTML por lo general tiene otros dos lenguajes que lo complementan:

– El lenguaje CSS maneja el estilo del sitio. Por ejemplo tipografía, colores, columnas y ese tipo de cosas.

– Javascript se encarga de la parte interactiva del sitio, la parte dinámica y su funcionalidad.

Cómo es la estructura de HTML

Para entender mejor todo esto, nada mejor que empezar trabajando con un ejemplo.

Primero necesito crear un nuevo documento. Puedo usar cualquier editor de texto. Pero si quiero tener todos los lujos, como el de “autocompletar” código, lo mejor va a ser usar alguna alternativa como Codium o algún editor al estilo de Neovim que pueda expandirse con plugins.

Lo que sigue es crear el documento, al que tengo que darle una extensión “.html” para guardarlo.

Y para mi suerte, todo archivo HTML tiene la misma forma:

<!DOCTYPE html>

<html>
  <head> </head>

  <body></body>
</html>

Qué significa DOCTYPE en HTML

La primera linea de todo documento html se conoce como “doctype”.

<!DOCTYPE html>

Este marcación “doctype” identifica el tipo de archivo.

Qué es la etiqueta HTML

La etiqueta es la raíz del documento.

<html>
  ...código...
</html>

Todo lo que se encuentra entre esos dos tags es el código del documento. Este tag siempre esta presente, abre y cierra el archivo.

A veces puede aparecer como:

<html lang="es">
  ...código...
</html>

En este caso, el atributo “lang” identifica el idioma en el que se encuentra escrita la página, por ejemplo “es” por “español”.

En su interior, la etiqueta “html” contienen otros dos tags: Head y Body.

Qué es la etiqueta Head en HTML

En el interior de las etiquetas Head:

<head>
  ...código...
</head>

Se puede encontrar información que no se muestra directamente en el navegador, pero si es información que le dice al navegador cómo tiene que interpretar la página.

Esta información incluye metadatos o links a hojas de estilo en CSS.

Entre esos tags que puedo encontrar dentro de “Head”, existe por ejemplo “Title” que es una etiqueta obligatoria del sitio.

<title>Nombre del sitio</title>

El nombre incluido dentro de las etiquetas “Title” aparece por ejemplo arriba en la barra del navegador, cuando visitamos la página web.

Otra etiqueta que aparece dentro de head es una etiqueta llamada “meta”, se trata de un tag que no tiene cierre. Se refiere a la codificación del archivo:

<meta charset="UTF-8" />

Lo que hace es indicar cómo se van a codificar los caracteres, unificando estándares entre los distintos navegadores.

La etiqueta Body en HTML

Dentro de las etiquetas:

<body></body>

Se incluye todos los elementos que van a mostrarse en mi sitio.

Esta etiqueta comienza directamente luego del cierre de “head”. Y le sigue luego el cierre de la etiqueta html.

Sintaxis de HTML: ultra resumen

Según lo que pude entender explicando el ejemplo anterior, en un documento HTML voy a encontrar diferentes contenidos que se encuentran acompañados de etiquetas.

La sintaxis de este lenguaje se maneja agregando la información acompañada de “tags” o etiquetas.

Básicamente en este primer momento tengo que recordar que existen dos tipos de etiquetas. Un tipo de etiquetas se cierra y otro tipo no. Las etiquetas que no se cierran se consideran etiquetas vacías.

Etiquetas que abren y cierran:

Un ejemplo de este tipo de tag puede ser la etiqueta de párrafo:

<p> este es un párrafo </p>
Se puede notar que la etiqueta “

” abre el contenido y “

” lo cierra. Ya había encontrado este tipo de tag antes, por ejemplo al hablar de “body”. Cuando una etiqueta se abre, siempre tiene que cerrarse en algún punto.

Las etiquetas ya vienen establecidas, no es posible crearlas. No es necesario recordar todas y cada una de las etiquetas, algunas se utilizan muchas veces y otras solo dependiendo de un caso en particular.

Otros detalle importante es que las etiquetas se escriben siempre en minúsculas.

Y también es bueno recordar que las etiquetas pueden “anidarse”, pueden existir una dentro de otra. Esto también pude notarlo antes, por ejemplo:

<head><title> Nombre del sitio</title></head>

Etiquetas vacías:

Este tipo de tag no tiene cierre. Se conocen también como “Empty Tags” o “self-closing” (auto cierre).

No hay contenido en el interior de estas etiquetas, por lo que no es necesario cerrarlas. Pero si pueden tener atributos.

Un ejemplo de esto puede ser:

<link rel="stylesheet" href="styles.css">

En este caso la etiqueta “link” contiene una referencia a un archivo externo, una hoja con estilos CSS. La etiqueta no tiene contenido, por lo que no tiene otro tag de cierre.

Lo que si tiene el ejemplo son dos atributos: el atributo “rel” especifica que se trata de una hoja de estilos y el atributo “href” especifica la dirección al nombre del archivo.

Otro ejemplo de etiqueta vacía puede ser:

<meta charset="UTF-8">

Un etiqueta que ya revisé con anterioridad. Hay varias etiquetas de esta forma, tampoco es necesario conocerlas a todas, solamente alcanza con saber como es su forma.

Atributos en HTML:

Los atributos ( o “Attributes” en inglés) son una forma de agregarle datos extra a un tag.

Modifican la forma en que un navegador interpreta el contenido. El nombre de los atributos se escriben entre comillas. Y tampoco puedo inventar nada en esto, cada tipo de etiqueta tiene sus propios tipos de atributos preestablecidos.

Para revisar un ejemplo que ya escribí antes:

<meta charset="UTF-8">

En este caso tengo la etiqueta meta, que es un tag vacío. Aquí tengo el atributo charset, que indica “UTF-8” como el tipo de codificación unicode que utiliza la página.

Hay también más ejemplos de atributos, que voy a ir encontrando con el desarrollo de mi sitio web.

Comentarios en HTML:

Igual que en otros lenguajes de programación, HTML me permite dejar un mensaje por fuera del código.

<!-- contenido -->

Estos mensajes no son para que los interprete el navegador, son para que puedan leerlos las personas que revisan el código. Por ejemplo:

<!-- Dentro de las etiquetas "Head" van los metadatos -->

Revisando mi primer sitio web en HTML:

Si todo va bien, ya tengo creado un documento, digamos que se llama “inicio.html” por ponerle algún nombre.

Y si sumo todo lo anterior, el interior del documento se parece a esto:

<!DOCTYPE html>
<html>
  <head>
    <!-- Dentro de la etiqueta "Head" van los metadatos -->
    <meta charset="UTF-8" />
    <title>Mi sitio de ejemplo</title>
  </head>

  <body>
    <!-- Dentro de la etiqueta "body" se muestra el contenido que aparece en la página -->
    <h1>Este es un nuevo blog</h1>
    <p>Algo de información para una página web que recien comienza.</p>
  </body>
</html>

Lo que puedo hacer ahora es abrir este archivo con un navegador, por ejemplo con la opción “abrir con” o lanzando el archivo directamente sobre la barra de herramientas del navegador.

Haciendo esto voy a poder ver el sitio web en su estado actual.

Recursos para saber más sobre HTML

No voy a sorprender a nadie si digo que realmente existen millones de cosas sobre este tema para leer y estudiar. Después de todo lo de HTML no es un asunto precisamente nuevo.

¿Dónde puedo encontrar un texto verdaderamente completo para seguir aprendiendo?

Existe una documentación oficial de HTML. Esa documentación la mantiene actualziada una organización internacional llamada World Wide Web Consortium (W3C).

Se puede acceder a ese material siguiendo este enlace.

Así que como siempre, si en algún momento mis apuntes se vuelven confusos o insuficientes, lo mejor es referirse a la documentación oficial.

Describiendo la forma del HTML

Según entiendo la idea es darle un sentido a todo lo que se encuentra en una la página web por medio de etiquetas.

Utilizando HTML le asigno etiquetas a las distintas partes de un sitio. Estas etiquetas le permiten a los navegadores y buscadores entender la página, pero también la vuelven legible para cualquier humano que revise este código.

Es por eso que también se dice que HTML es un “lenguaje estructurado”. Las etiquetas marcan la estructura que cumple cada elemento.

Luego de señalar cada parte con uno de estos tags, puedes agregarle estilo de diseño con CSS (“Hojas de estilo en cadena).

Agrupando los elementos comunes del sitio

Todo este tópico aparece muchas veces mencionado por el nombre en inglés de “Common semantic grouping elements”. Esto es en castellano “Agrupación semántica de elementos comunes”.

En lo que a mi respecta, ni siquiera se que quiere decir “semántico”. En un rápido viaje al diccionario, al parecer quiere decir algo como “estudiar el significado de las palabras”.

Una vez más, lo más importante para recordar parece ser esto: Las etiquetas no “acomodan” las partes del sitio en su lugar ni les dan estilo, pero si les dan estructura. Enseña que es cada cosa.

Ya en el anterior texto revisé algunas características de las etiquetas. Algunas tienen que ser abiertas y cerradas, mientras que otras permanecen siempre abiertas.

Algunas de las etiquetas más comunes

Existen varias etiquetas, pero estas son unas de las más usadas:

La etiqueta “Header”

Según la documentación de (W3C):

The header element represents a group of introductory or navigational aids.manual html w3c

Esto es que “el elemento header representa un grupo de ayudas introductorias o de navegación”.

La misma se encuentra de esta forma:

<header> </header>

En teoría puedo pensar que, al poder ser traducida la palabra “header” como una “cabecera”, esta etiqueta tiene que aparecer al principio de las distintas páginas de un sitio web.

Y la mayoría de las veces ocurre de esa forma, repitiéndose más o menos igual en cada página. Contiene cosas como el logo y los títulos, se supone que el header se ocupa de nuclear ese tipo de información introductoria para la navegación.

Sin embargo tengo que recordar que las etiquetas no se refieren a la posición de algo en el diseño. Puede existir más de un header en una determinada página, puede aparecer incluso usado dentro de otras etiquetas siempre que cumpla esa función de albergar datos introductorios.

Otra cosa que necesito tener en mente: aunque el nombre es similar, y

no son lo mismo en el contexto del sito.

Dentro de la etiqueta va información que no es contenido del documento, como por ejemplo metadatos. Pero lo que va dentro de

si es parte de lo que se enseña en la página.

La etiqueta nav

La etiqueta “nav” aparece de esta forma

<nav> </nav>

En inglés se conoce por “”navigation bar” y es el menú de navegación de nuestra página.

Por lo general va dentro de la etiqueta “header”, y del mismo modo la mayoría de las veces se repite constante en toda la página web.

Siendo el menú de de navegación, contiene los links para ir saltando entre partes del sitio. Por ejemplo, la página de “información”, “contacto” y similares. Aunque esto depende de lo que necesitemos en cada caso, puede ser links a nuestro gusto.

<footer></footer>

Se trata del pie de página, siendo de esta forma por lo general va al final del sitio. Y de forma similar a “Header”, aparece casi igual en todas las partes del sitio.

Contiene cosas como links importantes, mapa del sitio, datos de contacto, metadata y ese tipo de cosas.

Main

La documentación dice:

The main element represents the dominant contents of the document.

manual w3c

Este elemento representa a los contenidos dominantes del documento.

Aparece de la siguiente forma:

<main> </main>

Y en “main” aparece el contenido principal del sitio, que es diferente en cada caso. Es único por cada página.

Para simplificarlo, dicho de otro modo es todo lo que no forma parte ni esta incluido en otras etiquetas como
,