El Lenguaje de Marcas de Hipertexto o HTML (siglas en inglés de Hypertext Markup Language) es el lenguaje de marcas estándar para documentos diseñados para desplegarse en un navegador web. El término “hipertexto” hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un mismo sitio web o entre diferentes sitios web (ej. este es un enlace al primer sitio web). El HTML fue creado en 1990 por Tim Berners-Lee. Junto con Hojas de Estilo en Cascada o CSS (siglas en inglés de Cascading Style Sheets) y JavaScript conforma el grupo de las tres tecnologías principales de la Web.
El HTML especifica la estructura y la semántica de una página web mediante marcas (también llamadas etiquetas) o tags. Un navegador web recibe documentos HTML desde un servidor web (o desde almacenamiento local) y despliega sus componentes (textos, imágenes, hiperenlaces, etc.) de acuerdo con las especificaciones contenidas en los tags. Se recomienda que los documentos HTML no contengan componentes de presentación ni de interactivdad y que estos sean implementados mediante CSS y JavaScript.
EL HTML es un estándar del World Wide Web Consortium (W3C), un consorcio internacional creado por Tim Berners-Lee en 1994 que genera recomendaciones y estándares que aseguran el crecimiento de la WWW a largo plazo. La versión más reciente del estándar es HTML5 y se caracteriza por incluir soporte para los tipos más recientes de multimedios y reducir la necesidad de plataformas propietarias (ej. Adobe Flash) para su incorporación en páginas web que pueden desplegarse en diferentes tipos de dispositivos y tamaños de pantallas (computadoras, tabletas, teléfonos, pantallas gigantes, etc.).
El siguiente es un ejemplo de un documento HTML, el cual contiene, entre otras, etiquetas que especifican el lenguaje, el título y el cuerpo del documento, además de comentarios (que no son desplegados por el navegador web).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de documento HTML</title>
</head>
<body>
<!-- Comentario -->
Contenido de documento HTML.
</body>
</html>
Un documento HTML está compuesto por elementos HTML, como el que muestra en la figura 1.
Los componentes de un elemento HTML son: 1. La etiqueta de apertura: consiste del nombre del elemento (en este caso ```p```, correspondiente a un párrafo), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece el inicio del elemento —en este caso, dónde es el comienzo del párrafo—. 2. El contenido: este es el contenido del elemento, que en este caso es solamente texto. También pueden usarse imágenes, hipervínculos, direcciones web u otros elementos HTML. 3. La etiqueta de cierre: es similar que la etiqueta de apertura, pero incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece el final del elemento —en este caso, en dónde termina el párrafo—. ### Atributos Los elementos HTML pueden tener **atributos**, como el que se muestra en la figura 2.
Los atributos proporcionan información adicional acerca del elemento, la cual no se despliega en su contenido. Los atributos se especifican en la etiqueta de apertura mediante la sintaxis ```nombre_atributo=valor```. En la figura 2, ```class``` es el nombre del atributo y ```editor-note``` su valor (```class``` es un atributo que permite asociar al elemento con una clase o grupo de elementos, lo que puede ser útil para asignarles de manera conjunta estilos y otras propiedades). Si un elemento tiene varios atributos, deben separarse con (al menos) un espacio en blanco. Si el valor del atributo contiene espacios, debe encerrarse entre comillas dobles ("") o simples (''). Se considera una buena práctica entrecomillar los valores de atributos aunque no contengan espacios, para mejorar la legibilidad. Cada elemento tiene una lista de atributos que puede usar. Existen [atributos globales](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes), que pueden usarse en todos los elementos. ### Elementos anidados y elementos vacíos Un elemento HTML puede contener otros elementos. A estos elementos se les llama **elementos anidados**. Por ejemplo: ```html
Mi gato es muy gruñón
``` El elemento anterior también puede escribirse así: ```htmlMi gato es muy gruñón
``` La tabulación es opcional, pero ayuda a mejorar la legibilidad. En ambos casos, el resultado es:Mi gato es muy gruñón
Algunos elementos no tienen contenido, solamente atributos. Estos elementos se denominan **elementos vacíos**. Por ejemplo: ```htmlEsto es un párrafo.
``` ## Principales elementos A continuación, se describen y se ejemplifican algunos de los principales elementos de HTML. ### DOCTYPE [```DOCTYPE```](https://developer.mozilla.org/es/docs/Glossary/Doctype) (tipo de documento) es una etiqueta que le informa al navegador web cual es la versión HTML de un documento. No es una etiqueta ni un elemento HTML. Más bien es una declaración que le permite al navegador saber como interpretar los elementos HTML que hay en el resto del documento. Se coloca al inicio del documento. La siguiente etiqueta ```DOCTYPE``` especifica que el documento usa HTML5. ```html <!DOCTYPE html> ``` ### El elemento html El elemento [```html```](https://developer.mozilla.org/es/docs/Web/HTML/Element/html) es el elemento raíz de un documento y contiene el resto de los elementos. El siguiente elemento ```html``` especifica el lenguaje del documento a través del atributo globlal [```lang```](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/lang). ```html ``` ### El elemento head El elemento [```head```](https://developer.mozilla.org/es/docs/Web/HTML/Element/head) contiene los metadatos del documento y otros elementos como su título y referencias a *scripts* y hojas de estilo (CSS). ```html``` sola genera una línea en blanco. ```html
Python es un lenguaje de programación de propósito general ...
Fue creado en 1989 por Guido van Rossum...
``` Se visualiza así:Python es un lenguaje de programación de propósito general ...
Fue creado en 1989 por Guido van Rossum...
### El elemento br El elemento [```br```](https://developer.mozilla.org/es/docs/Web/HTML/Element/br) (*line break*) genera un salto de línea (o "retorno de carro") en el documento. No debe usarse para incrementar el espacio entre los parrafos. Para eso se recomienda utilizar el elemento ```p``` u hojas de estilo. ```html Mozilla Foundation"... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: never feed him after midnight."
``` Se visualiza así:"... the most important rule, the rule you can never forget, no matter how much he cries, no matter how much he begs: never feed him after midnight."
Los elementos semánticos (i.e que pretenden transmitir un significado) como ```strong``` y ```em``` facilitan la comprensión de textos por parte de personas y también programas. Por ejemplo, los [lectores de pantalla](https://es.wikipedia.org/wiki/Lector_de_pantalla) pueden utilizar estos elementos para pronunciar las palabras con mayor fuerza o volumen. ### El elemento em [```em```](https://developer.mozilla.org/es/docs/Web/HTML/Element/em) marca un fragmento de texto al que se se da un énfasis particular. Puede utilizarse de forma anidada, con cada nivel de anidamiento indicando un mayor grado de énfasis. Los navegadores acostumbran usar letra en itálica para implementar este elemento. Sin embargo, no debe utilizarse para simplemente escribir un texto en itálica. Para eso, se recomienda emplear la propiedad [```font-style```](https://developer.mozilla.org/es/docs/Web/CSS/font-style) de CSS. ```htmlTenemos que hacer algo al respecto.
``` Se visualiza así:Tenemos que hacer algo al respecto.
Los elementos semánticos (i.e que pretenden transmitir un significado) como ```strong``` y ```em``` facilitan la comprensión de textos por parte de personas y también programas. Por ejemplo, los [lectores de pantalla](https://es.wikipedia.org/wiki/Lector_de_pantalla) pueden utilizar estos elementos para pronunciar las palabras con mayor fuerza o volumen. ### El elemento a El elemento [```a```](https://developer.mozilla.org/es/docs/Web/HTML/Element/a) (*anchor* o ancla) crea un hipervínculo a otro documento HTML, a un archivo, a una dirección de email o a cualquier otro tipo de URL [(*Uniform Resource Locator* o localizador de recursos uniforme)](https://es.wikipedia.org/wiki/Localizador_de_recursos_uniforme). El atributo ```href``` especifica el URL. El contenido del elemento especifica el texto que se le muestra al usuario en el enlace. ```html El lenguaje de programación Python ``` Se visualiza así: El lenguaje de programación Python ### El elemento img El elemento [```img```](https://developer.mozilla.org/es/docs/Web/HTML/Element/img) inserta una imagen en un documento. Solo usa la etiqueta de apertura. El atributo ```src``` especifica el URL de la imagen y el atributo ```alt``` una descripción textual de la imagen. Los atributos ```height``` y ```width``` especifican, en pixeles, la altura y el ancho de la imagen respectivamente. ```htmlEncabezado de la tabla | |
---|---|
Fila 1,columna 1 | Fila 1,columna 2 |
Fila 2,columna 1 | Fila 2,columna 2 |
Encabezado de la tabla | |
---|---|
Fila 1,columna 1 | Fila 1,columna 2 |
Fila 2,columna 1 | Fila 2,columna 2 |
Esta sección tiene fondo rojo.
Esta sección tiene fondo verde.