wikipediaillustrated

marketing

Cómo poner en negrita, cursiva y formato de texto en HTML

Indian man learning how to bold and format text in HTML.jpgkeepProtocol

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.

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:

ejemplo de cómo poner texto en negrita en html

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:

ejemplo de cómo poner texto en negrita en html

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 .

Recurso destacado

La guía para principiantes de HTML y CSS para especialistas en marketing

Complete el formulario para obtener la guía introductoria gratuita.




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:

ejemplo de cómo agregar cursiva al texto en html

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:

ejemplo de cómo agregar cursiva al texto en html

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.

Cómo subrayar texto en HTML con el desarticulado…

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *