+
HTML
Capítulo 3
Lenguajes de Marcas y Sistemas de Gestión de Información
Curso 2025/2026
+ 2
Capítulo 3:TEXTO
1. Introducción
2. Estructurar
3. Marcado Básico de Texto
4. Marcado Avanzado de Texto
5. Marcado Genérico de Texto
6. Espacios en Blanco y Nuevas Líneas
7. Codificación de Caracteres
+ 3
1. INTRODUCCIÓN
Es muy importante conocer los elementos y etiquetas que define HTML para el
manejo del texto. HTML define etiquetas para estructurar el contenido en
secciones y párrafos y define otras etiquetas para marcar elementos importantes
dentro del texto.
La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original
definiendo sus párrafos, titulares y títulos de sección:
+ 4
1. INTRODUCCIÓN
Estructurar un texto simple consiste en indicar las diferentes zonas o secciones
que componen el texto. Los textos estructurados utilizan etiquetas para delimitar
cada párrafo y títulos de sección para delimitar cada una de las secciones que
forman el texto.
Una vez definida la estructura básica, el siguiente paso consiste en marcar los elementos
dentro del propio texto:
+ 5
2. ESTRUCTURAR
La forma más sencilla de estructurar un
texto consiste en separarlo por
párrafos.
HTML permite incluir títulos que
delimitan cada una de las secciones.
+ 2.1. PÁRRAFOS 6
Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que
permite definir los párrafos que forman el texto de una página:
<html>
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
<body>
<p>Este es el texto que forma el primer párrafo de la
página.
Los párrafos pueden ocupar varias líneas y el navegador se encarga
de ajustar su longitud al tamaño de la ventana.</p>
<p>El segundo párrafo de la página también se define
encerrando
su texto con la etiqueta p. El navegador también se encarga de
separar automáticamente cada párrafo.</p>
</body>
</html>
+ 2.1. PÁRRAFOS 7
+ 2.1. PÁRRAFOS 8
La siguiente tabla recoge la definición formal de la etiqueta <p>:
Los párrafos son elementos de bloque, por lo que siempre ocupan toda
la anchura de la ventana del navegador. No tienen atributos específicos,
pero sí se les pueden asignar los atributos comunes de HTML básicos,
de internacionalización y de eventos.
+ 2.2. SECCIONES 9
Las páginas HTML suelen tener una estructura más compleja que la que
se puede crear solamente mediante párrafos. De hecho, es habitual que
las páginas se dividan en diferentes secciones jerárquicas.
Los títulos de sección se utilizan para delimitar el comienzo de cada
sección de la página. HTML permite crear secciones de hasta seis
niveles de importancia. Aunque una página puede definir cualquier
número de secciones, sólo puede incluir seis niveles jerárquicos.
Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>,
<h4>, <h5> y <h6>, siendo la etiqueta <h1> la de mayor importancia
hasta la etiqueta <h6> es la que se utiliza para delimitar las secciones
menos importantes de la página.
+ 2.2. SECCIONES 10
Las etiquetas de título de sección son elementos de bloque y no tienen
atributos específicos.
Las etiquetas <h1>, ..., <h6> definen títulos de sección, no secciones
completas. No es necesario encerrar los contenidos de una sección con
su etiqueta correspondiente. Solamente se debe encerrar con las
etiquetas <h1>,..., <h6> los títulos de cada sección.
+ 2.2. SECCIONES 11
<html>
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
<body>
<h1>Titular de la página</h1>
<p>Párrafo de introducción...</p>
<h2>La primera sub-sección</h2>
<p>Párrafo de contenido...</p>
<h2>Otra subsección</h2>
<p>Más párrafos de contenido...</p>
</body>
</html>
+ 2.2. SECCIONES 12
Los navegadores asignan de
forma automática el tamaño del
título de cada sección en función
de su importancia.
Los títulos de sección <h1> se
muestran con el tamaño de letra
más grande, mientras que los
títulos de sección <h6> se
visualizan con un tamaño de letra
muy pequeño, adecuado para el
nivel jerárquico de menor
importancia.
+ 2.2. SECCIONES 13
El aspecto que los
navegadores aplican
por defecto a los títulos
de sección se puede
modificar utilizando las
hojas de estilos de CSS.
La siguiente muestra el
tamaño por defecto con
el que los navegadores
muestran cada titular.
+ 14
3. MARCADO BÁSICO DE TEXTO
Los textos habituales están formados por elementos
como palabras en negrita o cursiva, anotaciones y
correcciones, citas a otros documentos externos,
etc...
HTML proporciona etiquetas para marcar cada uno
de los diferentes tipos de texto.
Las etiquetas más utilizadas para marcar texto se
encuentran <em> y <strong>.
+ 15
3. MARCADO BÁSICO DE TEXTO
La etiqueta <em> marca un texto indicando que su importancia es mayor que
la del resto del texto. La etiqueta <strong> indica que un determinado texto es
de la mayor importancia dentro de la página.
+ 16
3. MARCADO BÁSICO DE TEXTO
<html>
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
<body>
<p>El lenguaje HTML permite marcar algunos segmentos
de texto
como <em>muy importantes</em> y otros segmentos como
<strong>los
más importantes</strong>.</p>
</body>
</html>
+ 17
3. MARCADO BÁSICO DE TEXTO
Por defecto, los navegadores muestran los elementos <em> en cursiva para hacer
evidente su importancia y muestran los elementos <strong> en negrita, para
indicar que son los más importantes:
+ 18
3. MARCADO BÁSICO DE TEXTO
HTML también permite marcar de forma adecuada las modificaciones realizadas
en el contenido de una página. HTML permite indicar de forma clara el texto
que ha sido eliminado y el texto que ha sido añadido a un determinado texto
original.
+ 19
3. MARCADO BÁSICO DE TEXTO
Las dos etiquetas cuentan con los mismos atributos específicos. El atributo cite
se emplea para indicar la dirección de un documento externo en el que se
puede encontrar más información relacionada con la inserción o el borrado de
texto.
El atributo datetime puede utilizarse para indicar la fecha y la hora en la que se
realizó cada cambio.
+ 20
3. MARCADO BÁSICO DE TEXTO
<html>
<head>
<title>Ejemplo de etiqueta ins y del</title>
</head>
<body>
<h3>Ejemplo de etiqueta ins y del</h3>
<p>El HTML, acrónimo inglés de Hyper Text Markup Language
(lenguaje de <del datetime="20091025"
cite="[Link]
ml">marcado de hipertexto</del> <ins datetime="20091026"
cite="[Link] marcas
hipertextuales</ins>) es un lenguaje de marcación diseñado para
estructurar textos y presentarlos en forma de hipertexto.</p>
</body>
</html>
+ 21
3. MARCADO BÁSICO DE TEXTO
❑ El texto eliminado (<del>) se muestra tachado de forma que el usuario
pueda identificarlo fácilmente como un texto que formaba parte del texto
original y que ya no tiene validez.
❑ El texto insertado (<ins>) se muestra subrayado, de forma que el usuario
pueda identificarlo como un texto nuevo que no formaba parte del texto
original.
+ 22
3. MARCADO BÁSICO DE TEXTO
En muchos tipos de páginas es habitual citar literalmente un texto
externo. HTML define la etiqueta <blockquote> para incluir citas
textuales en las páginas web:
+ 23
3. MARCADO BÁSICO DE TEXTO
<html>
<head>
<title>Ejemplo de etiqueta blockquote</title>
</head>
<body>
<p>Según el W3C, el valor del
atributo <em>cite</em> en las etiquetas
<strong>blockquote</strong> tiene el siguiente
significado:</p>
<blockquote
cite="[Link]
valor de este atributo es una dirección URL que indica el
documento original de la cita."</blockquote>
</body>
</html>
+ 24
3. MARCADO BÁSICO DE TEXTO
Para indicar de forma clara que el texto es una cita externa, los navegadores
muestran por defecto el texto del elemento <blockquote> con un margen en la
parte izquierda.
+ 4. MARCADO AVANZADO DE 25
TEXTO
Las páginas y documentos más avanzados suelen incluir otros elementos
importantes que se deben marcar de forma adecuada. La etiqueta <abbr> marca
las abreviaturas de un texto y la etiqueta <acronym> se emplea para marcar las
siglas o acrónimos del texto.
+ 26
4. MARCADO AVANZADO DE
TEXTO
<html>
<head>
<title>Ejemplo de etiqueta acronym</title>
</head>
<body>
<p>El lenguaje <acronym title="HyperText Markup
Language">HTML</acronym> es estandarizado
por el <acronym title="World Wide Web
Consortium">W3C</acronym>.</p>
</body>
</html>
+ 27
4. MARCADO AVANZADO DE
TEXTO
Los navegadores muestran por defecto un borde inferior punteado para todos los
elementos <abbr> y <acronym>. Al posicionar el puntero del ratón sobre la palabra
subrayada, el navegador muestra un pequeño recuadro (tooltip) con el valor del atributo
title:
+ 28
4. MARCADO AVANZADO DE
TEXTO
En ocasiones resulta útil incluir la definición de una palabra extraña. HTML
incluye la etiqueta <dfn> para proporcionar al usuario la definición de todas las
palabras para las que se considere apropiado.
+ 29
4. MARCADO AVANZADO DE
TEXTO
El siguiente ejemplo muestra cómo se utiliza la etiqueta
<dfn> para incluir la definición completa de una palabra
cuyo uso no es habitual fuera de los ámbitos médicos y
psicológicos:
<p>Con estos síntomas, podría tratarse de un
caso de <dfn title="Imagen o sensación
subjetiva, propia de un sentido, determinada
por otra sensación que afecta a un sentido
diferente">sinestesia</dfn></p>
+ 4. MARCADO AVANZADO DE 30
TEXTO
HTML incluye una etiqueta que se puede utilizar para marcar un texto
como una citación:
El elemento <cite> marca el autor de la cita y <blockquote> marca el
contenido de la propia cita. Ej: <blockquote> encierra el contenido de una frase
célebre y <cite> encierra el nombre de su autor:
Como dijo <cite>Mahatma Gandhi</cite>:
<blockquote>Vive como si fueras a morir mañana y aprende como
si fueras a vivir para siempre.</blockquote>
+ 31
5. MARCADO GENÉRICO DE
TEXTO
El estándar HTML/XHTML incluye numerosas etiquetas para
marcar los contenidos de texto. No obstante, la infinita
variedad de posibles contenidos textuales hace que no sean
suficientes. Por ejemplo:
Importante: si quiere ponerse en contacto con la empresa
ACME, puede hacerlo en el teléfono 900 555 555 o a
través de la dirección de correo electrónico
contacto@[Link]
+ 32
5. MARCADO GENÉRICO DE
TEXTO
El texto del ejemplo anterior contiene elementos de texto importantes, siglas,
números de teléfono y direcciones de correo electrónico. HTML define la
etiqueta <strong> para marcar los elementos importantes y <acronym>
para marcar las siglas:
<strong>Importante</strong>: si quiere ponerse en contacto
con la empresa <acronym>ACME</acronym>, puede hacerlo en el
teléfono 900 555 555 o a través de la dirección de correo
electrónico contacto@[Link]
HTML no define ninguna etiqueta específica para marcar números de
teléfono o direcciones de correo electrónico. De la misma forma, no define
etiquetas para otros posibles elementos que se pueden encontrar en los
contenidos de texto.
+ 33
5. MARCADO GENÉRICO DE
TEXTO
El estándar HTML/XHTML incluye una etiqueta llamada <span> que se
emplea para marcar cualquier elemento que no se puede marcar con
las otras etiquetas definidas.
Siguiendo con el ejemplo anterior, la etiqueta <span> se utiliza para
marcar el teléfono y la dirección de correo electrónico:
<strong>Importante</strong>: si quiere ponerse en contacto
con la empresa <acronym>ACME</acronym>, puede hacerlo en el
teléfono <span>900 555 555</span> o a través de la dirección
de correo electrónico <span>contacto@[Link]</span>
+ 34
5. MARCADO GENÉRICO DE
TEXTO
La etiqueta <span> se visualiza con el mismo aspecto que el texto
normal. Es habitual utilizar esta etiqueta junto con los atributos id y
class para modificar posteriormente su aspecto con CSS:
<strong>Importante</strong>: si quiere ponerse en contacto
con la empresa <acronym>ACME</acronym>, puede hacerlo en el
teléfono <span class="telefono">900 555 555</span> o a través
de la dirección de correo electrónico <span
class="email">contacto@[Link]</span>
La etiqueta <span> sólo se puede utilizar para encerrar contenidos y
etiquetas en línea.
Cuando se quieren estructurar elementos de bloque, se utiliza la
etiqueta <div>.
+ 35
6. ESPACIOS EN BLANCO Y NUEVAS
LÍNEAS
El aspecto más sorprendente del lenguaje HTML cuando se
desarrollan los primeros documentos es el tratamiento
especial de los espacios en blanco del texto. HTML
considera espacio en blanco a:
◼ Los espacios en blanco.
◼ Los tabuladores.
◼ Los retornos de carro.
◼ El carácter de nueva línea (ENTER o INTRO).
+ 36
6. ESPACIOS EN BLANCO Y NUEVAS
LÍNEAS
<html>
<head><title>Ejemplo de etiqueta p</title></head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro
tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos
de
línea
y otro tipo de espaciado.</p>
</body>
</html>
+ 37
6. ESPACIOS EN BLANCO Y NUEVAS
LÍNEAS
Los dos párrafos de la imagen anterior se ven idénticos, aunque el segundo párrafo
incluye varios espacios en blanco y está escrito en varias líneas diferentes.
HTML ignora todos los espacios en blanco sobrantes, es decir, todos los espacios en
blanco que no son el espacio en blanco que separa las palabras.
+ 6.1. NUEVAS LÍNEAS 38
Para incluir una nueva línea en un punto y forzar a que el texto
que sigue se muestre en la línea inferior, se utiliza la etiqueta
<br>. Insertar la etiqueta <br> eequivale a presionar la tecla
ENTER (o INTRO) en ese mismo punto.
+ 6.1. NUEVAS LÍNEAS 39
La particularidad de <br> es que es una etiqueta
vacía, es decir, no encierra ningún texto.
De esta forma, la etiqueta debe abrirse y cerrarse
de forma consecutiva: <br></br>.
HTML permite utilizar un atajo para indicar que
una etiqueta se está abriendo y cerrando de forma
consecutiva: <br/>.
+ 6.1. NUEVAS LÍNEAS 40
<html>
<head><title>Ejemplo de etiqueta p</title></head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro
tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos<br/>
de<br/>
línea<br/>
y otro tipo de espaciado.</p>
</body>
</html>
+ 6.1. NUEVAS LÍNEAS 41
+ 6.2. ESPACIOS EN BLANCO 42
La solución al problema de los espacios en blanco
no es tan sencilla como el de las nuevas líneas.
Para incluir espacios en blanco adicionales, se
debe sustituir cada nuevo espacio en blanco por:
+ 6.2. ESPACIOS EN BLANCO 43
<html>
<head>
<title>Ejemplo de entidad </title>
</head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro
tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos <br/>
de <br/>
línea <br/>
y otro tipo de espaciado.</p>
</body>
</html>
+ 6.2. ESPACIOS EN BLANCO 44
Cada texto solamente equivale a un espacio en blanco,
por lo que se deben escribir tantos seguidos como
espacios en blanco seguidos existan en el texto.
+ 45
7. CODIFICACIÓN DE
CARACTERES
Una consideración importante directamente relacionada con el texto de las páginas HTML es la
codificación de los caracteres y la inserción de caracteres especiales:
◼ Caracteres que usa HTML para definir sus etiquetas (<, > y ") no se pueden utilizar libremente.
◼ Caracteres propios de los idiomas que no son el inglés (ñ, á, ç, ¿, ¡) pueden ser problemáticos
dependiendo de la codificación de caracteres utilizada.
La solución a la primera limitación consiste en sustituir los caracteres reservados de HTML por unas
expresiones llamadas entidades HTML y que representan a cada carácter:
+ 46
7. CODIFICACIÓN DE
CARACTERES
Se considera el siguiente texto:
Los caracteres <, >, " y & pueden dar problemas con textos en
HTML
Para mostrar correctamente este texto en una página HTML,
se debe sustituir cada carácter especial por su entidad
HTML:
<p>Los caracteres <, >, " y &
pueden dar problemas con textos en HTML</p>
+ 47
7. CODIFICACIÓN DE
CARACTERES
Los caracteres propios de los idiomas diferentes al inglés también
pueden ser problemáticos. Desde que se crea una página web hasta que
llega al navegador del usuario, intervienen numerosos procesos:
① El diseñador crea la página web con su editor HTML.
② Si se trata de una aplicación dinámica, el programador recorta la
página HTML del diseñador y la mezcla con el resto del código de la
aplicación (por ejemplo PHP).
③ El servidor web almacena las páginas HTML estáticas o el código de
la aplicación web y sirve las páginas solicitadas por los usuarios.
④ El usuario solicita y visualiza las páginas web a través de su
navegador.
+ 48
7. CODIFICACIÓN DE
CARACTERES
Si en todos los procesos anteriores se utiliza la misma
codificación de caracteres, los caracteres propios de los
idiomas se pueden escribir directamente:
<p>Este párrafo contiene caracteres acentuados y
se almacena en formato UTF-8</p>
La palabra párrafo incluye la letra á. Si el editor HTML del
diseñador utiliza la codificación UTF-8, el entorno de desarrollo
del programador también utiliza UTF-8, el servidor web sirve las
páginas con esa codificación y el navegador del usuario es capaz
de visualizar las páginas con formato UTF-8, el texto anterior se
verá correctamente en el navegador del usuario.
+ 49
7. CODIFICACIÓN DE
CARACTERES
Muchas veces no es posible que todos los procesos involucrados
utilicen la misma codificación de caracteres. Por limitaciones
técnicas o por decisiones de los diseñadores y programadores,
los textos pueden pasar de codificación UTF-8 a codificación
ISO-8859.
Si se produce este cambio sin realizar una conversión correcta, el
navegador del usuario mostrará caracteres extraños en todos los
acentos y en todas las letras como la ñ.
La solución más sencilla para asegurar que todos estos caracteres
potencialmente problemáticos se van a visualizar correctamente
en el navegador del usuario consiste en sustituir cada carácter
problemático por su entidad HTML.
+ 50
7. CODIFICACIÓN DE
CARACTERES
El párrafo del texto anterior, se podría escribir de la siguiente manera:
<p>Este párrafo contiene caracteres acentuados y se
almacena en formato UTF-8</p>