Taller > HTML
La Etiqueta <h1> hasta <h6h> en HTML
En HTML5, los títulos y subtítulos se definen utilizando las etiquetas <h1> hasta <h6>. Cada etiqueta representa un nivel de encabezado y se utiliza para identificar la importancia de un título o subtítulo dentro de un documento.
Es importante tener en cuenta que los navegadores y motores de búsqueda utilizan los títulos y subtítulos para comprender la estructura y el contenido de una página, por lo que es recomendable utilizarlos adecuadamente.
<h1> es una etiqueta de encabezado en HTML5 que se utiliza para definir el título principal de una página web
Esta etiqueta es la más importante de todas las etiquetas de encabezado y debe ser utilizada para el título principal que describe el contenido general de la página.
Por ejemplo:
<h1>Bienvenido a mi sitio web</h1>
<h2> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos secundarios debajo del título principal definido con la etiqueta. Esta etiqueta es la segunda en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una página en secciones y subsecciones.
Por ejemplo:
<h1>Bienvenido a mi sitio web</h1>
<h2>Sección 1</h2>
<h2>Sección 2</h2>
<h3> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos terciarios debajo de un subtítulo secundario definido con la etiqueta <h2>. Esta etiqueta es la tercera en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una sección en subsecciones más específicas.
Por ejemplo:
<h1>Bienvenido a mi sitio web</h1>
<h2>Sección 1</h2>
<h3>Subsección 1</h3>
<h3>Subsección 2</h3>
<h2>Sección 2</h2>
<h4> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos cuartarías debajo de un subtítulo terciario definido con la etiqueta<h3>
Esta etiqueta es la cuarta en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una subsección en partes más específicas.
Por ejemplo:
<h1>Bienvenido a mi sitio web</h1>
<h2>Sección 1</h2>
<h3>Subsección 1</h3>
<h4>Parte 1</h4>
<h4>Parte 2</h4>
<h3>Subsección 2</h3>
<h2>Sección 2</h2>
<h5> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos quintaríos debajo de un subtítulo cuartarío definido con la etiqueta <h4>
Esta etiqueta es la quinta en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una parte en sub partes más específicas.
Por ejemplo:
<h1>Bienvenido a mi sitio web</h1>
<h2>Sección 1</h2>
<h3>Subsección 1</h3>
<h4>Parte 1</h4>
<h5>Subparte 1</h5>
<h5>Subparte 2</h5>
<h4>Parte 2</h4>
<h3>Subsección 2</h3>
<h2>Sección 2</h2>
<h6> es una etiqueta de encabezado en HTML5 que se utiliza para definir subtítulos sextarios debajo de un subtítulo quinario definido con la etiqueta <h5>
Esta etiqueta es la sexta y última en importancia entre todas las etiquetas de encabezado y se utiliza para dividir y organizar el contenido de una sub parte en partes más específicas.
Por ejemplo:
<h1>Bienvenido a mi sitio web</h1>
<h2>Sección 1</h2>
<h3>Subsección 1</h3>
<h4>Parte 1</h4>
<h5>Subparte 1</h5>
<h6>Detalle 1</h6>
<h6>Detalle 2</h6>
<h5>Subparte 2</h5>
<h4>Parte 2</h4>
<h3>Subsección 2</h3>
<h2>Sección 2</h2>
Atributos
Las etiquetas de encabezado <h1> a <h6> en HTML5 no tienen atributos específicos, ya que su propósito principal es definir la jerarquía y organización del contenido. Sin embargo, aquí están algunos de los atributos más comúnmente utilizados:
id: Este atributo se utiliza para especificar un identificador único para un elemento, que se puede utilizar como destino para enlaces.
class: Este atributo se utiliza para especificar una o más clases CSS que se aplicarán al elemento.
style: Este atributo se utiliza para definir estilos inline CSS para el elemento.
lang: Este atributo se utiliza para especificar el idioma de un elemento.
title: Este atributo se utiliza para especificar un título o descripción adicional para un elemento.
dir: Este atributo se utiliza para especificar la dirección del texto, ya sea de izquierda a derecha (ltr) o de derecha a izquierda (rtl).
Estos atributos se pueden aplicar a cualquiera de las etiquetas de encabezado <h1> a <h6>, según sea necesario.
Ejemplo
Aquí está un ejemplo completo que incluye las etiquetas de encabezado <h1> a <h6> con algunos de los atributos más comunes:
<!DOCTYPE html>
<<html lang="es">
<<head>
<meta charset="UTF-8">
<title>Ejemplo de etiquetas de encabezado</title>
<style>
h1 {
color: blue;
text-align: center;
}
h2 {
color: green;
text-align: left;
}
h3 {
color: red;
text-align: right;
}
h4 {
color: orange;
text-align: center;
}
h5 {
color: pink;
text-align: left;
}
h6 {
color: purple;
text-align: right;
}
</style>
</head>
<body>
<!-- Etiqueta h1 con atributos id y class -->
<h1 id="titulo-principal" class="encabezado" style="font-size: 36px;">Bienvenido a mi sitio web</h1>
<p>Este es un ejemplo de etiquetas de encabezado en HTML5 con algunos de los atributos más comunes.</p>
<!-- Etiqueta h2 con atributos id y class -->
<h2 id="seccion-1" class="subtitulo" style="font-size: 24px;">Sección 1</h2>
<p>En esta sección se encuentra información sobre el primer tema.</p>
<!-- Etiqueta h3 con atributos id y class -->
<h3 id="subseccion-1" class="subtitulo-2" style="font-size: 18px;">Subsección 1</h3>
<p>En esta subsección se encuentra información más detallada sobre el primer tema.</p>
<!-- Etiqueta h4 con atributos id y class -->
<h4 id="parte-1" class="subtitulo-3" style="font-size: 16px;">Parte 1</h4>
<p>En esta parte se encuentra información adicional sobre el primer tema.</p>
<!-- Etiqueta h5 con atributos id y class -->
<h5 id="subparte-1" class="subtitulo-4" style="font-size: 14px;">Subparte 1</h5>
<p>En esta subparte se encuentra información específica sobre el primer tema.</p>
<!-- Etiqueta h6 con atributos id y class -->
<h6 id="detalle-1" class="subtitulo-5" style="font-size: 12px;">Detalle 1</h6>
<p>En este detalle se encuentra información detallada y concreta sobre el primer tema.</p>
</body>
</html>
En este ejemplo, se utilizan las etiquetas de encabezado <h1> a <h6> para estructurar el contenido de la página web. También se utilizan los atributos id, class y style para establecer identificadores únicos, clases para aplicar estilos CSS y estilos inline, respectivamente.
Tenga en cuenta que los atributos id y class son opcionales y pueden ser utilizados según las necesidades de la página web.
Más ejemplos
Aquí están dos ejemplos más avanzados que utilizan las etiquetas de encabezado <h1> a <h6> en HTML5:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Encabezados</title>
<style>
h1 {
color: blue;
text-align: center;
}
h2 {
color: green;
text-decoration: underline;
}
h3 {
color: red;
font-style: italic;
}
h4 {
color: purple;
font-weight: bold;
}
h5 {
color: yellow;
text-transform: uppercase;
}
h6 {
color: orange;
font-size: 16px;
}
</style>
</head>
<body>
<h1 id="main-title">Título Principal</h1>
<p>Este es el primer nivel de encabezado, usado para el título principal de la página web.</p>
<h2>Sección 1</h2>
<p>Este es el segundo nivel de encabezado, usado para secciones importantes de la página web.</p>
<h3>Subsección 1.1</h3>
<p>Este es el tercer nivel de encabezado, usado para subsecciones de la sección anterior.</p>
<h4>Subsección 1.1.1</h4>
<p>Este es el cuarto nivel de encabezado, usado para subsecciones más detalladas de la sección anterior.</p>
<h5>Detalle 1.1.1.1</h5>
<p>Este es el quinto nivel de encabezado, usado para detalles específicos de la sección anterior.</p>
<h6>Subdetalle 1.1.1.1.1</h6>
<p>Este es el sexto y último nivel de encabezado, usado para subdetalles adicionales de la sección anterior.</p>
</body>
</html>
Este ejemplo muestra cómo se pueden establecer estilos CSS para las etiquetas de encabezado <h1> a <h6> mediante la etiqueta <style> en el encabezado de la página web. Además, se utiliza un identificador id en la etiqueta <h1> para establecer un enlace directo a esa sección de la página web.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Encabezados Avanzado</title>
<style>
h1 {
background-color: blue;
color: white;
padding: 10px;
text-align: center;
}
h2 {
background-color: green;
color: white;
padding: 8px;
text-align: left;
border-radius: 10px;
}
h3 {
background-color: red;
color: white;
padding: 6px;
text-align: right;
border-radius: 10px;
}
h4 {
background-color: purple;
color: white;
padding: 4px;
text-align: center;
border-radius: 10px;
}
h5 {
background-color: yellow;
color: black;
padding: 2px;
text-align: left;
border-radius: 10px;
}
h6 {
background-color: orange;
color: black;
padding: 1px;
text-align: right;
border-radius: 10px;
}
</style>
</head>
<body>
<h1 id="main-title">Título Principal con Fondo de Color</h1>
<p>Este es un ejemplo avanzado que muestra cómo se pueden establecer colores de fondo y estilos de alineación para las etiquetas de encabezado`<h1> a <h6>.</p>
<h2>Sección 1 con Bordes Redondos</h2>
<p>Este ejemplo también muestra cómo se pueden agregar bordes redondos a las etiquetas de encabezado mediante la propiedad `border-radius` de CSS.</p>
<h3>Subsección 1.1 con Alineación a la Derecha</h3>
<p>Además, se pueden establecer diferentes estilos de alineación para cada nivel de encabezado, como se muestra en este ejemplo con la propiedad `text-align` de CSS.</p>
<h4>Subsección 1.1.1 con Alineación Centrada</h4>
<h5>Detalle 1.1.1.1 con Alineación a la Izquierda</h5>
<h6>Subdetalle 1.1.1.1.1 con Alineación a la Derecha</h6>
</body>
</html>
En este ejemplo se utiliza encabezados de nivel 1 a nivel 6 para crear una estructura de contenido con diferentes estilos visuales. El código incluye una sección de cabecera (<head>) que contiene un título para la página y una sección de estilo (<style>) que define los estilos para cada encabezado.
Los estilos incluyen el color de fondo, el color del texto, la alineación y el tamaño de la padding (espacio alrededor del texto) para cada encabezado. También se agrega un borde redondo a los encabezados de nivel 2 a nivel 5 usando la propiedad border-radius.
En la sección de contenido (<body>), se utiliza la etiqueta <h1> para el título principal con un ID específico (“main-title”) que se puede usar para establecer estilos adicionales. Luego, se utilizan las etiquetas <h2>, <h3>, <h4>, <h5> y <h6> para las secciones y subsecciones del contenido, con diferentes estilos de alineación y bordes redondos según corresponda.
La Etiqueta <p> en HTML
La etiqueta se abre con <p> y se cierra con </p>, y todo el texto entre estas dos etiquetas se considera un párrafo separado. Por defecto, el texto dentro de una etiqueta <p> tiene un margen inferior y superior, y una línea de espacio antes y después del texto, pero estos estilos se pueden modificar mediante CSS.
Además, la etiqueta <p> proporciona una semántica significativa para los motores de búsqueda y para los usuarios con discapacidades que usan lectores de pantalla.
Sin embargo, la etiqueta <p> no tiene ningún atributo específico, pero puede utilizar los atributos globales de HTML5 como class, id, style, etc.
En conclusión, la etiqueta <p> es una pieza fundamental en la creación de contenido estructurado y significativo en una página web.
Ejemplo de uso
Aquí hay un ejemplo de cómo utilizar la etiqueta <p> en HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta p en HTML5</title>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Este es un ejemplo de un párrafo en HTML5.</p>
<p>Puedes incluir cualquier tipo de texto aquí, desde frases simples hasta bloques de texto complejos.</p>
<p>Además, puedes aplicar estilos CSS para darle un aspecto personalizado a tus párrafos.</p>
</body>
</html>
En este ejemplo, la etiqueta <p> se utiliza para incluir tres párrafos separados en la página. Cada párrafo se encierra entre las etiquetas de apertura y cierre <p> y </p>, y cada párrafo se muestra en una línea separada en el navegador.
Atributos
La etiqueta <p> en HTML5 no tiene atributos específicos, pero puede utilizar los atributos globales como:
class: Este atributo se utiliza para identificar un estilo en un archivo CSS. Por ejemplo, <p class="intro">
id: Este atributo se utiliza para identificar de manera única un elemento en una página HTML. Por ejemplo, <p id="first-paragraph">
style: Este atributo se utiliza para aplicar estilos directamente a un elemento. Por ejemplo, <p style="font-size: 20px; color: blue;">
title: Este atributo se utiliza para proporcionar información adicional sobre el elemento. Por ejemplo, <p title="Introducción">
lang: Este atributo se utiliza para especificar el idioma del contenido en un elemento. Por ejemplo, <p lang="es">
Cada uno de estos atributos se puede utilizar para personalizar el aspecto y la funcionalidad de la etiqueta <p> en HTML5.
Sin embargo, es importante tener en cuenta que la mayoría de los estilos y la funcionalidad se deben proporcionar a través de archivos CSS externos para mantener una separación clara entre el contenido y el diseño.
Ejemplos de atributos
Aquí te doy algunos ejemplos de cómo utilizar los atributos mencionados en la etiqueta <p> en HTML:
Utilizando el atributo class:
<p class="text-center">Este es un párrafo centrado</p>
<p class="text-danger">Este es un párrafo con texto de color rojo</p>
En este ejemplo, estoy asignando las clases “text-center” y “text-danger” a dos párrafos diferentes. Luego, puedo utilizar estas clases en mi hoja de estilos CSS para dar formato al texto de manera específica.
Utilizando el atributo id:
<p id="introduction">Este es el párrafo de introducción</p>
<p id="conclusion">Este es el párrafo de conclusión</p>
En este ejemplo, estoy asignando los identificadores “introduction” y “conclusion” a dos párrafos diferentes. Luego, puedo utilizar estos identificadores en mi hoja de estilos CSS para dar formato al texto de manera específica.
Utilizando el atributo style:
<p style="color: blue; font-size: 16px;">Este es un párrafo azul con fuente de tamaño 16px</p>
<p style="text-align: right;">Este es un párrafo alineado a la derecha</p>
En este ejemplo, estoy utilizando el atributo style para aplicar estilos CSS directamente a dos párrafos diferentes. Sin embargo, es recomendable utilizar clases o identificadores en lugar de este atributo, ya que es menos escalable.
Utilizando el atributo lang:
<p lang="es">Este es un párrafo en español</p>
<p lang="fr">Ceci est un paragraphe en français</p>
En este ejemplo, estoy utilizando el atributo lang para especificar el idioma del contenido de dos párrafos diferentes.
Utilizando el atributo title:
<p title="Este es un ejemplo de un párrafo">Este es un párrafo</p>
<p title="Este es otro ejemplo de un párrafo">Este es otro párrafo</p>
En este ejemplo, estoy utilizando el atributo title para proporcionar una descripción adicional sobre el contenido de dos párrafos.
Más ejemplos
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta p</title>
</head>
<body>
<p>Este es un párrafo simple. Utiliza la etiqueta p para mostrar texto en una página web.</p>
</body>
</html>
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta p</title>
<style>
.destacado {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Este es un párrafo simple.</p>
<p class="destacado">Este párrafo utiliza una clase CSS para resaltar el texto.</p>
<p style="color: blue;">Este párrafo utiliza un atributo de estilo para cambiar el color del texto.</p>
</body>
</html>
Ejemplo 3:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de etiqueta p</title>
</head>
<body>
<p>Este es un párrafo en español.</p>
<p lang="en">Este es un párrafo en inglés.</p>
</body>
</html>
Estos son solo algunos ejemplos básicos de cómo utilizar la etiqueta <p> en HTML5.
Hay muchas formas de personalizar y mejorar la funcionalidad y el aspecto de los párrafos en HTML5, incluyendo la utilización de clases CSS, estilos inline y atributos de idioma.
La Etiqueta <blockquote> en HTML
La cita se mostrará en un bloque separado del texto normal, y suele estar visualmente resaltada.
Ejemplo de uso
Aquí está un ejemplo de cómo utilizar la etiqueta <blockquote>:
<blockquote>
<p>"El éxito no es la clave de la felicidad. La felicidad es la clave del éxito."</p>
<footer>Albert Schweitzer</footer>
</blockquote>
En el ejemplo anterior, el contenido dentro de la etiqueta <blockquote> representa la cita, y el contenido dentro de la etiqueta <footer> representa el autor de la cita.
Es importante destacar que el navegador puede darle un formato especial a la cita, como añadir un margen en ambos lados, para diferenciarla del resto del contenido. Además, también se pueden utilizar reglas de estilo CSS para personalizar el aspecto de la cita.
Atributos
La etiqueta <blockquote> en HTML5 soporta los siguientes atributos más importantes:
cite: Especifica la URL de la fuente de la cita. Esto proporciona información sobre la fuente original de la cita y permite a los lectores verificar la información. La URL debe ser válida y accesible a través de Internet.
datetime: Especifica la fecha y hora de la cita. Esto puede ser útil para contextuar la cita en un momento específico y para fines de citación. El formato de la fecha y hora debe ser compatible con el estándar ISO 8601.
Ejemplo
Aquí está un ejemplo de cómo utilizar estos atributos:
<blockquote cite="https://www.goodreads.com/quotes/554855-the-purpose-of-our-lives-is-to-be-happy" datetime="2022-01-01T12:00:00">
<p>"El propósito de nuestras vidas es ser felices."</p>
<footer>Dalai Lama XIV</footer>
</blockquote>
En este ejemplo, la URL de la fuente de la cita se especifica con el atributo cite, mientras que la fecha y hora de la cita se especifican con el atributo datetime. Esta información adicional puede ser útil para los lectores y para fines de citación.
Más ejemplos
Aquí te dejo dos ejemplos avanzados de cómo utilizar la etiqueta <blockquote> en HTML5:
Ejemplo 1:
<blockquote cite="https://www.brainyquote.com/quotes/albert_einstein_127549">
<p>"La imagenación es más importante que el conocimiento."</p>
<footer>Albert Einstein</footer>
</blockquote>
En este ejemplo, se utiliza la etiqueta <blockquote> para identificar una cita de Albert Einstein. La cita se muestra como un bloque separado del texto normal y la fuente se especifica con el atributo cite.
Ejemplo 2:
<blockquote cite="https://en.wikipedia.org/wiki/Martin_Luther_King_Jr." datetime="1963-08-28T17:00:00">
<p>"Tengo un sueño de que un día esta nación se levantará y vivirá el verdadero significado de su credo: "Somos todos iguales".</p>
<footer>Martin Luther King Jr., Discurso "I Have a Dream"</footer>
</blockquote>
En este ejemplo, se utiliza la etiqueta <blockquote> para identificar una cita famosa de Martin Luther King Jr. La cita se muestra como un bloque separado del texto normal, la fuente se especifica con el atributo cite, y la fecha y hora de la cita se especifican con el atributo datetime.
La Etiqueta <hr> en HTML
La línea horizontal se dibuja de manera que abarque el ancho completo del contenedor en el que se encuentre la etiqueta <hr>. La etiqueta <hr> es un elemento de bloque y, por lo tanto, crea una nueva línea después de su uso.
Ejemplo de uso
Aquí tienes un ejemplo simple de cómo utilizar la etiqueta <hr> en HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de la etiqueta HR en HTML5</title>
</head>
<body>
<h1>Sección 1</h1>
<p>Contenido de la sección 1</p>
<hr>
<h1>Sección 2</h1>
<p>Contenido de la sección 2</p>
<hr>
<h1>Sección 3</h1>
<p>Contenido de la sección 3</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <hr> para separar las tres secciones diferentes de contenido en la página web.
Cada vez que se utiliza la etiqueta <hr>, se dibuja una línea horizontal que abarca el ancho completo del contenedor en el que se encuentre.
Atributos
La etiqueta <hr> en HTML5 no tiene atributos específicos, pero su apariencia puede ser modificada mediante CSS.
Algunos de los estilos comúnmente utilizados con la etiqueta <hr> incluyen el ancho, el color, la altura y el margen.
Aquí hay un ejemplo de cómo aplicar algunos estilos a la etiqueta <hr> utilizando CSS:
<!DOCTYPE html>
<html>
<head>
<style>
hr {
width: 50%;
height: 2px;
background-color: gray;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>Sección 1</h1>
<p>Contenido de la sección 1</p>
<hr>
<h1>Sección 2</h1>
<p>Contenido de la sección 2</p>
<hr>
<h1>Sección 3</h1>
<p>Contenido de la sección 3</p>
</body>
</html>
En este ejemplo, hemos definido un estilo CSS para la etiqueta <hr> que establece el ancho en 50% del ancho del contenedor, la altura en 2 pixels, el color de fondo en gris y el margen en 20 pixels arriba y abajo con alineación automática.
Estos estilos se aplicarán a todas las etiquetas <hr> en la página web.
Más ejemplos
Aquí hay tres ejemplos de cómo utilizar la etiqueta <hr> en HTML5:
Separación de secciones:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de la etiqueta HR en HTML5</title>
</head>
<body>
<h1>Sección 1</h1>
<p>Contenido de la sección 1</p>
<hr>
<h1>Sección 2</h1>
<p>Contenido de la sección 2</p>
<hr>
<h1>Sección 3</h1>
<p>Contenido de la sección 3</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <hr> para separar tres secciones diferentes de contenido en la página web.
Separación de temas en una lista:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de la etiqueta HR en HTML5</title>
</head>
<body>
<h1>Lista de temas</h1>
<ul>
<li>Tema 1</li>
<li>Tema 2</li>
<hr>
<li>Tema 3</li>
<li>Tema 4</li>
</ul>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <hr>> para separar dos grupos diferentes de temas en una lista.
Separación de comentarios en un foro:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de la etiqueta HR en HTML5</title>
</head>
<body>
<h1>Foro de discusión</h1>
<div>
<h2>Comentario 1</h2>
<p>Contenido del comentario 1</p>
</div>
<hr>
<div>
<h2>Comentario 2</h2>
<p>Contenido del comentario 2</p>
</div>
<hr>
<div>
<h2>Comentario 3</h2>
<p>Contenido del comentario 3</p>
</div>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <hr> para separar cada uno de los comentarios en un foro de discusión.
Otros ejemplos
Algunos de los ejemplos de la etiqueta <hr> de HTML5 con CSS.
Ejemplo 1: Alineación de un elemento <hr> con CSS.
<hr style="ancho: 50%; alineación-texto: izquierda; margen-izquierdo: 0">
Ejemplo 2: Ajuste de la altura de un elemento <hr> con CSS.
<hr style="alto:30px">
Ejemplo 3: Ajuste del ancho de un elemento <hr> con CSS,
<hr style="ancho:50%">
Ejemplo 4: Un sombreado <hr> con CSS.
<hr style="alto:2px; margen-ancho:0; color:gris; fondo-color:gris">
La Etiqueta <pre> en HTML
El propósito principal de esta etiqueta es mostrar bloques de texto formateados de manera específica, como por ejemplo código fuente, poesía, citas, mensajes de correo electrónico, entre otros.
La etiqueta <pre> tiene una estructura de apertura (<pre>) y cierre (</pre>) y todo lo que se coloque entre ambas etiquetas será considerado como texto preformateado.
Ejemplo de uso
A continuación, se muestra un ejemplo básico de cómo se utiliza la etiqueta <pre> en HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de etiqueta pre</title>
</head>
<body>
<h1>Ejemplo de etiqueta pre</h1>
<pre>
function saludar() {
console.log('Hola, mundo!');
}
</pre>
<p>Este es un ejemplo básico de cómo utilizar la etiqueta pre para mostrar código fuente de manera preformateada.</p>
</body>
</html>
En este ejemplo, se utiliza la etiqueta <pre> para mostrar una función de JavaScript preformateada. Todo el contenido dentro de la etiqueta <pre> mantiene la estructura original de espacios y saltos de línea, lo que facilita su lectura y comprensión.
Cabe destacar que aunque la etiqueta <pre> es muy útil para mostrar texto preformateado, su uso excesivo puede hacer que el código HTML sea difícil de leer y mantener.
Por lo tanto, se recomienda usarla solo en casos necesarios y no abusar de ella en la estructura de una página web.
Atributos
La etiqueta <pre> no tiene muchos atributos en HTML5. Aquí te muestro algunos atributos que puedes usar en la etiqueta <pre>:
accesskey: Especifica una tecla de acceso rápido para enfocar el elemento.
class: Define una o más clases de estilo que se aplican al elemento.
contenteditable: Indica si el contenido del elemento es editable o no.
dir: Define la dirección del texto.
hidden: Indica que el elemento no debe ser visible.
id: Define un identificador único (ID) para el elemento.
lang: Define el idioma del contenido del elemento.
spellcheck: Indica si el contenido del elemento debe ser revisado ortográficamente o no.
style: Define uno o más estilos CSS que se aplican al elemento.
tabindex: Indica si el elemento puede obtener el enfoque de entrada mediante el uso de la tecla Tab.
title: Define un texto que describe el elemento cuando se muestra el cursor sobre él.
Es importante mencionar que, aunque estos atributos pueden ser útiles en ciertos casos, no son específicos de la etiqueta <pre> y se pueden usar en muchos otros elementos HTML.
La etiqueta <pre> se utiliza principalmente para mostrar texto preformateado y no requiere de muchos atributos para cumplir con su propósito.
Ejemplo
Aquí te dejo un ejemplo con algunos atributos de la etiqueta <pre> en HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <pre></title>
</head>
<body>
<pre id="texto" class="rojo" lang="es" spellcheck="false">
Este es un ejemplo de texto preformateado
con la etiqueta <pre> de HTML5.
Se pueden incluir múltiples líneas de texto
y mantener la indentación y los espacios en blanco
tal como se escribieron originalmente.
</pre>
</body>
</html>
En este ejemplo, se utiliza la etiqueta <pre> para mostrar un bloque de texto preformateado. Se han agregado algunos atributos para demostrar su uso:
id="texto": Define un identificador único para el elemento.
class="rojo": Define una clase de estilo llamada “rojo”.
lang="es": Define el idioma del contenido del elemento en español.
spellcheck="false": Indica que el contenido del elemento no debe ser revisado ortográficamente.
Cabe destacar que los atributos son opcionales y pueden variar según las necesidades del desarrollador.
El objetivo principal de la etiqueta <pre> es mostrar texto preformateado, por lo que la mayoría de las veces se utiliza sin atributos adicionales.
Más ejemplos
Aquí te dejo dos ejemplos avanzados de la etiqueta <pre> en HTML5:
de mostrar código de programación con resaltado de sintaxis:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <pre> en HTML5</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
</head>
<body>
<h1>Ejemplo de etiqueta <pre> en HTML5</h1>
<p>El siguiente código JavaScript se muestra utilizando la etiqueta <pre>:</p>
<pre><code class="language-javascript">
function factorial(n) {
if (n === 0) {
return 1;
} else {
return n * factorial(n - 1);
}
}
console.log(factorial(5));
</code> </pre>
</body>
</html>
En este ejemplo, se utiliza la biblioteca Highlight.js para agregar resaltado de sintaxis al código JavaScript que se muestra en la etiqueta <pre>.
Se agregan los archivos CSS y JavaScript de Highlight.js al encabezado, y se aplica la función hljs.initHighlightingOnLoad() en el encabezado para iniciar el resaltado de sintaxis.
Ejemplo de mostrar código de programación con scroll horizontal:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <pre> en HTML5</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
pre {
background-color: #f7f7f7;
padding: 10px;
border: 1px solid #ccc;
font-size: 14px;
font-family: monospace;
white-space: pre;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>Ejemplo de etiqueta <pre> en HTML5</h1>
<p>El siguiente código CSS se muestra utilizando la etiqueta <pre> con scroll horizontal:</p>
<pre>
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
p {
margin: 0 0 10px 0;
color: #666;
}
</pre>
</body>
</html>
En este ejemplo, se utiliza el estilo CSS para agregar un scroll horizontal al contenido de la etiqueta <pre> cuando la línea es demasiado larga.
El estilo overflow-x: auto; permitirá la visualización del contenido completo del código CSS.
La etiqueta HTML <br> (line break) es una etiqueta de línea única que se utiliza para crear un salto de línea en un documento HTML.
La etiqueta <br> se utiliza comúnmente para separar dos líneas de texto sin agregar un espacio adicional entre ellas. También se utiliza para separar elementos en una lista no ordenada o en una lista ordenada.
Ejemplo de uso<br>
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <br> en HTML5:
<p>Este es el primer párrafo.<br>Este es el segundo párrafo.</p>
En este ejemplo, hemos utilizado la etiqueta <br> para separar dos párrafos sin agregar un espacio adicional entre ellos.
IMPORTANTE: Es importante tener en cuenta que el uso excesivo de la etiqueta <br> puede dificultar la lectura del documento HTML. Por lo tanto, se recomienda utilizar la etiqueta <br> solo cuando sea necesario y seguir las mejores prácticas de diseño web para crear diseños legibles y atractivos.
Atributos
La etiqueta HTML <br> no tiene atributos obligatorios u opcionales. Es una etiqueta de línea única que se utiliza para crear un salto de línea en un documento HTML sin agregar un espacio adicional.
Sin embargo, la etiqueta <br> puede utilizarse junto con el atributo “clear” en algunas situaciones. El atributo “clear” se utiliza para indicar cómo se deben manejar los elementos flotantes en relación con el salto de línea.
Los valores que puede tomar el atributo “clear” son:
“none” (por defecto): No se realiza ninguna acción especial para manejar elementos flotantes.
“left”: Indica que no se deben permitir elementos flotantes a la izquierda del salto de línea.
“right”: Indica que no se deben permitir elementos flotantes a la derecha del salto de línea.
“both”: Indica que no se deben permitir elementos flotantes ni a la izquierda ni a la derecha del salto de línea.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “clear” en la etiqueta <br>: <p>Este es el primer párrafo.</p>
<img src="image.jpg" style="float: right;">
<br clear="right">
<p>Este es el segundo párrafo.</p>
En este ejemplo, hemos utilizado la etiqueta <br> con el atributo /b>“clear” y el valor “right” para indicar que no se deben permitir elementos flotantes a la derecha del salto de línea.
Esto ayuda a garantizar que el segundo párrafo no aparezca a la derecha de la imagen flotante.
Más ejemplos
Aquí te muestro dos ejemplos completos y avanzados de la etiqueta <br> de HTML5:
Ejemplo 1: Utilizando la etiqueta <br> para separar elementos en una lista no ordenada y especificando el atributo “clear”.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta br</title>
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<br clear="both">
<ul>
<li>Elemento 4</li>
<li>Elemento 5</li>
<li>Elemento 6</li>
</ul>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <br> para separar dos listas no ordenadas sin agregar un espacio adicional entre ellas.
Además, hemos especificado el atributo “clear” con el valor “both” para indicar que no se deben permitir elementos flotantes a la izquierda ni a la derecha del salto de línea.
Ejemplo 2: Utilizando la etiqueta <br> en un formulario.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta br en formulario</title>
</head>
<body>
<form action="submit.php" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<br> <label for="email">Email:</label>
<input type="email" id="email" name="email">
<br> <label for="message">Mensaje:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>
<br> <input type="submit" value="Enviar">
</form>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <br> para separar los elementos del formulario sin agregar un espacio adicional entre ellos.
Esto ayuda a crear un diseño más limpio y ordenado para el formulario.
La etiqueta <a> de HTML5 se utiliza para crear enlaces a otros documentos o recursos, ya sea dentro del mismo sitio web o en sitios web externos.
Esta etiqueta se puede utilizar para crear enlaces a páginas web, imágenes, videos, archivos de audio y otros tipos de recursos.
La sintaxis básica de la etiqueta <a> es la siguiente:
<a href="url">texto del enlace</a>
En esta sintaxis, el atributo href especifica la dirección del recurso que se va a enlazar, y el texto del enlace es el texto que aparece en la página como el enlace.
Ejemplo de uso
Aquí hay un ejemplo de cómo utilizar la etiqueta <a> en HTML5 para crear un enlace a otra página web:
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web</title>
</head>
<body>
<p>Este es un enlace a <a href="https://www.google.com">Google</a>.</p>
</body>
</html>
En este ejemplo, se utiliza la etiqueta <a> para crear un enlace a la página web de Google. El atributo href especifica la URL del recurso vinculado, en este caso, https://www.google.com.
Cuando el usuario hace clic en el enlace, se abrirá la página web de Google en una nueva pestaña o ventana del navegador.
También es común utilizar la etiqueta <a> para crear enlaces internos en un sitio web.
Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web</title>
</head>
<body>
<ul>
<li><a href="index.html">io</a></li>
<li><a href="acerca-de.html">Acerca de</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</body>
</html>
En este ejemplo, se utiliza la etiqueta <a> para crear enlaces internos en un sitio web. Cada enlace en la lista de viñetas lleva a una página diferente dentro del sitio web, utilizando la ruta relativa de la página (por ejemplo, index.html, acerca-de.html, etc.) como el valor del atributo href.
Cuando el usuario hace clic en uno de estos enlaces, se cargará la página correspondiente dentro del sitio web.
Atributos
Además del atributo href, la etiqueta <a>> admite varios otros atributos, como target, title, download, rel y type, entre otros.
Aquí hay una descripción de algunos de estos atributos:
target: Define dónde se abrirá el recurso enlazado. Los valores posibles son _self (abre el recurso en la misma ventana o pestaña), _blank (abre el recurso en una nueva ventana o pestaña), _parent (abre el recurso en el marco padre, si lo hay) y _top (abre el recurso en la ventana principal del navegador).
title: Proporciona información adicional sobre el enlace en forma de texto emergente cuando el usuario pasa el cursor sobre el enlace.
download: Indica que el recurso enlazado debe descargarse en lugar de ser mostrado en el navegador.
rel: Este atributo define la relación entre la página actual y el recurso vinculado. Por ejemplo, rel="nofollow" indica que el enlace no debe ser seguido por los motores de búsqueda. Otro valor común es rel="noopener noreferrer", que mejora la seguridad del sitio web.
type: Indica el tipo de archivo al que se enlaza. Este atributo se usa comúnmente para enlazar archivos de imagen, video o audio.
Ejemplo
Aquí tienes un ejemplo de la etiqueta <a> con algunos de sus atributos más comunes:
<a href="https://www.ejemplo.com" target="_blank" rel="noopener noreferrer" title="Sitio de ejemplo">Ejemplo</a>
En este ejemplo, la etiqueta <a> se utiliza para crear un enlace al sitio web de ejemplo. Aquí está una descripción de los atributos utilizados:
href: el valor de este atributo es la URL del sitio web de ejemplo. Cuando el usuario hace clic en el enlace, se abrirá el sitio web en una nueva ventana o pestaña del navegador.
target: el valor de este atributo es “_blank”, lo que significa que el sitio web se abrirá en una nueva ventana o pestaña. Esto evita que el usuario pierda la página actual cuando hace clic en el enlace.
rel: el valor de este atributo es “noopener noreferrer”. Este valor es importante porque ayuda a prevenir ataques de seguridad en la página actual, como la suplantación de identidad. noopener indica que la ventana abierta no debe tener acceso a la ventana que abrió el enlace, y noreferrer indica que el navegador no debe enviar la información de referencia del sitio web de la página actual al sitio web vinculado.
title: el valor de este atributo es “Sitio de ejemplo”. Cuando el usuario pasa el cursor sobre el enlace, aparece un mensaje emergente que muestra el texto del atributo title.
Este ejemplo completo muestra cómo se pueden utilizar algunos de los atributos más comunes de la etiqueta <a> para crear un enlace web seguro y útil.
Otro ejemplo:
<a href="documento.pdf" target="_blank" title="Descargar documento PDF" download>Descargar PDF</a>
En este ejemplo, se enlaza a un documento PDF llamado “documento.pdf” y se establece el atributo target="_blank" para abrir el enlace en una nueva ventana o pestaña.
También se establece el atributo title para proporcionar una descripción emergente cuando el usuario pasa el cursor sobre el enlace, y se usa el atributo download para indicar que el archivo debe descargarse en lugar de abrirse en el navegador.
Más ejemplos
Aquí hay algunos ejemplos de cómo utilizar la etiqueta <a> en HTML:
Crear un enlace a otra página web:
<a href="https://www.example.com">Visitar Example.com</a>
Crear un enlace a una sección específica de una página:
<a href="#section2">Ir a la sección 2</a>
...
<a name="section2"></a>
<h2>Sección 2</h2>
Crear un enlace para descargar un archivo:
<a href="descargas/reporte.pdf" download>Descargar reporte</a>
Crear un enlace para abrir una dirección de correo electrónico:
<a href="mailto:ejemplo@dominio.com">Enviar un correo electrónico</a>
Crear un enlace para abrir una llamada telefónica:
<a href="tel:+1234567890">Llamar al teléfono</a>
Crear un enlace con un “title” para mejorar accesibilidad:
<a href="https://www.example.com" title="Visite la página principal de Example.com">Example.com</a>
Crear un enlace con una imagen como contenido:
<a href="https://www.example.com">
<img src="example.jpg" alt="Example.com">
</a>
Crear un enlace que abra en una nueva pestaña:
<a href="https://www.example.com" target="_blank">Visitar Example.com en una nueva pestaña</a>
Crear un enlace que desactive el seguimiento:
<a href="https://www.example.com" rel="nofollow">Visitar Example.com sin seguimiento</a>
Crear un enlace para llamar una función JavaScript:
<a href="javascript:alert('Hola mundo!')">Mostrar un mensaje</a>
En resumen, la etiqueta <a> es una herramienta esencial en HTML para crear enlaces y permitir a los usuarios navegar de una página web a otra o a una sección específica de una página.
Puede ser utilizada junto con otras etiquetas como imágenes y JavaScript para crear enlaces interactivos y mejorar la experiencia de usuario.
¿Qué es la etiqueta <abbr> en HTML?
La etiqueta <abbr> en HTML5 se utiliza para definir una abreviatura o acrónimo. La abreviatura se muestra en la página web, pero también se proporciona una descripción completa en un atributo title que aparece cuando el usuario coloca el cursor sobre la abreviatura.
La sintaxis básica de la etiqueta es la siguiente:
<abbr title="Descripción completa">Abreviatura<abbr>
Donde title es un atributo requerido y se utiliza para proporcionar la descripción completa de la abreviatura o acrónimo. El texto entre las etiquetas <abbr> y </abbr> es la abreviatura o acrónimo que se mostrará en la página web.
Ejemplo de uso
Aquí hay un ejemplo de cómo se puede usar la etiqueta <abbr> en una página web:
<p>La <abbr title="Organización de las Naciones Unidas">ONU</abbr> es una organización intergubernamental fundada en 1945 para mantener la paz y seguridad internacional.</p>
En este ejemplo, cuando el usuario coloca el cursor sobre las letras “ONU”, se muestra una descripción completa “Organización de las Naciones Unidas” gracias al atributo title.
Es importante usar la etiqueta <abbr> cuando se utilizan abreviaturas o acrónimos en una página web, ya que ayuda a los usuarios a comprender el significado completo de las palabras abreviadas.
Atributos
La etiqueta <abbr> en HTML5 tiene un atributo obligatorio y dos atributos opcionales.
A continuación se describe cada uno de ellos:
title (obligatorio): Este atributo se utiliza para proporcionar una descripción completa de la abreviatura o acrónimo. Es el único atributo que es obligatorio en la etiqueta <abbr>. La descripción completa se muestra cuando el usuario coloca el cursor sobre la abreviatura.
class (opcional): Este atributo se utiliza para especificar una o varias clases de estilo que se aplican a la etiqueta <abbr>. Las clases se definen en una hoja de estilo CSS separada.
id (opcional): Este atributo se utiliza para especificar un identificador único para la etiqueta <abbr>. El identificador se utiliza para referirse a la etiqueta desde una hoja de estilo CSS o desde otros elementos de la página.
Ejemplo
Aquí te dejo un ejemplo completo de cómo usar la etiqueta <abbr> con atributos en HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta abbr con atributos</title>
<style>
.acronimo {
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<h1>Ejemplo de etiqueta abbr con atributos</h1>
<p>La <abbr title="Organización de las Naciones Unidas" class="acronimo" id="onu">ONU</abbr> es una organización intergubernamental fundada en 1945 para mantener la paz y seguridad internacional.</p>
</body>
</html>
En este ejemplo, se crea un documento HTML5 que incluye una etiqueta <abbr> para la abreviatura “ONU”. El atributo title se utiliza para proporcionar una descripción completa de la abreviatura. Además, se incluyen los atributos opcionales class y id.
El atributo class se utiliza para asignar la clase de estilo “acronimo” a la etiqueta <abbr>, y el atributo id se utiliza para asignar el identificador “onu” a la etiqueta.
También se incluye una sección de estilo CSS dentro de la etiqueta <head> que define la clase de estilo “acronimo” y le da un peso de fuente en negrita y color azul.
Más ejemplos
Aquí te proporciono dos ejemplos avanzados que muestran diferentes usos de la etiqueta <abbr> en HTML5.
Ejemplo 1: Usando la etiqueta <abbr> para marcar términos técnicos
En este ejemplo, usamos la etiqueta <abbr> para marcar términos técnicos y proporcionar una explicación detallada de los mismos utilizando el atributo title.
<!DOCTYPE html>
<html>
<head>
<title>Uso avanzado de la etiqueta <abbr> en HTML5</title>
</head>
<body>
<h1>Uso avanzado de la etiqueta <abbr> en HTML5</h1>
<p>La <abbr title="Hypertext Markup Language">HTML</abbr> es un lenguaje de marcado utilizado para crear páginas web. El <abbr title="Cascading Style Sheets">CSS</abbr> es utilizado para dar estilo a las páginas web y hacerlas más atractivas. El <abbr title="JavaScript">JS</abbr> es utilizado para añadir interactividad a las páginas web.</p>
</body>
</html>
En este ejemplo, la etiqueta <abbr> se usa para marcar los términos técnicos “HTML”, “CSS” y “JS”. Además, se utiliza el atributo title para proporcionar una descripción detallada de cada término técnico.
Ejemplo 2: Usando la etiqueta <abbr> en combinación con JavaScript
En este ejemplo, usamos la etiqueta Ejemplo 2: Usando la etiqueta <abbr> en combinación con JavaScript
En este ejemplo, usamos la etiqueta <abbr> para mostrar una lista de países y proporcionar una descripción detallada de cada uno de ellos cuando el usuario hace clic en la abreviatura.
Para esto utilizamos JavaScript para mostrar la descripción en una alerta.
<!DOCTYPE html>
<html>
<head>
<title>Uso avanzado de la etiqueta <abbr> en HTML5</title>
<script>
function mostrarDescripcion(abbr, descripcion) {
alert(abbr + ": " + descripcion);
}
</script>
</head>
<body>
<h1>Uso avanzado de la etiqueta <abbr> en HTML5</h1>
<ul>
<li><abbr title="Alemania" onclick="mostrarDescripcion('DE', 'Alemania es un país en Europa central.')">DE</abbr></li>
<li><abbr title="Brasil" onclick="mostrarDescripcion('BR', 'Brasil es el quinto país más grande del mundo en términos de área y población.')">BR</abbr></li>
<li><abbr title="Canadá" onclick="mostrarDescripcion('CA', 'Canadá es el segundo país más grande del mundo en términos de área.')">CA</abbr></li>
</ul>
</body>
</html>
En este ejemplo, la etiqueta <abbr> se utiliza para mostrar las abreviaturas de los nombres de países. Se utiliza el atributo title para proporcionar una descripción corta de cada país.
También se utiliza el evento onclick para mostrar una alerta con la descripción detallada del país correspondiente cuando el usuario hace clic en la abreviatura.
La función mostrarDescripcion() se define en la sección <script> de la página y se encarga de mostrar la alerta con la descripción del país.
La Etiqueta <b> en HTML
La etiqueta <b> es una de las etiquetas de formato de texto de HTML5 y se utiliza para enfatizar una palabra o frase en negrita en el contenido de una página web.
La etiqueta <b> se utiliza cuando el texto enfatizado no tiene un significado adicional, es decir, se utiliza solo para hacer que el texto se destaque.
Si el texto enfatizado tiene un significado adicional o debe ser reconocido por los motores de búsqueda, se debe utilizar la etiqueta <strong> en su lugar.
Ejemplo de uso
Aquí hay un ejemplo de cómo se utiliza la etiqueta <b>:
<p>El <b>planeta Tierra</b> es el tercer planeta del sistema solar.</p>
En este ejemplo, hemos utilizado la etiqueta <b> para enfatizar la frase “planeta Tierra”. Cuando se muestra en un navegador web, el texto enfatizado se mostrará en negrita.
Es importante tener en cuenta que la etiqueta <b> solo se utiliza para presentar el texto de una manera más atractiva visualmente. Si se desea agregar significado adicional al texto enfatizado, se debe utilizar la etiqueta <strong> en su lugar.
Atributos
La etiqueta <b> es una etiqueta de formato de texto bastante simple, por lo que tiene muy pocos atributos.
Aquí están los atributos principales que se pueden utilizar con la etiqueta <b>:
id: permite identificar un elemento único en la página web para su posterior manipulación con JavaScript o CSS.
class: se utiliza para asignar una o varias clases CSS al elemento.
style: se utiliza para aplicar estilos CSS directamente al elemento.
title: se utiliza para proporcionar información adicional sobre el texto enfatizado cuando se pasa el cursor sobre él.
lang: se utiliza para especificar el idioma del contenido.
dir: se utiliza para especificar la dirección de lectura del contenido.
accesskey: se utiliza para especificar una tecla de acceso rápido para enfatizar el texto.
Es importante tener en cuenta que la etiqueta <b> solo se utiliza para presentar el texto de una manera más atractiva visualmente, por lo que los atributos que se utilizan con esta etiqueta generalmente se relacionan con la presentación del texto y no con su contenido semántico.
Ejemplo:
Aquí tienes un ejemplo de cómo utilizar la etiqueta <b> en HTML5 con algunos de sus atributos más comunes:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <b></title>
</head>
<body>
<h1><b id="titulo-principal" class="titulo-grande" style="color: red;">Bienvenido</b> a mi sitio web</h1>
<p>Este es un sitio web <b lang="es" dir="ltr">interesante</b> sobre HTML5 y CSS3.</p>
</body>
</html>
En este ejemplo, hemos utilizado los siguientes atributos:
id: hemos asignado un id “titulo-principal” al elemento <b> para poder manipularlo más tarde con CSS o JavaScript.
class: hemos asignado la clase “titulo-grande” al elemento <b> para aplicar estilos CSS específicos.
style: hemos aplicado un color rojo al elemento <b> utilizando estilos CSS directamente en el atributo style.
lang: hemos utilizado el atributo lang para especificar que la palabra “interesante” está en español.
dir: hemos utilizado el atributo dir para indicar la dirección de lectura (izquierda a derecha).
Más ejemplos
Aquí te dejo dos ejemplos avanzados de cómo utilizar la etiqueta <b> en HTML5.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <b></title>
<style>
b {
color: #F08080;
font-weight: bold;
text-shadow: 2px 2px 2px #ccc;
}
p b:first-of-type {
font-size: 24px;
}
p b:last-of-type {
font-size: 14px;
}
</style>
</head>
<body>
<h1> <b> Bienvenido </b> a mi sitio web </h1>
<p>Este es un sitio web sobre <b>HTML5</b> y <b>CSS3</b>.</p>
<p>La etiqueta <b> se utiliza para enfatizar texto en negrita. En este ejemplo, hemos utilizado CSS para cambiar el color del texto enfatizado a rosa claro y agregar una sombra de texto. También hemos utilizado CSS para establecer diferentes tamaños de fuente para los textos enfatizados en diferentes lugares en la página web.</p>
</body>
</html>
En este ejemplo, hemos utilizado CSS para dar estilo avanzado a la etiqueta <b>. Hemos utilizado la propiedad color para cambiar el color del texto enfatizado, la propiedad font-weight para establecer el grosor de la fuente, y la propiedad text-shadow para agregar una sombra de texto.
También hemos utilizado pseudo-selectores CSS como :first-of-type y :last-of-type para seleccionar los primeros y últimos elementos <b> dentro de los elementos <p> y aplicarles diferentes estilos de fuente.
Ejemplo 2: Uso de la etiqueta <b> para mejorar la accesibilidad
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <b></title>
</head>
<body>
<h1><b tabindex="0" aria-label="Bienvenido a mi sitio web">Bienvenido a mi sitio web</b></h1>
<p>Este es un sitio web sobre <b tabindex="0" aria-label="HTML5">HTML5</b> y <b tabindex="0" aria-label="CSS3">CSS3</b>.</p>
</body>
</html>
En este ejemplo, hemos utilizado los atributos tabindex y aria-label para mejorar la accesibilidad de la etiqueta <b>. Hemos utilizado el atributo tabindex para especificar el orden de tabulación del elemento y el atributo aria-label para proporcionar una descripción accesible del elemento.
Esto ayudará a los usuarios que utilizan lectores de pantalla o dispositivos de asistencia a comprender mejor el contenido de la página web.
La Etiqueta <bdi> en HTML
La dirección de escritura bidireccional es un problema que surge en los idiomas que se escriben de derecha a izquierda (como el árabe o el hebreo) y los idiomas que se escriben de izquierda a derecha (como el inglés o el español). En estos idiomas, los caracteres pueden ser interpretados y ordenados de manera diferente según el contexto.
La etiqueta <bdi> se utiliza para aislar el texto que debe ser interpretado de manera diferente en diferentes contextos. Por ejemplo, si estás escribiendo un sitio web en inglés que incluye algunos nombres árabes, podrías usar la etiqueta <bdi> para indicar que el nombre debe ser interpretado de manera diferente al resto del texto.
De esta manera, se asegura que el nombre sea interpretado correctamente independientemente del idioma que esté usando el usuario.
La etiqueta <bdi> es útil para hacer que el contenido web sea más accesible para usuarios que hablan diferentes idiomas y para evitar confusiones al interpretar texto bidireccional.
Ejemplos de uso
Aquí te doy un ejemplo de cómo utilizar la etiqueta <bdi> en HTML:
<p>Esta es una oración en inglés con una palabra en árabe: <bdi> العربية </bdi>. En este ejemplo, la oración está escrita en inglés, que es de derecha a izquierda. Sin embargo, la palabra “العربية” es en árabe, que es de izquierda a derecha. Si no se utiliza la etiqueta <bdi>, la palabra en árabe se mostraría invertida. Pero al usar <bdi> la palabra “العربية” se mostraría correctamente.
Otro ejemplo:
<p> Comentario de un usuario: <bdi> ¡Hola, me gusta mucho el juego "FIFA22"! </bdi></p>
En este caso, al usar la etiqueta <bdi> se asegura que el texto dentro de ella sea independiente del contexto, evitando problemas de formateo en caso de tener caracteres o conjuntos de caracteres que causarían problemas de formateo en el contenido circundante.
Espero que estos ejemplos te ayuden a entender cómo utilizar la etiqueta <bdi> en HTML.
Atributos
La etiqueta HTML <bdi> no tiene muchos atributos, en realidad solo tiene un atributo que es opcional, que es el atributo “dir”, que se utiliza para especificar la dirección de escritura del contenido dentro de la etiqueta <bdi>.
Los valores que puede tomar el atributo “dir” son “ltr” (de izquierda a derecha) y “rtl” (de derecha a izquierda). Si no se especifica el atributo “dir”, se utilizará la dirección de escritura del texto circundante.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “dir” en la etiqueta <bdi>:
<p>Este es un número en árabe: <bdi dir="rtl">١٢٣٤٥٦٧٨٩٠</bdi>. </p>
En este ejemplo, hemos utilizado la etiqueta <bdi> para envolver un número escrito en árabe, y hemos especificado el atributo “dir” con el valor “rtl” para indicar que la dirección de escritura del texto dentro de la etiqueta debe ser de derecha a izquierda.
De esta manera, el número será interpretado correctamente independientemente del idioma que esté usando el usuario.
Más ejemplos
Aquí te muestro dos ejemplos completos y avanzados de la etiqueta <bdi> de HTML5:
Ejemplo 1: Utilizando la etiqueta <bdi> para mostrar un nombre en hebreo y especificando la dirección de escritura.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta bdi</title>
</head>
<body>
<p>Este es un nombre en hebreo: <bdi dir="rtl">מיכאל</bdi>. </p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <bdi> para envolver un nombre en hebreo y hemos especificado el atributo “dir” con el valor “rtl” para indicar que la dirección de escritura del texto dentro de la etiqueta debe ser de derecha a izquierda.
Ejemplo 2: Utilizando la etiqueta <bdi> dentro de un formulario.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta bdi en formulario</title>
</head>
<body>
<form action="submit.php" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<label for="comment">Comentario:</label>
<textarea id="comment" name="comment" rows="5" cols="40"></textarea>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Enviar">
</form>
<p>Este es un nombre en árabe: <<bdi>عمرל</bdi>. </p>
/body>
</html>
En este ejemplo, hemos utilizado la etiqueta <bdi> para mostrar un nombre en árabe en una sección que está fuera del formulario.
El uso de la etiqueta <bdi> ayuda a garantizar que el nombre sea interpretado correctamente independientemente del idioma que esté usando el usuario.
La Etiqueta <bdo> en HTML
La etiqueta HTML <bdo> (Bidirectional Override) es una etiqueta que se utiliza para cambiar la dirección de escritura de un texto en HTML.
La dirección de escritura en HTML se define automáticamente según el contexto circundante. En los idiomas que se escriben de derecha a izquierda, como el árabe o el hebreo, el texto se escribe de derecha a izquierda.
En los idiomas que se escriben de izquierda a derecha, como el inglés o el español, el texto se escribe de izquierda a derecha.
Sin embargo, en algunos casos, puede ser necesario anular la dirección de escritura predeterminada. Es aquí donde entra en juego la etiqueta <bdo>.
La etiqueta <bdo> se utiliza para cambiar la dirección de escritura del texto, forzando que se escriba de izquierda a derecha o de derecha a izquierda, independientemente del contexto circundante.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <bdo> en HTML5:
<p>Este texto se escribe de izquierda a derecha. <bdo dir="rtl">Pero este texto se escribe de derecha a izquierda.</bdo></p>
En este ejemplo, hemos utilizado la etiqueta <bdo> para envolver un texto y hemos especificado el atributo “dir” con el valor “rtl” para indicar que la dirección de escritura del texto dentro de la etiqueta debe ser de derecha a izquierda. De esta manera, el texto será escrito de derecha a izquierda independientemente del idioma que esté usando el usuario.
Atributos
La etiqueta HTML <bdo> tiene un solo atributo obligatorio y un atributo opcional.
El atributo obligatorio de <bdo> es “dir”. Este atributo se utiliza para especificar la dirección de escritura del texto dentro de la etiqueta.
Los valores que puede tomar el atributo “dir” son “ltr” (de izquierda a derecha) y “rtl” (de derecha a izquierda).
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “dir” en la etiqueta <bdo>:
<p>Este texto se escribe de izquierda a derecha. <bdo dir="rtl">Pero este texto se escribe de derecha a izquierda.</bdo></p>
En este ejemplo, hemos utilizado la etiqueta <bdo> para envolver un texto y hemos especificado el atributo “dir” con el valor “rtl” para indicar que la dirección de escritura del texto dentro de la etiqueta debe ser de derecha a izquierda.
El atributo opcional de <bdo> es “lang”. Este atributo se utiliza para especificar el idioma del texto dentro de la etiqueta.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “lang” en la etiqueta <bdo>:
<p><<bdo dir="rtl" lang="ar">هذا النص مكتوب باللغة العربية<٠</bdo>
En este ejemplo, hemos utilizado la etiqueta <bdo> para envolver un texto en árabe y hemos especificado el atributo“lang” con el valor “ar” para indicar que el idioma del texto dentro de la etiqueta es árabe.
Esto ayuda a los navegadores y motores de búsqueda a determinar el idioma del texto en la página.
Más ejemplos
Aquí te muestro dos ejemplos completos y avanzados de la etiqueta <bdo> de HTML5:
Ejemplo 1: Utilizando la etiqueta para mostrar un número en árabe y especificando la dirección de escritura y el idioma.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta bdo</title>
</head>
<body>
<bdo dir="rtl" lang="ar">١٢٣٤٥٦٧٨٩٠<العربية<٠</bdo>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <bdo> para envolver un número escrito en árabe, y hemos especificado el atributo “dir” con el valor “rtl” para indicar que la dirección de escritura del texto dentro de la etiqueta debe ser de derecha a izquierda.
Y el atributo “lang” con el valor “ar” para indicar que el idioma del texto dentro de la etiqueta es árabe. De esta manera, el número será interpretado correctamente independientemente del idioma que esté usando el usuario.
Ejemplo 2: Utilizando la etiqueta <bdo> en un formulario.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta bdo en formulario</title>
</head>
<body>
<form action="submit.php" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<label for="comment">Comentario:</label>
<textarea id="comment" name="comment" rows="5" cols="40"></textarea>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Teléfono:</label>
<input type="tel" id="phone" name="phone">
<label for="address">Dirección:</label>
<input type="text" id="address" name="address">
<input type="submit" value="Enviar">
</form>
<p>Este es un número en hebreo: <bdo dir="rtl">1234567890</bdo>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <bdo> para mostrar un número en hebreo en una sección que está fuera del formulario.
El uso de la etiqueta <bdo> ayuda a garantizar que el número sea interpretado correctamente independientemente del idioma que esté usando el usuario.
La Etiqueta <cite> en HTML
La etiqueta HTML <cite> se utiliza para indicar la cita de una referencia a un libro, revista, película, trabajo de investigación o cualquier otra fuente que se haya utilizado como referencia en un documento.
También la etiqueta <cite> se puede utilizar para citar una referencia en línea o en un bloque de texto. Cuando se utiliza para citar una referencia en línea, la etiqueta <cite> se utiliza generalmente dentro del texto, y cuando se utiliza para citar una referencia en un bloque de texto, la etiqueta <cite> se utiliza generalmente junto con la etiqueta <blockquote>.
La etiqueta
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <cite> en HTML5:
<p>Según <cite>La Ilíada</cite>, "la cólera de Aquiles fue la causa de muchos males".</p>
En este ejemplo, hemos utilizado la etiqueta <cite> para indicar la referencia a “La Ilíada” y hemos incluido la cita dentro de comillas dobles.
Atributos
La etiqueta HTML <cite> no tiene atributos obligatorios u opcionales.
La única función de la etiqueta <cite> es indicar la referencia a una fuente que se haya utilizado como referencia en un documento. El contenido de la etiqueta <cite> puede ser cualquier texto que indique la fuente de la información, como un título de libro, un nombre de autor o el título de una película.
Sin embargo, se pueden utilizar atributos globales de HTML5, como “class” o “id”, en la etiqueta <cite> para aplicar estilos CSS o para identificar el elemento en el documento.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <cite>:
<p>Según <cite class="book-title">La Ilíada</cite>, "la cólera de Aquiles fue la causa de muchos males".</p>
En este ejemplo, hemos utilizado el atributo “class” en la etiqueta <cite> con el valor “book-title” para identificar que se trata del título de un libro.
Esto puede ser útil para aplicar estilos CSS específicos a las referencias de libros en un documento.
Más ejemplos
Aquí te presento dos ejemplos completos y avanzados de la etiqueta <cite> de HTML5:
Ejemplo 1: Utilizando la etiqueta <cite> para citar una referencia en línea y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta cite</title>
<style>
.book-title {
font-style: italic;
color: green;
}
</style>
</head>
<body>
<p>Según <cite class="book-title">La Ilíada</cite>, "la cólera de Aquiles fue la causa de muchos males".</p>
<p>Según <cite>"The Catcher in the Rye"</cite>, "nada termina por ser lo que uno espera".</p> </body>
</html>
En este ejemplo, hemos utilizado la etiqueta <cite> para citar dos referencias en línea y hemos aplicado estilos personalizados con CSS. Hemos utilizado el atributo “class” para identificar que se trata del título de un libro en la primera referencia y no se ha utilizado ningún atributo en la segunda referencia.
También hemos definido una regla CSS para aplicar cursiva y un color verde a las referencias que tienen la clase “book-title”.
Ejemplo 2: Utilizando la etiqueta <cite> y la etiqueta <blockquote> para citar una referencia en un bloque de texto.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta cite en bloque de texto</title>
</head>
<body>
<blockquote>
<p>"No tengo miedo de los ordenadores. Lo que tengo miedo es de la falta de ellos".</p>
<footer><cite>Isaac Asimov</cite></footer>
</blockquote>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <cite> y la etiqueta <blockquote> para citar una referencia en un bloque de texto.
Hemos incluido la cita dentro de la etiqueta <p> y hemos utilizado la etiqueta <footer> para incluir la referencia citada. En la referencia citada, hemos utilizado la etiqueta <cite> para indicar el autor de la cita.
La Etiqueta <code> en HTML
La etiqueta HTML <code> se utiliza para mostrar texto que debe ser interpretado como código informático. Este código puede incluir etiquetas HTML, CSS, JavaScript u otros lenguajes de programación.
La etiqueta <code> es útil para resaltar el código de un documento HTML y hacer que sea más fácil de leer y entender. El texto dentro de la etiqueta <code> se muestra generalmente en una fuente de ancho fijo (monoespaciada) y a menudo se resalta con un fondo de color diferente o un borde para separarlo visualmente del resto del contenido de la página.
Además, la etiqueta <code> se puede utilizar en combinación con otras etiquetas, como <pre>, <kbd> o <samp>, para crear bloques de código más complejos.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <code> en HTML5:
<p>Para imprimir un mensaje en JavaScript, utiliza el comando <code>console.log("Mensaje");</code></p>
En este ejemplo, hemos utilizado la etiqueta <code> para resaltar el código JavaScript y hacerlo más fácil de leer para el usuario.
Nota: El contenido dentro de la etiqueta <code> debe ser escrito en un lenguaje de programación válido, sino no funcionaría como se espera.
Atributos
La etiqueta HTML <code> no tiene atributos específicos.
La única función de la etiqueta <code> es mostrar texto que debe ser interpretado como código informático. El contenido de la etiqueta <code> puede ser cualquier código, ya sea HTML, CSS, JavaScript u otro lenguaje de programación.
Sin embargo, se pueden utilizar atributos globales de HTML5, como “class” o “id”, en la etiqueta <code> para aplicar estilos CSS o para identificar el elemento en el documento.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <code>:
<p>Para imprimir un mensaje en JavaScript, utiliza el comando <code class="highlight">console.log("Mensaje");</code></p>
En este ejemplo, hemos utilizado el atributo “class” en la etiqueta <code> con el valor “highlight” para aplicar un estilo CSS específico a ese código.
Esto puede ser útil para hacer que el código sea más fácil de leer o para resaltar el código de manera diferente al resto del texto en la página.
Más ejemplos
Aquí te presento dos ejemplos completos y avanzados de la etiqueta <code> de HTML5:
Ejemplo 1: Utilizando la etiqueta <code> para mostrar código CSS y aplicando estilos personalizados con CSS.
DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta code</title>
<style>
.highlight {
background-color: #f1f1f1;
border: 1px solid #ddd;
padding: 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<p>El siguiente código CSS cambiará el color del texto:</p>
<pre><code class="highlight">
body {
color: red;
}
</code></pre>
body>
</html>
En este ejemplo, hemos utilizado la etiqueta
También hemos utilizado la etiqueta <pre> para mantener el formato de líneas del código.
Ejemplo 2: Utilizando la etiqueta <code> para mostrar código HTML en un formulario.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta code en formulario</title>
</head>
<body>
<form action="submit.php" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Mensaje:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>
<input type="submit" value="Enviar">
</form>
<p>Aquí está el código HTML del formulario:</p>
<pre><code>
<form action="submit.php" method="post">
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Mensaje:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>
<input type="submit" value="Enviar">
</form>
</code>
</pre>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <code> para mostrar el código HTML del formulario y hemos utilizado la etiqueta <pre> para mantener el formato de líneas del código.
Esto ayuda a que el código sea más legible para el usuario y permite que se copie y pegue fácilmente.
La Etiqueta <data> en HTML
La etiqueta HTML <data> se utiliza para incrustar información de valor en una página web. La información incrustada en la etiqueta <data> se puede utilizar para mostrar valores de datos, estadísticas o cualquier otro tipo de información que se desee mostrar en la página.
Además, la etiqueta <data> se puede utilizar en combinación con otros elementos, como <p>, <span> o <div>, para mostrar la información incrustada. El contenido de la etiqueta <data> se puede mostrar utilizando CSS para controlar el estilo y la presentación de la información.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <data> en HTML5:
<p>La temperatura actual es de <data value="25" type="number">25 grados</data> Celsius.</p>
En este ejemplo, hemos utilizado la etiqueta <data> para incrustar el valor “25” como la temperatura actual en grados Celsius. Hemos utilizado el atributo “value” con el valor “25” y el atributo “type” con el valor “number” para indicar que se trata de un valor numérico.
Atributos
La etiqueta HTML <data> tiene dos atributos obligatorios:
“value”: este atributo especifica el valor de la información incrustada en la etiqueta <data>. El valor puede ser de cualquier tipo de dato, incluyendo números, cadenas de texto y otros tipos de datos.
“type”: este atributo especifica el tipo de información que se está incrustando en la etiqueta <data>. Los valores posibles son “string”, “number”, “date”, “time”, “datetime”, “month”, “week”, “range” y “color”. Cada uno de estos valores corresponde a un tipo de dato específico.
Además de estos atributos obligatorios, la etiqueta <data> también admite los siguientes atributos opcionales:
“id”: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
“class”: este atributo se utiliza para aplicar estilos CSS específicos a la etiqueta <data>. El valor del atributo “class” se puede utilizar para aplicar un estilo específico a la etiqueta o para agrupar varias etiquetas con el mismo estilo.
Ejemplo:
Aquí te presento un ejemplo de cómo se pueden utilizar los atributos “value” y “type” en la etiqueta <data>:
<p>La fecha actual es: <data value="2022-03-10" type="date"></data></p>
En este ejemplo, hemos utilizado la etiqueta <data> para incrustar la fecha actual utilizando el tipo de dato “date”. Hemos utilizado el atributo “value” con el valor “2022-03-10” y el atributo “type” con el valor “date” para indicar que se trata de una fecha.
Más ejemplos
Aquí te presento dos ejemplos completos y avanzados de la etiqueta <data> de HTML5:
Ejemplo 1: Utilizando la etiqueta <data> para mostrar estadísticas y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta data</title>
<style>
.stats {
font-weight: bold;
color: #008000;
}
</style>
</head>
<body>
<p>El sitio web ha tenido <data value="15234" type="number" class="stats"></data> visitas esta semana.</p>
<p>El número de registros nuevos en el sitio es: <data value="253" type="number" class="stats"></data></p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <data> para mostrar estadísticas de visitas y registros en un sitio web. Hemos utilizado el atributo “value” para especificar los valores numéricos de las estadísticas y el atributo “type” con el valor “number” para indicar que se trata de un valor numérico.
También hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a las estadísticas. En la regla CSS definida, hemos aplicado un estilo de fuente en negrita y un color verde oscuro a las estadísticas.
Ejemplo 2: Utilizando la etiqueta <data> y la etiqueta <time> para mostrar una fecha y hora en una página web.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta data y time</title>
</head>
<body>
<p>La última actualización de esta página fue el:<data value="2022-03-10T16:30:00" type="datetime"><time datetime="2026-03-10T16:30:00">10 de marzo de 2026 a las 4:30 PM</time></data></p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <data> y la etiqueta <time> para mostrar una fecha y hora de la última actualización de la página web. Hemos utilizado el atributo “value” para especificar la fecha y hora en formato ISO 8601 y el atributo “type” con el valor “datetime” para indicar que se trata de una fecha y hora.
También hemos utilizado la etiqueta <time> para mostrar la fecha y hora en un formato más legible para el usuario.
La Etiqueta <dfn> en HTML
La etiqueta HTML <dfn> se utiliza para definir términos o palabras clave en una página web. La etiqueta <dfn> es útil para indicar el significado de una palabra o término que puede ser desconocido para el usuario, especialmente en documentos técnicos o especializados.
El contenido de la etiqueta <dfn> se puede mostrar en un estilo diferente para resaltarlo visualmente del resto del texto. Por ejemplo, el contenido de la etiqueta <dfn> se puede mostrar en cursiva o en negrita para hacerlo más fácil de identificar.
La etiqueta <dfn> se puede utilizar en combinación con otros elementos, como <p>, <span> o <div>, para mostrar la definición de un término o palabra clave. Además, la etiqueta <dfn> también admite el atributo “title”, que se puede utilizar para proporcionar información adicional sobre el término o palabra clave.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <dfn> en HTML5:
<p>La <dfn title="Red de Área Amplia">WAN</dfn> es una red de computadoras que cubre un área geográfica extensa.</p>
En este ejemplo, hemos utilizado la etiqueta <dfn> para definir el término “WAN” (Wide Area Network) y hemos utilizado el atributo “title” para proporcionar información adicional sobre la definición del término.
La definición del término se puede mostrar en un estilo diferente utilizando CSS para hacerla más fácil de identificar para el usuario.
Atributos
La etiqueta HTML <dfn> admite los siguientes atributos principales:
title: este atributo se utiliza para proporcionar información adicional sobre el término o palabra clave definido por la etiqueta <dfn>. El valor del atributo se mostrará cuando el usuario haga clic o pase el cursor sobre el término.
class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <dfn> y para agrupar varias etiquetas con el mismo estilo.
id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <dfn> también admite otros atributos opcionales, como “lang” y “dir”, que se utilizan para especificar el idioma y la dirección de escritura de la definición del término.
Ejemplo:
Aquí te presento un ejemplo de cómo se pueden utilizar los atributos “title” y “class” en la etiqueta <dfn>:
<p>El término <dfn title="Sistema de Gestión de Base de Datos">SGBD</dfn> se utiliza para referirse a un software que se utiliza para crear y administrar bases de datos. Un ejemplo de un SGBD es <dfn title="Sistema de Gestión de Base de Datos Relacional">SGBDR</dfn>, que utiliza tablas para almacenar datos.</p>
En este ejemplo, hemos utilizado la etiqueta <dfn> para definir los términos “SGBD” y “SGBDR” y hemos utilizado el atributo “title” para proporcionar información adicional sobre las definiciones de los términos.
También hemos utilizado el atributo “class” para aplicar un estilo CSS específico a la definición de los términos. En la regla CSS definida, hemos aplicado un estilo de fuente en cursiva a la definición de los términos.
Más ejemplos
Aquí te presento dos ejemplos completos y avanzados de la etiqueta <dfn> de HTML5:
Ejemplo 1: Utilizando la etiqueta <dfn> para definir términos y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta dfn</title>
<style>
.dfn {
font-weight: bold;
color: #0000ff;
}
</style>
</head>
<body>
<p>En la industria de la tecnología, un <dfn class="dfn" title="Sistema de Gestión de Base de Datos">SGBD</dfn> es una herramienta de software utilizada para administrar y almacenar datos. Los ejemplos incluyen <dfn class="dfn" title="Sistema de Gestión de Base de Datos Relacional">SGBDR</dfn> y <dfn class="dfn" title="Sistema de Gestión de Base de Datos No Relacional">SGBDNR</dfn>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <dfn> para definir los términos “SGBD”, “SGBDR” y “SGBDNR” en la industria de la tecnología. También hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a la definición de los términos.
En la regla CSS definida, hemos aplicado un estilo de fuente en negrita y un color azul oscuro a la definición de los términos.
Ejemplo 2: Utilizando la etiqueta <dfn> y la etiqueta <abbr> para definir términos y proporcionar información adicional sobre ellos.
<!DOCTYPE html>
<html>
<head> <title>Ejemplo de etiqueta dfn y abbr</title>
</head>
<body>
<p>El <dfn title="Lenguaje de Marcado de Hipertexto">HTML</dfn> es un lenguaje de marcado utilizado para crear páginas web. El <abbr title="Organización Internacional de Normalización">ISO</abbr> es una organización internacional que establece estándares para varios campos, incluyendo la tecnología y los negocios.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <dfn> para definir el término “HTML” y hemos utilizado el atributo “title” para proporcionar información adicional sobre la definición del término.
También hemos utilizado la etiqueta <abbr> para definir el término “ISO” y hemos utilizado el atributo “title” para proporcionar información adicional sobre la organización.
La Etiqueta <em> en HTML
La etiqueta HTML <em> se utiliza para enfatizar el texto en una página web. El texto enfatizado se puede mostrar en cursiva o en negrita, dependiendo del estilo de la página web.
La etiqueta <em> es similar a la etiqueta <strong>, pero se utiliza para enfatizar el texto en lugar de para hacerlo más importante o destacado. El texto enfatizado puede indicar que es importante o que se debe prestar atención a él.
La etiqueta <em> se puede utilizar en combinación con otros elementos, como <p>, <span> o <div>, para enfatizar una parte del texto. También se puede utilizar en combinación con otras etiquetas de formato, como <b> o <i>, para aplicar estilos de formato específicos al texto enfatizado.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <em> en HTML5:
El plazo para enviar la solicitud de empleo es <em>mañana</em>.
En este ejemplo, hemos utilizado la etiqueta <em> para enfatizar la palabra “mañana” en el texto. Esto indica que la fecha límite para enviar la solicitud de empleo es importante y que se debe prestar atención a ella. El texto enfatizado se puede mostrar en cursiva o en negrita dependiendo del estilo de la página web.
Además de la etiqueta <em>, también existe la etiqueta <i> que se utiliza para enfatizar el texto en un contexto diferente, principalmente para resaltar el texto como diferente, sin necesariamente enfatizar su importancia.
Atributos
La etiqueta HTML <em> no admite muchos atributos, ya que se utiliza principalmente para enfatizar el texto en una página web. Los atributos principales que admite son los siguientes:
class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <em> y para agrupar varias etiquetas con el mismo estilo.
id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <em> también admite otros atributos opcionales, como “lang” y “dir”, que se utilizan para especificar el idioma y la dirección de escritura del texto enfatizado.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <em>:
<p>Este párrafo contiene <em class="destacado">texto enfatizado</em> que se muestra con un estilo personalizado en CSS.</p>
En este ejemplo, hemos utilizado la etiqueta <em> para enfatizar el texto “texto enfatizado” y hemos utilizado el atributo “class” para aplicar un estilo personalizado a la etiqueta. En la regla CSS definida, hemos aplicado un estilo de fuente en cursiva y un color rojo oscuro al texto enfatizado.
Más ejemplos
Aquí te presento dos ejemplos completos y avanzados de la etiqueta <em> de HTML5:
Ejemplo 1: Utilizando la etiqueta <em> para enfatizar el texto y la etiqueta <strong> para destacar la importancia.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
<body>
<p>Es <strong>importante</strong> que envíes la solicitud de empleo <em>antes de la fecha límite</em>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <strong> para destacar la importancia del texto “importante” y hemos utilizado la etiqueta <em> para enfatizar el texto “antes de la fecha límite”.
De esta manera, estamos indicando que es importante enviar la solicitud de empleo antes de la fecha límite y que este hecho se debe prestar atención.
Ejemplo 2: Utilizando la etiqueta <em> dentro de un enlace <a> para enfatizar el texto.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta em en un enlace</title>
</head>
<body>
<p>Para obtener más información, visite nuestro sitio web <a href="https://www.ejemplo.com"><em>pulsando aquí</em></a>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <em> dentro de un enlace <a> para enfatizar el texto “pulsando aquí”.
Esto indica al usuario que puede obtener más información al hacer clic en el enlace. Al hacer clic en el enlace, se abrirá el sitio web especificado en el atributo “href”.
La Etiqueta <i> en HTML
La etiqueta <i> se puede utilizar en combinación con otros elementos, como <p>, <span> o <div>, para aplicar un estilo de fuente en cursiva o un estilo de fuente diferente a una parte del texto. También se puede utilizar en combinación con otras etiquetas de formato, como <b> o <u>, para aplicar estilos de formato específicos al texto.
Aunque la etiqueta <i> se utiliza principalmente para aplicar una fuente en cursiva, su uso también se extiende para resaltar una palabra o frase de manera sutil, por ejemplo, para indicar términos técnicos, títulos de libros, nombres de películas, etc.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <i> en HTML5:
<p>La película <i>El padrino</i> es un clásico del cine americano.</p>
En este ejemplo, hemos utilizado la etiqueta <i> para aplicar un estilo de fuente en cursiva al título de la película “El padrino”. Esto indica al usuario que el título es diferente del resto del texto y que puede ser un término técnico o un título de obra.
Además de la etiqueta <i>, también existe la etiqueta <em> que se utiliza para enfatizar el texto en un contexto diferente, principalmente para hacerlo más importante o destacado.
Atributos
La etiqueta HTML <i> no admite muchos atributos, ya que se utiliza principalmente para aplicar un estilo de fuente en cursiva al texto en una página web.
Los atributos principales que admite son los siguientes:
class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <i> y para agrupar varias etiquetas con el mismo estilo.
id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <i> también admite otros atributos opcionales, como “lang” y “dir”, que se utilizan para especificar el idioma y la dirección de escritura del texto.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <i>:
<p>La <i class="destacado">nueva función</i> del sistema está disponible en la última actualización.</p>
En este ejemplo, hemos utilizado la etiqueta <i> para aplicar un estilo de fuente en cursiva al texto “nueva función” y hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta.
En la regla CSS definida, hemos aplicado un estilo de fuente en cursiva y un color rojo oscuro al texto enfatizado.
Más ejemplos
Aquí te presento dos ejemplos completos y avanzados de la etiqueta <i> de HTML5:
Ejemplo 1: Utilizando la etiqueta <i> para aplicar un estilo de fuente en cursiva al texto y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta i</title>
<style>
.i {
font-style: italic;
color: #00ff00;
font-size: 1.2em;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>Este es un texto en el que hemos aplicado un estilo de fuente <i class="i">en cursiva</i> y hemos utilizado el atributo "class" para aplicar estilos personalizados con CSS a la etiqueta.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <i> para aplicar un estilo de fuente en cursiva al texto “en cursiva” y hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a la etiqueta.
En la regla CSS definida, hemos aplicado un estilo de fuente en cursiva, un color verde brillante, un tamaño de fuente de 1.2 em y una fuente Arial o sans-serif.
Ejemplo 2: Utilizando la etiqueta <i> dentro de un enlace <a> para resaltar el texto y crear un enlace.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta i en un enlace</title>
</head>
<body>
<p>Para obtener más información, visite nuestro sitio web <a href="https://www.ejemplo.com"><i>pulsando aquí </i></a>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <i> dentro de un enlace <a> para resaltar el texto “pulsando aquí”.
Esto indica al usuario que puede obtener más información al hacer clic en el enlace. Al hacer clic en el enlace, se abrirá el sitio web especificado en el atributo “href”.
La Etiqueta <kbd> en HTML
La etiqueta HTML <kbd> se utiliza para indicar que el texto debe ser interpretado como una entrada del usuario desde un teclado o un dispositivo similar. La etiqueta <kbd> es especialmente útil para indicar cómo realizar una tarea utilizando teclas de acceso directo o atajos de teclado.
La etiqueta <kbd> se puede utilizar en combinación con otras etiquetas, como <p>, <span> o <div>, para resaltar una parte del texto como entrada del usuario. También se puede utilizar en combinación con otras etiquetas de formato, como <b> o <u>, para aplicar estilos de formato específicos al texto.
Aunque la etiqueta <kbd> se utiliza principalmente para indicar entradas de teclado, su uso también se extiende para resaltar comandos de línea de comandos, códigos de programación, etc.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <kbd> en HTML5:
<p>Para guardar un archivo en la mayoría de los programas, presione <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
En este ejemplo, hemos utilizado la etiqueta <kbd> para indicar que “Ctrl” y “S” deben ser presionados simultáneamente para guardar un archivo en la mayoría de los programas. Esto indica al usuario que se trata de un atajo de teclado y que puede ahorrar tiempo al realizar la tarea.
Atributos
La etiqueta HTML <kbd> no admite muchos atributos, ya que se utiliza principalmente para indicar que el texto debe ser interpretado como una entrada del usuario desde un teclado o dispositivo similar.
Los atributos principales que admite son los siguientes:
class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <kbd> y para agrupar varias etiquetas con el mismo estilo.
id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <kbd> también admite otros atributos opcionales, como “lang” y “dir”, que se utilizan para especificar el idioma y la dirección de escritura del texto.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <kbd>:
<p>Para guardar un archivo en la mayoría de los programas, presione <kbd class="teclas">Ctrl</kbd> + <kbd class="teclas">S</kbd>.</p>
En este ejemplo, hemos utilizado la etiqueta <kbd> para indicar que “Ctrl” y “S” deben ser presionados simultáneamente para guardar un archivo en la mayoría de los programas. Además, hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a las etiquetas.
En la regla CSS definida, hemos aplicado un fondo gris oscuro y un borde negro alrededor del texto para resaltar la entrada del usuario.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <kbd> de HTML5:
Ejemplo 1: Utilizando la etiqueta <kbd> para indicar una entrada de teclado y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta kbd</title>
<style>
.teclas {
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Para iniciar el programa, presione <kbd class="teclas">F12</kbd>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <kbd> para indicar que “F12” debe ser presionado para iniciar un programa. Hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a la etiqueta <kbd>.
En la regla CSS definida, hemos aplicado un fondo negro, un color blanco, un padding de 5px y un borde redondeado alrededor del texto para resaltar la entrada del usuario.
Ejemplo 2: Utilizando la etiqueta <kbd> dentro de un enlace <a> para resaltar una entrada de teclado y crear un enlace.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta kbd en un enlace</title>
</head>
<body>
<p>Para acceder a la sección de ayuda, presione <a href="https://www.ejemplo.com/ayuda"><kbd>F1</kbd></a>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <kbd> dentro de un enlace <a> para resaltar la entrada de teclado “F1”. Esto indica al usuario que puede acceder a la sección de ayuda al presionar esta tecla.
Al hacer clic en el enlace, se abrirá la página web especificada en el atributo “href”.
Ejemplo 3: Utilizando la etiqueta <kbd> dentro de la etiqueta <p> para indicar una entrada de teclado en una oración.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta kbd en un párrafo</title>
</head>
<body>
<p>Para desplazarse hacia arriba, presione <kbd>Ctrl</kbd> + <kbd>↑</kbd>, y para desplazarse hacia abajo, presione <kbd>Ctrl</kbd> + <kbd>↓</kbd>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <kbd> dentro de la etiqueta <p> para indicar las entradas de teclado “Ctrl + ↑” y “Ctrl + ↓”. Esto indica al usuario que puede desplazarse hacia arriba o hacia abajo en la página al presionar estas combinaciones de teclas.
La Etiqueta <mark> en HTML
La etiqueta HTML <mark> es una etiqueta de formato de texto que se utiliza para resaltar o resaltar un fragmento de texto dentro de un párrafo o una sección de una página web. Cuando se usa la etiqueta <mark>, el texto dentro de ella se mostrará en un fondo amarillo predeterminado en la mayoría de los navegadores web.
La etiqueta <mark> es útil para resaltar texto importante, como una palabra clave o un título, para hacerlo más visible y destacado. También se puede utilizar para resaltar texto que ha sido cambiado o editado, para indicar algo que necesita atención o para resaltar errores en un documento.
La etiqueta <mark> es una de las nuevas características introducidas en HTML5, lo que significa que algunos navegadores más antiguos pueden no reconocerla o no mostrarla correctamente.
Sin embargo, la mayoría de los navegadores modernos admiten la etiqueta <mark> y su uso se está volviendo cada vez más común en la construcción de sitios web.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <mark> en HTML5:
<p>El <mark>plazo de entrega</mark> para este producto es de dos días hábiles.
En este ejemplo, hemos utilizado la etiqueta <mark> para resaltar la frase “plazo de entrega” en una oración que indica cuánto tiempo tardará en llegar un producto.
Esto indica al usuario que esta información es importante y relevante para su decisión de compra.
Atributos
La etiqueta HTML <mark> no admite muchos atributos, ya que se utiliza principalmente para resaltar o destacar una sección de texto en una página web.
Los atributos principales que admite son los siguientes:
class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <mark> y para agrupar varias etiquetas con el mismo estilo.
id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <mark> también admite otros atributos opcionales, como “title”, que se utiliza para proporcionar información adicional sobre la sección de texto resaltada.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <mark>:
<p>La <mark class="importante">fecha límite</mark> para la presentación de solicitudes es el 31 de marzo.</p>
En este ejemplo, hemos utilizado la etiqueta <mark> para resaltar la fecha límite para la presentación de solicitudes. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <mark>.
En la regla CSS definida, hemos aplicado un fondo amarillo y un borde negro alrededor del texto resaltado para indicar que es importante.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <mark> de HTML5:
Ejemplo 1: Utilizando la etiqueta <mark> para resaltar una sección de texto y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta mark</title>
<style>
.importante {
background-color: yellow;
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<p>El <mark class="importante">plazo de entrega</mark> para este producto es de dos días hábiles.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <mark> para resaltar la frase “plazo de entrega” en una oración que indica cuánto tiempo tardará en llegar un producto. Hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a la etiqueta <mark>.
En la regla CSS definida, hemos aplicado un fondo amarillo, un color negro y un peso de fuente negrita alrededor del texto resaltado para indicar que es importante.
Ejemplo 2: Utilizando la etiqueta <mark> dentro de un enlace <a> para resaltar una sección de texto y crear un enlace.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta mark en un enlace</title>
</head>
<body>
<p>Para obtener más información, visite nuestro sitio web <a href="https://www.ejemplo.com"><mark>www.ejemplo.com</mark></a>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <mark> dentro de un enlace <a> para resaltar la dirección web “www.ejemplo.com”.
Esto indica al usuario que este es el sitio web al que deben dirigirse para obtener más información. Al hacer clic en el enlace, se abrirá la página web especificada en el atributo “href”.
Ejemplo 3: Utilizando la etiqueta <mark> dentro de la etiqueta <p> para resaltar varias secciones de texto en una oración.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta mark en un párrafo</title>
</head>
<body>
<p>El <mark>proyecto</mark> comenzará el <mark>1 de mayo</mark> y se espera que finalice a finales de <mark>julio</mark>.
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <mark> dentro de la etiqueta <p> para resaltar las palabras “proyecto”, “1 de mayo” y “julio” en una oración que indica cuándo comenzará y terminará un proyecto. Esto indica al usuario que estas son las fechas importantes a recordar.
La Etiqueta <q> en HTML
La etiqueta HTML <q> es una etiqueta de formato de texto que se utiliza para indicar una cita corta o un fragmento de texto citado dentro de un párrafo. Cuando se usa la etiqueta <q>, el texto dentro de ella se mostrará con comillas dobles ( » » ) en la mayoría de los navegadores web.
La etiqueta <q> se utiliza comúnmente para citar fragmentos de texto dentro de un párrafo o una sección de una página web. Es especialmente útil para citar el texto de otra fuente, como un libro, un artículo o un discurso.
Es importante tener en cuenta que la etiqueta <q> se utiliza para citas cortas, generalmente de una o dos frases. Para citas más largas, se recomienda utilizar la etiqueta <blockquote>.
La etiqueta <q> es una de las etiquetas de HTML5 y es compatible con la mayoría de los navegadores modernos. Sin embargo, algunos navegadores más antiguos pueden no reconocerla o no mostrarla correctamente.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <q> en HTML5:
<p>Según el proverbio, <q>la práctica hace al maestro</q>.</p>
En este ejemplo, hemos utilizado la etiqueta <q> para indicar una cita corta en una oración que indica que la práctica es importante para perfeccionar una habilidad. El texto citado “la práctica hace al maestro” se ha resaltado utilizando la etiqueta <q>.
Atributos
La etiqueta HTML <q> no admite muchos atributos, ya que se utiliza principalmente para indicar una cita corta en una página web.
Los atributos principales que admite son los siguientes:
cite: este atributo se utiliza para especificar la fuente de la cita. Puede contener una URL que enlace a la fuente de la cita o una referencia a un recurso bibliográfico.
class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <q> y para agrupar varias etiquetas con el mismo estilo.
id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <q> también admite otros atributos opcionales, como “title”, que se utiliza para proporcionar información adicional sobre la cita.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “cite” en la etiqueta <q>:
<p>Según el poeta William Wordsworth, <q cite="https://www.poetryfoundation.org/poems/45521/the-world-is-too-much-with-us">el mundo es demasiado con nosotros</q>.</p>
En este ejemplo, hemos utilizado la etiqueta <q> para indicar una cita corta de un poema de William Wordsworth. Hemos utilizado el atributo “cite” para especificar la fuente de la cita, que es una URL que enlaza a la página del poema en el sitio web Poetry Foundation.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <q> de HTML5:
Ejemplo 1: Utilizando la etiqueta <q> para indicar una cita corta y especificar la fuente con el atributo “cite”.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta q</title>
</head>
<body>
<p>El físico Albert Einstein dijo una vez: <q cite="https://www.goodreads.com/quotes/10684-creativity-is-contagious-pass-it-on">La creatividad es contagiosa, pásala.</q></p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta
para indicar una cita corta del físico Albert Einstein. Hemos utilizado el atributo “cite” para especificar la fuente de la cita, que es una URL que enlaza a la página del libro de citas en el sitio web Goodreads.
Ejemplo 2: Utilizando la etiqueta <q> dentro de la etiqueta <cite> para indicar una cita corta y su origen.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta q dentro de cite</title>
</head>
<body>
<p>El autor F. Scott Fitzgerald escribió en su novela <cite>The Great Gatsby</cite>: <q>La vida comienza de nuevo cuando se pone caliente en otoño.</q></p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <q> dentro de la etiqueta <cite> para indicar una cita corta del autor F. Scott Fitzgerald. Hemos utilizado la etiqueta <cite> para indicar que la cita proviene de su novela “El Gran Gatsby”.
Ejemplo 3: Utilizando la etiqueta <q> dentro de la etiqueta <p> y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta q con estilos personalizados</title>
<style>
.cita {
font-style: italic;
color: gray;
border-left: 3px solid blue;
padding-left: 10px;
margin-left: 20px;
}
</style>
</head>
<body>
<p>El escritor Paulo Coelho dijo: <q class="cita">La felicidad es algo que se multiplica cuando se divide.</q></p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <q> dentro de la etiqueta <p> para indicar una cita corta del escritor Paulo Coelho. Hemos utilizado el atributo “class” para aplicar estilos personalizados con CSS a la etiqueta <q>.
En la regla CSS definida, hemos aplicado un estilo de fuente cursiva y un color gris al texto citado. También hemos agregado un borde azul a la izquierda del texto, un margen izquierdo de 20 píxeles y un relleno izquierdo de 10 píxeles para dar un estilo personalizado a la cita.
La Etiqueta <rp> en HTML
La etiqueta HTML <rp> es una etiqueta de formato de texto que se utiliza junto con la etiqueta <ruby> para indicar texto que debe ser mostrado en navegadores que no soportan la etiqueta <ruby>.
La etiqueta <rp> define el contenido que se mostrará antes y después del contenido ruby, es decir, antes y después de la pronunciación o explicación de un texto en otro idioma.
La etiqueta <ruby> se utiliza para anotar texto con una pronunciación o explicación en otro idioma. La etiqueta <rp> se utiliza para indicar cómo debe ser mostrado el contenido ruby en navegadores que no soportan esta etiqueta.
Ejemplo de uso
El contenido de la etiqueta <rp> se mostrará antes y después del contenido ruby. Por ejemplo:
<ruby>日本語<rp>(</rp><rt>Nihongo</rt><rp>)</rp></ruby>
En este ejemplo, la etiqueta <ruby> indica que el texto “日本語” tiene una pronunciación o explicación en otro idioma, que se especifica con la etiqueta <rt>.
La etiqueta <rp> se utiliza para indicar cómo se mostrará el contenido ruby en navegadores que no soportan la etiqueta <ruby>, y en este caso se muestra con paréntesis.
Es importante tener en cuenta que la etiqueta <rp> no es necesaria si se utiliza la etiqueta <ruby> en navegadores que soportan esta etiqueta.
Atributos
La etiqueta HTML “rb” no tiene atributos específicos, ya que su función es simplemente indicar el carácter base del texto en el que se anotará.
Sin embargo, se pueden utilizar atributos universales como “class” y “id” para aplicar estilos CSS y para enlazar con scripts.
Es importante mencionar que las etiquetas “ruby” son diseñadas para mejorar la accesibilidad del texto para personas con discapacidad visual o discapacidad del habla, no tienen un propósito específico en términos de accesibilidad o SEO, pero su uso es recomendado para mejorar la accesibilidad del texto.
Más ejemplos
Aquí te presento tres ejemplos sencillos de cómo se puede utilizar la etiqueta <rp> en HTML5 en conjunto con las etiquetas de anotación ruby:
Ejemplo 1: Utilizando la etiqueta <rp> para especificar el texto de apoyo en un idioma asiático.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta rp</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra japonesa "sakura": <ruby>桜<rp>(</rp><rt>さくら</rt><rp>)</rp></ruby>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto japonés.
Hemos utilizado la etiqueta <rt> para especificar el texto de apoyo (la pronunciación de “sakura”) y la etiqueta <rp> para especificar el texto de apoyo que se mostrará en navegadores que no admiten la anotación ruby.
El texto de apoyo se muestra entre paréntesis y se coloca antes del texto principal en este caso.
Ejemplo 2: Utilizando la etiqueta <rp> en conjunto con CSS para personalizar la apariencia de la anotación ruby.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta rp con CSS</title>
<style>
rp {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra china "zhōngguó": <ruby>中国<rp>(</rp><rt>zhōng guó</rt><rp>)</rp></ruby>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto chino.
Hemos utilizado la etiqueta <rt> para especificar el texto de apoyo y la etiqueta <rp> para especificar el texto de apoyo que se mostrará en navegadores que no admiten la anotación ruby.
Hemos aplicado estilos personalizados al texto de apoyo utilizando CSS en la regla CSS definida para la etiqueta <rp>.
Ejemplo 3: Utilizando la etiqueta <rp> para indicar el texto de apoyo en un idioma bidireccional.
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Ejemplo de etiqueta rp con texto bidireccional</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby en árabe: <ruby>الخَمِيس<rp>(</rp><rt>kamis</rt><rp>)</ruby>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en árabe.
Hemos utilizado la etiqueta <rt> para especificar el texto de apoyo y la etiqueta <rp> para especificar el texto de apoyo que se mostrará en navegadores que no admiten la anotación ruby.
Hemos especificado la dirección del texto en el encabezado HTML utilizando el atributo “dir” con el valor “rtl”, lo que indica que el texto se escribe de derecha a izquierda.
Hemos utilizado la etiqueta <rp> para especificar el texto de apoyo que se mostrará en navegadores que no admiten la anotación ruby y se coloca después del texto principal en este caso.
La Etiqueta <rt> en HTML
La etiqueta HTML <rt> es una etiqueta de formato de texto que se utiliza junto con la etiqueta <ruby> para indicar la pronunciación o explicación de un texto en otro idioma. La etiqueta <rt> define el contenido que se mostrará como la pronunciación o explicación del texto anotado con la etiqueta <ruby>.
La etiqueta <ruby> se utiliza para anotar texto con una pronunciación o explicación en otro idioma. La etiqueta <rt> se utiliza para indicar la pronunciación o explicación del texto anotado con la etiqueta <ruby>.
Ejemplo de uso
El contenido de la etiqueta <rt> se mostrará como la pronunciación o explicación del texto anotado con la etiqueta <ruby>.
<ruby>日本語<rp>(</rp><rt>Nihongo</rt><rp>)</rp></ruby>
En este ejemplo, la etiqueta <ruby> indica que el texto “日本語” tiene una pronunciación o explicación en otro idioma, que se especifica con la etiqueta <rt>.
La etiqueta <rp> se utiliza para indicar cómo se mostrará el contenido ruby en navegadores que no soportan la etiqueta <ruby>, y en este caso se muestra con paréntesis.
Es importante tener en cuenta que la etiqueta solo se utiliza junto con la etiqueta <ruby>. Si se utiliza sin la etiqueta <ruby>, la etiqueta <rt> no tendrá ningún efecto visible.
Además, la etiqueta <ruby> y la etiqueta <rt> no son ampliamente soportadas por todos los navegadores, por lo que su uso se limita principalmente a la escritura de documentos en idiomas que requieren anotaciones de pronunciación o explicación.
Atributos
La etiqueta HTML <rt> es una etiqueta vacía, lo que significa que no admite ningún atributo ni contenido. Su única función es proporcionar el texto de apoyo que se muestra junto al carácter o palabra principal en las anotaciones ruby.
Más ejemplos
Aquí te presento tres ejemplos de cómo se puede utilizar la etiqueta <rt> en HTML5 en conjunto con la etiqueta <ruby>:
Ejemplo 1: Anotación ruby en chino utilizando la etiqueta <rt>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta rt</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra china "zhōngguó": <ruby>中国<rt>zhōng guó</rt></ruby>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto chino. Hemos utilizado la etiqueta <rt> para especificar el texto de apoyo (la pronunciación de “zhōngguó”) que se mostrará junto al carácter principal.
El texto de apoyo se muestra en un tamaño de fuente más pequeño que el carácter principal.
Ejemplo 2: Anotación ruby en japonés utilizando la etiqueta <rt>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta rt</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra japonesa "sakura": <ruby>桜<rt>さくら</rt></ruby>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto japonés. Hemos utilizado la etiqueta <rt> para especificar el texto de apoyo (la pronunciación de “sakura”) que se mostrará junto al carácter principal.
El texto de apoyo se muestra encima del carácter principal y en un tamaño de fuente más pequeño.
Ejemplo 3: Anotación ruby en coreano utilizando la etiqueta <rt>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta rt</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra coreana "hangeul": <ruby>한글<rt>han-geul</rt></ruby>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto coreano. Hemos utilizado la etiqueta <rt> para especificar el texto de apoyo (la pronunciación de “hangeul”) que se mostrará junto al carácter principal.
El texto de apoyo se muestra en un tamaño de fuente más pequeño que el carácter principal.
La Etiqueta <ruby> en HTML
La etiqueta HTML <ruby> es una etiqueta de formato de texto que se utiliza para anotar texto con una pronunciación o explicación en otro idioma. La etiqueta <ruby> define el contenido que se mostrará como el texto anotado y la pronunciación o explicación del mismo.
La etiqueta <ruby> se compone de dos partes principales: el texto anotado y la pronunciación o explicación. El texto anotado se define dentro de la etiqueta <ruby>, mientras que la pronunciación o explicación se define dentro de la etiqueta <rt>.
Ejemplo de uso
La estructura básica de la etiqueta “ruby” se ve así:
<ruby>
caracter base <rt>anotación</rt>
</ruby>
En este ejemplo, el carácter base se encuentra dentro de la etiqueta “ruby” y la anotación se encuentra dentro de la etiqueta “rt” (ruby text).
Además de “rt”, también se pueden utilizar otras etiquetas “ruby” como “rb” (ruby base) y “rp” (ruby parenthesis) para indicar el carácter base y los paréntesis que rodean la anotación, respectivamente. Por ejemplo:
<ruby>
<rb>漢</rb><rp>(</rp><rt>kan</rt><rp>)</rp>字
</ruby>
En este ejemplo, la etiqueta “rb” se utiliza para indicar el carácter base “漢” y las etiquetas “rp” se utilizan para indicar los paréntesis que rodean la anotación “kan” que se encuentra dentro de la etiqueta “rt”.
Atributos
La etiqueta HTML <ruby> no admite ningún atributo propio, su única función es proporcionar una forma de definir anotaciones ruby en idiomas asiáticos utilizando las etiquetas <rb> y <rt>.
Pero se pueden usar atributos universales como “class” y “id” para aplicar estilos CSS y para enlazar con scripts.
Más ejemplos
Aquí te presento tres ejemplos de cómo se puede utilizar la etiqueta <ruby> en HTML5 para definir anotaciones ruby en idiomas asiáticos como el chino, japonés y coreano:
Ejemplo 1: Anotación ruby en chino utilizando la etiqueta <ruby>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta ruby</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra china "zhōngguó": <ruby> <rb>中国 </rb> <rt>zhōng guó </rt> </ruby>. </p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto chino. Hemos utilizado la etiqueta <rb> para especificar el carácter principal (“中国”) y la etiqueta <rt> para especificar su texto de apoyo correspondiente (“zhōng guó”).
El texto de apoyo se muestra encima del carácter principal y en un tamaño de fuente más pequeño.
Ejemplo 2: Anotación ruby en japonés utilizando la etiqueta <ruby>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta ruby</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra japonesa "sakura": <ruby><rb>桜</rb><rt>さくら</rt></ruby>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto japonés. Hemos utilizado la etiqueta <rb> para especificar el carácter principal (“桜”) y la etiqueta <rt> para especificar su texto de apoyo correspondiente (“さくら”).
El texto de apoyo se muestra encima del carácter principal y en un tamaño de fuente más pequeño.
Ejemplo 3: Anotación ruby en coreano utilizando la etiqueta <ruby>
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta ruby</title>
</head>
<body>
<p>El siguiente texto utiliza anotación ruby para indicar la pronunciación de la palabra coreana "hangeul": <ruby><rb>한글</rb><rt>han-geul</rt></ruby>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <ruby> para indicar una anotación ruby en el texto coreano. Hemos utilizado la etiqueta <rb> para especificar el carácter principal (“한글”) y la etiqueta <rt> para especificar su texto de apoyo correspondiente (“han-geul”).
El texto de apoyo se muestra encima del carácter principal y en un tamaño de fuente más pequeño.
La Etiqueta <samp> en HTML
La etiqueta HTML <samp> es una etiqueta de formato de texto que se utiliza para representar la salida de un programa de computadora o la entrada del usuario. Cuando se usa la etiqueta <samp>, el texto dentro de ella se mostrará en un tipo de letra monoespaciado, típicamente con un fondo gris claro en la mayoría de los navegadores web.
La etiqueta <samp> es útil para mostrar el resultado de un programa de computadora o la entrada de un usuario de manera clara y fácil de leer. También se puede utilizar para indicar un código de ejemplo o para mostrar una respuesta en una interacción de usuario.
Es importante tener en cuenta que la etiqueta <samp> no se utiliza para resaltar o enfatizar el texto, sino para indicar que es una muestra de código o entrada/salida de usuario. Por lo tanto, no se debe confundir con otras etiquetas de formato de texto, como <code> o <pre>, que se utilizan para mostrar código o texto preformateado.
La etiqueta <samp> es una de las etiquetas de formato de texto básicas de HTML5 y se puede utilizar en combinación con otras etiquetas de formato de texto para crear documentos web bien estructurados y legibles.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <samp> en HTML:
<p>El resultado de la operación es: <samp>4</samp></p>
En este ejemplo, hemos utilizado la etiqueta <samp> para mostrar la salida de una operación matemática. El número “4” se muestra dentro de la etiqueta <samp>, lo que indica que es la salida de la operación y no parte del texto normal.
Atributos
La etiqueta <samp> en HTML5 tiene algunos atributos que se pueden utilizar para personalizar su apariencia o proporcionar información adicional.
Los atributos principales de la etiqueta <samp> son:
class: se utiliza para asignar una o más clases CSS al elemento <samp> para aplicar estilos personalizados a todos los elementos que tengan la misma clase.
id: se utiliza para asignar un identificador único al elemento <samp> para que pueda ser referenciado por otros elementos en la página.
title: se utiliza para proporcionar información adicional sobre el elemento <samp> en forma de texto emergente cuando el usuario mueve el cursor sobre el elemento.
Además, la etiqueta <samp> también admite algunos atributos globales de HTML5, como style para aplicar estilos en línea, accesskey para definir una tecla de acceso rápido y tabindex para definir el orden de tabulación del elemento.
Es importante tener en cuenta que la etiqueta <samp> no tiene atributos específicos que se refieran directamente a su función de mostrar la salida de un programa o la entrada del usuario.
En cambio, los atributos mencionados anteriormente se utilizan para personalizar su apariencia o proporcionar información adicional como con cualquier otro elemento HTML5.
Más ejemplos
Aquí te presento tres ejemplos de cómo se puede utilizar la etiqueta <samp> para mostrar la salida de una muestra o una sección de código:
Ejemplo 1: Utilizando la etiqueta <samp> para mostrar la salida de un programa y aplicando estilos personalizados con CSS.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta samp con estilos personalizados</title>
<style>
.samp {
background-color: #f5f5f5;
padding: 5px;
font-family: monospace;
}
</style>
</head>
<body>
<p>El resultado del programa es: <samp class="samp">Hola, Mundo!</samp></p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <samp> para mostrar la salida de un programa y hemos aplicado estilos personalizados con CSS a la etiqueta <samp>.
Hemos aplicado un fondo gris claro y un estilo de fuente de ancho fijo para hacer que la salida del programa se destaque del resto del texto.
Ejemplo 2: Utilizando la etiqueta <samp> para mostrar la salida de una consulta a una base de datos.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta samp con consulta a base de datos</title>
</head>
<body>
<p>El número de productos disponibles es: <samp>23</samp>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <samp> para mostrar la salida de una consulta a una base de datos. Hemos utilizado la etiqueta <samp> para mostrar el número de productos disponibles en el inventario.
Ejemplo 3: Utilizando la etiqueta
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta samp con descripción</title>
</head>
<body>
El resultado del programa es: <samp title="Esto es la salida del programa">Hello, World!</samp></p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <samp> para mostrar la salida de un programa y hemos agregado una descripción de la salida utilizando el atributo “title”.
La Etiqueta <small> en HTML
La etiqueta HTML <small> es una etiqueta de formato de texto que se utiliza para indicar que el texto contenido dentro de ella es de menor importancia o tamaño que el texto circundante. Cuando se usa la etiqueta <small>, el texto dentro de ella se mostrará en una fuente más pequeña en la mayoría de los navegadores web.
La etiqueta <small> es útil para indicar que el texto es secundario o menos importante en comparación con el texto circundante. Por ejemplo, se puede utilizar para mostrar el copyright o la información de la fuente en el pie de página de un sitio web.
Es importante tener en cuenta que la etiqueta <small> no se debe utilizar para mostrar texto que es difícil de leer o ilegible debido a su tamaño reducido. El tamaño de la fuente debe ser legible y coherente con el resto del texto en la página.
La etiqueta <small> es una de las etiquetas de formato de texto básicas de HTML5 y se puede utilizar en combinación con otras etiquetas de formato de texto para crear documentos web bien estructurados y legibles.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <small> en HTML:
<p>Esta es una nota a pie de página <small>Esta nota es de menor tamaño que el texto normal</small>.</p>
En este ejemplo, hemos utilizado la etiqueta <small> para mostrar una nota a pie de página con texto de menor tamaño que el texto normal que lo rodea.
Atributos
La etiqueta HTML <small> no admite muchos atributos, ya que se utiliza principalmente para indicar que el texto es pequeño o para proporcionar información adicional sobre el texto.
Los atributos principales que admite son los siguientes:
class: este atributo se utiliza para aplicar estilos CSS a la etiqueta <small> y para agrupar varias etiquetas con el mismo estilo.
id: este atributo se utiliza para identificar la etiqueta en el documento y puede ser útil para aplicar estilos CSS o para acceder a la etiqueta mediante JavaScript.
Además de estos atributos, la etiqueta <small> también admite otros atributos opcionales, como “style”, que se utiliza para aplicar estilos en línea a la etiqueta, o “title”, que se utiliza para proporcionar información adicional sobre el texto.
Ejemplo:
Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <small>:
<p><small class="notificacion">Última actualización: 10 de marzo de 2023</small></p>
En este ejemplo, hemos utilizado la etiqueta <small> para indicar que el texto es pequeño y para proporcionar información adicional sobre la última actualización de un documento.
Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <small>. En la regla CSS definida, hemos aplicado un color gris y un tamaño de fuente más pequeño alrededor del texto para que sea menos visible.
Más ejemplos
Aquí te presento cuatro ejemplos completos y avanzados de la etiqueta <small> de HTML5:
Ejemplo 1: Utilizando la etiqueta <small> para indicar que el texto es pequeño y proporcionar información adicional sobre una imagen.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta small</title>
<style>
.imagen {
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Requisitos para la admisión</h2>
<img src="requisitos.jpg" alt="Requisitos para la admisión" class="imagen">
<p>Los requisitos para la admisión son los siguientes:</p>
<ul>
<li>Formulario de solicitud completo</li>
<li>Certificado de estudios secundarios</li>
<li><small>Carta de recomendación de un profesor o un empleador</small></li>
</ul>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <small> para indicar que la carta de recomendación es un requisito opcional y para proporcionar información adicional sobre la misma.
Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <small>. En la regla CSS definida, hemos aplicado un tamaño de fuente más pequeño y un estilo de fuente en cursiva para indicar que es opcional.
Ejemplo 2: Utilizando la etiqueta <small> dentro de un enlace <a> para proporcionar información adicional sobre un enlace.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta small en un enlace</title>
</head>
<body>
<p>Visite nuestro sitio web para obtener más información <a href="https://www.ejemplo.com"><small>(requisitos de admisión)</small></a>.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <small> dentro de un enlace <a> para proporcionar información adicional sobre el enlace.
Al hacer clic en el enlace, el usuario será dirigido al sitio web especificado en el atributo “href”. Hemos utilizado el tamaño de fuente más pequeño para que el texto sea menos visible y no distraiga al usuario del texto principal.
Ejemplo 3: Utilizando la etiqueta <small> dentro de la etiqueta <p> para indicar que el texto es pequeño y proporcionar información adicional sobre una fecha.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta small en un párrafo</title>
</head>
<body>
<p><small>Última actualización: 10 de marzo de 2023</small></p>
<p>La fecha límite para la presentación de solicitudes es el 31 de marzo de 2023.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <small> dentro de la etiqueta <p> para indicar que el texto es pequeño y para proporcionar información adicional sobre la última actualización de un documento.
Hemos utilizado el tamaño de fuente más pequeño para que el texto sea menos visible y no distraiga al usuario del texto principal.
Ejemplo 4: Añadir una nota legal en el pie de página de un sitio web:
<footer>
<p>Copyright © 2023 Mi sitio web</p>
<small>Todos los derechos reservados. El contenido de este sitio no puede ser reproducido sin permiso.</small>
</footer>
La Etiqueta <span> en HTML
La etiqueta HTML <span> es una etiqueta de formato de texto que se utiliza para aplicar estilos personalizados a un fragmento de texto dentro de una línea de texto o un bloque de texto.
Cuando se usa la etiqueta <span>, el texto dentro de ella no se muestra de manera diferente en sí mismo, pero puede ser estilizado a través de CSS.
La etiqueta <span> es útil para aplicar estilos personalizados, como cambiar el color o el tamaño de fuente, a un fragmento de texto dentro de un párrafo o una sección de una página web.
También se puede utilizar para etiquetar un fragmento de texto con un identificador único para que pueda ser referenciado por otros elementos en la página.
La etiqueta <span> es una de las etiquetas de formato de texto básicas de HTML5 y se puede utilizar en combinación con otras etiquetas de formato de texto para crear documentos web bien estructurados y legibles.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <span> en HTML5:
<p>Este es un <span class="resaltado">texto resaltado</span> en una oración.</p>
En este ejemplo, hemos utilizado la etiqueta <span> para resaltar la palabra “texto resaltado” en una oración. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <span>.
En la regla CSS definida, hemos aplicado un color de fondo amarillo y un borde negro alrededor de la palabra resaltada para que sea más visible.
Atributos
La etiqueta <span> en HTML no tiene atributos específicos, sin embargo, se pueden utilizar los atributos globales en cualquier elemento HTML.
Los atributos más comunes utilizados con <span> son:
class: Este atributo permite asignar una o varias clases al elemento <span>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).
Ejemplo:
<span class="resaltado">Texto resaltado</span>
id: Este atributo permite asignar un identificador único al elemento <span>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).
Ejemplo:
<span id="nota">Texto con nota</span>
style: Este atributo permite aplicar estilos CSS directamente al elemento <span>. Aunque esta es una forma rápida de aplicar estilos, se recomienda utilizar clases o identificadores en su lugar para un mejor control y mantenimiento del código.
Ejemplo:
<span style="color: red;">Texto resaltado</span>
title: Este atributo permite añadir un texto de ayuda o título al elemento <span>. Este texto se mostrará como una herramienta de ayuda cuando el usuario posiciona el cursor sobre el elemento.
Ejemplo:
<span title="Este es un texto de ayuda">Texto con ayuda</span>
Los atributos más importantes de la etiqueta <span> son los atributos globales, como class, id, style y title, ya que permiten aplicar estilos y proporcionar información adicional sobre el texto dentro del elemento <span>.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <span> de HTML5:
Ejemplo 1: Utilizando la etiqueta <span> para resaltar el texto de un párrafo.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta span</title>
<style>
.resaltado {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p>Este es un <span class="resaltado">texto resaltado</span> en un párrafo.</p>
<p>Este es otro <span class="resaltado">texto resaltado</span> en otro párrafo.</p>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <span> para resaltar el texto de dos párrafos. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <span>.
En la regla CSS definida, hemos aplicado un color de fondo amarillo y un peso de fuente en negrita alrededor del texto para que sea más visible.
Ejemplo 2: Utilizando la etiqueta <span> para aplicar un estilo específico a un enlace.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta span en un enlace</title>
<style>
.enlace-resaltado {
color: red;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Visite nuestro sitio web para obtener más información <a href="https://www.ejemplo.com"><span class="enlace-resaltado">sobre los requisitos de admisión</span></a>.</p>
</body>
</html>
Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <span>.
En la regla CSS definida, hemos aplicado un color de texto rojo, un peso de fuente en negrita y una decoración de texto de subrayado alrededor del texto del enlace para que sea más visible.
Ejemplo 3: Utilizando la etiqueta <span> para resaltar el texto en un formulario.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta span en un formulario</title>
<style>
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="email"] {
border: 1px solid #ccc;
padding: 5px;
width: 100%;
}
.obligatorio {
color: red;
}
</style>
</head>
<body>
<form>
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre">
<label for="email">Correo electrónico:</label>
<input type="email" name="email" id="email">
<label for="mensaje">Mensaje <span class="obligatorio">*</span>:</label>
<textarea name="mensaje" id="mensaje"></textarea>
<button type="submit">Enviar</button>
</form>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <span> para resaltar la etiqueta “Mensaje” como obligatorio en un formulario. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <span>.
En la regla CSS definida, hemos aplicado un color de texto rojo alrededor del texto para indicar que el campo es obligatorio. Además, hemos utilizado el atributo “for” en la etiqueta <label> para asociarla con su campo de entrada correspondiente.
La Etiqueta <strong> en HTML
La etiqueta HTML <strong> es una etiqueta de formato de texto que se utiliza para indicar que el texto contenido dentro de ella es importante o enfático. Cuando se usa la etiqueta <strong>, el texto dentro de ella se mostrará en negrita en la mayoría de los navegadores web.
La etiqueta <strong> es útil para indicar que el texto es significativo o enfático en comparación con el texto circundante. Por ejemplo, se puede utilizar para resaltar un título o una palabra clave en un documento.
Es importante tener en cuenta que la etiqueta <strong> no se debe utilizar simplemente para mostrar el texto en negrita, sino que debe usarse para resaltar el significado y la importancia del texto contenido dentro de ella.
La etiqueta <strong> es una de las etiquetas de formato de texto básicas de HTML5 y se puede utilizar en combinación con otras etiquetas de formato de texto para crear documentos web bien estructurados y legibles.
Ejemplo de uso
Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <strong> en HTML5:
<p>Este es un <strong>texto importante</strong> en una oración.</p>
En este ejemplo, hemos utilizado la etiqueta <strong> para indicar que el texto “texto importante” es importante para la comprensión del contenido de la oración. El texto se mostrará en negrita en la mayoría de los navegadores web, lo que lo hace más visible y fácil de leer.
Atributos
La etiqueta <strong> en HTML no tiene atributos específicos, sin embargo, se pueden utilizar los atributos globales en cualquier elemento HTML. Los atributos más comunes utilizados con <strong> son:
class: Este atributo permite asignar una o varias clases al elemento <strong>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).
Ejemplo:
<strong class="important">Texto importante</strong>
id: Este atributo permite asignar un identificador único al elemento <strong>, lo que permite aplicar estilos CSS específicos a través de una hoja de estilo en cascada (CSS).
Ejemplo:
<strong id="important">Texto importante</strong>
style: Este atributo permite aplicar estilos CSS directamente al elemento <strong>. Aunque esta es una forma rápida de aplicar estilos, se recomienda utilizar clases o identificadores en su lugar para un mejor control y mantenimiento del código.
Ejemplo:
<strong style="color: red;">Texto importante</strong>
title: Este atributo permite añadir un texto de ayuda o título al elemento <strong>. Este texto se mostrará como una herramienta de ayuda cuando el usuario posiciona el cursor sobre el elemento.
Ejemplo:
<strong title="Este es un texto importante">Texto importante</strong>
En resumen, los atributos más importantes de la etiqueta <strong> son los atributos globales, como class, id, style y title, ya que permiten aplicar estilos y proporcionar información adicional sobre el texto dentro del elemento <strong>.
Sin embargo, es importante tener en cuenta que su uso principal es dar énfasis semántico al texto y no solo estético.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <strong> de HTML5:
Ejemplo 1: Utilizando la etiqueta <strong> para enfatizar el título de un artículo.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta strong</title>
<style>
h1 {
font-size: 36px;
font-weight: normal;
margin-bottom: 20px;
}
.destacado {
color: #ff6600;
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1><strong class="destacado">Cómo ahorrar dinero</strong> en tu próximo viaje</h1>
</header>
<article>
<p>En este artículo, te ofrecemos consejos útiles para <strong>ahorrar dinero</strong> en tus próximas vacaciones. Desde buscar ofertas de vuelos hasta reservar alojamiento económico, te ofrecemos las mejores prácticas para que puedas disfrutar de tus vacaciones sin arruinarte.</p>
</article>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <strong> para enfatizar el título de un artículo. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la etiqueta <strong>.
En la regla CSS definida, hemos aplicado un color de texto naranja y un peso de fuente en negrita alrededor del texto para que se destaque más.
Ejemplo 2: Utilizando la etiqueta <strong> para enfatizar las palabras clave en una lista.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta strong en una lista</title>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.lista-destacada li strong {
color: #ff0000;
}
</style>
</head>
<body>
<ul class="lista-destacada">
<li><strong>Marketing digital:</strong> aprende las mejores técnicas para promocionar tu negocio en línea.</li>
<li><strong>Desarrollo web:</strong> domina los lenguajes de programación y las herramientas necesarias para construir sitios web profesionales.</li>
<li><strong>Diseño gráfico:</strong> crea diseños impactantes para tus proyectos con las herramientas adecuadas.</li>
</ul>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <strong> dentro de elementos <li> de una lista para enfatizar las palabras clave. Hemos utilizado el atributo “class” para aplicar un estilo personalizado con CSS a la lista.
En la regla CSS definida, hemos aplicado un color de texto rojo alrededor del texto dentro de la etiqueta <strong> para que se destaque más.
La Etiqueta <sub> en HTML
La etiqueta <sub> de HTML5 se utiliza para representar texto en formato de subíndice dentro de un documento HTML. El subíndice es un texto que aparece ligeramente más abajo que el texto base y generalmente se muestra en un tamaño de fuente más pequeño.
Esta etiqueta es útil para representar notaciones científicas, químicas, matemáticas, y otras situaciones en las que se necesita texto en posición de subíndice.
Ejemplo de uso
La estructura básica de la etiqueta <sub> es la siguiente:
<p> Texto normal <sub>texto en subíndice</sub> más texto normal. </p>
En este ejemplo, el texto dentro de las etiquetas <sub> se mostrará como subíndice, mientras que el resto del texto se mostrará de manera normal.
Es importante tener en cuenta que el uso de la etiqueta <sub> no debe ser puramente estético. Siempre que sea posible, úsala para proporcionar un significado semántico al texto que estás mostrando como subíndice, como en el caso de fórmulas químicas, matemáticas o notación científica.
Atributos
La etiqueta <sub> de HTML5 no tiene atributos específicos, ya que su propósito principal es representar texto en formato de subíndice.
Sin embargo, como cualquier otra etiqueta de HTML, puede utilizar los atributos globales y los atributos específicos para eventos que son aplicables a todas las etiquetas HTML.
Algunos atributos globales comunes incluyen:
id: Permite asignar un identificador único a la etiqueta <sub> para su uso en CSS o JavaScript.
class: Permite asignar una o varias clases CSS para aplicar estilos específicos a la etiqueta <sub>.
style: Permite aplicar estilos en línea a la etiqueta <sub>.
title: Proporciona información adicional sobre la etiqueta <sub> que se muestra como un tooltip al pasar el cursor sobre el elemento.
data-*: Permite agregar atributos personalizados para almacenar información adicional que puede ser utilizada por JavaScript.
Además, también se pueden aplicar atributos relacionados con eventos, como onclick, onmouseover, onmouseout, etc., para manejar interacciones del usuario con la etiqueta <sub> utilizando JavaScript.
Ejemplo:
Por ejemplo, podrías tener algo así:
<p> Texto normal <sub id="subindice" class="estilo-subindice" title="Texto en subíndice">texto en subíndice</sub> más texto normal. </p>
En este caso, se aplican los atributos id, class y title a la etiqueta <sub>. Sin embargo, no hay atributos específicos para la etiqueta <sub> en sí misma.
Más ejemplos
Aquí tienes dos ejemplos completos y avanzados de la etiqueta <sub> de HTML5:
Ejemplo 1: Fórmula química con estilo CSS y tooltip
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 1: Fórmula química</title>
<style>
.elemento {
color: darkblue;
font-weight: bold;
}
.subindice {
color: red;
font-weight: normal;
}
</style>
</head>
<body>
<h1>Fórmula química del agua</h1>
<p>
La fórmula química del agua es: <span class="elemento">H</span><sub class="subindice" title="Cantidad de átomos de hidrógeno">2</sub><span class="elemento">O</span>.
</p>
</body>
</html>
En este ejemplo, se muestra la fórmula química del agua con estilos CSS para resaltar los elementos químicos y los subíndices. Además, se agrega un tooltip al subíndice para explicar la información que representa.
Ejemplo 2: Ecuación matemática con interacción JavaScript
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 2: Ecuación matemática</title>
<style>
.base {
font-weight: bold;
}
.subindice {
font-weight: normal;
cursor: pointer;
}
</style>
<script>
function mostrarAlerta() {
alert('Este es un subíndice en una ecuación matemática.');
}
</script>
</head>
<body>
<h1>Ecuación matemática</h1>
<p>
Un ejemplo de ecuación matemática con exponentes y subíndices es: <span class="base">x</span><sub class="subindice" onclick="mostrarAlerta()">i</sub> = <span class="base">a</span><sub class="subindice" onclick="mostrarAlerta()">i</sub> + <span class="base">b</span><sub class="subindice" onclick="mostrarAlerta()">i</sub>.
</p>
</body>
</html>
En este ejemplo, se muestra una ecuación matemática utilizando la etiqueta <sub> para representar subíndices. Además, se agregó una interacción JavaScript a los subíndices, de manera que al hacer clic en ellos, se muestra una alerta con una descripción.
La Etiqueta <sup> en HTML
La etiqueta <sup> en HTML5 es utilizada para representar texto en forma de superíndice. El superíndice es un texto que se coloca ligeramente más arriba que el texto normal y, por lo general, aparece en un tamaño de fuente más pequeño.
Esta etiqueta es útil para representar números y letras en notaciones científicas, matemáticas o para referencias en un texto.
Ejemplo de uso
Por ejemplo, si deseas mostrar un número elevado al cuadrado, puedes utilizar la etiqueta <sup> de la siguiente manera:
<p>2<sup>2</sup> = 4</p>
Esto se mostrará como:
2² = 4
También es común usar la etiqueta <sup> para referencias a pie de página:
<p>Texto con una referencia<sup><a href="#nota1">1</a></sup>.</p>
Esto se mostrará como:
Texto con una referencia¹.
Es importante tener en cuenta que la etiqueta <sup> no debe utilizarse para lograr un efecto de estilo o de diseño, sino para representar contenido semánticamente relevante. Para aplicar estilos y diseño, se recomienda utilizar hojas de estilo en cascada (CSS).
Atributos
La etiqueta <sup> en HTML5 no tiene atributos específicos, pero puede utilizar atributos globales que son aplicables a todas las etiquetas HTML.
Algunos de los atributos globales que se pueden utilizar con la etiqueta <sup> son:
id: asigna un identificador único a la etiqueta <sup> para ser utilizado en scripts y hojas de estilo.
class: asigna una o varias clases a la etiqueta <sup> para ser utilizadas en las hojas de estilo.
style: permite aplicar estilos CSS directamente en la etiqueta <sup>.
title: proporciona información adicional sobre la etiqueta <sup> cuando el usuario coloca el cursor sobre ella.
lang: especifica el idioma del contenido dentro de la etiqueta <sup>.
dir: indica la dirección del texto dentro de la etiqueta <sup>, que puede ser izquierda a derecha (ltr) o derecha a izquierda (rtl).
Ejemplo:
Por ejemplo, puedes usar la etiqueta <sup> con algunos atributos globales de la siguiente manera:
<p>La fórmula del área de un cuadrado es: A = s<sup id="exponente" class="matematica" title="Al cuadrado">2</sup>.</p>
Recuerda que, aunque puedes usar estos atributos globales con la etiqueta <sup>, es importante no utilizarla para fines de diseño o estilos. En su lugar, es preferible utilizar hojas de estilo en cascada (CSS) para personalizar el aspecto y diseño de tus elementos HTML.
Más ejemplos
Aquí tienes tres ejemplos completos y avanzados de cómo usar la etiqueta <sup> en HTML5:
Ejemplo 1: Uso de la etiqueta <sup> en una ecuación matemática.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 1: Ecuación matemática</title>
<style>
.matematica {
color: red;
}
</style>
</head>
<body>
<p>La fórmula de la distancia en el espacio euclidiano tridimensional es:</p>
<p>D = √<span class="matematica">(x<sub>2</sub> - x<sub>1</sub>)<sup>2</sup> + (y<sub>2</sub> - y<sub>1</sub>)<sup>2</sup> + (z<sub>2</sub> - z<sub>1</sub>)<sup>2</sup></span></p>
</body>
</html>
Ejemplo 2: Uso de la etiqueta <sup> en notación científica.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 2: Notación científica</title>
<style>
.cientifica {
font-weight: bold;
}
</style>
</head>
<body>
<p>La velocidad de la luz en el vacío se aproxima a:</p>
<p>c = 3.00 x 10<sup class="cientifica">8</sup> m/s</p>
</body>
</html>
Ejemplo 3: Uso de la etiqueta <sup> en referencias a pie de página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo 3: Referencias a pie de página</title>
<style>
a {
text-decoration: none;
}
.nota {
font-size: 0.8em;
}
</style>
</head>
<body>
<p>El desarrollo de la inteligencia artificial ha generado un gran impacto en diversos campos<sup><a href="#nota1">1</a></sup>.</p>
<hr>
<p class="nota" id="nota1">1. Referencia: Autor, Título del libro, Editorial, Año de publicación.</p>
</body>
</html>
Estos ejemplos demuestran diferentes usos de la etiqueta <sup> en HTML5, incluyendo ecuaciones matemáticas, notación científica y referencias a pie de página. Además, se utilizan atributos globales y CSS para personalizar la apariencia y el diseño de los elementos.
La Etiqueta <time> en HTML
La etiqueta <time> es un elemento de HTML5 que se utiliza para representar fechas, horas o una combinación de ambas en un documento HTML. Su objetivo principal es facilitar la legibilidad y la interpretación de fechas y horas tanto para los usuarios como para los motores de búsqueda y otros programas.
El elemento <time> puede incluir atributos opcionales para proporcionar información adicional y facilitar el procesamiento de la fecha y la hora por parte de los navegadores y otros programas.
El atributo más comúnmente utilizado es datetime, que permite especificar la fecha y/o hora en un formato estándar. El contenido de la etiqueta puede ser cualquier representación legible por humanos de la fecha y hora.
Ejemplo de uso
Aquí tienes un ejemplo de cómo usar la etiqueta <time>:
La reunión será el próximo <time datetime="2023-03-20">20 de marzo</time>.
En este ejemplo, la etiqueta <time> se utiliza para indicar que la reunión será el 20 de marzo. El atributo datetime especifica la fecha en el formato estándar “AAAA-MM-DD”. Esto facilita que los programas y motores de búsqueda interpreten correctamente la fecha.
Es importante tener en cuenta que la etiqueta <time> no proporciona ninguna funcionalidad de visualización o estilo por sí misma. Para aplicar estilos o modificar la apariencia del contenido de la etiqueta, deberás utilizar CSS u otros métodos de estilo.
El contenido de la etiqueta debe incluir una fecha u hora en un formato estándar, como ISO 8601.
Atributos
La etiqueta <time> en HTML5 es bastante simple y tiene un solo atributo principal, que es el atributo datetime. Este atributo se utiliza para proporcionar una representación legible por máquinas de la fecha, hora o ambos.
Atributo datetime:
datetime: Este atributo especifica la fecha y/o hora en un formato estándar, lo que permite a los navegadores y otros programas interpretar y procesar fácilmente la información de fecha y hora. Los formatos aceptados para el atributo datetime incluyen:
Fecha: “AAAA-MM-DD” (por ejemplo, “2023-03-17” para el 17 de marzo de 2023)
Hora: “hh:mm” (por ejemplo, “14:30” para las 2:30 PM)
Hora con segundos: “hh:mm:ss” (por ejemplo, “14:30:45” para las 2:30:45 PM)
Fecha y hora: “AAAA-MM-DDThh:mm” (por ejemplo, “2023-03-17T14:30” para el 17 de marzo de 2023 a las 2:30 PM)
Fecha y hora con segundos: “AAAA-MM-DDThh:mm:ss” (por ejemplo, “2023-03-17T14:30:45” para el 17 de marzo de 2023 a las 2:30:45 PM)
También se pueden agregar indicaciones de zona horaria utilizando el desplazamiento de la zona horaria (por ejemplo, “2023-03-17T14:30:45-07:00” para una fecha y hora con una diferencia de 7 horas respecto al tiempo universal coordinado, UTC).
A continuación se muestra un ejemplo de cómo utilizar la etiqueta <time> con el atributo datetime:
<p>La conferencia comenzará el <time datetime="2023-04-15">15 de abril de 2023</time> a las <time datetime="09:00">9:00 AM</time>.</p>
En este ejemplo, se utilizan dos elementos <time> para representar la fecha y la hora de inicio de una conferencia. El atributo datetime asegura que las máquinas puedan interpretar la información correctamente.
Más ejemplos
Aquí te presento tres ejemplos completos y avanzados de la etiqueta <time> de HTML5:
Ejemplo 1: Utilizando la etiqueta <time> para mostrar una fecha y hora específicas.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta time</title>
</head>
<body>
<header>
<h1>Horario de atención</h1>
</header>
<main>
<p>Estamos abiertos todos los días de la semana de <time datetime="09:00">9:00 am</time> a <time datetime="18:00">6:00 pm</time>.</p>
<p>¡Visítanos en cualquier momento durante nuestras horas de atención!</p>
</main>
<footer>
<p>Derechos de autor © 2026. Todos los derechos reservados.</p>
</footer>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <time> para mostrar las horas de atención de un negocio. Hemos utilizado el atributo “datetime” para especificar la fecha y hora en que el negocio abre y cierra.
El valor del atributo “datetime” debe estar en el formato de fecha y hora ISO 8601, que es “AAAA-MM-DDThh:mm:ss”.
Ejemplo 2: Utilizando la etiqueta <time> para mostrar una fecha específica.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta time</title>
</head>
<body>
<header>
<h1>Próximo concierto</h1>
</header>
<main>
<p>Nuestro próximo concierto será el <time datetime="2022-09-15">15 de septiembre de 2026</time> en el estadio local.</p>
<p>¡Asegúrate de comprar tus boletos ahora antes de que se agoten!</p>
</main>
<footer>
<p>Derechos de autor © 2026. Todos los derechos reservados.</p>
</footer>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <time> para mostrar la fecha del próximo concierto. Hemos utilizado el atributo “datetime” para especificar la fecha del concierto en formato ISO 8601.
Ejemplo 3: Utilizando la etiqueta <time> para mostrar una duración específica.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta time</title>
</head>
<body>
<header>
<h1>Curso en línea</h1>
</header>
<main>
<p>Nuestro curso en línea de programación dura <time datetime="PT20H">20 horas</time> y cubre los fundamentos de HTML, CSS y JavaScript.</p>
<p>¡Inscríbete ahora y comienza a aprender a tu propio ritmo!</p>
</main>
<footer>
<p>Derechos de autor © 2022. Todos los derechos reservados.</p>
</footer>
</body>
</html>
En este ejemplo, hemos utilizado la etiqueta <time> para mostrar la duración de un curso en línea. Hemos utilizado el atributo “datetime” para especificar la duración del curso en formato ISO 8601, donde “PT” significa “periodo de tiempo” y /b>“H” indica las horas. Es decir, “PT20H” significa que la duración del curso es de 20 horas.
Espero que estos ejemplos te hayan ayudado a comprender mejor cómo utilizar la etiqueta <time> en HTML5. Recuerda que esta etiqueta es muy útil para mostrar fechas, horas y duraciones en tu página web de una manera semántica y accesible.
La Etiqueta <u> en HTML
La etiqueta HTML <u> es una etiqueta de formato de texto que se utiliza para subrayar el texto contenido dentro de ella. Cuando se usa la etiqueta <u>, el texto dentro de ella se mostrará con una línea horizontal debajo en la mayoría de los navegadores web.
La etiqueta <u> es útil para indicar que el texto es importante o debe ser enfatizado de alguna manera. Sin embargo, se debe tener en cuenta que la etiqueta <u> se ha vuelto menos popular en los últimos años debido a que su uso excesivo puede hacer que el texto sea difícil de leer o parezca desordenado.
En lugar de utilizar la etiqueta <u>, se recomienda utilizar la etiqueta /b><strong> para indicar que el texto es importante o enfático. Si se desea subrayar texto por razones de diseño, se recomienda utilizar CSS para aplicar un estilo de subrayado en lugar de utilizar la etiqueta <u>.
Es importante tener en cuenta que la etiqueta <u> es una de las etiquetas de formato de texto básicas de HTML, pero se debe utilizar con precaución para asegurarse de que el texto siga siendo legible y estéticamente agradable.
Ejemplo de uso
Aquí te presento un ejemplo de cómo se puede utilizar la etiqueta /b><u> en HTML:
Por ejemplo, en lugar de utilizar:
<p>Este texto está <u>subrayado</u>.</p>
Se recomienda utilizar:
<p>Este texto está <strong>enfatizado</strong>.</p>
O
<p>Este texto está <em>en cursiva</em>.</p>
Aunque la etiqueta <u> todavía es compatible con los navegadores, no se recomienda su uso, ya que puede causar problemas de accesibilidad y confusión para los usuarios.
Es mejor utilizar otras etiquetas de formato de texto para lograr el mismo objetivo y mejorar la experiencia del usuario.
Atributos
La etiqueta <u> de HTML no tiene muchos atributos, ya que su uso está desaconsejado en HTML y se recomienda el uso de estilos CSS para subrayar el texto. Sin embargo, a continuación se describen los atributos que se pueden usar con la etiqueta <u>:
class: Permite definir una o varias clases para la etiqueta, lo que facilita su selección y estilización con CSS.
id: Permite identificar de manera única la etiqueta para su uso con CSS o JavaScript.
style: Permite definir estilos en línea para la etiqueta, como el color del subrayado o su grosor.
Es importante tener en cuenta que, aunque estos atributos se pueden utilizar con la etiqueta <u>, no se recomienda su uso. En su lugar, es mejor utilizar estilos CSS para dar formato al subrayado del texto en una página web.
Más ejemplos
Es importante tener en cuenta que la etiqueta <u> está obsoleta en HTML5, y se recomienda el uso de estilos CSS para subrayar texto en una página web. Sin embargo, aquí te proporciono tres ejemplos de cómo se puede utilizar la etiqueta <u> en HTML5:
Ejemplo de una oración con una palabra subrayada utilizando la etiqueta <u>:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta u</title>
</head>
<body>
<p>El <u>perro</u> marrón saltó sobre el <u>largo</u> muro de ladrillo.</p>
</body>
</html>
Ejemplo de un enlace con una palabra subrayada utilizando la etiqueta <u>:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta u</title>
</head>
<body>
<p>Visita nuestra <a href="https://www.ejemplo.com"><u>página web</u></a> para obtener más información.</p>
</body>
</html>
Ejemplo de una tabla con texto subrayado utilizando la etiqueta <u>:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <u></title>
</head>
<body>
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td><u>Juan Pérez</u></td>
<td><u>32</u></td>
</tr>
<tr>
<td><u>María López</u></td>
<td><u>27</u></td>
</tr>
</table>
</body>
</html>
Es importante mencionar que, aunque estos ejemplos funcionan y utilizan la etiqueta <u>, su uso está desaconsejado en HTML5 y se recomienda utilizar estilos CSS para subrayar texto en una página web.
La Etiqueta <var> en HTML
La etiqueta <var> en HTML5 se utiliza para indicar una variable en una expresión matemática o en un contexto de programación dentro de un documento HTML. Esta etiqueta permite al navegador mostrar el texto contenido de forma adecuada, generalmente con una tipografía en cursiva para resaltar que se trata de una variable.
No proporciona ninguna funcionalidad adicional o interactiva, sino que simplemente es una forma de representar visualmente una variable en el contenido del documento.
Ejemplo de uso
Aquí tienes un ejemplo de cómo se utiliza la etiqueta <var> en HTML:
<p>La fórmula para calcular el área de un rectángulo es <var>A</var> = <var>l</var> × <var>w/b></var>, donde <var>A</var> es el área, <var>l</var> es la longitud y <var>w</var> es el ancho.</p>
En este ejemplo, las letras A, l y w son variables en la fórmula del área de un rectángulo y se representan utilizando la etiqueta <var>. El navegador mostrará estas letras en cursiva para diferenciarlas del texto normal alrededor de ellas.
Ejemplo 2: Aquí un ejemplo de cómo utilizar la etiqueta <var> en un contexto matemático:
<p>En matemáticas, la fórmula para calcular el área de un círculo es <var>π x r²</var>, donde <var>r</var> es el radio del círculo.</p>
En este ejemplo, las variables “π” y “r” aparecerían en cursiva en el navegador.
Ejemplo 3: Otra forma de uso es en programación.
<p>La variable <var>x</var> en el código debe ser igual a la variable <var>y</var>.</p>
En este ejemplo, las variables “x” e “y” aparecerían en cursiva en el navegador.
Es importante mencionar que esta etiqueta no tiene atributos específicos, y solo se utiliza para indicar algo como una variable.
Atributos
La etiqueta <var> en HTML5 no tiene atributos específicos que se apliquen exclusivamente a ella. Sin embargo, puede utilizar atributos globales, que son aplicables a todas las etiquetas HTML.
Algunos de los atributos globales más comunes incluyen:
class: Permite asignar una o varias clases CSS a la etiqueta <var> para aplicar estilos específicos.
id: Asigna un identificador único a la etiqueta <var> para manipulaciones en JavaScript o aplicar estilos con CSS.
style: Aplica estilos CSS en línea directamente a la etiqueta <var>.
title: Proporciona información adicional sobre la etiqueta <var> cuando el usuario coloca el cursor sobre ella.
data-*: Permite almacenar información personalizada asociada con la etiqueta <var>, donde “*” es un sufijo que define el nombre de la información personalizada.
Ejemplo de uso de atributos globales en la etiqueta <var>:
<p>La fórmula para calcular el área de un rectángulo es <var class="formula" id="area" title="Variable del área">A</var> = <var class="formula" id="length" title="Variable de la longitud">l</var> × <var class="formula" id="width" title="Variable del ancho">w</var>, donde <var>A</var> es el área, <var>l</var> es la longitud y <var>w</var> es el ancho.</p>
En este ejemplo, se aplican atributos globales como class, id y title a las etiquetas <var> para fines de estilo y accesibilidad.
Ten en cuenta que, aunque estos atributos pueden mejorar la presentación y la accesibilidad del contenido, no afectan directamente el comportamiento o la funcionalidad básica de la etiqueta <var>.
Más ejemplos
Aquí te proporciono tres ejemplos completos y avanzados de la etiqueta <var> de HTML5:
Ejemplo 1:
<p>La ecuación de la recta es y = mx + b, donde:</p>
<ul>
<li><var>m</var> es la pendiente</li>
<li><var>b</var> es la ordenada al origen</li>
</ul>
En este ejemplo, la etiqueta <var> se utiliza para representar las variables “m” y “b” en la ecuación de la recta. También se utiliza dentro de elementos de lista para proporcionar una descripción más detallada de lo que representan estas variables.
Ejemplo 2:
<p>El perímetro de un cuadrado de lado <var>a</var> es:</p>
<code>4 × <var>a</var></code>
En este ejemplo, la etiqueta <var> se utiliza para representar la variable “a”, que es el lado de un cuadrado. Se utiliza dentro de una etiqueta de código para representar la fórmula para calcular el perímetro del cuadrado.
Ejemplo 3:
<p>La fórmula general para una función cuadrática es:</p>
<code>y = <var>a</var>x<sup>2</sup> + <var>b</var>x + <var>c</var></code>
<p>Donde:</p>
<ul>
<li><var>a</var> es el coeficiente cuadrático</li>
<li><var>b</var> es el coeficiente lineal</li>
<li><var>c</var> es el término constante</li>
</ul>
En este ejemplo, la etiqueta <var> se utiliza para representar las variables “a”, “b” y “c” en la fórmula general de una función cuadrática. También se utiliza dentro de elementos de lista para proporcionar una descripción detallada de cada variable.
La Etiqueta <wbr> en HTML
La etiqueta <wbr> en HTML5 es una etiqueta de marcado en línea que indica un posible punto de quiebre de palabras (word break opportunity) dentro de un texto. Su propósito es ayudar al navegador a determinar los puntos adecuados para dividir una palabra larga cuando no cabe en una línea y debe continuar en la siguiente.
La etiqueta <wbr> es especialmente útil para lidiar con palabras largas, URLs o secuencias de caracteres que podrían causar problemas de formato.
Ejemplo de uso
El uso de la etiqueta <wbr> es bastante simple. Solo tienes que insertarla en el lugar donde quieras permitir un salto de línea en una palabra o secuencia de caracteres:
<p>Esta es una palabra muy<wbr>largaparademostrar<wbr>elpuntodequiebre<wbr>correcto.</p>
En este ejemplo, el navegador tratará de dividir la palabra larga en los puntos donde se encuentren las etiquetas <wbr>. Si el espacio disponible no es suficiente para mostrar la palabra completa en una línea, el navegador puede optar por dividir la palabra en uno de los puntos de quiebre sugeridos.
Cabe mencionar que la etiqueta <wbr> no garantiza un salto de línea, simplemente indica una posición preferida para que el navegador lo considere.
Es importante tener en cuenta que <wbr> es una etiqueta vacía, lo que significa que no tiene un par de apertura y cierre como muchas otras etiquetas de HTML. Por último, la etiqueta <wbr> es compatible con la mayoría de los navegadores modernos, pero puede que no funcione en navegadores más antiguos o en algunos navegadores específicos.
Atributos
La etiqueta <wbr> de HTML5 no tiene atributos específicos o principales propios. Es una etiqueta vacía que simplemente se utiliza para indicar un posible punto de quiebre de palabras dentro de un texto. No se le asignan atributos para modificar su comportamiento, como sí ocurre con otras etiquetas de HTML5.
Sin embargo, como cualquier otra etiqueta de HTML, la etiqueta <wbr> puede tener atributos globales que son aplicables a todos los elementos en HTML5.
Algunos de estos atributos globales incluyen:
class: Para asignar clases CSS al elemento.
id: Para asignar un identificador único al elemento.
style: Para aplicar estilos CSS en línea al elemento.
title: Para agregar información adicional sobre el elemento que se mostrará como un tooltip.
data-*: Para agregar atributos personalizados que almacenan información adicional específica del sitio o la aplicación.
Aunque puedes agregar atributos globales a la etiqueta <wbr>, en la mayoría de los casos no es necesario, ya que su función principal es simplemente indicar un punto de quiebre de palabras sugerido. La etiqueta <wbr> se utiliza principalmente en su forma básica, sin atributos:
Más ejemplos
Aquí tienes tres ejemplos de uso avanzado de la etiqueta <wbr> en HTML5, que incluyen atributos globales y estilos CSS:
Ejemplo 1: Uso de <wbr> con estilos CSS
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo 1: Uso de <wbr> con estilos CSS</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>
Esta es una palabra <span class="highlight">muy<wbr>largaparademostrar<wbr></span> el punto de quiebre <span class="highlight"><wbr>correcto</span>.
</p>
</body>
</html>
Ejemplo 2: Uso de
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo 2: Uso de <wbr> con atributos globales</title>
</head>
<body>
<p>
Esta es una palabra <span id="first-break">muy<wbr></span>largaparademostrar<span id="second-break"><wbr></span> el punto de quiebre <span id="third-break"><wbr>correcto</span>.
</p>
</body>
</html>
Ejemplo 3: Uso de <wbr> con atributos de datos personalizados
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo 3: Uso de <wbr> con atributos de datos personalizados
</head>
<body>
<p>
Esta es una palabra <span data-breakpoint="1">muy<wbr></span>largaparademostrar<span data-breakpoint="2"><wbr></span> el punto de quiebre <span data-breakpoint="3"><wbr>correcto</span>.
</p>
</body>
</html>
Estos ejemplos muestran cómo se pueden agregar atributos globales y estilos CSS a la etiqueta <wbr> y sus elementos circundantes, aunque es importante mencionar que agregar atributos y estilos directamente a la etiqueta <wbr> no es una práctica común, ya que su función principal es sugerir puntos de quiebre de palabras.