¿Qué son las etiquetas físicas en HTML?

Las etiquetas físicas se utilizan para indicar cómo se deben formatear o indicar caracteres específicos mediante etiquetas HTML. Cualquier etiqueta de estilo físico puede contener cualquier elemento permitido en el texto, incluido texto convencional, imágenes, saltos de línea, etc. Aunque cada etiqueta física tiene un estilo definido, puede anular ese estilo definiendo su propia apariencia para cada etiqueta. Todas las etiquetas físicas requieren etiquetas finales.

Sintaxis:

<tag_name> formatting character or para </tag_name>

Características de las etiquetas físicas:

Son extremadamente sencillos.
Se utilizan para resaltar oraciones importantes.
Los estilos de texto físico indican el tipo específico de apariencia de una sección, por ejemplo, negrita, cursiva, etc.
Todos los navegadores representan los estilos físicos de la misma manera.

Ejemplo de etiquetas físicas:

Etiquetas	Sentido	Objetivo
<b>	Audaz	La negrita aumenta la importancia del texto porque la etiqueta en negrita convierte el texto en negrita.
<yo>	Itálico	Una etiqueta en cursiva se utiliza para definir un texto con un significado especial.
<u>	Subrayar	Se utiliza para subrayar el texto.
<grande>	Grande	La etiqueta grande aumenta el tamaño de la fuente en 1 (Nota: no puede usar la etiqueta grande en HTML 5)
<pequeño>	Pequeña	Una pequeña etiqueta define el texto pequeño y se usa al escribir los derechos de autor.
<sub>	Subíndice	El subíndice se utiliza para la línea de base alternativa.
<sup>	Sobrescrito	El superíndice generalmente se usa para mostrar elementos por encima de la línea base
< huelga >	tachado	Es un marcado de edición que le dice al lector que ignore el pasaje de texto.
<tt>	Texto de teletipo	El texto de teletipo proporciona la familia de fuentes predeterminada, que es monoespaciada.

Ejemplos de etiquetas físicas:

1.: la etiqueta HTML actúa como una etiqueta de presentación utilizada para marcar el texto escrito en formato de negrita. Si queremos mostrar texto sin formato en negrita, puede usar el texto entre la etiqueta oración.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
    
<body>
    <p>
        Lorem ipsum dolor sit <b>amet consectetur</b> 
        adipisicing elit. Voluptates, tempora.
    </p>
  
</body>
</html>

Producción:

Lorem ipsum dolor sit amet consectetur
adipisicing elit.

2.: la etiqueta HTML actúa como una etiqueta de presentación utilizada para marcar el texto escrito en formato de cursiva. Si queremos mostrar texto sin formato en cursiva, puede usar el texto entre la etiqueta .

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
    
<body>
    <p>
        Lorem ipsum dolor sit <i>amet consectetur</i> 
        adipisicing elit. Voluptates, tempora.
    </p>
  
</body>
</html>

Producción:

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptates, tempora.

3.: la etiqueta HTML actúa como una etiqueta de presentación utilizada para marcar el texto escrito como un formato de subrayado. Si queremos mostrar texto sin formato en formato subrayado, puede usar el texto entre la etiqueta .

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
    
<body>
    <p>
        Lorem ipsum dolor sit <u>amet consectetur</u>
        adipisicing elit. Voluptates, tempora.
    </p>
  
</body>
</html>

Producción:

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptates, tempora.

4.<grande>: La etiqueta <grande> se usa para hacer que el texto sea un tamaño más grande, es decir, de pequeño a mediano, de mediano a grande y de grande a extragrande, pero la etiqueta <grande> no hará que el tamaño de la fuente sea más grande que el tamaño de fuente máximo del navegador.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        Lorem ipsum dolor sit <big>amet consectetur</big> 
        adipisicing elit. Voluptates, tempora.
    </p>
  
</body>
</html>

Producción:

5.<pequeño>: La etiqueta <pequeño> se utiliza para hacer que el texto sea un tamaño más pequeño, es decir, de extragrande a grande…. La etiqueta pequeña pero <pequeña> no hará que el tamaño de fuente sea más pequeño que el tamaño de fuente mínimo del navegador.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
    
<body>
    <p>
        Lorem ipsum dolor sit <small>amet consectetur</small> 
        adipisicing elit. Voluptates, tempora.
    </p>
  
</body>
</html>

Producción:

6.: la etiqueta secundaria define el subíndice. El subíndice aparece medio debajo de una línea normal con un tamaño de fuente pequeño. Estas etiquetas se utilizan principalmente al escribir fórmulas químicas.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
    
<body>
    <p>
        Lorem ipsum dolor <sub>sit amet </sub> 
        consectetur adipisicing elit. Voluptates, tempora.
    </p>
    <p>
        Acetylene C<sub>2</sub> H<sub>2</sub>
    </p>
  
</body>
</html>

Producción:

Lorem ipsum dolor _{sit amet}consectetur adipisicing elit. Voluptates, tempora.
Acetylene C₂H₂

7.: la etiqueta Sup define el superíndice. El subíndice aparece la mitad por encima de la línea normal con un tamaño de fuente pequeño. Estas etiquetas se utilizan principalmente al escribir derivaciones matemáticas.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
    
<body>
    <p>
        Lorem ipsum dolor sit <sup>amet consectetur</sup> 
        adipisicing elit. Voluptates, tempora.
    </p>
    <p>
        (a+b)<sup>2</sup> = a<sup>2</sup>+b<sup>2</sup>+2ab
    </p>
  
</body>
</html>

Producción:

Lorem ipsum dolor sit ^{amet consectetur}
adipisicing elit. Voluptates, tempora.

(a+b)² = a²+b²+2ab

8.<strike>: la etiqueta de tachado define oraciones tachadas. La etiqueta de huelga hace que la línea horizontal sobre el texto que representa que este texto dado no es para leer lo ignore.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
    
<body>
    <p>
        Lorem ipsum dolor sit <strike>amet consectetur</strike> 
        adipisicing elit. Voluptates, tempora.
    </p>
  
</body>
</html>

Producción:

Lorem ipsum dolor sit amet consectetur 
adipisicing elit. Voluptates, tempora.

9.<tt>: la etiqueta tt define el texto del teletipo. Esta etiqueta cambia la oración dada a su familia de fuentes predeterminada, es decir, espacio mono.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>
    
<body>
    <p>
        Lorem ipsum dolor sit <tt>amet consectetur</tt> 
        adipisicing elit. Voluptates, tempora.
    </p>
  
</body>
</html>

Producción:

Publicación traducida automáticamente

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

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta