¿Qué es HTML?

Descripción General de lo que es el HTML: La estructura básica de un documento HTML conformada por las etiquetas HTML, la declaración DOCTYPE y el propósito de los Navegadores Web para la correcta visualización de los documentos HTML.

En la actualidad la creación de sitios web ha ido evolucionando integrando diferentes tecnologías y otros lenguajes para lograr sitios sofisticados y dinámicos, pero el HTML es el lenguaje medular para cualquier sitio web.

¿Qué significa HTML?

HTML significa Hyper Text Markup Language.

¿Qué es un Lenguaje de Marcado Texto?

Un Lenguaje de Marcado de Texto es un conjunto de etiquetas que funcionan para contener contenido y a su vez diferenciarlos de otros contenidos.

Los documentos HTML son descritos por las etiquetas HTML y cada etiqueta HTML describe diferentes contenidos del documento.

HTML no es un Lenguaje de Programación

Es importante aclarar que HTML no es lenguaje de programación, si no que es un lenguaje de marcado de Texto. Pero existen otras tecnologías y lenguajes que se integran al lenguaje HTML para crear sitios sofisticados y dinámicas.

HTML es el lenguaje medular de cualquier Sitio Web, así que es necesario la comprensión de este lenguaje antes de dar el siguiente paso a otra tecnología o lenguaje web.

¿Qué son las Etiquetas HTML?

Las etiquetas HTML son palabras clave o palabras reservadas del lenguaje rodeadas de paréntesis angulares.

La mayoría de las etiquetas HTML vienen en pares, es decir, se conforman por una etiqueta de apertura y una etiqueta de cierre. Esto para delimitar su contenido a marcar en el Documento HTML.

Sintaxis de Etiquetas HTML en Pares

<etiqueta> contenido </etiqueta>

Como se puede observar la etiqueta de cierre se diferencia por incluir un carácter de diagonal / antes del nombre de la etiqueta.

Nota: Existen también etiquetas vacías, que no requieren de la etiqueta de cierre, que para fines de este artículo no es necesario profundizar pero se tratara el tema más adelante.

Ejemplo de una Etiqueta HTML delimitando un párrafo:

Como primer ejemplo para representar un párrafo utilizamos la etiqueta <p> y </p> para delimitar en contenido de un párrafo:

<p>Esto es un Párrafo</p>

Etiquetas Anidadas

La funcionalidad del HTML no es solo el marcado texto, sino también contener otras etiquetas que a su vez pueden contener otras etiquetas y/o texto.

<body>
<p>Esto es un Párrafo</p>
</body>

Documento HTML

Para iniciar a comprender la estructura de un documento HTML considera los siguientes puntos principales;

  • Todos los documentos HTML deben empezar con la declaración de tipo de documento: <!Doctype html>.
  • El documento HTML en sí, inicia con la etiqueta <html> y termina con la etiqueta de cierre </html>.
  • La información del documento se encuentra entre las etiquetas <head> y </head>.
  • El contenido que se visualizará se encuentra entre las etiquetas <body> y </body>.

A continuación mostramos el código de un documento HTML simple pero funcional:

<!DOCTYPE html>
<html>
  <head>
    <title>Titulo de la Página</title>
  </head>
  <body>
    <h1>Mi primera página</h1>
    <p>Mi primer párrafo</p>
  </body>
</html>

Explicación del código del Documento HTML:

  • La declaración <!DCTYPE html> define el tipo de documento HTML que es. Es decir HTML5.
  • Las etiquetas <html> y </html> son el contenedor todo el documento HTML.
    • Las etiquetas <head> y </head> son el contenedor de la información del documento.
      • El texto entre <title> y </title> describe el titulo del documento (información del documento).
    • Las etiquetas <body> y </body> son el contenedor de todo el contenido visible del documento HTML.
      • El texto entre <h1> y </h1> describe un título de encabezado que será visible en un navegador web.
      • El texto entre <p> y </p> describe un párrafo que será visible en un navegador web.

Usando esta descripción, un Navegador Web puede mostrar un documento con un encabezado y un párrafo.

Navegadores Web

El propósito de un Navegador Web (Chrome, IE, Firefox, Safari, etc.) es leer los documentos HTML y mostrarlos.

El Navegador Web no muestra las etiquetas HTML, pero las usa para determinar como mostrar el documento:

navegador web

Estructura del documento HTML:

<html>
<head>
<title>Titulo de la Página</title>
</head>
<body>
<h1>Esto es un Encabezado</h1>
<p>Esto es un Párrafo.</p>
<p>Esto es otro Párrafo.</p>
</body>
</html>

Solo el área de <body> es mostrada en el Navegador Web (el área blanca).

Nota: Las etiquetas HTML no son sensibles a mayúsculas y minúsculas, pero se recomienda como buena práctica escribirlas en minúsculas para mantener una coherencia y legibilidad en la escritura del código.

Referencias del Artículo:

Título Descripción
La Declaración DOCTYPE La declaración DOCTYPE representa el Tipo de Documento que es, y por la tanto, no es una etiqueta como tal, sino más bien es la descripción de la versión HTML del Documento.
La Etiqueta HTML La etiqueta HTML representa la raíz de un documento HTML y es el contenedor de todos los elementos HTML Por lo tanto es llamada la etiqueta root