+
HTML
Capítulo 11
Lenguajes de Marcas y Sistemas de Gestión de Información
Curso 2025/2026
+ 2
Capítulo 11: OTRAS ETIQUETAS
IMPORTANTES
1. Comentarios
2. JavaScript
3. CSS
4. Etiqueta <span>
+ 3
1. COMENTARIOS
HTML permite incluir comentarios dentro de su código para añadir
información que no se debe mostrar por pantalla. Los diseñadores y
programadores incluyen comentarios para marcar el comienzo y el final
de las secciones de las páginas, para incluir avisos y notas para otros
diseñadores o para incluir explicaciones sobre la forma en la que se ha
creado el código HTML.
Los comentarios no se muestran por pantalla pero sí que se descargan
con el código HTML de la página. Por este motivo, nunca debe incluirse
información sensible o confidencial en los comentarios.
◼ Apertura del comentario: <!--
◼ Contenido del comentario: (cualquier texto)
◼ Cierre del comentario: -->
+ 1. COMENTARIOS 4
EJ: uso de los comentarios HTML para indicar el comienzo y final de
cada sección.
<!-- Inicio del menú -->
<div id="menu">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
<!-- Fin del menú -->
<!-- Inicio de la publicidad -->
<div id="publicidad"> ... </div>
<!-- Fin de la publicidad -->
+ 5
2. JAVASCRIPT
La etiqueta <script> se utiliza para enlazar archivos
JavaScript externos y para incluir bloques de código JavaScript
en las páginas. Sin embargo, algunos navegadores no disponen
de soporte completo de JavaScript, otros navegadores permiten
bloquearlo parcialmente e incluso algunos usuarios bloquean
completamente el uso de JavaScript porque creen que así navegan
de forma más segura.
Si JavaScript está bloqueado o deshabilitado y la página web
requiere su uso para un correcto funcionamiento, es habitual
incluir un mensaje de aviso al usuario indicándole que debería
activar JavaScript para disfrutar completamente de la página.
+ 6
2. JAVASCRIPT
EJEMPLO PÁGINA JAVASCRIPT ACTIVADO
+ 7
2. JAVASCRIPT
EJEMPLO PÁGINA JAVASCRIPT DESHABILITADO
+ 8
2. JAVASCRIPT
HTML define la etiqueta <noscript> para incluir un mensaje que
los navegadores muestran cuando JavaScript se encuentra
bloqueado o deshabilitado.
+ 9
2. JAVASCRIPT
<html>
<head> ... </head>
<body>
<noscript>
<p>Bienvenido a Mi Sitio</p>
<p>La página que estás viendo requiere para su
funcionamiento el uso de JavaScript.
Si lo has deshabilitado intencionadamente, por favor
vuelve a activarlo.</p>
</noscript>
</body>
</html>
+ 10
3. CSS
Algunos de los atributos más utilizados en la creación de
páginas web son id, class y style. Los tres atributos están
muy relacionados con CSS, sobre todo class y style.
El atributo id se emplea para asignar un identificador único a
cada elemento de la página, lo que es útil tanto para aplicar
estilos CSS a ese elemento como para programar aplicaciones
con JavaScript.
Por otra parte, el atributo class se emplea para definir la
clase CSS que se aplica a un elemento. La clase CSS es el
nombre de un conjunto de estilos que se definen en la hoja de
estilos y que se quieren aplicar a un elemento.
+ 11
3. CSS
El párrafo del ejemplo se muestra por pantalla con el
aspecto definido por el conjunto de estilos llamado resumen
y que se define en la hoja de estilos CSS enlazada por la
página web.
<p class="resumen">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Maecenas at diam id enim viverra semper. Nulla
id urna. Donec sodales.</p>
+ 12
3. CSS
El atributo style se emplea para definir estilos CSS directamente sobre
los elementos HTML, tal y como se muestra en el siguiente ejemplo:
<p>Algunas palabras de esta frase se muestran de <span
style="color:red">color rojo</span></p>
No se debe confundir el atributo style con la etiqueta <style> que se
explicó anteriormente. La etiqueta <style> se utiliza para incluir
bloques de código CSS:
<head>
<style type="text/css">
span {color:red;}
</style>
</head>
+ 13
4. ETIQUETA <span>
La etiqueta span es un elemento contenedor en línea
genérico. Generalmente envuelven secciones de texto con
fines de estilo o para agregar atributos a una sección de
texto sin crear una nueva línea de contenido.
Una etiqueta span se escribe con una etiqueta de apertura y
otra de cierre, así:
<span>El contenido va aquí</span>
+ 14
4. ETIQUETA <span>
El elemento span se llama “genérico” porque el nombre de la
etiqueta en sí no nos dice nada sobre el contenido del elemento.
En otras palabras, no significa nada para nosotros.
Lo opuesto a un elemento HTML genérico es un elemento HTML
semántico, cuyo nombre describe su propósito (por ejemplo, <p>,
<botón> y <form>).
Las etiquetas de extensión también son elementos “en línea”, lo
que significa que el elemento permanece en la línea actual y no
crea un salto de línea. Un div, el otro elemento HTML genérico, es
un elemento de bloque que crea una nueva línea en la página.
Exploraremos las diferencias entre span y div más adelante.
+ 15
4. ETIQUETA <span>
Por sí sola, una etiqueta <span> no afecta la forma en que
se muestra la página.
<span>This sentence is wrapped in a span tag.</span>
This sentence is not.
Aun así, las etiquetas <span> son poderosas porque nos
permiten asignar cualquier atributo HTML global a una
sección de texto u otro contenido de página en línea. Los
atributos más comunes son los selectores id y class, que
se usan para aplicar estilo a palabras específicas.
+ 16
4. ETIQUETA <span>
También es posible aplicar CSS a elementos HTML dentro de las etiquetas
<span> utilizando los atributos de estilo. Se debe evitar el CSS en línea, ya que
hace que sea más difícil realizar cambios de estilo en toda la página.
HTML
<p>We can use span tags to target text with CSS
CSS styling, like with <span id="red-
text">this red text</span> and <span #red-text { color: red; }
id="green-text">this green text</span>.</p>
#green-text { color: green;
<p>You can use span for <span }
class="highlighted">any CSS rule</span>. Here
I'm using the <span .highlighted { background-
class="highlighted">background-color</span> color: lightblue; }
property to <span
class="highlighted">highlight text</span>.</p> #new-font { font-family:
Helvetica; }
<p>You're not limited to color either. You can
change the <span id="new-font">font #new-font-size { font-size:
family</span> or <span id="new-font-size">font 24px; }
size</span>.</p>
+ 17
4. ETIQUETA <span>
span y div: DIFERENCIAS
Al igual que span, div es un elemento HTML genérico que verás en todas las páginas
web. Pero estos dos elementos sirven para propósitos diferentes. Span es un elemento
genérico en línea, mientras que div es un elemento genérico de bloque.
◼ <div> agrega un salto de línea después de la etiqueta de cierre, mientras que
<span> no lo hace. Esta es la razón por la que los div forman “bloques”, mientras
que los span están en línea.
◼ Un elemento <div> ocupa todo el ancho del contenedor, mientras que <span>
solo ocupa el ancho del contenido interno. El ancho y el alto de un elemento <div>
se pueden cambiar en CSS, pero no puedes cambiar el ancho y el alto de un
elemento <span> con CSS.
◼ En general, los elementos <div> se utilizan para separar fragmentos de contenido
y las etiquetas <span> se utilizan para orientar un fragmento de texto dentro de un
fragmento de contenido más grande.
+ 18
4. ETIQUETA <span>
span y div: DIFERENCIAS
HTML
<div id="div-0">
<h2>This is a heading inside a div CSS
element</h2>
#div-0 { background-color:
<p>This a paragraph inside a div element.<p> #7fd1de; }
</div>
#div-1 { background-color:
<div id="div-1"> #b4bbe8; }
<h2>This is a heading inside a div
element</h2>
#span-0 { background-color:
#ffbcac; }
<p>This a paragraph inside a div element.<p>
</div> #span-1 { background-color:
#7fded2; }
<span id="span-0">This text is inside a span
element.</span>
<span id="span-1">This text is inside another
span element.</span>
+ 19
4. ETIQUETA <span>
+ 20
4. ETIQUETA <span>
Como hemos visto, hay muchas cosas que puedes hacer con
las etiquetas <span>, siempre que las apliques
correctamente.
Sin las etiquetas span y div, Internet se vería bastante
diferente en comparación con la forma en que se ve hoy en
día. Estos elementos genéricos nos permiten diseñar el
contenido de la página hasta el párrafo o palabra individual.
Entonces, ya sea si quieres llamar la atención sobre una línea
de texto, agregar contenido dinámico con JavaScript o
simplemente mejorar la estética de tu sitio, usa span.