Introducción

al lenguaje HTML

Introducción al Diseño Web - 2153017 ∣ 2196017 Curso 2022/2023

 El lenguaje HTML
El lenguaje HTML (HyperText Markup Language) fue
desarrollado en 1990 por Tim Berners-Lee a partir de
otros lenguajes previos, como el GML (Generalized
Markup Language) creado por IBM en 1969 y el SGML
(Standard GML), de 1986.
No es un lenguaje de programación, pues no presenta
ni las funciones ni variables típicas de estos.
Se trata de un lenguaje de marcado o de marcas que,
en esencia, es una fórmula para codificar un
documento en la que, junto con el contenido, se
incorporan marcas o etiquetas que contienen
información adicional acerca de su estructura y su
presentación.
Los lenguajes de marcas también se denominan
lenguajes de descripción de documentos y se utilizan,
principalmente, para propósitos editoriales.
Este tipo de lenguajes incluye, además de ya los
mencionados, otros muchos como:
§ El PCL (Printer Command Language) de Hewlett
Packard (1980).
§ El formato RTF (Rich Text Format) de Microsoft
(1987).
§ El lenguaje PostScript de Adobe (1982).
§ El formato PDF (Portable Document Format), también
de Adobe (1993).
§ El XML (eXtended Markup Language) del W3C (1998).
 Versiones del HTML
Desde su primera descripción en 1990, el lenguaje
HTML ha pasado por un serie de versiones que ilustran
su evolución.
Nunca existió una versión HTML 1.0 con carácter de
estándar u oficial. En 1993 se publicaron dos
borradores formalizados y ampliados, HTML (Berners-
Lee) y HTML+ (Ragget), que no llegaron a adoptarse.
En 1995 se publicó el HTML 2.0, primer estándar oficial
del lenguaje. Simplificada al máximo la estructura del
documento para agilizar la edición, la declaración
explícita de ciertos elementos hoy obligatorios era
opcional, y no soportaba tablas.
El borrador del HTML 3.0 fue propuesto por el W3C
(World Wide Web Consortium) en 1995, aunque la
versión publicada como estándar fue la HTML 3.2 de
1997, que abandonó parte de los avances de la
propuesta inicial e incluyó otros, incorporados por los
navegadores del momento.
El HTML 4.0 se publicó en 1998 como especificación
del W3C. Con ella comenzó a limpiarse el lenguaje de
elementos vinculados a aplicaciones concretas. A partir
de ahí, el W3C se centró en el desarrollo del nuevo
lenguaje XHTML (eXtensible HTML).
La falta de interés del W3C, junto a los problemas y
demoras de desarrollo del XHTML motivaron que, en
2004, varios agentes crearan el WHATWG (Web
Hypertext Application Technology Working Group), que
comenzó por su cuenta el desarrollo de una nueva
versión.
 El HTML5
El primer borrador oficial del HTML5 se publicó en
2008. La buena acogida que obtuvo, su alto grado de
compatibilidad, la presión del WHATWG y los varios
problemas del XHTML forzaron al W3C a retomar la
línea de estandarización del HTML, aceptando esta
propuesta e integrando en ella el XHTML.
Dicha aceptación ocurrió en 2011, publicándose como
especificación oficial en 2014. El WHATWG sigue con
su desarrollo, con el W3C como organismo supervisor.
HTML5 define dos variantes de sintaxis: una clásica, de
tipo HTML (HTML5), y la nueva XHTML que emplea
sintaxis XML, más potente pero compleja (XHTML5).
HTML5 incorpora nuevos elementos y atributos que
reflejan los usos y fórmulas de los modernos sitios web.
Algunos son técnicamente similares a anteriores
etiquetas, pero adquieren un significado semántico
orientado al desarrollo de la Web 3.0.
Aparte de las incorporaciones semánticas, la supresión
de elementos obsoletos hace recomendable la
actualización de los agentes de usuario (como los
navegadores) para aprovechar todo su potencial.
Otro factor a destacar es la inclusión de nuevos
elementos y APIs (Application Program Interface) para
el tratamiento de medios gráficos y audiovisuales,
interactividad avanzada y tecnologías de web dinámica.
La integración con otros lenguajes como CSS, PHP,
JavaScript o SQL se ha potenciado como parte del
desarrollo Web 3.0.
Estructura elemental en documentos HTML
Con independencia de la variante o versión, los
documentos expresados en lenguaje HTML presentan
siempre una estructura claramente definida, estable
desde la versión 3.2.
Dicha estructura contiene dos elementos o bloques
principales y de carácter obligatorio: la cabecera (head)
y el cuerpo (body).
La cabecera se sitúa en primer lugar y contiene meta
información acerca del documento y su contenido. Son
datos que interpreta, pero no presenta visualmente, el
navegador.
<head>
…
</head>

