2024

Lenguaje de Marcas y
Sistemas de Gestión de
la Información (LMSGI)

Fecha última revisión:

12/09/2024

JCCA

[UD 2.1: HTML

Conceptos y

fundamentos básicos ]
________________________________________

Utilización de lenguajes de marcas en entornos Web – Parte I.

UD2.1: HTML I LMSGI

Sumario
CONCEPTOS........................................................................................................................................ 3
1. HTML. Introducción........................................................................................................................ 3
2. Estandar W3C................................................................................................................................. 3
3. Navegadores. Evolución..................................................................................................................3
4. Versiones de HTML y de XHTML.....................................................................................................4
5. XHTML: diferencias sintácticas y estructurales con HTML..............................................................5
6. Ventajas e inconvenientes del XHTML sobre HTML........................................................................6
7. Herramientas de diseño Web HTML...............................................................................................6
FUNDAMENTOS.................................................................................................................................. 7
1. Estructura de una página Web........................................................................................................7
1.1 Espacios en blanco...................................................................................................................8
1.2 Comentarios.............................................................................................................................9
2. Metadatos...................................................................................................................................... 9
3. Identificación de etiquetas y atributos......................................................................................... 10
3.1. Clasificación de los atributos comunes según su funcionalidad............................................10
4. Elementos..................................................................................................................................... 12
5. Herramientas de validación..........................................................................................................13
5.1 Editores que incluyen validadores..........................................................................................13
5.2 Validador del W3C y HTML5 validator....................................................................................14
Bibliografía / Webgrafía....................................................................................................................15

2
UD2.1: HTML I LMSGI

CONCEPTOS
1. HTML. Introducción.

HTML (HyperText Markup Language - Lenguaje de Marcas de HiperTexto)

Definiéndolo de forma sencilla, "HTML es lo que se utiliza para crear todas las páginas Web de
Internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas
Web.
Uso del lenguaje HTML:
• Los diseñadores utilizan el lenguaje HTML para crear sus páginas web.
• Los programas que utilizan los diseñadores generan páginas escritas en HTML.
• Los navegadores que utilizamos los usuarios muestran las páginas web después de leer su
contenido HTML.

Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño, es muy fácil
de aprender y escribir por parte de las personas.

En el siguiente enlace podemos ver la historia de HTML

2. Estandar W3C

El World Wide Web Consortium (W3C) es una comunidad internacional que desarrolla estándares
que aseguran el crecimiento de la Web a largo plazo

El W3C desarrolla especificaciones técnicas y directrices a través de un proceso que ha sido

diseñado para maximizar el consenso sobre el contenido de un informe técnico, de forma que se
pueda asegurar la alta calidad técnica y editorial, así como obtener un mayor apoyo desde el W3C
y desde la comunidad en general

3. Navegadores. Evolución

Un navegador, navegador Web (del inglés, Web browser) es un programa que permite visualizar la
información que contiene una página Web (ya esté está alojada en un servidor dentro de la World
Wide Web o en uno local).
El navegador interpreta el código, HTML generalmente, en el que está escrita la página Web y lo
presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros
lugares de la red mediante enlaces o hipervínculos.
La funcionalidad básica de un navegador Web es permitir la visualización de documentos de texto,
posiblemente con recursos multimedia incrustados. Tales documentos, comúnmente denominados
páginas Web, poseen hipervínculos que enlazan una porciónde texto o una imagen a otro
documento, normalmente relacionado con el texto o la imagen.

3
UD2.1: HTML I LMSGI

Los navegadores más extendidos y populares pueden ser los siguientes:

En el siguiente enlace podemos ver su evolución.

4. Versiones de HTML y de XHTML

El HTML fue desarrollado originalmente por Tim Bernes-Lee pero debido al rápido crecimiento de
la web, surgió la necesidad de crear un estándar para que tanto los programadores como los
navegadores pudieran basarse en unas mismas normas para escribir HTML. Cada versión de HTML
establece unas normas respecto a cuáles son las etiquetas válidas y cómo se deben escribir.

La siguiente tabla resume la evolución de HTML:

En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el

HTML primer estándar oficial de HTML, es decir, el HTML 1.0 no existió como estándar.
2.0 HTML 2.0 no soportaba tablas. Se simplificaba al máximo la estructura del
documento para agilizar su edición, donde la declaración explícita de los
elementos body, html y head es opcional.

