Descubra las distintas etiquetas HTML que puede utilizar para imprimir texto en una página
La petiqueta
Esta etiqueta define un párrafo de texto.
pSome text/p
Es un elemento de bloque.
Dentro de él podremos añadir cualquier elemento inline que queramos, como span
o a
.
No podemos agregar elementos de bloque.
No podemos anidar p
elementos unos dentro de otros.
De forma predeterminada, los navegadores diseñan un párrafo con un margen en la parte superior e inferior 16px
en Chrome, pero el valor exacto puede variar entre navegadores.
Esto hace que dos párrafos consecutivos estén espaciados, replicando lo que pensamos de un “párrafo” en un texto impreso.
La spanetiqueta
Esta es una etiqueta en línea que se puede utilizar para crear una sección en un párrafo al que se puede acceder mediante CSS:
pA part of the text spanand here another part/span/p
La bretiqueta
Esta etiqueta representa un salto de línea. Es un elemento en línea y no necesita una etiqueta de cierre.
Lo usamos para crear una nueva línea dentro de una p
etiqueta, sin crear un nuevo párrafo.
Y en comparación con la creación de un nuevo párrafo, no agrega espacio adicional.
pSome textbrA new line/p
Las etiquetas de encabezado
HTML nos proporciona 6 etiquetas de encabezado. De la más importante a la menos importante, tenemos h1
, h2
, h3
, h4
, h5
, h6
.
Por lo general, una página tendrá un h1
elemento, que es el título de la página. Luego, puede tener uno o más h2
elementos según el contenido de la página.
Los encabezados, especialmente su organización, también son esenciales para el SEO y los motores de búsqueda los utilizan de diversas maneras.
El navegador, de forma predeterminada, hará que la h1
etiqueta sea más grande y hará que el tamaño de los elementos sea más pequeño a medida que aumenta el número h
:
Todos los encabezados son elementos de bloque. No pueden contener otros elementos, solo texto.
La strongetiqueta
Esta etiqueta se utiliza para marcar el texto que contiene como fuerte . Esto es bastante importante, no es una pista visual, sino semántica. Según el medio utilizado, su interpretación variará.
Los navegadores, de forma predeterminada, ponen el texto de esta etiqueta en negrita .
La emetiqueta
Esta etiqueta se utiliza para marcar el texto que se encuentra dentro de ella como resaltado . Al igual que con strong
, no es una pista visual sino una pista semántica.
Los navegadores por defecto ponen el texto en cursiva .
Citas
La blockquote
etiqueta HTML es útil para insertar citas en el texto. Fotos Porno y actrices porno
Los navegadores aplican un margen al blockquote
elemento de forma predeterminada. Chrome aplica un margen izquierdo y derecho de 40 px y un margen superior e inferior de 10 px.
La q
etiqueta HTML se utiliza para comillas en línea.
Línea horizontal
En realidad, no se basa en texto, pero la hr
etiqueta se usa a menudo dentro de una página. Significa horizontal rule
y agrega una línea horizontal en la página.
Útil para separar secciones en la página.
Bloques de código
La code
etiqueta es especialmente útil para mostrar código, porque los navegadores le dan una fuente monoespaciada.
Eso es lo único que suelen hacer los navegadores. Este es el CSS que aplica Chrome:
code { font-family: monospace;}
Esta etiqueta suele estar envuelta en una pre
etiqueta, ya que el code
elemento ignora los espacios en blanco y los saltos de línea. Al igual que la p
etiqueta.
Chrome ofrece pre
este estilo predeterminado:
pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px;}
que evita que el espacio en blanco colapse y lo convierte en un elemento de bloque.
Liza
Tenemos 3 tipos de listas:
- listas desordenadas
- listas ordenadas
- listas de definiciones
Las listas desordenadas se crean utilizando la ul
etiqueta. Cada elemento de la lista se crea con la li
etiqueta:
ulliFirst/liliSecond/li/ul
Las listas ordenadas son similares, sólo que se crean con la ol
etiqueta:
olliFirst/liliSecond/li/ol
La diferencia entre ambos es que las listas ordenadas tienen un número antes de cada elemento:
Las listas de definiciones son un poco diferentes. Tienes un término y su definición:
dldtFlavio/dtddThe name/dddtCopes/dtddThe surname/dd/dl
Así es como los navegadores normalmente los representan:
Debo decir que rara vez se los ve en la naturaleza, seguro que no tanto como ul
a ol
, pero a veces pueden ser útiles.
Otras etiquetas de texto
Hay una serie de etiquetas con fines de presentación:
- La
mark
etiqueta - La
ins
etiqueta - La
del
etiqueta - La
sup
etiqueta - La
sub
etiqueta - La
small
etiqueta - La
i
etiqueta - La
b
etiqueta
Este es un ejemplo de la representación visual de los mismos que aplican de forma predeterminada los navegadores:
Quizás te preguntes, ¿en qué se b
diferencia de strong
? ¿Y en qué i
se diferencia de em
?
La diferencia radica en el significado semántico. Mientras que b
y i
son una indicación directa al navegador para que ponga un fragmento de texto en negrita o cursiva strong
y em
le dé un significado especial, depende del navegador darle el estilo. Lo cual resulta ser exactamente lo mismo que b
y i
, de manera predeterminada. Aunque puedes cambiarlo usando CSS.
Hay otras etiquetas relacionadas con el texto que se usan menos. Solo mencioné las que veo que se usan más.
Tips de HTML
Tal vez te puede interesar:
- La etiqueta HTML `iframe`
- Cómo cargar una imagen en un lienzo HTML
- Cómo utilizar insertAdjacentHTML
- Cómo cambiar la URL de una imagen HTML en modo oscuro
Etiquetas HTML para texto
La petiquetaLa spanetiquetaLa bretiquetaLas etiquetas de encabezadoLa strongetiquetaLa emetiquetaCitasLínea horizontalBloques de códigoLizaOtras etiquetas de
programar
es
https://aprendeprogramando.es/static/images/programar-etiquetas-html-para-texto-2096-0.jpg
2024-11-01
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente