Formato de texto HTML – Barcelona Geeks

En este artículo, conoceremos el formato de texto HTML y comprenderemos varias formas de formatear el texto. HTML facilita la capacidad de formatear texto tal como lo hacemos en MS Word o cualquier software de edición de texto. Revisaremos algunas de estas opciones.

Ejemplo: en este ejemplo, simplemente mostramos texto en formato HTML fuerte, pequeño y resaltado, respectivamente.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h2>Welcome To GeeksforGeeks</h2>
      
    <!--Text in Strong-->
    <strong>Hello Geeks</strong>
    <br>
      
    <!--Text in small-->
    <small>Hello Geeks</small>
    <br>
      
    <!--Text in Highlight-->
    <mark>Hello Geeks</mark>
</body>
  
</html>

Producción:

Formatear el texto usando varias etiquetas HTML

Las siguientes son las diversas opciones disponibles para formatear el texto:

Poner el texto en negrita o fuerte : podemos poner el texto en negrita usando la etiqueta  . La etiqueta utiliza tanto etiquetas de apertura como de cierre. El texto que debe ponerse en negrita debe estar dentro de las etiquetas  y  . También podemos usar la etiqueta  para hacer que el texto sea fuerte, con mayor importancia semántica. También se abre con la etiqueta y termina con la etiqueta .

Ejemplo 1 : El siguiente ejemplo describe el formato del texto a normal, negrita y fuerte.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bold Text</title>
</head>
  
<body>
      
    <!--Normal text-->
    <p>Hello GeeksforGeeks</p>
  
      
    <!--Text in Bold-->
    <p>
        <b>Hello GeeksforGeeks</b>
    </p>
  
      
    <!--Text in Strong-->
    <p>
        <strong>Hello GeeksforGeeks</strong>
    </p>
  
</body>
  
</html>

Salida :

Formatear el texto usando diferentes etiquetas.

Poner el texto en cursiva o enfatizar : La etiqueta  se usa para poner el texto en cursiva. Se abre con y termina con la etiqueta . La etiqueta  se usa para enfatizar el texto, con una importancia semántica adicional. Se abre con y termina con la etiqueta .

Ejemplo 2 : El siguiente ejemplo describe el formato del texto en cursiva o énfasis.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Italic</title>
</head>
  
<body>
      
    <!--Normal text-->
    <p>Hello GeeksforGeeks</p>
  
      
    <!--Text in Italics-->
    <p> 
        <i>Hello GeeksforGeeks</i>
    </p>
  
    <!--Text in Emphasize-->
    <p>
        <em>Hello GeeksforGeeks</em>
    </p>
  
</body>
  
</html>

Salida :

Dar formato al texto usando las etiquetas y

Resaltar un texto: También es posible resaltar un texto en HTML usando la etiqueta  . Tiene una etiqueta de apertura <marca> y una etiqueta de cierre </marca>.

Ejemplo : El siguiente ejemplo describe el uso de la etiqueta que se usa para definir el texto marcado.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Highlight</title>
</head>
  
<body>
      
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
  
      
    <!--Text in Highlight-->
    <p>
        <mark>Hello GeeksforGeeks</mark>
    </p>
  
</body>
  
</html>

Salida :

Uso de la etiqueta

haciendo un texto
Subíndice o Superíndice
:
los

El elemento se usa para superíndice de un texto y el _{elemento se usa para subíndice de un texto. Ambos tienen una etiqueta de apertura y otra de cierre.}

Ejemplo : el siguiente ejemplo describe el uso de las etiquetas y que se utilizan para agregar los textos de superíndice y subíndice al documento HTML.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Superscript and Subscript</title>
</head>
  
<body>
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
  
      
    <!--Text in Superscript-->
    <p>Hello
        <sup>GeeksforGeeks</sup>
    </p>
  
      
    <!--Text in Subscript-->
    <p>Hello 
        <sub>GeeksforGeeks</sub>
    </p>
  
</body>
  
</html>

Salida :

Uso de etiquetas y

Hacer el texto más pequeño: El elemento  se usa para hacer el texto más pequeño. El texto que debe mostrarse más pequeño debe escribirse dentro de las etiquetas y .

Ejemplo : el siguiente ejemplo describe el uso de la etiqueta <pequeña> que se utiliza para establecer un tamaño de fuente pequeño.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Small</title>
</head>
  
<body>
      
    <!--Text in Normal-->
    <p>Hello GeeksforGeeks</p>
  
      
    <!--Text in small-->
    <p>
        <small>Hello GeeksforGeeks</small>
    </p>
  
</body>
  
</html>

Producción:

Uso de la etiqueta <pequeña>

Tachar el texto: el elemento <del> se utiliza para tachar el texto y marcar la parte como eliminada. También tiene una etiqueta de apertura y otra de cierre.

Ejemplo : el siguiente ejemplo describe el uso de la etiqueta <del> que se utiliza para marcar una parte del texto que se ha eliminado del documento.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Delete</title>
</head>
  
<body>
      
    <!--Text in Normal-->
      
<p>Hello GeeksforGeeks</p>
  
      
    <!--Text in Delete-->
      
<p> <del>Hello GeeksforGeeks</del> </p>
  
</body>
  
</html>

Salida :

Uso de la etiqueta <del>

Agregar un texto: El elemento <ins> se usa para subrayar un texto que marca la parte como insertada o agregada. También tiene una etiqueta de apertura y otra de cierre.

Ejemplo : este ejemplo describe el uso de la etiqueta <ins> para especificar un bloque de texto insertado.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting the Text</title>
</head>
  
<body>
      
    <!--Text in Normal-->
      
<p>Hello GeeksforGeeks</p>
  
      
    <!--Text in Insert-->
      
<p><ins>Hello GeeksforGeeks</ins></p>
  
</body>
  
</html>

Salida :

Usando la etiqueta <ins>

Navegadores compatibles:

Google Chrome
Borde de Microsoft
Firefox
Ópera
Safari

Publicación traducida automáticamente

Artículo escrito por Chinmoy Lenka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta