Introdução aos elementos semânticos do HTML5

O artigo a seguir fornecerá vários elementos semânticos em html5. Vamos começar com a compreensão da semântica. Semântica é sobre tipos diferentes de tags, cuja funcionalidade representaria e executaria a mesma função que seu nome. A funcionalidade da tag seria facilmente entendida por seu nome; que está em um nome / formato compreensível para o usuário. A maioria dos elementos em HTML são geralmente elementos semânticos.

Vantagens dos elementos semânticos em HTML5

As vantagens dos elementos semânticos são as seguintes:

  • Fácil entendimento do código.
  • A manutenção pode ser feita rápida e adequadamente.
  • Não há necessidade de adicionar nenhuma descrição especificamente para qualquer tag.

Vários elementos semânticos em HTML5

Vamos agora entrar nos elementos semânticos do HTML5.

1

Essa tag nos dá uma idéia de que os dados contidos nessa tag são especificamente para conteúdo semelhante. Depende dos diferentes tipos de artigos que geralmente temos também. Pode ser um blog, fóruns, artigos de coluna em jornais, 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

Resultado:

2)

Essa tag é sobre como fornecer um conteúdo secional do total de dados. Ao saber sobre o uso das tags de artigo e de seção, essas tags podem ser usadas dentro de cada tag. Essa tag de seção pode ser usada dentro da tag do artigo e vice-versa.

Código:


The section here is about:

Aprendendo e praticando

Resultado:

3)

Essa tag fornece todos os dados do cabeçalho. Todos os dados que desejamos colocar no formato do cabeçalho são usados ​​nessa tag de cabeçalho. E essa tag pode ser usada várias vezes em todo o script HTML. Vamos ver um pequeno exemplo disso.

Código:



This is header #1



This is header #1



This is header #1

Primeiro


o próximo …

Este é o cabeçalho # 2


O segundo

Resultado:

4)

Esta é a seção de rodapé em nosso script HTML. Geralmente, vemos todos os dados de direitos autorais e a pequena seção que encontramos em qualquer oferta como "condições aplicáveis" em todas as ofertas. Portanto, essas coisas são definidas sob a tag rodapé.

Código:

Corpo interno e etiqueta de rodapé acima

Etiqueta de rodapé interna.


Outra tag de rodapé

As condições se aplicam

Resultado:

5)

Essa tag fornece os elementos de navegação. O URL em qualquer script de documento HTML em que geralmente desejamos navegar de uma página para outra página através dessa tag. Todos os dados fornecidos sob esta tag estão disponíveis como hiperlinks. Esses hiperlinks podem ser úteis na navegação de uma seção para outra. Um pequeno exemplo é definido 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

Resultado:

Enquanto pratica, clique nesses links e verifique como a cor do hiperlink muda ao clicar.

6

Essa é uma tag usada para exibir os dados nas laterais do nosso documento HTML. Em muitos sites, podemos encontrar conteúdo que existe em uma barra lateral, que é exibida usando essa tag de lado. Este conteúdo deve estar alinhado com os outros dados presentes no documento. Vamos ver um pequeno exemplo disso.

Código:

Como a tag de lado é usada

Etiqueta de dentro para o lado


Conteúdo dentro da tag

Resultado:

O conteúdo exato não pode ser especificado completamente da mesma maneira, apenas pode ser documentado e entendido claramente ao usar toda a página HTML.

7)

Essa tag especifica que vamos anexar uma imagem. Essa tag pode ser usada para especificar uma fonte de imagem e exibir um gif ou imagem.

Código:





Como mencionado acima, é assim que podemos definir a tag figure. Dentro da tag figura, podemos especificar nosso comando de imagem com uma tag source. Dentro dessa tag de figura, podemos, por sua vez, usar a tag de legenda da figura.

8)

Essa tag é usada para fornecer legendas sob a imagem fornecida. Pode ser usado dentro da tag figura. O uso disso pode ser visto no exemplo abaixo.




This is description of the image attached.

Você pode tentar executar o mesmo fornecendo uma fonte de imagem e verificar como a saída está sendo exibida.

9

Essa tag especifica todos os atributos e o conteúdo completo do site HTML. Ele contém todo o conteúdo exclusivo. Uma coisa importante a ser observada para essa tag específica é que ela pode ser usada apenas uma vez na criação total da página. Descobrimos que outras tags podem ser usadas mais de uma vez na criação de uma página da web, mas essa tag principal é uma tag 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

A leitura ajudaria a entender diferentes tópicos


Praticando


Com o Estudo, praticar é uma coisa obrigatória na aprendizagem

Resultado:

10)