El cuerpo acota el contenido en sí mismo y es el bloque

que, finalmente, puede ser visualizado en pantalla
<body>
…
</body>

La definición del resto de la estructura y contenido es

completamente libre, adaptándose al planteamiento de
arquitectura de información establecido en cada caso.
Sin embargo, en HTML5 existen ciertos elementos
estructurales de carácter semántico que conviene
emplear para facilitar la indexación y recuperación de la
información. Los más comunes corresponden a
titulares, elementos de navegación y contenido,
diferenciado entre principal y secundario.
 Etiquetado en HTML
Las etiquetas (tags) en lenguaje HTML se emplean
para indicar la ubicación y las características o
propiedades (atributos) de un determinado elemento o
contenido.
Las etiquetas, entre otras formas de clasificación,
pueden dividirse en simples y dobles.
Estas últimas son las más comunes y van por parejas,
con una etiqueta de apertura y otra de cierre situadas
justamente antes y después del contenido afectado por
las mismas. Tienen un fundamento similar a ciertas
señales de tráfico, como las de prohibición de tramo.

Las etiquetas pareadas únicamente se diferencian por

la inclusión de una barra (/) antes del nombre de la de
cierre, así como la de posibles atributos, que
únicamente aparecen en la de apertura:
<h1 color=“#FF8000”>Titular principal</h1>

Las etiquetas simples, que no tienen equivalente de

cierre, también son denominadas elementos vacíos,
puesto que no enmarcan contenidos. Toda la
información relevante en ellas se presenta en forma de
atributos:
<img src=“foto.jpg” width=“800”>
 Etiquetado en HTML
Las etiquetas empleadas en HTML sirven a distintos
objetivos en la construcción y funcionamiento de una
página. Una tipología básica permite diferenciar entre
las siguientes categorías o tipos:
§ Metadatos y scripts: complementan el contenido
visible con datos necesarios para la operativa de la
página, el posicionamiento web o funcionalidades no
presentes en el lenguaje de marcas.
<link type=“text/css” rel="stylesheet" href=”estilo.css">

§ Estructurales: sirven para crear la estructura de la

página y, al tiempo, pueden dotarla de carácter
semántico.
<section><article id=“uno”> … </article></section>

§ Organización de contenido: son empleadas para

incorporar, organizar o presentar distintos tipos de
contenidos.
<p>Estos son mis principios. Si no le gustan, tengo otros.</p>

§ Semántica: utilizadas para dotar de semántica tanto a

contenidos como a la página.
<strong>Un texto resaltado no solo lo está visualmente, sino
también semánticamente</strong>

§ Formularios e interacción: permiten la incorporación

de contenidos con interactividad rica destinada al
usuario.
Cada una de estas grandes familias o categorías, a su
vez, puede presentar distintas subfamilias en función
del campo de aplicación específico de cada etiqueta.
 Sintaxis en HTML
Ejemplos de sintaxis:
Código:
<strong>Este es un texto en negrita.</strong>

Resultado:
Este es un texto en negrita.
Código:
<em>Este texto está resaltado en itálica o cursiva.</em>

Resultado:
Este texto está resaltado en itálica o cursiva.
Código:
<font face=“Tahoma”>Texto con una tipografía concreta.</font>

Resultado:
Texto con una tipografía concreta.
Código:
<font face=“Arial” color=“#1AAC53”>Tipografía y color.</font>

Resultado:
Tipografía y color.
Código:
<font face=“Verdana”>Una <b>palabra</b> destacada.</font>

Resultado:
Una palabra destacada.
Código:
<p>Esto es un párrafo con un salto de línea<br>forzado
mediante una etiqueta simple anidada.</p>

Resultado:
Esto es un párrafo con un salto de línea
forzado mediante una etiqueta simple anidada.
 Referencias
Historia del HTML:
El HTML, una idea en evolución.
http://www.maestrosdelweb.com/htmlhis/

Historia de HTML, un lenguaje de marca que ha

marcado historia.
https://www.genbetadev.com/desarrollo-web/historia-de-html-un-lenguaje-de-marca-que-ha-
marcado-historia/

Características, elementos y sintaxis HTML:

HTML.
https://developer.mozilla.org/es/docs/Web/HTML

HTML: básico.
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/HTML_basics