O melhor tutorial HTML5 elementos semânticos em 2024. Neste tutorial você pode aprender O que é elementos semânticos?,Suporte a navegadores,HTML5 novos elementos semânticos,HTML5 elemento <section>,Exemplos,HTML5 elemento <article>,Exemplos,HTML5 elemento <nav>,Exemplos,HTML5 <aside> elemento,Exemplos,HTML5 <cabeçalho> elemento,Exemplos,HTML5 elemento <footer>,Exemplos,HTML5 <figure> e elemento <figcaption>,Exemplos,Nós podemos começar a usar esses elementos semânticos fazer?,Internet Explorer 8 e versões anteriores do IE problemas,
Semântica = significado.
elementos semânticos = elemento sentido.
A elementos semânticos pode descrever claramente a sua importância para o navegador e desenvolvedores.
Exemplos de elementos não semânticos: <div> e <span> - independentemente do conteúdo.
Exemplos de elementos semânticos: <form>, <table> e <img> - define claramente o seu conteúdo.
Internet Explorer 9 +, Firefox, Chrome, Safari e Opera suportam elementos semânticos.
Nota: Internet Explorer 8 e versões anteriores não suportam esse elemento, mas a parte inferior do artigo fornece uma solução compatível.
Muitos sites existentes incluem o seguinte código HTML: <div id = "nav">, <div class = "header"> ou <div id = "footer">, para indicar links de navegação, cabeça e cauda.
HTML5 fornece uma nova elementos semânticos para definir uma parte diferente da página Web:
<Section> tag define a seção do documento (seção, seção). Tal como capítulos, cabeçalhos, rodapés ou outras partes do documento.
De acordo com o documento do W3C HTML5: seção contém um conjunto de conteúdos e seu título.
<Article> tag define o conteúdo independente. .
<Article> elemento Exemplo:
<Nav> tag para definir seção de links de navegação.
<Nav> elemento é usado para definir a navegação página de links algumas áreas, mas não todas as ligações devem ser incluídos no elemento <nav>!
<Além> tag define o conteúdo da página para além da área principal de conteúdo (como a barra lateral).
Conteúdo de lado o rótulo deve ser associado com a área de conteúdos.
<Header> elemento descreve a área do cabeçalho do documento
<Cabeçalho> elemento nota descreve a área de exibição é usado para definir o conteúdo.
Na página você pode usar vários <cabeçalho> elemento.
O exemplo a seguir define a cabeça do artigo:
<Rodapé> elemento descreve a área inferior do documento.
<Rodapé> elemento deve conter os elementos que ele contém
Um rodapé normalmente contém o autor do documento, informações de copyright, links termos de uso, informações de contato, etc.
Documento que você pode usar múltiplos elemento <footer>.
<Figura> tag conteúdo especificado fluxo separado (imagens, gráficos, fotografias, código, etc.).
Conteúdo <figure> elemento deve ser associado ao conteúdo principal, mas se ele for removido, não responder ao impacto do fluxo de documentos.
<Figcaption> tag define o título elemento <figure>.
<Figcaption> elemento deve ser colocado no elemento de "figura" da primeira ou na última posição elemento filho.
Os elementos acima são elementos de bloco (exceto <figcaption>).
Para estes blocos e elementos para entrar em vigor em todas as versões do navegador, você precisa configurar os atributos de arquivo folha de estilo (código de estilo a seguir permite que os navegadores mais antigos apoiar elementos de bloco neste capítulo):
IE8 e versões anteriores do IE não pode ser processado nesses elementos, os efeitos CSS, então você não pode usar <header>, <section>, <footer>, <aside>, <nav>, <artigo>, <figure>, ou outro os elementos HTML5.
Solução: Você pode usar o script HTML5 Shiv Javascript para resolver os problemas de compatibilidade do IE. HTML5 Shiv Download: http://code.google.com/p/html5shiv/
Uma vez baixado, o seguinte código na página:
O código acima, quando a versão do navegador menos de IE9 irá carregar html5shiv.js arquivo, você deve colocá-lo no elemento <head>, porque o navegador do IE é necessária após o carregamento da cabeça tornando estes novos elementos HTML5