Download - HTML5 - Estrutura e semântica
![Page 1: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/1.jpg)
HTML5 – Estrutura e Semântica
![Page 2: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/2.jpg)
Por que usar?
• Facilita a leitura e interpretação do código
• Deixa o código mais limpo e bem escrito
• Significado
• Ganho de performance
• Padronização
![Page 3: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/3.jpg)
Estrutura utilizando HTML5
![Page 4: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/4.jpg)
Tags comuns
• Header: Cabeçalho. Indica a introdução de um tema abordado na página. Quanto mais no começo do código está, maior relevância tem para os mecanismos de busca.
• Footer: Pode ser utilizado dentro da tag section para indicar o final de um tema, porém não é muito util.
• Nav: Agrupa qualquer série de links (internos ou externos)
![Page 5: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/5.jpg)
Aside
• Faz referência ao conteúdo principal que o cerca, como se fosse separado do conteúdo principal. Quando está dentro de um article, faz referência ao assunto geral dele, se estiver fora, está relacionado com o conteúdo global do site. Pode estar ou não em uma sidebar.
![Page 6: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/6.jpg)
Article
• Área define o conteúdo principal da página, podendo ele ser uma composição de formulários, um artigo de notícias, etc. desde que seja um conteúdo independente.
![Page 7: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/7.jpg)
Section
• Define uma sessão dentro de determinado elemento. Se necessário pode conter um header, um footer e uma nova ordem de títulos. Pode ser utilizada na tag article para separar notícias, eventos, galeria de fotos, etc.
![Page 8: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/8.jpg)
Article x Section
Article• Deve conter o conteúdo
principal da página
• O objetivo é agrupar os principais conteúdos da página
• Pode ser combinado com o elemento section para formatação de seu conteúdo
Section• Pode conter qualquer tipo
de conteúdo
• É a versão mais semântica da div (mas não substitui)
• O objetivo é marcar uma seção da página
![Page 9: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/9.jpg)
DIV x SECTION
Quando usar div• Formatação dentro de
uma sessão• Como sessão principal da
página (para o site todo não ser interpretado como uma única sessão)
• Não precisa de significado semântico
Quando usar section• Agrupar elementos
referentes a um mesmo assunto
• Separar as sessões do conteúdo
• Estilizar
![Page 10: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/10.jpg)
Outras tags
• HGROUP: agrupa uma sequencia de títulos (do h1 ao h5)
• AUDIO/VIDEO: Maneira simples e confiável de inserir um conteúdo multimídia na página.
• MAIN: Definir o conteúdo mais importante, que está relacionado com o tópico central da página.
![Page 11: HTML5 - Estrutura e semântica](https://reader030.vdocuments.mx/reader030/viewer/2022020110/55a868d91a28ab55028b4622/html5/thumbnails/11.jpg)
Futuro do HTML 5
• Os mecanismos de busca estão dando cada vez mais importância à semântica, caminhando para a melhor interpretação de cada elemento do site. Apesar de alguns navegadores não interpretarem tão bem algumas tags semanticamente, elas ainda são renderizadas, não atrapalhando o uso.