Visão geral dos novos elementos do HTML5
Desde 1999, quando o HTML 4.01 se tornou um padrão, a web e o uso da web mudaram uma medida substancial. O W3C decidiu alterar a sintaxe fundamental do HTML de SGML (Standard Generalized Markup Language) para XML e também linguagens de marcação totalmente diferentes, como Scalable Vector Graphics (SVG), XForms e MathML. Atualmente, alguns componentes do HTML 4.01 estão desatualizados, nunca são usados ou não são esperados. Cada parte dos componentes no HTML5 é deslocada ou recomposta. O HTML5 incluiu novos elementos para ilustrar representação, exibir conteúdo digital, layout de página aprimorado e funcionalidade geral, além de várias novas interfaces para atender adequadamente aos requisitos atuais da Internet.
Existem vários novos elementos introduzidos no HTML5, que oferecem certos recursos adicionais para desenvolver um site desejável e interativo. Podemos criar seu código de maneira rápida e eficiente com a ajuda de tais componentes. Devido à falta de estrutura, muitos documentos HTML bem formados são mais difíceis de manusear do que precisam. Ao avaliar as escalas de cabeçalho, precisamos descobrir para onde estão indo as quebras de segmento. O elemento div identifica barras laterais, rodapés, cabeçalhos, menus de navegação e as principais partes do conteúdo.
Os 10 principais elementos do HTML5
O HTML5 fornece novos elementos para aprimorar o layout do documento.
1
O elemento especifica uma parte de uma página que inclui uma estrutura separada em um documento, seção ou site e é recomendado que seja amplamente distribuído ou utilizável. Pode ser um grupo que publica um diário ou relatório em papel diário, uma submissão a um boletim on-line, uma observação enviada por um cliente ou qualquer outro objeto sem substâncias.
Exemplo:
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Article Element
EDUCBA
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a leading global provider of skill based education addressing the needs 500, 000+ members across 40+ Countries.
Resultado:
- Salve o código acima em um arquivo com extensão .html.
- Execute o arquivo html em um navegador e você obterá a saída conforme mostrado na imagem abaixo.
2)
O elemento indica o conteúdo individual de forma semelhante a categorizações, mapas, imagens, artigos de código e muito mais.
Exemplo:
Figure Element
A EDUCBA é uma provedora líder global de educação baseada em habilidades, atendendo às necessidades de mais de 500.000 membros em mais de 40 países.
Resultado:
O código acima produzirá a saída conforme mostrado na imagem abaixo,
3)
O elemento é usado para adicionar descrição para a imagem.
Exemplo:
Figure Caption Element
A EDUCBA é uma provedora líder global de educação baseada em habilidades, atendendo às necessidades de mais de 500.000 membros em mais de 40 países.
EDUCBA (Corporate Bridge Consultancy Pvt Ltd)
Resultado:
O código acima exibe o resultado, como mostrado na imagem abaixo,
4)
O elemento é usado para especificar o cabeçalho de um documento ou uma seção na página. Você pode definir mais de um cabeçalho em um único documento.
Exemplo:
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
Header Element
Header One
Header Two
Header Three
O conteúdo do documento está aqui …
Resultado:
O código acima exibe o resultado, como mostrado na imagem abaixo,
5)
O elemento é usado para especificar informações, como informações do autor, informações sobre direitos autorais, contato, links para documentos relacionados, mapa do site e muito mais.
Exemplo:
Footer Element
Copyright © 2019 www.educba.com
Contato:
Resultado:
O código acima exibe o resultado, como mostrado na imagem abaixo,
6
O elemento é usado para exibir as principais informações importantes de um documento.
Exemplo:
Main Element
Informações do cabeçalho
Informação principal
EDUCBA
A EDUCBA é uma provedora líder global de educação baseada em habilidades …
Informações de rodapé
Resultado:
O código acima produzirá a saída conforme mostrado na imagem abaixo,
7)
O elemento é usado para destacar ou marcar o texto com a cor de fundo que atrai o usuário para um texto específico no documento.
Exemplo:
Mark Element
A EDUCBA é uma provedora líder global de educação baseada em habilidades, atendendo às necessidades de mais de 500.000 membros em mais de 40 países.
Resultado:
O código acima exibe o resultado, como mostrado na imagem abaixo,
8)
O elemento é usado para especificar os links de navegação na página. Esses links fornecem conexões com outras páginas em um documento.
Exemplo:
Nav Element
HTML |
CSS |
JAVA |
PHP |
PYTHON
Resultado:
O código acima produzirá a saída conforme mostrado na imagem abaixo,
9
O elemento é usado para definir a seção independente ou região específica no documento.
Exemplo:
Section Element
Main Article
Section Element
Main Article
Section Element
Main Article
O conteúdo do cabeçalho principal será exibido aqui …
Seção Um
O conteúdo da primeira seção será exibido …
Seção Dois
O conteúdo da segunda seção será exibido …
Resultado:
O código acima exibe o resultado, como mostrado na imagem abaixo,
10)
A tag é uma subparte da tag que fornece o texto que pode ser exibido ou oculto quando o usuário clica no cabeçalho.
Exemplo:
Summary Element
EDUCBA - Corporate Bridge Consultancy Pvt Ltd
É um fornecedor líder global de educação baseada em habilidades, atendendo às necessidades de mais de 500.000 membros em mais de 40 países.
Resultado:
Quando você executa o código acima, ele exibe o resultado, como mostrado abaixo,
Conforme mostrado na imagem, clique no cabeçalho, ele exibirá o texto oculto conforme mostrado na imagem abaixo,
Conclusão
Até agora, vimos como os novos elementos HTML5 são úteis para várias tarefas na criação do site. Esses novos elementos leem o documento de maneira mais precisa e padronizada e desenvolvem aplicativos da Web mais complexos e eficientes. Os novos elementos HTML5 oferecem alguns recursos extras adicionais para gerar sites interativos.
Artigos recomendados
Este é um guia para Novos Elementos Html5. Aqui discutimos os 10 principais novos elementos do Html5 para aprimorar o layout do documento. Você também pode consultar os seguintes artigos para saber mais -
- Correção de cores no After Effects
- As 6 principais versões do HTML
- Html5 vs Html4
- XHTML vs HTML5
- O que é Bridge?
- Tags HTML5 | As 4 principais tags do HTML5