El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos.
HTML provee de múltiples elementos para poder estructurar de una manera correcta y proveer al navegador web de la información semántica correcta para cada porción de información que se esté proporcionando.

¿Qué es HTML?

HTML no es un lenguaje de programación, sino que se trata de un lenguaje de marcado que define la estructura de un determinado contenido. HTML consiste en una serie de elementos que se utilizan para agrupar diferentes secciones de contenido para que se visualicen o comporten de una determinada manera. Las etiquetas html pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, entre tantas otras cosas que se pueden hacer.
Por ejemplo, si tenemos el texto:
Este es un ejemplo
Si se quiere especificar que se trata de un párrafo podemos utilizar para ello el markup <p>:
<p>Este es un ejemplo</p>


Anatomía de un elemento HTML

Las partes principales del elemento expuesto son:

  • TAG de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento — en este caso, dónde es el comienzo del párrafo.
  • TAG de cierre: es igual que el tag de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento — en este caso dónde termina el párrafo.
  • Contenido: este es el contenido del elemento, que en este caso es sólo texto.
  • Elemento: tag de apertura + tag de cierre + el contenido = elemento.


Atributos

Los elementos pueden también tener atributos, que se ven así:
<p class="codigo" >Este es un ejemplo</p>
Los atributos proporcionan información adicional relativa al elemento que no será visualizada como contenido. En este caso, por ejemplo, se utiliza el atributo class que permite establecer las clases que se aplicaran al elemento en cuestión dando un nombre identificativo, que puede ser usado luego para proveer al elemento información de estilos.
Un atributo debe tener siempre:

  • Un espacio entre éste y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más atributos).
  • El nombre del atributo, seguido por un signo de igual (=).
  • Comillas de apertura y de cierre, encerrando el valor del atributo.


Anidamiento de elementos

Html permite colocar elementos dentro de otros elementos y esto es llamado ANIDAMIENTO. Si, por ejemplo, queremos resaltar una palabra del texto (en nuestro ejemplo la palabra "un"), podemos encerrarla en un elemento <strong>, que significa que dicha palabra debe ser enfatizada (visualmente se mostrará en negrita).
<p>Este es <strong>un</strong> ejemplo</p>
SIEMPRE tenemos que asegurarnos de aplicar correctamente los tag de apertura y cierre para que quede correctamente anidado los diferentes niveles en los que lo apliquemos, de lo contrario podríamos generar conflictos. Para aclarar el punto, en el ejemplo estamos utilizando un tag de apertura <p>, y luego se abre otro tag anidado (dentro del anterior) de tipo <strong>, por lo tanto hay que asegurarse de cerrar primero </strong> y luego podemos proceder a cerrar <p>. Por ejemplo este escenario es incorrecto:
<p>Este es <strong>un ejemplo</p></strong>
Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren claramente dentro o fuera el uno del otro. Si éstos se encuentran solapados, el navegador web tratará de evaluar lo que mejor se adapta a lo que se intentó hacer, pero en ese caso estamos supeditados a lo que cada browser interprete y podremos encontrarnos con resultados inesperados en algunos casos, con lo que esto NO SE DEBE HACER NUNCA!


Elementos vacíos

Algunos elementos no poseen contenido, y son llamados elementos vacíos. En este grupo de elementos podemos encontrar por ejemplo el elemento <img> como se expone a continuación:
<img src="una-imagen-random.png" alt="esta es una imagen de prueba" >
En este caso proporcionamos dos atributos particulares del elemento img, pero no hay etiqueta de cierre </img> ni contenido dentro de los tags. Esto es porque un elemento de imagen no encierra contenido al cual afectar. Su propósito es desplegar una imagen en la página HTML, en el lugar en que aparece.


Estructura de un documento HTML

Hasta aquí se expusieron elementos HTML individuales, pero éstos no son muy útiles por sí solos. A continuación se expone cómo los elementos individuales son combinados para formar una página HTML.
Este es un modelo básico de una página html:

Dentro de los elementos expuestos en el ejemplo anterior podemos ver:

  • <!DOCTYPE html> indica el tipo de documento. Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos a un conjunto de reglas que el código HTML de la página debía seguir para ser considerado bueno, lo que podía significar el chequeo automático de errores y algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione correctamente. No se considera importante adentrarse más en el tema.
  • el elemento <html> Este elemento encierra todo el contenido de la página entera. Se le conoce como el elemento raíz (root element).
  • el elemento <head> Este elemento actúa como un contenedor de todo aquello que queremos incluir en la página HTML que no es contenido visible por los visitantes de la página. Incluye contenidos como palabras clave, una descripción de la página que quieres que aparezca en resultados de búsquedas, CSS para dar estilo al contenido, declaraciones del juego de caracteres (charset), etc.
  • el elemento <body> Encierra todo el contenido que deseas mostrar a los usuarios web que visiten la página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.
  • el elemento <meta charset="utf-8"> Este elemento establece el juego de caracteres que el documento usará es utf-8, que incluye casi todos los caracteres de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que queramos incluir. Si no se establece se utilizará el defecto para el tipo de documento vigente (el tipo de documento vigente html5 utiliza utf-8).
  • el elemento <title> Establece el título de la página, que es el título que aparece en la pestaña del navegador cuando la página es cargada y se usa para describir la página cuando sea añadida a los marcadores o como favorita.


Ejemplo de estructura básica de un documento Html

<html>
 <head>
 <head />
 <body>
 <body />
<html />