HTML5 elementos semânticos
Semântica = significado.
elementos semânticos = elemento sentido.
O que é elementos semânticos?
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.
Suporte a navegadores
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.
HTML5 novos elementos semânticos
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:
- <Header>
- <Nav>
- <Section>
- <Article>
- <Além>
- <Figcaption>
- <Figura>
- <Rodapé>
HTML5 elemento <section>
<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.
Exemplos
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
tente »
HTML5 elemento <article>
<Article> tag define o conteúdo independente. .
<Article> elemento Exemplo:
- Fórum de Discussão Pública
- post
- notícia
- comentário
Exemplos
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
tente »
HTML5 elemento <nav>
<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>!
Exemplos
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
tente »
HTML5 <aside> elemento
<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.
Exemplos
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
tente »
HTML5 <cabeçalho> elemento
<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:
Exemplos
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>
tente »
HTML5 elemento <footer>
<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>.
Exemplos
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
tente »
HTML5 <figure> e elemento <figcaption>
<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.
Exemplos
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>
tente »
Nós podemos começar a usar esses elementos semânticos fazer?
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):
{
display: block;
}
Internet Explorer 8 e versões anteriores do IE problemas
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:
<script src="html5shiv.js"></script>
<![endif]-->
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