Comentário: Devido à falta de estrutura, até boas páginas HTML são difíceis de lidar. O nível do título deve ser analisado para ver como cada parte é dividida. A barra lateral, rodapé, cabeçalho, barra de navegação, área de conteúdo principal e artigos são representados por elementos comuns de div. HTML 5 adicionou novos elementos para identificar estas estruturas comuns: · Sectio
Devido à falta de estrutura, até boas páginas HTML são difíceis de lidar. O nível do título deve ser analisado para ver como cada parte é dividida. A barra lateral, rodapé, cabeçalho, barra de navegação, área de conteúdo principal e artigos são representados por elementos comuns de div. HTML 5 adiciona novos elementos para identificar estas estruturas comuns:
· Seção: Este pode ser um capítulo ou seção no livro, e na verdade pode ser qualquer coisa com seu próprio título no HTML 4
· Cabeçalho: o cabeçalho exibido na página; é diferente do elemento da cabeça
Footeiro: rodapé; pode exibir assinaturas em e -mails
Nav: um conjunto de links para outras páginas
Artigo: Um artigo em blog, revista, compilação de artigos, etc.
Vamos considerar uma página inicial típica do blog, que tem um cabeçalho na parte superior e um rodapé na parte inferior, além de vários artigos, uma área de navegação e uma barra lateral, consulte o Código 1 da página típica do blog
<html>
<head>
<title> Mokka mit Schlag </ititle>
</head>
<Body>
<div id = Page>
<div id = cabeçalho>
<H1> <a href => Mokka mit schlag </a> </h1>
</div>
<div id = contêiner>
<div id = Center Class = Coluna>
<div class = post id = pós-1000572>
<H2> <a href =
/Blog/Birding/2007/04/33/Spring-Com-Com-and-Goes-in-Sussex-County/>
A primavera vem (e vai) no condado de Sussex </a> </h2>
<div class = entrada>
<p> Ontem entrei para o Brooklyn Bird Club para o nosso
Viagem anual ao oeste de Nova Jersey, especificamente hiper
Humus, um ponto quente relativamente descoberto recentemente. Isto
Começou como uma bela manhã de inverno quando chegamos
No local às 7:30 da manhã, progrediu para surgir
10:00, e chegou ao início do verão às 10:15. </p>
</div>
</div>
<div class = post id = pós-1000571>
<H2> <a href =
/Blog/Birding/2007/04/33/mas-does-it-contating-for your-Life-list/>
Mas isso conta para sua lista de vida? </a> </h2>
<div class = entrada>
<p> Parece que agora você pode ir <a
href =
2007/04/cone_sf> assistindo a pássaros via Internet </a>. EU
ainda não consegui testá -lo (20 usuários
Limite aparentemente), mas isso é certamente legal.
Pessoalmente, não consigo imaginar substituindo
Realmente estar em campo por qualquer pequena quantidade.
Por outro lado, eu sempre achei bastante
triste por conhecer pássaros seniores que não são mais capazes de
Segure os binóculos firmes ou chegue ao parque. Eu posso
Imagine que isso pode ser de algum interesse para eles. No
pelo menos um pássaro idoso fez um grande ano na TV, depois
Ele não podia mais sair tanto. Isso certamente
Tops isso. </p>
</div>
</div>
</div>
<div class = navegação>
<div class = alignleft>
<a href =/blog/page/2/> «_fckSavedurl =/blog/página/2/>« entradas anteriores </a>
</div>
<div class = alignright> </div>
</div>
</div>
<div ID = Class direita = coluna>
<ul id = barra lateral>
<li> <h2> info </h2>
<ul>
<li> <a href =/blog/comentário-policy/> Política de comentários </a> </li>
<li> <a href =/blog/tdo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> Arquivos </h2>
<ul>
<li> <a href = '/blog/2007/04/'> abril de 2007 </a> </li>
<li> <a href = '/blog/2007/03/'> março de 2007 </a> </li>
<li> <a href = '/blog/2007/02/'> fevereiro de 2007 </a> </li>
<li> <a href = '/blog/2007/01/'> janeiro de 2007 </a> </li>
</ul>
</li>
</ul>
</div>
<div id = rodapé>
<p> Copyright 2007 Elliotte Rusty Harold </p>
</div>
</div>
</body>
</html>
Mesmo com o recuo correto, essas divs aninhadas ainda parecem muito confusas. No HTML 5, esses elementos podem ser substituídos por elementos semânticos, consulte o Código 2 Páginas de blog típicas escritas em html5
<html>
<head>
<title> Mokka mit Schlag </ititle>
</head>
<Body>
<header>
<H1> <a href => Mokka mit schlag </a> </h1>
</header>
<Section>
<Artigo>
<H2> <a href =
/Blog/Birding/2007/04/33/Spring-Com-Com-and-Goes-in-Sussex-County/>
A primavera vem (e vai) no condado de Sussex </a> </h2>
<p> Ontem entrei para o Brooklyn Bird Club para o nosso
Viagem anual ao oeste de Nova Jersey, especificamente hiper
Humus, um ponto quente relativamente descoberto recentemente. Isto
Começou como uma bela manhã de inverno quando chegamos a
O site às 7:30 da manhã, progrediu para as 10:00
AM, e chegou ao início do verão às 10:15. </p>
</artigo>
<Artigo>
<H2> <a href =
/Blog/Birding/2007/04/33/mas-does-it-contating-for your-Life-list/>
Mas isso conta para sua lista de vida? </a> </h2>
<p> Parece que agora você pode ir <a
href =
2007/04/cone_sf> assistindo a pássaros via Internet </a>. EU
ainda não consegui testá -lo (20 usuários
Limite aparentemente), mas isso é certamente legal.
Pessoalmente, não consigo imaginar substituindo
Realmente estar em campo por qualquer pequena quantidade.
Por outro lado, eu sempre achei bastante
triste por conhecer pássaros seniores que não são mais capazes de
Segure os binóculos firmes ou chegue ao parque. Eu posso
Imagine que isso pode ser de algum interesse para eles. No
pelo menos um pássaro idoso fez um grande ano na TV, depois
Ele não podia mais sair tanto. Isso certamente
Tops isso. </p>
</artigo>
<MAV>
<a href =/blog/page/2/> «_fckSavedurl =/blog/página/2/>« entradas anteriores </a>
</Arn>
</seção>
<MAV>
<ul>
<li> <h2> info </h2>
<ul>
<li> <a href =/blog/comentário-policy/> Política de comentários </a> </li>
<li> <a href =/blog/tdo-list/> todo list </a> </li>
</ul> </li>
<li> <h2> Arquivos </h2>
<ul>
<li> <a href = '/blog/2007/04/'> abril de 2007 </a> </li>
<li> <a href = '/blog/2007/03/'> março de 2007 </a> </li>
<li> <a href = '/blog/2007/02/'> fevereiro de 2007 </a> </li>
<li> <a href = '/blog/2007/01/'> janeiro de 2007 </a> </li>
</ul>
</li>
</ul>
</Arn>
<wower>
<p> Copyright 2007 Elliotte Rusty Harold </p>
</rodapé>
</body>
</html>
Agora não é necessário div. Você não precisa mais definir o atributo da classe e pode inferir o significado de cada parte do nome do elemento padrão. Isso é especialmente importante para navegadores de áudio, navegadores móveis e outros navegadores fora do padrão.
(continua)