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. Así, la función principal del HTML es el marcado del contenido; creando así la estructura del Documento y queda establecida la descripción del Documento HTML, es decir, una Página Web.
¿Qué significa HTML?
El término HTML son siglas que significan: Hyper Text Markup Language, es decir, Lenguaje de Marcado de Hipertexto.
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é es un Lenguaje de Marcado Texto?
Un Lenguaje de Marcado de Texto es un conjunto de etiquetas que funcionan para contener contenidos y así diferenciar los diferentes contenidos del documento.
Entendiendo esto, los documentos HTML son descritos por las etiquetas HTML y cada etiqueta HTML describe diferentes contenidos del documento.
¿Qué son las Etiquetas HTML?
Las etiquetas HTML son palabras clave o palabras reservadas del lenguaje rodeadas de paréntesis angulares, es decir, los caracteres "menor que" y "mayor que".
Etiquetas HTML en Pares
La mayoría de las etiquetas HTML vienen en pares, es decir, se conforman por una etiqueta de apertura y una etiqueta de cierre. De esta manera es posible delimitar su contenido.
Sintaxis:<etiqueta> contenido </etiqueta>
La diferencia de las etiquetas de apertura y de cierre, es que la etiqueta de cierre se escribe con una diagonal / antes del nombre de la etiqueta. Esto implica que lo que se defina dentro de estas dos etiquetas es su contenido.
Por ejemplo, las etiquetas <p> y </p> sirven para definir un párrafo como se muestra a continuación:
<p> Esto es un texto en un párrafo </p>
Como puede verse, el texto se delimita con la etiqueta de apertura <p> y la etiqueta de cierre </p> para describir el párrafo.
Todo lo que existe entre la etiqueta de apertura y la etiqueta de cierre implica que es su contenido: incluyendo tanto texto como otras etiquetas HTML.
Etiquetas HTML Simples:
Hay pocas etiquetas simples, las cuales son definidas con una sola etiqueta lo que implica que no delimitan ningún contenido.
Sintaxis: <etiqueta>
Por ejemplo, la etiqueta <hr> sirve para definir una linea horizontal, como se muestra a continuación:
<hr>
Etiquetas Anidadas
Las etiquetas HTML pueden estar anidadas unas dentro del contenido de otra etiqueta HTML como se muestra a continuación:
<body> <h1>Mi primera página</h1> <p>Mi primer párrafo</p> </body>
La funcionalidad del HTML no es solo el del marcado de texto, sino también el de contener otras etiquetas HTML que a su vez pueden contener otras etiquetas y/o texto. Esto crea la estructura del Documento HTML.
Recomendación: Las etiquetas HTML no son sensibles a mayúsculas y minúsculas, pero como buena practica se recomienda escribirlas en minúsculas para mantener una coherencia y legibilidad en la estructura del código.
¿Qué son los atributos de etiquetas HTML?
Los atributos de etiquetas HTML sirven para agregar a las etiquetas más información o funcionalidad y estos atributos pueden ser opcionales o requeridos según la etiqueta.
Los atributos son declarados dentro de la etiqueta HTML de apertura en sintaxis de pares estableciendo primero el nombre del atributo seguido del signo = y posteriormente el valor entre comillas dobles " sin espacios entre estos:
<etiqueta atributo="valor"> contenido </etiqueta>
Se pueden establecer varios atributos a una etiqueta con la siguiente sintaxis:
<etiqueta atributo1="valor1" atributo2="valor2"> contenido </etiqueta>
Importante: Nótese que dentro de la etiqueta de apertura se debe mantener un espacio entre el nombre de la etiqueta y los atributos que se declaran.
¿Qué es el Documento HTML?
Un Documento HTML contiene estructuralmente todas las etiquetas HTML que se requieren para la representación de la Página Web. Esto lo podemos observar y entender en los siguientes ejemplos.
Documento HTML Básico:
<!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 de las etiquetas:
- La declaración
<!DOCTYPE html>define el tipo de documento HTML que es. - El contenido entre la etiqueta
<html>y</html>describe un documento HTML. - El contenido entre
<head>y</head>provee información acerca del documento. - El contenido entre
<title>y</title>provee un titulo para el documento. - El contenido entre
<body>y</body>describe el contenido visible del documento. - El contenido entre
<h1>y</h1>describe un Título de Encabezado. - El contenido entre
<p>y</p>describe un párrafo.
Usando esta marcación, un Navegador Web puede mostrar el documento como una Página Web con un encabezado y un párrafo.
- Referencias:
- La declaración
<!doctype> - La etiqueta
<html> - La etiqueta
<head> - La etiqueta
<title> - La etiqueta
<body> - La etiqueta
<h1> - Títulos de Encabezado HTML
- La etiqueta
<p>
¿Cómo es la Estructura del documento HTML?
Es fundamental la Estructura del Documento para la Definición del Documento que será interpretado por el Navegador Web, empezando por que versión del HTML es, en donde inicia y finaliza el documento, en donde inicia y termina el Encabezado con los Datos del documento y en donde inicio el Cuerpo del documento. Que este último es lo que el Navegador Web va a mostrar al Usuario.
<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 contenido de la etiqueta <body> (el área blanca) es mostrada por el Navegador Web al Visitante (o Internauta).
Visualización en un Navegador 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:
Muestra Mi primpera Página
Ver muestra del Documento HTML Básico
(en una nueva ventana)
Como se puede observar en el muestra, las letras acentuadas no se visualizan correctamente en el navegador web. Esto se debe a que el HTML nativo solo reconoce texto alfanumérico y algunos caracteres especiales. Para resolver estas situaciones se utilizan las entidades HTML para representar los caracteres específicamente que no reconoce el HTML.
Adicionalmente y altamente recomendado se puede establecer una codificación de caracteres al documento HTML para que reconozca la mayor cantidad de caracteres especiales y disminuir el uso de entidades HTML.
¿Qué son las Entidades HTML?
Las entidades HTML son cadenas de caracteres en determinado formato para mostrar caracteres reservados del lenguaje HTML (como < y >), caracteres especiales (incluyendo letras con acento, tildes o diéresis), y caracteres invisibles (como tabuladores o espacios en blanco).
El formato de las entidades HTML inician con un ampersand & seguido por un código y terminan con el caracter de punto y coma ; , todo esto sin espacios como se muestra a continuación:
&codigo_aqui;
Caracteres reservados del interprete HTML
| Caracter | Código | Descripción |
|---|---|---|
| & | & |
Interpretado como el inicio de una entidad HTML. |
| < | < |
Interpretado como la apertura de una etiqueta HTML. |
| > | >: |
Interpretado como el cierre de una etiqueta HTML. |
| " | " |
Interpretado como la apertura o cierre del valor de un atributo de una etiqueta HTML. |
Caracteres acentuadas para los hispanohablantes
| Caracter | Código |
|---|---|
| á | á |
| é | é |
| í | í |
| ó | ó |
| ú | ú |
| Caracter | Código |
|---|---|
| Á | Á |
| É | É |
| Í | Í |
| Ó | Ó |
| Ú | Ú |
| Caracter | Código |
|---|---|
| ñ | ñ |
| Ñ | Ñ |
| ü | ü |
| Ü | Ü |
Entonces, para poder mostrar el texto correctamente al visualizarlos en un navegador web, tendríamos que actualizar el documento HTML de la siguiente manera:
<!doctype html>
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>Mi primera página</h1>
<p>Mi primer párrafo</p>
</body>
</html>
Ver muestra del Documento HTML con entidades HTML
(en una nueva ventana)
Como se puede observar en la muestra, el navegador web interpreta las entidades HTML para mostrar el caracter especifico del código establecido y de esta manera las letras acentuadas son mostradas correctamente.
¿Qué es la codificación de caracteres?
La codificación de caracteres es el método de convertir caracteres con una nomenclatura estándar para poder representarla y/o interpretarla en diferentes sistemas de manera unificada. Existen varias codificaciones de caracteres, pero para los documentos HTML la codificación de caracteres "UTF-8" es la recomendada.
Para establecer la codificación de caracteres en un documento HTML debemos establecer la etiqueta <meta> con el atributo charset con el valor establecido en "UTF-8" anidada en la etiqueta <head> como se muestra a continuación:
Documento HTML con codificación UTF-8
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body>
<h1>Mi primera página</h1>
<p>Mi priemer párrafo</p>
</body>
</html>
Ver muestra del Documento HTML con codificación de caracteres UTF-8
(en una ventana nueva)