La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML

HTML publicada por el W3C (Consorcio internacional). Esta revisión incorporó los
3.2 últimos avances de las páginas web desarrolladas hasta 1996, como applets de
Java y texto que fluye alrededor de las imágenes.

La última especificación oficial de HTML se publicó en diciembre de 1999 y se

denomina HTML 4.01. Desde la publicación de HTML 4.01, el W3C se centró en el
desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas
Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C
en HTML y decidieron organizarse en una nueva asociación llamada WHATWG
HTML
(Web Hypertext Application Technology Working Group) que comenzó el
4.01
desarrollo del HTML 5, cuyo primer borrador oficial se publicó en enero de 2008.
Debido a la fuerza de las empresas que forman el grupo WHATWG y a la
publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió
retomar la actividad estandarizadora de HTML, dentro del cual decidió integrar el
XHTML.

4
UD2.1: HTML I LMSGI

El consorcio internacional W3C, después de una evolución de varios años, liberó

HTML el HTML 5 como estándar oficial a finales de octubre de 2014. HTML 5 incorpora
5, nuevos elementos no contemplados en HTML 4.01. Hay diversos cambios
HTML respecto a HTML 4.01. Hay nuevas etiquetas, se introduce la posibilidad de
5.1, introducir audio y video de forma directa en la web sin necesidad de plugins o
HTML complementos en los navegadores, y otras novedades. El W3C irá lanzando
5.2 progresivamente nuevas evoluciones del HTML 5.

XHTML es a XML como HTML es a SGML. Es decir, XHTML es un lenguaje de marcado que es
similar al HTML, pero con un sintaxis más estricta. Dos versiones de XHTML han sido terminadas
por el W3C:
• XHTML 1.0 es HTML4 reformulado como una aplicación XML, y es compatible con versiones
anteriores de HTML en casos limitados.
• XHTML 1.1 es una versión modular de XHTML que no es compatible con versiones
anteriores de HTML.
• Para entender mejor la Modularidad en XHTML
• XHTML Básico Es una versión simplificada pensada para los nuevos dispositivos de acceso a
internet, como telefonos, PDAs, y otros.
Actualmente se encuentra en desarrollo XHTML 2, con cambios significativos en el vocabulario de
elementos

5. XHTML: diferencias sintácticas y estructurales con HTML1.

La diferencia fundamental entre HTML y XHTML está en el cumplimiento que exigen de XML. Así
XHTML es, en definitiva, un dialecto de XML que, por lo tanto, cumple sus reglas de forma
absoluta. De tal manera que cumple las reglas del XML bien formado:

• Los elementos se escriben en minúsculas obligatoriamente

• Todo elemento se debe cerrar y además se cierra primero el último que se abrió. Los
elementos vacíos también hay que cerrarles (por ejemplo se escribe <br/> para el salto
de línea)
• Todos los valores de los atributos van entrecomillados
• Todo atributo debe de tener un valor
• Hay un único elemento raíz (html).
• Los símbolos <, >, & y comillas deben utilizar entidades y no escribirse tal cual

Puedes ampliar esta información en los siguientes enlaces: Diferencias y Etiquetas

1 En este módulo trabajaremos con HTML5, pero cumpliendo las restricciones descritas en este punto, es decir
hablaremos de HTML5 bien formado ("XHTML5").

5
UD2.1: HTML I LMSGI

6. Ventajas e inconvenientes del XHTML sobre HTML

Las principales ventajas del XHTML sobre otros formatos son:

• Compatibilidad parcial con navegadores antiguos: la información se visualiza, aunque

sin formato. Apuntar que el XHTML 1.0 fue diseñado expresamente para ser mostrado en
navegadores que soportan HTML de base.
• Un mismo documento puede adoptar diseños radicalmente distintos en diferentes
aparatos, pudiendo incluso escogerse entre varios diseños para un mismo medio.
• Facilidad de edición directa del código y de mantenimiento.
• Formato abierto, compatible con los nuevos estándares que actualmente está
desarrollando el W3C como recomendación para futuros agentes de usuario o
navegadores.
• Los documentos escritos conforme a XHTML 1.0 pueden potencialmente presentar
mejor rendimiento en las actuales herramientas web que aquellos escritos conforme a
HTML.

Inconvenientes:

• Algunos navegadores antiguos no son totalmente compatibles con los estándares, lo

que hace que las páginas no siempre se muestren correctamente. Esto cada vez es
menos problemático, al ir cayendo en desuso.
• Muchas herramientas de diseño web aún no producen código XHTML correcto.

Sin embargo HTML no es tan estricto y permite que:

• Los valores de los atributos no tienen que ir entrecomillados (a no ser que tengan
espacios en blanco)
• No todos los atributos tienen valores. Es decir no siempre se usa atributo=valor hay
atributos que no tienen valor
• Las etiquetas HTML se pueden escribir como queramos, en mayúsculas o minúsculas
• Las etiquetas vacías no es obligatorio cerrarlas (se puede escribir <br>)

7. Herramientas de diseño Web HTML

Para escribir HTML bastaría con un editor de texto plano como el bloc de notas de Windows o
gedit de Linux. Pero los resultados se deben mostrar mediante un navegador o aún mejor, probar
en varios navegadores para comprobar problemas (ya que hay elementos HTML que no son
compatibles con todos los navegadores) .

Sin embargo lo ideal es trabajar mediante editores de código capaces de entender el lenguaje y
colorear de diferente manera las etiquetas HTML para distinguirlas del texto normal y así trabajar
mejor. Algunos populares son Notepad++ o Sublime Text.

6
UD2.1: HTML I LMSGI

Los entornos de edición en XML como Oxygene también permiten trabajar en HTML y de hecho en
el caso de utilizar XHTML son una gran opción.

Otra forma es trabajar con editores WYSIWYG (What You See Is What You Get, lo que se ve es lo
que se obtiene), en los que se edita el documento al estilo de los procesadores de texto. De modo
que se ve el resultado sin tocar el código y es el editor el que traduce el resultado al código
correspondiente. Aunque en realidad no es posible un WYSIWYG real ya que los navegadores
muestran el resultado de diferente forma. Un ejemplo sería DreamWeaver.

FUNDAMENTOS

1. Estructura de una página Web

La estructura básica de una página web cambia según si hablamos de XHTML o de HTML. Como
son tantas las posibilidades, en el presente documento hablaremos sólo de las dos versiones más
populares en el momento de escribir estos apuntes que son XHTML 1.1 y HTML5. Como ambas
representan muy bien tanto a XHTML como a HTML respectivamente, sería fácil descubrir como es
el esqueleto de una página web en cualquier otra versión

La estructura de una página HTML 5 que esté escrita en español es:

• <!DOCTYPE>: declaración de tipo de documento (DTD) añade reglas que permiten

definir el documento con sus reglas y atributos, permitiendo de esta manera comprobar
si es válido. Para saber mas
• <html>: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o
contenido puede colocarse antes o después de la etiqueta <html> (con una sola
excepción: antes DOCTYPE). En el interior de la etiqueta <html> se definen la cabecera y
el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se
ignora.
• <head>: delimita la parte de la cabecera del documento. La cabecera contiene
información sobre el propio documento HTML, como por ejemplo su título y el idioma

7
UD2.1: HTML I LMSGI

de la página. Los contenidos indicados en la cabecera no son visibles para el usuario,

con la excepción de la etiqueta <title>, que se utiliza para indicar el título del
documento y que los navegadores lo visualizan en la parte superior izquierda de la
ventana del navegador.
• <body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos los
contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas).

• El lenguaje se indica sólo con el atributo lang del elemento html.

• La etiqueta meta que advierte sobre el sistema de codificación del texto de la misma. En
el código anterior se utiliza el más recomendable, que es UTF-8.

Un ejemplo sencillo:

1.1 Espacios en blanco

El texto dentro de las páginas web no mantiene los espacios en blanco, solo se considera el
primero; no se tienen en cuenta los siguientes.

La entidad &nbsp; permite añadir un espacio en blanco obligatorio. Por lo que si, por ejemplo, la
escribimos cuatro veces seguidas, estaremos dejando cuatro espacios en blanco que el navegador
sí tendrá en cuenta.

Si por ejemplo, escribimos el

siguiente código:

8
UD2.1: HTML I LMSGI

El resultado en un navegador sería el siguiente:

Esta es mi primera página Web escrita en HTML (no conserva los espacios en blanco ni los
saltos de línea)

1.2 Comentarios

Para insertar un comentario solo necesitamos encerrarlo entre estos dos símbolos o etiquetas:
<!-- Este es el símbolo indica el inicio de comentario
--> Con esto se termina el comentario

Por ejemplo:
<!-- esto es un comentario -->

Los comentarios no aparecen en la página cuando la visita alguien. En realidad no hacen nada de
nada de nada. Solo sirven para que el autor de la web u otro desarrollador, cuando mire el código,
sepa qué es cada trozo de código. Es decir, podemos insertar comentarios en alguna parte del
código HTML de nuestra página para saber qué hace ese trozo.

2. Metadatos

Una de las partes importantes de la metainformación de la página son los metadatos, que
permiten incluir cualquier información relevante sobre la propia página.

Las etiquetas meta o meta tags encabezan un documento HTML y suministran información
codificada a navegadores y motores de búsqueda sobre una página web. Los metadatos son
invisibles para el usuario y se encargan de añadir información para facilitar el análisis de los
archivos HTML y la gestión del contenido de una página web. Los meta tags de HTML siguen a
menudo la misma construcción: en primer lugar se define un elemento y en segundo lugar se
asigna un contenido. De esto resulta el siguiente esquema:

<meta name="Nombre del elemento" content="Contenido asignado"/>

Ejemplos:

<meta name="author" content="Cesar" />

<meta name="generator" content="Sublime Text " />
<meta name="description" content="Página sobre HTML" />

Puedes ampliar esta información en el siguiente enlace

9
UD2.1: HTML I LMSGI

3. Identificación de etiquetas y atributos

Un documento HTML está formado por etiquetas y atributos.

Al igual que en XML las etiquetas pueden ser de apertura, <etiqueta>, o de cierre, </etiqueta>.
Una de las diferencias con XML es que la cantidad de etiquetas de HTML está limitada a aquellas
que están definidas por el lenguaje.

Aunque HTML define una gran cantidad de etiquetas, estas no son suficientes para crear páginas
complejas ya que la definición completa de ciertos elementos, como las imágenes y los enlaces,
requiere información adicional. Como no es posible crear una etiqueta por cada elemento
diferente, se añade la información adicional a las etiquetas mediante los atributos dando lugar a
los elementos.

Para cada uno de los atributos hay definido un conjunto de valores que se le puede asignar, si el
valor de un atributo no es válido, el navegador le ignora.

Cada una de las etiquetas HTML define los atributos que puede utilizar, aunque algunos de ellos
son comunes a muchas etiquetas.

3.1. Clasificación de los atributos comunes según su funcionalidad

• Atributos básicos: Se pueden usar en casi todas las etiquetas HTML.

Atributo Descripción
name = "texto" Permite asignar el nombre "texto" a un objeto HTML
Asigna un título a un elemento HTML, mejorando así la accesibilidad.
title = "texto" Dicho título es mostrado por los navegadores cuando el usuario pasa el
ratón por encima del elemento. Es especialmente útil con los elementos:
a, link, img, object, abbr y acronym
Permite identificar al elemento HTML sobre el que se aplica de forma
única mediante el identificador "texto". Sólo es útil cuando se trabaja
id = "texto" con CSS y con Javascript.
No pueden empezar por números y sólo puede contener letras,
números, guiones medios y/o guiones bajos.
style = "texto" Permite aplicar al elemento HTML el estilo "texto" directamente.
Permite aplicar al elemento HTML el estilo "texto" definido en las CSS.
class = "texto" No pueden empezar por números y sólo puede contener letras,
números, guiones medios y/o guiones bajos.

10
UD2.1: HTML I LMSGI

• Atributos para internacionalización: Los utilizan las páginas que muestran sus contenidos
en varios idiomas o aquellas que quieren indicar de forma explícita el idioma de sus
contenidos

Atributo Descripción
Indica la dirección del texto por lo que sólo puede tomar dos valores:

dir ltr (left to right) de izquierda a derecha. Es el valor por defecto.

rtl (right to left) de derecha a izquierda.

Especifica el idioma del elemento mediante un código predefinido. Los

posibles valores de este atributo se encuentran en el documento RFC
1766, algunos de los valores posibles son:

lang = "codigo" Código Idioma Código Idioma

en Inglés (Gran Bretaña) es Español
en-US Inglés americano fr Francés
ja Japones fr-CA Francés de Canada

xml:lang = Especifica el idioma del elemento mediante un código definido según la

"codigo" recomendación RFC 1766.

En las páginas XHTML, el atributo xml:lang tiene más prioridad que lang y es obligatorio
incluirlo siempre que se incluye el atributo lang.

• Atributos de eventos y atributos para los elementos que pueden obtener el foco: Sólo se
utilizan en las páginas web dinámicas creadas con JavaScript. Como no es nuestro objetivo
no lo vamos a contemplar.

11
UD2.1: HTML I LMSGI

4. Elementos

Un elemento HTML está formado por:

• Una etiqueta de apertura.

• Cero o más atributos.
• Texto encerrado por la etiqueta. Opcional, no todas las etiquetas pueden encerrar texto.
• Una etiqueta de cierre.

Sintaxis:

La sintaxis básica para un elemento no vacío:

<nombre_elemento atributo1=”valor1” atributo2=”valor2” .. atributo_n=”valor_n”>

contenido del elemento
</nombre_elemento>

La sintaxis para un elemento vacío:

<nombre_elemento atributo1=”valor1” atributo2=”valor2” …. atributo_n=”valor_n” />

Esquema de las partes que componen un elemento HTML:

Según el modo en que ocupan el espacio disponible en la página los elementos pueden ser de dos
tipos:

• Elementos en línea. Sólo ocupan el espacio necesario para mostrar sus contenidos. Su
contenido puede ser texto u otros elementos en línea.

• Elementos de bloque. Los elementos de bloque siempre empiezan en una nueva línea y
ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no
lleguen hasta allí. Su contenido puede ser texto, elementos en línea u otros elementos de
bloque.

Existen elementos cuyo comportamiento puede ser en línea o de bloque según las circunstancias.

12
UD2.1: HTML I LMSGI

El siguiente ejemplo muestra la diferencia entre ambos comportamientos:

El resultado visto en un navegador sería:

5. Herramientas de validación

La validación es el proceso que asegura que un documento escrito en un determinado lenguaje

(por ejemplo XHTML) cumple con las normas y restricciones de ese lenguaje.

El proceso de validación consiste en probar página a página si su código HTML pasa la prueba de
validación. Los validadores son las herramientas que se utilizan para validar cada página. Algunos
editores de páginas web incluyen sus propios validadores y el organismo W3C ha creado una
herramienta gratuita para la validación de las páginas

5.1 Editores que incluyen validadores

Si utilizamos, por ejemplo Dreamweaver para crear las páginas web, el validador se encuentra
integrado en la propia herramienta.

13
UD2.1: HTML I LMSGI

5.2 Validador del W3C y HTML5 validator

La validación de las páginas web no requiere el uso de editores avanzados como Dreamweaver, ya
que el organismo W3C ha creado una herramienta que se puede utilizar gratuitamente a través de
Internet: http://validator.w3.org/

Aunque la herramienta sólo está disponible en inglés, su uso es muy intuitivo:

• Validate by URI, permite escribir la URL de la página que se quiere validar. Esta opción es la
más sencilla para validar las páginas que ya están publicadas en Internet.
• Validate by File Upload, muestra un formulario mediante el que se puede subir el archivo
HTML correspondiente a la página que se quiere validar. Esta opción es la mejor para
validar las páginas web que has desarrollado y que aún no has publicado en Internet.
• Validate by Direct Input, permite validar código HTML de forma directa. Se trata de la
opción más rápida para validar trozos o páginas HTML completas. Esta opción es la mejor
cuando estás desarrollando las páginas y quieres asegurarte que el código sea válido.
Otro validador de características similares es https://html5.validator.nu/

Práctica 1.

14
UD2.1: HTML I LMSGI

Bibliografía / Webgrafía

• Materiales formativos de FP Online del Ministerio de Educación, Cultura y Deporte.

• Lenguaje de marcas y sistemas de gestión de información. RAMA. Javier S. Zurdo
• Lenguaje de marcas y sistemas de gestión de información. Garceta. Juan Manuel Castro
• Lenguaje de marcas y sistemas de gestión de información. Paraninfo. Fernando Paniagua
• https://uniwebsidad.com/libros/xhtml?from=librosweb
• https://www.w3c.es/
• https://www.aprenderaprogramar.com/
• https://es.wikipedia.org/wiki/XHTML

15