Essa tag serve para destacar conteúdo ou dados específicos. Em outras palavras, essa tag é útil na marcação de dados. Vamos ver um pequeno exemplo para isso abaixo:

Código:

Neste texto inteiro que estou escrevendo agora, quero marcar esse texto

Resultado:

11)

Essa tag contém os detalhes adicionais, para que os usuários possam ocultar todos os detalhes que desejarem. Através dessa tag, os usuários podem abrir / fechar qualquer conteúdo que precisarem. Se queremos que essa tag divulgue seus detalhes no início, o atributo "aberto" pode ser usado.

Abaixo está um pequeno exemplo do mesmo:

Código:

Isso é exibido?

Resultado:

Agora, qual seria a saída se não usássemos o atributo aberto?

Isso é exibido?

Saída 1:

Saída 2:

12)

Essa tag é usada dentro da tag de detalhes. Sob a tag de detalhes, podemos ter uma tag de resumo que especifica todo o resumo da página da web ou do documento HTML. Uma coisa importante a ser observada aqui é que a tag de resumo é a primeira tag filha que precisa estar abaixo da tag de detalhes. Vamos encontrar um pequeno exemplo abaixo:

Código:



Have written this inside summary tag which is inside details tag

Este texto é apresentado apenas na etiqueta de detalhes

Esses dados de texto são gravados após a conclusão da tag de detalhes

Saída 1:

Na saída acima, destacamos a seta, pois obtemos nossa saída 2 quando a expandimos.

Saída 2:

Esta tag pode não estar dando nenhuma diferença

13)

Essa tag define a data / hora em um formato que os usuários possam entender facilmente. Mas é importante notar que essa tag pode não nos fornecer uma saída alterada em muitos navegadores.

Código:

Atualmente, são 23:00 da noite.

Resultado:

14)

Como o nome já sugere, essa tag serve para escrever qualquer conteúdo em uma caixa. Essa tag deve ter um atributo aberto para exibir a caixa de diálogo após a execução do código-fonte. Encontre um exemplo abaixo:

Os dados gravados aqui são exibidos em uma caixa de diálogo

Resultado:

15

Essa tag fornece o progresso de uma determinada tarefa em uma representação gráfica. Aqui precisamos ter o número máximo para o qual o progresso deve ser representado. Essa tag consiste principalmente em dois atributos. Max e value são os dois atributos. Max representa a contagem total que precisa ser concluída e Value fornece a porcentagem de contagem finalizada em relação ao valor máximo de contagem. Um exemplo para isso está abaixo:

Código:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Resultado:

16

Essa tag é para medição. Isso pode ser utilizado para o espaço ocupado por uma consulta ou uso do espaço em disco também. Existem alguns atributos que devem ser usados ​​com esta tag. Os atributos são max, min e value. Com base em seu uso, podemos definitivamente descobrir sua finalidade e uso.

Código:


EDCUBA


EDCUBA


EDCUBA

Uso da etiqueta do medidor

Em um apartamento de 6 andares, moro no 2º andar:
2 de 6

Resultado:

17

Essa é uma tag que foi introduzida para adicionar arquivos de vídeo à nossa página HTML. Até a introdução dessa tag, os desenvolvedores usavam plugins para introduzir arquivos de vídeo no conteúdo da página HTL. Existem alguns atributos que podem ser usados ​​junto com a tag. Autoplay, Preload, Muted são alguns deles.

Código:


Precisamos apenas de uma tag de origem para fornecer a fonte de onde precisamos fazer o upload do conteúdo do vídeo em nossa página.

18

Essa tag serve para adicionar arquivos de áudio à nossa página Html. O uso e a tag de origem seriam os mesmos da tag de vídeo. Como exercício, tente usar todos os elementos semânticos e crie uma página da web na versão HTML 5 para aprender melhor e mais rapidamente.

Conclusão

Neste artigo, podemos ver muitos elementos semânticos e seu uso no HTML5. Uma coisa importante a ser observada aqui é que muitas dessas tags são suportadas por versões do Internet Explorer maiores que 9 e versões do Chrome maiores que 3. Portanto, continue aprendendo e praticando para entender melhor o uso de tags no HTML 5.

Artigos recomendados

Este é um guia para os elementos semânticos do HTML5. Aqui discutimos a introdução e vários elementos semânticos no HTML5, juntamente com sua implementação de código. Você também pode consultar o seguinte artigo para saber mais -

  1. Os 10 principais elementos do HTML5
  2. Tags HTML5
  3. Trabalhadores da Web em HTML5
  4. Tipo diferente de eventos HTML

Categoria:

Desenvolvimento de software