HTML5 | Semántica

Posted on by Rudeus Greyrat

Las etiquetas HTML se clasifican en dos tipos. 
 

  • Semántico
  • no semántico

Elementos semánticos: los elementos semánticos tienen nombres significativos que informan sobre el tipo de contenido. Por ejemplo, encabezado, pie de página, tabla, etc. HTML5 introduce muchos elementos semánticos, como se menciona a continuación, que hacen que el código sea más fácil de escribir y comprender para el desarrollador, además de instruir al navegador sobre cómo tratarlos. 
 

  • artículo
  • aparte
  • detalles
  • figcaption
  • figura
  • pie de página
  • encabezamiento
  • principal
  • Marcos
  • navegación
  • sección

Artículo: Contiene contenido independiente que no requiere ningún otro contexto. 
Ejemplo: publicación de blog, artículo de periódico, etc.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>Article Tag</title>
      <style>
         h1 {
         Color:#006400;
         font-size:50px;
         Text-align:left;
         }
         p {
         font-size:25px;
         text-align:left;
         margin-top:-40px;
         }
      </style>
   </head>
   <body>
      <article>
         <h1>GeeksforGeeks</h1>
          
<p>A Computer Science Portal for Geeks</p>
 
      </article>
   </body>
</html>

Producción: 
 

Article tag

Aparte: Se utiliza para colocar contenido en una barra lateral, es decir, aparte del contenido existente. Está relacionado con el contenido circundante.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>Aside Tag</title>
      <style>
         h4 {
         Color:#006400;
         font-size:50px;
         Text-align:none;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
       
<p>GeeksforGeeks is a Computer Science Portal</p>
 
      <aside>
         <h4>GeeksForGeeks</h4>
          
<p>GeeksforGeeks is a computer Science platform
            where you can learn good programming.
         </p>
 
      </aside>
   </body>
</html>

Producción:
 

aside tag

Detalles y resumen: «detalles» define detalles adicionales que el usuario puede ocultar o ver. “resumen” define un encabezado visible para un elemento de “detalles”.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>Detail and summary Tag</title>
      <style>
         .GFG {
         Color:#006400;
         font-size:50px;
         Text-align:none;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <details>
         <summary class="GFG">GeeksforGeeks</summary>
          
<p>GeeksforGeeks is a Computer Science portal
            where you can learn good programming.
         </p>
 
      </details>
   </body>
</html>

Producción:
 

summary

Figura y Figcaption: se utilizan para agregar una imagen en una página web con una pequeña descripción.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>Figcaption Tag</title>
      <style>
         h2 {
         Color:#006400;
         font-size:50px;
         Text-align:none;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <h2>GeeksforGeeks</h2>
      <figure>
         <img src="4.jpg" alt="gfg" style="width:20%">
         <figcaption>GeeksforGeeks Logo</figcaption>
      </figure>
   </body>
</html>

Producción:
 

figcaption

Encabezado: como su nombre indica, es para el encabezado de una sección introductoria de una página. Puede haber varios encabezados en una página. 
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>Header Tag</title>
      <style>
         h1, h3 {
         Color:#006400;
         Text-align:left;
         margin-bottom:0px;
         }
         p {
         font-size:25px;
         text-align:left;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <article>
         <header>
            <h1>GeeksforGeeks</h1>
            <h3>GeeksforGeeks</h3>
             
<p>A computer Science portal</p>
 
         </header>
      </article>
   </body>
</html>

Producción:
 

header tag

Pie de página: Pie de página ubicado en la parte inferior de cualquier artículo o documento, pueden contener detalles de contacto, información de derechos de autor, etc. Puede haber varios pies de página en una página.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>footer Tag</title>
      <style>
         p {
         font-size:25px;
         text-align:left;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <footer>
          
<p>Posted by: GeeksforGeeks</p>
 
          
<p>Contact: <a href="https://www.geeksforgeeks.org">
            geeksforgeeks.org</a>.
         </p>
 
      </footer>
   </body>
</html>

Producción:
 

footer tag

Principal: Define el contenido principal del documento. El contenido dentro de la etiqueta principal debe ser único.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>main Tag</title>
      <style>
         h1 {
         color:#006400;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <main>
         <h1>Important Residences</h1>
          
<p>A few of them are Rashtrapati Bhavan, White House etc</p>
 
         <article>
            <h1>Rashtrapati Bhavan</h1>
             
<p>It is the home of the President of India.</p>
 
         </article>
         <article>
            <h1>The White House</h1>
             
<p>It is the home of the President of United
               States of America.
            </p>
 
         </article>
      </main>
   </body>
</html>

Producción:
 

main tag

Sección: una página se puede dividir en secciones como Introducción, Información de contacto, Detalles, etc. y cada una de estas secciones puede estar en una etiqueta de sección diferente.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>section Tag</title>
      <style>
         h1 {
         color:#006400;
         }
         p {
         font-size:25px;
         text-align:none;
         margin-top:0px;
         }
      </style>
   </head>
   <body>
      <section>
         <h1>Data Structure</h1>
          
<p>Data Structure is a data organization and
            storage format that enables efficient access
            and modification.
         </p>
 
      </section>
      <section>
         <h1>Algorithm</h1>
          
<p>A process or set of rules to be followed
            in calculations or other problem-solving
            operations, especially by a computer.
         </p>
 
      </section>
   </body>
</html>

Producción:
 

section tag

nav: se utiliza para definir un conjunto de enlaces de navegación en forma de barra de navegación o menú de navegación.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>nav Tag</title>
      <style>
         h1 {
         color:#006400;
         }
      </style>
   </head>
   <body>
      <h1>Navigation Bar</h1>
      <nav>
         <a href="/home/">Home</a> |
         <a href="/about-us/">About Us</a> |
         <a href="/data-structure/">Data Structure</a> |
         <a href="/operating-system/">Operating System</a>
      </nav>
   </body>
</html>

Producción:
 

nav tag

Marcar: Se utiliza para resaltar el texto.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>mark Tag</title>
      <style>
         h1 {
         color:#006400;
         }
      </style>
   </head>
   <body>
      <h1>mark tag</h1>
       
<p>GeeksforGeeks is a <mark>Computer Science</mark> portal</p>
 
   </body>
</html>

Producción:
 

mark tag

Elementos no semánticos: las etiquetas como div, span se incluyen en las categorías no semánticas, ya que sus nombres no dicen nada sobre qué tipo de contenido está presente en ellas.
div Es un elemento a nivel de bloque o división de una sección. Se utiliza como contenedor.
 

html

<!DOCTYPE html>
<html>
   <head>
      <title>div Tag</title>
      <style>
         .GFG {
         color:#006400;
         }
      </style>
   </head>
   <body>
      <h1>div Tag</h1>
      <div class="GFG">
         <h1>GeeksforGeeks</h1>
          
<p>GeeksforGeeks is a Computer Science portal</p>
 
      </div>
   </body>
</html>

Producción:
 

div tag

span: es un elemento en línea que no comienza en una nueva línea y ocupa solo el ancho necesario. Para obtener más detalles, use https://www.geeksforgeeks.org/span-tag-html/ .
 

Navegadores compatibles:  

  • Google Chrome 6.0 y superior
  • Internet Explorer 9.0 y superior
  • Mozilla 4.0 y superior
  • Ópera 11.1 y superior
  • Safari 5.0 y superior

Publicación traducida automáticamente

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

Deja una respuesta

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