Introducción a elementos semánticos HTML5

El siguiente artículo le proporcionará varios elementos semánticos en html5. Comencemos con la comprensión de la semántica. La semántica se trata de diferentes tipos de etiquetas cuya funcionalidad representaría y realizaría la misma función según su nombre de etiqueta. La funcionalidad de la etiqueta se entendería fácilmente por su nombre; que está en un nombre / formato comprensible para el usuario. La mayoría de los elementos en HTML son generalmente elementos semánticos.

Ventajas de los elementos semánticos en HTML5

Las ventajas de los elementos semánticos son las siguientes:

  • Fácil comprensión del código.
  • El mantenimiento puede hacerse de forma rápida y adecuada.
  • No es necesario agregar ninguna descripción específicamente para ninguna etiqueta.

Varios elementos semánticos en HTML5

Pasemos ahora a los elementos semánticos de HTML5.

1)

Esta etiqueta nos da una idea de que los datos dentro de esta etiqueta son específicamente para contenido similar. Depende de los diferentes tipos de artículos que generalmente tenemos también. Puede ser un blog, foros, artículos de columna en periódicos, etc.

Código:



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA

Salida:

2)

Esta etiqueta se trata de proporcionar un contenido seccional de los datos totales. Al conocer el uso de las etiquetas de artículos y secciones, esas etiquetas se pueden usar dentro de cada etiqueta. Es decir, la etiqueta de sección se puede usar dentro de la etiqueta del artículo y viceversa.

Código:


The section here is about:

Aprendiendo y practicando

Salida:

3)

Esta etiqueta proporciona todos los datos del encabezado. Cualquier dato que queramos colocar en el formato del encabezado se usa debajo de esta etiqueta de encabezado. Y esta etiqueta se puede usar varias veces en todo el script HTML. Veamos un pequeño ejemplo de ello.

Código:



This is header #1



This is header #1



This is header #1

El primero


el proximo …

Este es el encabezado # 2


Segundo

Salida:

4)

Esta es la sección de pie de página en nuestro script HTML. En general, vemos todos los datos de copyright y la pequeña sección que encontramos en las ofertas, como "se aplican condiciones" en cualquier oferta. Entonces, estas cosas se definen bajo la etiqueta de pie de página.

Código:

Etiqueta interior del cuerpo y pie de página

Etiqueta de pie de página interior.


Otra etiqueta de pie de página

Las condiciones se aplican

Salida:

5)

Esta etiqueta nos da los elementos de navegación. La URL en cualquier script de documento HTML donde generalmente queremos navegar de una página a otra a través de esta etiqueta. Todos los datos que se proporcionan bajo esta etiqueta están disponibles como hipervínculos. Estos hipervínculos pueden ser útiles para navegar de una sección a otra. Un pequeño ejemplo se define como:

Código:


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2

Salida:

Mientras practica, haga clic en esos enlaces y compruebe cómo cambia el color del hipervínculo al hacer clic.

6)

Esta es una etiqueta que se utiliza para mostrar los datos a los lados de nuestro documento HTML. En muchos sitios web, podemos encontrar contenido que existe en una barra lateral, que se muestra con esta etiqueta aparte. Este contenido debe estar en línea con los otros datos presentes en el documento. Veamos un pequeño ejemplo de ello.

Código:

Cómo se usa la etiqueta aparte

Etiqueta interior aparte


Contenido dentro de la etiqueta aparte

Salida:

El contenido exacto no puede especificarse completamente de la misma manera, solo puede documentarse y entenderse claramente mientras se usa toda la página HTML.

7)

Esta etiqueta especifica que vamos a adjuntar una imagen. Esta etiqueta se puede utilizar para especificar una fuente de imagen y mostrar un gif o una imagen.

Código:





Como se mencionó anteriormente, así es como podemos definir la etiqueta de la figura. Dentro de la etiqueta de la figura, podemos especificar nuestro comando de imagen con una etiqueta de origen. Dentro de esta etiqueta de figura, podemos, a su vez, usar la etiqueta de título de figura.

8)

Esta etiqueta se utiliza para dar título debajo de la imagen que se proporciona. Se puede usar dentro de la etiqueta de la figura. El uso de eso se puede ver en el siguiente ejemplo.




This is description of the image attached.

Puede intentar ejecutar lo mismo proporcionando una fuente de imagen y verificar cómo se muestra la salida.

9)

Esta etiqueta especifica todos los atributos y el contenido completo del sitio HTML. Contiene todo el contenido único. Una cosa importante a tener en cuenta para esta etiqueta en particular es que esta etiqueta se puede usar solo una vez en la creación total de la página. Encontramos que otras etiquetas se pueden usar más de una vez para crear una página web, pero esta etiqueta principal es una etiqueta de uso único.

Código:



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying

La lectura ayudaría a comprender diferentes temas.


Practicando


Con Estudiar, practicar es algo imprescindible para aprender

Salida:

10)

Esta etiqueta es para resaltar contenido o datos específicos. En otras palabras, esta etiqueta es útil para marcar datos. Veamos un pequeño ejemplo de esto a continuación:

Código:

En todo este texto que estoy escribiendo ahora, quiero marcar este texto

Salida:

11)

Esta etiqueta contiene los detalles adicionales, que los usuarios pueden ocultar cualquier detalle en su deseo. A través de esta etiqueta, los usuarios pueden abrir / cerrar cualquier contenido que necesiten. Si queremos que esa etiqueta revele sus detalles al inicio, entonces se puede usar el atributo "abrir".

A continuación se muestra un pequeño ejemplo de lo mismo:

Código:

¿Se muestra esto?

Salida:

Ahora, ¿cuál sería el resultado si no utilizáramos el atributo abierto?

¿Se muestra esto?

Salida 1:

Salida 2:

12)

Esta etiqueta se usa dentro de la etiqueta de detalles. Debajo de la etiqueta de detalles, podemos tener una etiqueta de resumen que especifica el resumen completo de la página web o el documento HTML. Una cosa importante a tener en cuenta aquí es que la etiqueta de resumen es la primera etiqueta secundaria que debe estar debajo de la etiqueta de detalles. Encontremos un pequeño ejemplo a continuación:

Código:



Have written this inside summary tag which is inside details tag

Este texto solo viene bajo la etiqueta de detalles

Estos datos de texto se escriben después de completar la etiqueta de detalles

Salida 1:

En el resultado anterior, habíamos resaltado la flecha, ya que obtenemos nuestro resultado 2 una vez que lo expandimos.

Salida 2:

Es posible que esta etiqueta no esté dando ninguna diferencia

13)

Esta etiqueta define la fecha / hora en un formato que los usuarios pueden entender fácilmente. Pero una cosa a tener en cuenta es que esta etiqueta puede no darnos una salida modificada en muchos de los navegadores.

Código:

En la actualidad son las 11:00 pm de la noche.

Salida:

14)

Como el nombre ya sugiere, esta etiqueta es para escribir cualquier contenido en un cuadro. Esta etiqueta debe tener un atributo abierto para mostrar el cuadro de diálogo una vez que se ejecuta el código fuente. Encuentra un ejemplo a continuación:

Los datos escritos aquí se muestran en un cuadro de diálogo

Salida:

15.

Esta etiqueta proporciona el progreso de una determinada tarea en una representación gráfica. Aquí necesitamos tener el número máximo para el cual se debe representar el progreso. Esta etiqueta consta principalmente de dos atributos. Máximo y valor son los dos atributos. Max representa el recuento total que debe completarse y Value nos da el porcentaje de recuento finalizado con respecto al valor de recuento máximo. Un ejemplo de eso es a continuación:

Código:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Salida:

dieciséis.

Esta etiqueta es para medir. Esto se puede utilizar para el espacio ocupado por una consulta o también para el uso del espacio en disco. Hay algunos atributos que se utilizarán con esta etiqueta. Los atributos son max, min y value. Según su uso, definitivamente podemos determinar su propósito y uso.

Código:


EDCUBA


EDCUBA


EDCUBA

Uso de la etiqueta del medidor

En un apartamento de 6 pisos, vivo en el segundo piso:
2 de 6

Salida:

17)

Esta es una etiqueta que se ha introducido para agregar archivos de video a nuestra página HTML. Hasta que se introdujo esta etiqueta, los desarrolladores utilizaron complementos para introducir archivos de video en el contenido de la página HTL. Hay algunos atributos que se pueden usar junto con la etiqueta. Autoplay, Preload, Muted son algunos de estos.

Código:


Solo necesitamos una etiqueta fuente para proporcionar la fuente desde donde necesitamos cargar el contenido de video a nuestra página.

18)

Esta etiqueta es para agregar archivos de audio a nuestra página HTML. El uso y la etiqueta de origen serían los mismos que los de la etiqueta de video. Como ejercicio, intente utilizar todos los elementos semánticos y cree una página web con la versión e HTML 5 para aprender mejor y más rápido.

Conclusión

En este artículo, tenemos que ver muchos elementos semánticos y su uso en HTML5. Una cosa importante a tener en cuenta aquí es que muchas de estas etiquetas son compatibles con las versiones de Internet Explorer mayores de 9 y las versiones de Chrome mayores de 3. Por lo tanto, siga aprendiendo y practicando para comprender mejor el uso de etiquetas en HTML 5.

Artículos recomendados

Esta es una guía de los elementos semánticos HTML5. Aquí discutimos la introducción y varios elementos semánticos en HTML5 junto con su implementación de código. También puede consultar el siguiente artículo para obtener más información:

  1. Los 10 nuevos elementos HTML5 principales
  2. Etiquetas HTML5
  3. Trabajadores web HTML5
  4. Diferentes tipos de eventos HTML

Categoría:

Desarrollo de software