LND - 1º CFGS 02/10/2025

Documentación HTML

Enlace a la presentación

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 1

 Índice
Enlace a la presentación.................................................................................................... 1
Índice..................................................................................................................................2
HTML y la semántica web........................................................................................................3
Introducción a HTML.................................................................................................... 3
¿Qué es HTML?........................................................................................................... 3
¿Qué son las etiquetas HTML?....................................................................................3
La importancia de la semántica....................................................................................3
Estructura de una etiqueta HTML............................................................................................ 4
Categorías de etiquetas............................................................................................... 4
Etiquetas HTML............................................................................................................4
Atributos HTML............................................................................................................ 5
Atributo ID.................................................................................................................... 5
Atributo Class............................................................................................................... 5
Atributo Style................................................................................................................ 6
Contenido de la etiqueta.............................................................................................. 7
Comentarios HTML...................................................................................................... 7
Atributos comunes en HTML....................................................................................................7
Identificador: El atributo id............................................................................................ 8
Clases: El atributo class............................................................................................... 8
Estilos en línea: El atributo style.................................................................................. 9
¿Por qué no se recomienda usarlo siempre?.........................................................9
Cómo escribir Markdown......................................................................................................... 9
Títulos.........................................................................................................................10
Formatos de texto...................................................................................................... 10
Listas.......................................................................................................................... 10
Enlaces e imágenes................................................................................................... 10
Citas........................................................................................................................... 10
Código........................................................................................................................ 10
Bloques...................................................................................................................... 10
Tablas......................................................................................................................... 10
Estructura de un documental HTML.......................................................................................11
El DOCTYPE.............................................................................................................. 11
Etiqueta Head (metadatos).........................................................................................11
Etiqueta Body (cuerpo)...............................................................................................12
Etiquetas HTML obsoletas..................................................................................................... 13
Etiquetas obsoletas comunes.................................................................................... 13
Atributos obsoletos..................................................................................................... 13
Validación de errores HTML...................................................................................................13
Atributos de metadatos e idioma............................................................................................13
Atributos de metadatos.................................................................................................... 13
Atributo Title............................................................................................................... 13
Atributo Data-*............................................................................................................ 14
Atributo Accesskey..................................................................................................... 14

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 2

 Atributos de Idioma.......................................................................................................... 14

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 3

 HTML y la semántica web
Introducción a HTML
Cuando accedemos a una página web, lo que en realidad sucede es que nuestro navegador
solicita un archivo de texto al servidor donde esa web está guardada. Ese archivo no es
más que el código que da forma a la página. Aunque normalmente lo que vemos en pantalla
son elementos visuales (texto, imágenes, enlaces…), en cualquier momento podemos
acceder al código fuente para comprobar cómo está construido. El navegador no se limita a
mostrarnos el texto tal cual, sino que lo interpreta y transforma en la página que vemos.

¿Qué es HTML?
Ese archivo que interpreta el navegador está escrito en HTML (HyperText Markup
Language), un lenguaje de marcado que se basa en etiquetas. Gracias a estas etiquetas
podemos estructurar información de distinta naturaleza: desde texto y enlaces hasta
imágenes, vídeos o elementos más complejos.

¿Qué son las etiquetas HTML?

Las etiquetas son la base de HTML. Se escriben entre corchetes angulares y suelen
aparecer en pares, indicando el inicio y el fin de un contenido:

<etiqueta>Contenido</etiqueta>

Cada etiqueta tiene un propósito concreto. Por ejemplo:

●​ <p> se usa para párrafos.
●​ <strong> resalta una palabra o frase importante.​

Las etiquetas también pueden anidarse, es decir, incluirse unas dentro de otras, lo cual es
muy común en HTML.
Ejemplo:

<p>Dentro de este texto, esta <strong>palabra</strong> es más importante.</p>

La importancia de la semántica
Uno de los grandes avances de HTML5 fue dar más peso a la semántica: que el código
describa el significado de la información y no solo su aspecto visual. Esto significa que el
contenido debe escribirse en HTML y el diseño en CSS.
Por ejemplo, antes se utilizaba <b> para poner texto en negrita. Sin embargo, <b> solo
cambiaba la apariencia. En cambio, <strong> añade un significado: indica que ese
fragmento es más relevante. La apariencia (negrita, color, estilo) se controla después con
CSS.
Esto tiene varias ventajas:

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 4

 ●​ Separa el contenido (HTML) de la presentación (CSS).
