admin
Si trabaja exclusivamente en un sistema de gestión de contenido como Centro de CMS o WordPress, está acostumbrado a poder poner en negrita, cursiva y subrayar el texto con un clic del botón. Pero, ¿qué sucede si su barra de herramientas no ofrece la opción de formato exacta que desea? ¿O no estás trabajando en un procesador de textos o un CMS?
No hay problema. Todo lo que necesitas es algo de HTML y CSS. A continuación, analizaremos algunos casos de uso para dar formato al texto. Luego, veremos el proceso para crear texto en negrita, cursiva, subrayado, tachado, subíndice y superíndice.
Cómo poner texto en negrita en HTML
Para poner en negrita el texto en HTML, use la etiqueta fuerte o la etiqueta b (negrita). Los navegadores pondrán en negrita el texto dentro de ambas etiquetas de la misma manera, pero la etiqueta fuerte indica que el texto es de particular importancia o urgencia. También puede poner texto en negrita con la propiedad CSS font-weight establecida en «negrita».
Al poner texto en negrita, se considera una buena práctica usar la etiqueta en lugar de la etiqueta . Esto se debe a que es un elemento semántico mientras que no lo es. Los elementos no semánticos pueden dificultar la localización del contenido y la prueba futura, según HTML5. especificación. Además, si el texto en negrita es puramente estilístico, es mejor usar CSS y mantener todos los estilos de página separados del contenido.
Por esta razón, solo mostraremos ejemplos usando y la propiedad font-weight de CSS.
Cómo poner texto en negrita en HTML con el elemento fuerte
Para definir texto con gran importancia, coloque el texto dentro de las etiquetas . Veamos un ejemplo.
Aquí está el HTML:
<p>This is some normal paragraph text, <strong>and this is some important text.</strong></p>
Aquí está el resultado:
-Dec-07-2021-05-35-44-66-PM.png "Cómo poner en negrita, cursiva y formato de texto en HTML 2")
Cómo poner texto en negrita en HTML con la propiedad CSS Font-Weight
Para poner texto en negrita simplemente como decoración, use la propiedad CSS font-weight en lugar del elemento fuerte HTML. Supongamos que desea poner en negrita una palabra en un párrafo: envolvería la palabra en etiquetas y usaría un selector de clase CSS para aplicar la propiedad font-weight solo al elemento span específico.
Aquí está el CSS:
.bolded { font-weight: bold; }
Aquí está el HTML:
<p>This is some normal paragraph text, and this <span class="bolded">word</span> is bold for decoration.</p>
Aquí está el resultado:
-Dec-07-2021-05-35-43-66-PM.png "Cómo poner en negrita, cursiva y formato de texto en HTML 3")
Cómo poner texto en cursiva en HTML
Para poner en cursiva el texto en HTML, use la etiqueta em o la etiqueta i (cursiva). Ambas etiquetas pondrán el texto en cursiva, pero la etiqueta em indica además que el texto tiene énfasis cuando se lee. También puede poner texto en cursiva con la propiedad de estilo de fuente CSS establecida en «cursiva».
Al igual que y , la etiqueta generalmente se prefiere a la etiqueta ya que es un elemento semántico, por lo que la usaremos en nuestros ejemplos de HTML. Para diseñar, apégate a CSS y evita la etiqueta .
Cómo poner texto en cursiva en HTML con el elemento de énfasis
Para definir texto con énfasis, coloque el texto dentro de las etiquetas . Veamos un ejemplo.
Aquí está el HTML:
<p>This is some normal paragraph text, <em>and this is some emphasized text.</em></p>
Aquí está el resultado:
-Dec-07-2021-05-35-44-39-PM.png "Cómo poner en negrita, cursiva y formato de texto en HTML 4")
Cómo poner texto en cursiva en HTML con la propiedad de estilo de fuente CSS
Para poner el texto en cursiva para la decoración, use la propiedad de estilo de fuente CSS. Imagina que quieres poner en cursiva una palabra dentro de un párrafo. Primero, envuelva la palabra en etiquetas , luego aplique la propiedad de estilo de fuente solo al elemento span.
Aquí está el CSS:
.emphasized { font-style: italic; }
Aquí está el HTML:
<p>This is some normal paragraph text, and this <span class="emphasized">word</span> is italicized for decoration.</p>
Aquí está el resultado:
-Dec-07-2021-05-35-43-87-PM.png "Cómo poner en negrita, cursiva y formato de texto en HTML 5")
Cómo subrayar texto en HTML
Para subrayar texto en HTML y CSS, use la propiedad de decoración de texto CSS, establecida en «subrayar».
También puede subrayar texto con el elemento , pero esto no debe usarse para subrayar texto con fines de presentación. El elemento está destinado a casos de uso específicos como marcar palabras mal escritas, denotar nombres propios en texto chino o indicar apellidos.
Veamos ambos métodos a continuación.
