HTML5 - Estrutura e semntica

  • Published on
    17-Jul-2015

  • View
    350

  • Download
    5

Transcript

  • HTML5 Estrutura e Semntica

  • Por que usar?Facilita a leitura e interpretao do cdigoDeixa o cdigo mais limpo e bem escritoSignificadoGanho de performancePadronizao

  • Estrutura utilizando HTML5

  • Tags comunsHeader: Cabealho. Indica a introduo de um tema abordado na pgina. Quanto mais no comeo do cdigo est, maior relevncia tem para os mecanismos de busca. Footer: Pode ser utilizado dentro da tag section para indicar o final de um tema, porm no muito util.Nav: Agrupa qualquer srie de links (internos ou externos)

  • AsideFaz referncia ao contedo principal que o cerca, como se fosse separado do contedo principal. Quando est dentro de um article, faz referncia ao assunto geral dele, se estiver fora, est relacionado com o contedo global do site. Pode estar ou no em uma sidebar.

  • Articlerea define o contedo principal da pgina, podendo ele ser uma composio de formulrios, um artigo de notcias, etc. desde que seja um contedo independente.

  • SectionDefine uma sesso dentro de determinado elemento. Se necessrio pode conter um header, um footer e uma nova ordem de ttulos. Pode ser utilizada na tag article para separar notcias, eventos, galeria de fotos, etc.

  • Article x SectionArticleDeve conter o contedo principal da pginaO objetivo agrupar os principais contedos da pginaPode ser combinado com o elemento section para formatao de seu contedoSectionPode conter qualquer tipo de contedo a verso mais semntica da div (mas no substitui)O objetivo marcar uma seo da pgina

  • DIV x SECTIONQuando usar divFormatao dentro de uma sessoComo sesso principal da pgina (para o site todo no ser interpretado como uma nica sesso)No precisa de significado semntico

    Quando usar sectionAgrupar elementos referentes a um mesmo assuntoSeparar as sesses do contedoEstilizar

  • Outras tagsHGROUP: agrupa uma sequencia de ttulos (do h1 ao h5)AUDIO/VIDEO: Maneira simples e confivel de inserir um contedo multimdia na pgina.MAIN: Definir o contedo mais importante, que est relacionado com o tpico central da pgina.

  • Futuro do HTML 5Os mecanismos de busca esto dando cada vez mais importncia semntica, caminhando para a melhor interpretao de cada elemento do site. Apesar de alguns navegadores no interpretarem to bem algumas tags semanticamente, elas ainda so renderizadas, no atrapalhando o uso.