●​ Hace que el navegador y otros sistemas (como lectores de pantalla o buscadores)
entiendan mejor la información.
●​ Facilita que robots como Googlebot puedan analizar e indexar el contenido de forma
más precisa.

Estructura de una etiqueta HTML

Como vimos antes, una página web no es más que un documento de texto que combina
información con etiquetas HTML. Estas etiquetas le indican al navegador qué tipo de
contenido debe mostrar y cómo interpretarlo.

Categorías de etiquetas
No se puede inventar una etiqueta al azar; HTML tiene un conjunto definido de ellas, cada
una con su función específica. Podemos agruparlas en varias categorías:
1.​ Textuales → se aplican a fragmentos de texto (ej: <p>, <strong>, <em>).
2.​ De agrupación → organizan bloques de contenido (ej: <div>, <section>).
3.​ Multimedia → muestran imágenes, audio o video (ej: <img>, <audio>, <video>).
4.​ Tablas → permiten representar datos en formato tabular (ej: <table>, <tr>, <td>).
5.​ Formularios → recogen información del usuario (ej: <form>, <input>,
<textarea>).
6.​ Interactivas → elementos con los que se puede interactuar (ej: <button>,
<details>).
7.​ Semánticas → aportan significado estructural (ej: <header>, <article>,
<footer>).
8.​ Scripting → etiquetas relacionadas con JavaScript (ej: <script>).

Etiquetas HTML
Las etiquetas HTML tienen una cierta estructura que explicamos a continuación. Observa
detenidamente su estructura:

La mayoría de las etiquetas tienen dos partes:

●​ Etiqueta de apertura: <etiqueta>.
●​ Etiqueta de cierre: </etiqueta>.
●​ Contenido: lo que va entre ambas.

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 5

Atributos HTML
Cada etiqueta tiene una tarea y un contenido para completar esa “misión”.
Los atributos son palabras clave de texto que cambian ligeramente el comportamiento de
la etiqueta.

<strong class="keyword">Contenido</strong>

Atributo Valor Descripción

id nombre Establece un identificador único. (SOLO una vez en el doc.)

class nombre Establece una clase. (se repite en el doc.)

style estilos CSS Aplica propiedades CSS a los elementos. del HTML

Atributo ID
Este atributo tiene unas normas:
●​ Nunca empezar por un número.
●​ Preferible que no tenga carácteres raros, acentuados o emojis.
●​ NO pueden existir DOS ELEMENTOS con el MISMO ID

Usamos los “id” cuando queremos ubicar zonas específicas que sabemos que no se
repetirán en la misma página.

Atributo Class
Las clases funcionan parecidas a los “id” pero son más flexibles. Contrariamente a los “id”,
pueden existir múltiples elementos con la misma [Link]:
<div id="pagina">
<div class=”anuncio”>Aquí irá un anuncio</div>
<div id="articulo">Aquí irá el contenido de texto del artículo</div>
<div class=”anuncio”>Aquí irá un anuncio</div>
</div>

Al tener la misma clase “anuncio” se pueden realizar acciones para todas las etiquetas de
ese tipo y no hacerlo de forma individual.

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 6

Una etiqueta puede tener múltiples clases diferentes, más específicas para encargarse de
detalles diferentes.

Ejemplo:
<div id="pagina">
<div class=”anuncio primero”>Aquí irá un anuncio</div>
<div id="articulo">Aquí irá el contenido de texto del artículo</div>
<div class=”anuncio último”>Aquí irá un anuncio</div>
</div>

Hay TRES clases, no son oraciones, es la clase “anuncio”, “primero” y “último”, esto lo que
nos permite es darle características visuales comunes a la clase “anuncio” y atributos que
dependen de la posición donde esté colocado “primero” y “último”.

Atributo Style
El atributo style se utiliza en las etiquetas HTML para “incrustar” código CSS directamente.
Comúnmente la forma más óptima sería tener un .css independiente al HTML, pero hay
situaciones donde puede ser necesario añadir ese estilo en la propia etiqueta.

Ejemplo:

<p style="background: indigo; color: white;">Esto es un mensaje con estilos CSS</p>

De todas formas, es mucho mejor tener nuestro .css aparte.

Existen 3 tipos de atributos dependiendo de sus valores:

●​ 1️⃣ Conjunto de valores: Atributos que sólo permiten valores específicos.
●​ 2️⃣ Valores libres: Atributos en los que puedes especificar un valor libremente.
●​ 3️⃣ Atributos booleanos: Atributos especiales que no definen valor. Si se omiten, se
consideran false, si se indican (sin valor) se consideran true.

Veamos un ejemplo de cada caso:

<audio <!-- 1️⃣ se permite auto, metadata y none

preload="auto"></audio> -->

<audio
src="audios/music.mp3"></audi <!-- 2️⃣ tienes libertad para escribir -->
o>

<audio muted></audio> <!-- 3️⃣ es verdadero si está presente -->

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 7

Contenido de la etiqueta
El contenido de una etiqueta no tiene por qué ser solo texto: puede contener otras etiquetas
en su interior. Esto se conoce como anidación.

<strong class="dato" lang="es">Contenido de texto</strong>

Una etiqueta puede tener múltiples atributos, como se ve en el ejemplo. El orden de los
atributos no importa, pero nunca se debe repetir el mismo atributo varias veces, ya que de
hacerlo sólo tendría efecto el último (sobreescribirá a los anteriores).

Aunque en el ejemplo anterior la etiqueta contiene un fragmento de texto, también puede

contener una o más etiquetas. Esto depende mucho de la etiqueta a utilizar, y se verá más
adelante en cada etiqueta.

Un posible ejemplo sería el siguiente:

<div id="pagina">
<strong>Contenido importante</strong>
</div>

Nótese que dentro de la etiqueta <div> vemos que no sólo hay un fragmento de texto, sino
que además incluye otra etiqueta, <strong> en este caso.

Comentarios HTML
Los comentarios permiten incluir notas en el código que no se mostrarán en la página, pero
sirven de guía al desarrollador.

<!-- Esto es un comentario de ejemplo que el navegador ignorará -->

Como se puede ver, para introducir estos comentarios en el código HTML, basta con
escribir los fragmentos de texto <!-- y --> entre el comentario en cuestión que
queramos incluir.

Atributos comunes en HTML

Ya sabemos que HTML se compone de etiquetas, y que cada una de ellas cumple un
propósito específico. Sin embargo, las etiquetas no son rígidas: podemos modificar su
comportamiento o añadir información extra mediante los atributos.
Un atributo es básicamente una palabra clave acompañada de un valor, que se coloca
dentro de la etiqueta de apertura. De esta forma, la etiqueta puede comportarse de manera
más personalizada o adaptarse a diferentes necesidades.

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 8

 Atributo Valor Descripción

Establece un identificador único a la etiqueta HTML. Sólo el

id nombre
mismo nombre una vez por documento.

Establece una clase (género) a una etiqueta HTML. Puede

class nombre
repetirse por documento.

Aplica propiedades CSS directamente al elemento HTML en

style estilos CSS
cuestión.

Identificador: El atributo id
En HTML podemos darle un nombre único a una etiqueta usando el atributo id. Piensa en
ello como ponerle una etiqueta identificadora a un objeto para poder reconocerlo fácilmente
después.
Ese identificador único tiene unas normas:
●​ No puede empezar con un número.
●​ Se escribe en minúsculas y separado con guiones si tiene varias palabras →
zona-comentarios.
●​ Mejor evitar acentos, símbolos raros o emojis.
●​ En un mismo documento no puede haber dos id iguales.

Veamos un ejemplo de código:

<div id="pagina">
<div>Aquí irá un anuncio</div>
<div id="articulo">Aquí irá el contenido de texto del artículo</div>
<div>Aquí irá un anuncio</div>
</div>

El detalle principal más importante de los id, es que no pueden existir dos con el mismo

✅
nombre en un mismo documento. Ejemplos correctos de id serían:

