Estrutura de layout HTML5
O HTML5 teve mudanças consideráveis em sua estrutura, novas tags foram inseridas melhorando muito a semântica das páginas, facilitando a compreensão, acessibilidade e a manutenção
do código.
Esse tutorial vai tratar das mudanças estruturais da página, principalmente da evolução do elemento <div> para <nav>, <section>, <article>, <aside>, <header> e <footer>.
Exemplo das mudanças:
XHTML
<body>
<div id="header">...</div>
<div id="menu">...</div>
<div class="post">...
<div class="content">...</div>
</div>
<div id="sidebar">...</div>
<div id="rodape">...</div>
</body>
<div id="header">...</div>
<div id="menu">...</div>
<div class="post">...
<div class="content">...</div>
</div>
<div id="sidebar">...</div>
<div id="rodape">...</div>
</body>
HTML5
<body>
<header>...</header>
<nav>...</nav>
<article>
<section> ... </section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
<header>...</header>
<nav>...</nav>
<article>
<section> ... </section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Elementos de estrutura:
<header> - cabeçalho da página ou de uma
seção (não confundir com a tag <head>);<section> - cada seção do conteúdo;<article> - um item do conteúdo dentro da página
ou da seção;<footer> - o rodapé da página ou de uma
seção;<nav> - o conjunto de links que formam a navegação,
seja o menu principal do site ou links relacionados ao conteúdo da
página;<aside> - conteúdo relacionado ao artigo (como
arquivos e posts relacionados em um blog, por exemplo).
Note que qualquer elemento pode ter seu conteúdo separado por seções com o elemento
section. Os elementos podem ter também um header e um footer independentes do
resto do layout. Como na imagem.
Exemplo de páginas HTML5:
index.html
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>HTML 5</title>
<link rel="stylesheet" href="style.css" />
</head>
<header>
<h1>Exemplo HTML 5</h1>
</header>
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div id="corpo">
<div id="box">
<header>
<h2>Título</h2>
</header>
<section>
<article class="bpage">
<div>
<p>Lorem ipsum .......</p>
<p>Lorem ipsum .......</p>
</div>
</article>
</section>
</div>
<aside>
<section>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</section>
<section>
<ul>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</section>
<section>
<ul>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 12</a></li>
</ul>
</section>
</aside>
</div>
<footer>
<section>Empresa </section>
</footer>
</html>
<html lang="pt-br">
<head>
<title>HTML 5</title>
<link rel="stylesheet" href="style.css" />
</head>
<header>
<h1>Exemplo HTML 5</h1>
</header>
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div id="corpo">
<div id="box">
<header>
<h2>Título</h2>
</header>
<section>
<article class="bpage">
<div>
<p>Lorem ipsum .......</p>
<p>Lorem ipsum .......</p>
</div>
</article>
</section>
</div>
<aside>
<section>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</section>
<section>
<ul>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</section>
<section>
<ul>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
<li><a href="#">Link 11</a></li>
<li><a href="#">Link 12</a></li>
</ul>
</section>
</aside>
</div>
<footer>
<section>Empresa </section>
</footer>
</html>
style.css
* {
margin:0;
padding:0;
}
body{
margin:0 auto;
width:960px;
font-family:Arial, Helvetica, sans-serif;
}
a {color:#000000; text-shadow:1px 1px 1px #cccccc;}
p {text-align:justify;}
header, footer, aside, section {display:block;}
h1 {
font-size:26px;
line-height:40px;
padding:18px 0;
}
nav {
width:70%;
height:40px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background:#f3f3f3;
border:1px solid #cccccc;
position:absolute;
}
nav ul {
list-style-image:none;
list-style-type:none;
margin:0 auto;
width:940px;
}
nav ul li {
float:left;
}
nav ul li a{
margin-right:20px;
display:block;
line-height:40px;
}
#corpo {
display:table;
margin-top:40px;
}
#box {
display:table-cell;
padding:22px;
width:620px;
}
aside {
display:table-cell;
width:280px;
background:#f3f3f3;
}
.bpage div {
-webkit-column-count:2;
-moz-column-count:2;
-moz-column-gap:22px;
-webkit-coulmn-gap:22px;
}
aside section {
-moz-border-radius:11px;
-webkit-border-radius:11px;
background:#e0e0e0;
margin:22px 0 0 22px;
padding:11px 22px;
width:70%;
}
footer{
background:#CCC;
padding:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-align:center;
color:#ffffff;
}
Nenhum comentário:
Postar um comentário