Diferencia entre etiquetas físicas y lógicas

En este artículo, aprenderemos sobre etiquetas físicas y etiquetas lógicas en HTML y su implementación. También exploraremos la diferencia entre ellos. Comencemos la discusión con una etiqueta física.

Etiquetas físicas: 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, incluidos texto convencional, imágenes, saltos de línea, etc. Las etiquetas físicas solo se pueden usar con fines de estilo para elementos específicos. 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. Consulte la sección ¿Qué son las etiquetas físicas en HTML? artículo para más detalles.

Sintaxis:

<tagname>Content</tagname>

Características:

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.

Aquí hay algunas listas de etiquetas físicas útiles:

 El superíndice generalmente se usa para mostrar elementos por encima de la línea de base
 El subíndice se utiliza para la línea de base alternativa.
 Se utiliza una etiqueta en cursiva para definir un texto con un significado especial.
<big> La etiqueta grande aumenta el tamaño de fuente en 1 (Nota: no puede usar la etiqueta grande en HTML 5)
<pequeño> Una etiqueta pequeña define el texto pequeño y se usa al escribir los derechos de autor.
 La negrita aumenta la importancia del texto porque la etiqueta negrita convierte el texto en negrita.
 Se utiliza para subrayar el texto.
<tt> El texto de teletipo proporciona la familia de fuentes predeterminada, que es monoespaciada.
<strike> Es un marcado de edición que le dice al lector que ignore el pasaje de texto.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Physical Tags</title>
    <style>
        .container {
            font-family: sans-serif;
            white-space: pre-line;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        Welcome to the official channel of GeeksforGeeks!
        <b>
            Learn Data Structures Online At Your 
            Own Pace With The Best Of Faculty
            In The Industry.
        </b>
  
        <big>
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science 
            and programming articles.
        </big>
  
        <i>
            The Best Data Structures Course 
            Available Online From Skilled And
            Experienced Faculty.
        </i>
  
        <small>
            Python is a widely used, high-level 
            programming language.
        </small>
  
        5<sup>2</sup> SO<sub>2</sub>
  
        <tt>
            We provide a variety of services for 
            you to learn, thrive and also have
            fun!
        </tt>
  
        <u>
            Free Tutorials, Millions of Articles, 
            Live, Online and Classroom Courses, 
            Frequent Coding Competitions, Webinars
            by Industry Experts, Internship 
            opportunities and Job Opportunities. 
            Knowledge is power!
        </u>
    </div>
</body>
  
</html>

Producción:

Etiquetas lógicas: las etiquetas lógicas se utilizan para decirle al navegador qué tipo de texto está escrito dentro de las etiquetas. Las etiquetas lógicas también se conocen como etiquetas estructurales porque especifican la estructura del documento. Las etiquetas lógicas se utilizan para indicar a la persona con discapacidad visual que hay algo más importante en el texto o para enfatizar el texto, es decir, las etiquetas lógicas se pueden utilizar con fines de diseño y para dar especial importancia al contenido del texto. Consulte la sección ¿Qué son las etiquetas lógicas en HTML? artículo para más detalles.

Sintaxis:

<tagname>Content</tagname>

Algunos casos en los que las etiquetas lógicas son útiles:

Para escribir código en nuestro sitio web.
Para enfatizar algún texto.
Para mostrar la abreviatura en la página Web.
Para mostrar alguna cita famosa en nuestra página web.
Escribir alguna fórmula matemática en términos de variables.

Aquí hay algunas listas útiles de etiquetas lógicas:

<abbr> Define la abreviatura del texto.
<acrónimo> Define el acrónimo.
<dirección> Información de contacto de una persona u organización.
<cite> Define la cita. Muestra el texto en cursiva.
<código> Define la pieza de código de computadora.
<blockquote> Define una cita larga.
<del> Define el texto eliminado y se utiliza para marcar una parte del texto que se ha eliminado del documento.
<dfn> Define el elemento de definición y se utiliza para representar una instancia de definición en HTML.
<ins> Define el texto insertado.
<kbd> Define el texto de entrada del teclado.
<pre> Define el bloque de texto preformateado que conserva los espacios de texto, los saltos de línea, las tabulaciones y otros caracteres de formato que los navegadores web ignoran.
<q> Define la cita breve.
<samp> Define el texto de salida de muestra de un programa informático.
 Define texto fuerte, es decir, muestra la importancia del texto.
<var> Define la variable en una ecuación matemática o en el programa de computadora.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Logical Tag</title>
  
    <style>
        .container {
            font-family: sans-serif;
            white-space: pre-line;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
  
        Welcome to <abbr title="tags"> Logical tags</abbr>
  
        This is <acronym title="GeeksforGeeks">GFG</acronym>
  
        <address>
            5th Floor, A-118, Sector-136, Noida, 
            Uttar Pradesh - 201305
        </address>
  
        <cite> C++ </cite> is my favourite Language.
  
        <code> Sample code: system.out.println(); </code>
  
        <blockquote cite="https://www.geeksforgeeks.org/">
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science and 
            programming articles, and quizzes.
        </blockquote>
  
        <del> This contains deleted content.</del>
  
        <ins> Newly inserted content.</ins>
  
        <p>
            <dfn> GeeksforGeeks </dfn> is a Computer 
            Science portal for geeks. It contains 
            well written, well thought and well 
            explained computer science and 
            programming articles, and quizzes.
        </p>
  
        <kbd>This is a Keyboard input </kbd>
  
        <pre>
            Hello GFG,
            Greetings to all Community members !!
            Here I'm presenting my first blog of GFG Blogathon-2021.
            This is a predefine formatted text 
        </pre>
    </div>
</body>
  
</html>

Producción:

Diferencias entre etiquetas lógicas y físicas:

S. No.	Etiquetas lógicas	Etiquetas físicas
1.	Las etiquetas lógicas describen el comportamiento, la naturaleza del contenido del texto encerrado dentro de la etiqueta. Representan la función del texto en la página.	Las etiquetas físicas se utilizan para decidir la apariencia del texto y no brindan ninguna información sobre el texto.
2.	Implica ciertas obligaciones.	Es extremadamente sencillo.
3.	Se utiliza para mencionar textos para personas con discapacidad visual.	Se utiliza para indicar los caracteres específicos que necesitan formación.
4.	Aquí, las páginas son más accesibles.	La accesibilidad de la página es comparativamente baja.
5.	Es compatible con la última tecnología.	Este concepto depende de herramientas débiles.
6.	Las etiquetas lógicas se utilizan para proporcionar información dando especial importancia al texto. Por ejemplo, la etiqueta <em> se usa para enfatizar el texto al representarlo en cursiva.	Las etiquetas físicas se usan solo para diseñar el contenido. Por ejemplo, <i> se usa para mostrar el texto en cursiva.

Publicación traducida automáticamente

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

HTML

HTML

Etiquetas lógicas

Etiquetas físicas

Deja una respuesta Cancelar la respuesta