✅
●​ pagina → para todo el contenido de la página.

✅
●​ comentarios → para la sección de comentarios.
●​ header → para la parte de arriba con el logo.

El id se usa cuando necesitamos marcar algo que aparece solo una vez en toda la página.
Por ejemplo: el encabezado, el pie de página o una caja de artículo.
Es muy útil porque después podremos aplicarle estilos con CSS o localizarlo con JavaScript
de forma rápida y directa.

Clases: El atributo class

Las clases (class) funcionan parecido a los id, pero son mucho más flexibles.
Mientras que un id es como el DNI de un elemento (solo uno y único), una clase es más
bien como un grupo o categoría a la que puedes meter varios elementos.

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 9

 <div id="pagina">
<div>Aquí irá un anuncio</div>
<div id="articulo">Aquí irá el contenido de texto del artículo</div>
<div>Aquí irá un anuncio</div>
</div>

En este caso, tanto el primer bloque como el último tienen la clase anuncio.
Eso significa que podemos aplicarles los mismos estilos de CSS o la misma acción con
JavaScript a todos de golpe, sin tener que repetirnos.
Además, a diferencia de los id, una etiqueta puede tener múltiples clases diferentes, no
necesariamente una sola. Esto nos da más flexibilidad a la hora de crear clases específicas,
donde cada una se ocupa de un detalle diferente.

Estilos en línea: El atributo style

El atributo style sirve para poner CSS directamente dentro de una etiqueta HTML. A esto se
le llama estilo en línea (inline CSS).

<p style="background: indigo; color: white;">Esto es un mensaje con

estilos CSS</p>

Aquí el párrafo tiene un fondo morado y el texto en blanco, porque los estilos se escribieron
directamente en el atributo style.

¿Por qué no se recomienda usarlo siempre?

Aunque funciona, no es la mejor forma de trabajar con CSS, porque:
●​ Mezcla contenido (HTML) con diseño (CSS).
●​ Hace que el código sea más difícil de leer y mantener.
●​ Si quieres cambiar un estilo en muchos elementos, tienes que hacerlo uno por uno.​

Por eso lo ideal es escribir el CSS en un archivo aparte (ej: [Link]) y aplicarlo usando id
o class.

Cómo escribir Markdown

Markdown es un lenguaje muy simple para dar formato a texto. Se usa mucho en GitHub,
blogs, documentación o apuntes porque convierte símbolos fáciles en texto bonito (negritas,
listas, enlaces, etc.).
Piensa que es como escribir normal, pero con algunos atajos.

Títulos
# → título grande
## → subtítulo

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 10

### → nivel más pequeño

Formatos de texto
●​ Negrita → **texto**
●​ Cursiva → *texto*
●​ Tachado → ~~texto~~
●​ Código → `texto`

Listas
Viñetas:
-​ Item 1
-​ Item 2

Numeradas:​
1. Primero
2. Segundo

Enlaces e imágenes
Enlace: [texto](url)
Imagen: 

Citas
> Esto es una cita

Código
En línea: `código`

Bloques
```html
<p>Hola</p>
```

Tablas
| Col 1 | Col 2 |
|-------|-------|
|A |B |

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 11

 Estructura de un documental HTML
Para que el navegador lea correctamente un documento HTML debe estar bien formado,
debe tener una estructura inicial bien definida, con etiquetas obligatorias y características
recomendables. Para diferenciar la estructura necesitaremos TRES partes.

Un documento HTML bien formado consta de tres partes esenciales:

1.​ <!DOCTYPE html>:​
Indica al navegador que el documento es HTML5.
2.​ <html lang="es">:​
Elemento raíz que engloba todo el contenido del documento.
3.​ <head>:​
Contiene metadatos que no se muestran directamente en la página, pero son
esenciales para su funcionamiento.
4.​ <body>:​
Incluye todo el contenido visible de la página web: texto, imágenes, enlaces, etc.

El DOCTYPE
Es una etiqueta especial que escribimos para que el navegador sepa qué tipo de
documento HTML es. Es una etiqueta obligatoria.
Los navegadores leen la línea donde se indica qué tipo de documento primero antes de
“dibujar” la página web, así el navegador se puede adaptar.
En caso de no indicar el tipo de documento, el navegador entra en el quirk mode, esto
activa la retrocompatibilidad con páginas antiguas y así se procesarán las etiquetas HTML y
CSS.

Etiqueta Head (metadatos)

Esta cabecera no es visible para el usuario, es una etiqueta que usamos para insertar los
metadatos en la página web. Es el “lugar ideal” para incluir etiquetas que relacionen el
documento actual con otros documentos externos (.css o .js)
Ejemplos de metadatos:
●​ Título de la página web (etiqueta obligatoria)
●​ Descripción de la página
●​ Miniatura/Preview de la página
●​ Icono de la página

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 12

Etiqueta Body (cuerpo)
Todos los elementos visuales de una página se encuentran en el interior de la etiqueta. Se
abre inmediatamente después de cerrar la etiqueta </head>.

Etiquetas HTML obsoletas

Con la evolución de HTML5, muchas etiquetas han quedado obsoletas. Aunque aún pueden
funcionar en algunos navegadores, es recomendable evitarlas para garantizar la
compatibilidad futura y mantener buenas prácticas de desarrollo.

Etiquetas obsoletas comunes

●​ <center> → reemplazar con CSS: text-align
●​ <font> → reemplazar con CSS: font-family y color
●​ <b> y <i> (solo para estilo) → reemplazar con <strong> y <em>
●​ <strike> → reemplazar con <s>
●​ <marquee> → reemplazar con CSS: animation
●​ <big> → reemplazar con CSS: font-size

Atributos obsoletos
●​ align, valign → usar CSS: text-align, vertical-align
●​ bgcolor → usar CSS: background-color
●​ border, cellpadding, cellspacing → usar CSS: border, padding, border-spacing

Validación de errores HTML

¿Por qué es importante?
●​ Compatibilidad: Asegura que tu página se visualice correctamente en todos los
navegadores.
●​ Accesibilidad: Facilita la navegación a personas con discapacidades.

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 13

 ●​ SEO: Mejora el posicionamiento en buscadores.
●​ Rendimiento: Optimiza la carga y funcionamiento de la página.

Puedes validar tu código HTML de tres formas:

●​ Por URL: Introduce la dirección de tu página web.
●​ Por archivo: Sube el archivo .html desde tu computadora.
●​ Por código: Pega directamente el código HTML en el formulario.

Tipos de errores comunes

●​ Sintaxis: Etiquetas mal cerradas o mal escritas.
●​ Accesibilidad: Falta de atributos como alt en imágenes.
●​ SEO: Ausencia de etiquetas <title> o <meta>.
●​ Rendimiento: Uso excesivo de imágenes sin optimizar.
●​ Usabilidad: Formularios sin etiquetas <label>.

Atributos de metadatos e idioma

Atributos de metadatos
Estos atributos permiten añadir información adicional (más allá del contenido visual) a los
elementos HTML:

Atributo Valor esperado Función Principal

title texto Muestra un mensaje emergente al pasar

el ratón sobre el elemento.

data-* cualquier valor personalizado Permite definir metadatos personalizados

para el elemento (útil en JS o CSS)

accesskey letra o tecla Define un atajo de teclado para activar

ese elemento.

Atributo Title
Se usa mucho en imágenes, enlaces u otros elementos para dar un mensaje auxiliar.

Atributo Data-*
Sirve para guardar información que luego puede recuperarse mediante JavaScript con
[Link] o con getAttribute().

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 14

Atributo Accesskey
Permite activar elementos mediante combinaciones de teclas (ej. ALT+letra). Su
implementación puede variar según navegador y sistema operativo, lo que lo hace poco
confiable.

Atributos de Idioma
Estos atributos permiten especificar el idioma del contenido, si debe traducirse y la dirección
del texto.

Atributo Valores Posibles Función Principal

lang código ISO (”es” o “en”) Indica el idioma del

contenido del elemento
(obligatorio en HTML)

translate yes/no Indica si el contenido debe

traducirse automáticamente.

dir ltr/rtl Especifica la dirección del

texto.

Christhian Agustín, Juan Jose Jimenez y Hailie Mountain​ ​ ​ ​ ​ 15