|
O HTML 5 está fortemente relacionado a web semântica, ou seja, o conteúdo das páginas HTML5 utilizam novos elementos que descrevem com muito mais precisão e organização o conteúdo das páginas HTML.
Elementos do HTML 5 para organizar o layout das páginas.
<header> - cabeçalho da página ou de uma seção (não confundir com a tag <head>);
O elemento header é utilizado para definir um conteúdo de introdução ou de navegação. Normalmente encontramos elementos de cabeçalho (h1 ˜h6), em seu conteúdo. É importante lembrar que, apesar de geralmente ser empregado no começo da página, seu uso pode ser feito também em diferentes seções do mesmo documento.
<section> - cada seção do conteúdo;
Representa uma seção genérica de um documento. Neste contexto, uma seção é o agrupamento de um conteúdo dentro de umtema que, normalmente, possui um cabeçalho.
<article> - um item do conteúdo dentro da página ou da seção;
Representa uma composição independente em um documento, página ou aplicação e que é, a princípio, independentemente distribuível ou reutilizável. Pode ser um post de um fórum, artigo de uma revista ou jornal, post de um blog, comentário enviado por um usuário, widget interativo ou qualquer item independente de conteúdo.
Quando encontramos elementos article aninhados, os elementos article internos representam um conteúdo que esteja relacionado ao conteúdo do ancestral article mais próximo. Por exemplo, elementos article internos podem representar os comentários de um post de um blog Neste caso o post do blog seria o elemento article ancestral mais próximo.
<footer> - o rodapé da página ou de uma seção;
Representa o rodapé do ancestral de seccionamento mais próximo. É muito comum encontrarmos em seu conteúdo informações sobre a seção a qual ele pertence como quem a escreveu, links relacionados ao conteúdo da seção e informações legais, por exemplo.
<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;
A tag nav representa uma seção da página que contém links para outras páginas ou para outras partes do documento, ou seja, uma seção comlinks de navegação.
<aside> - conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).
O elemento aside representa uma seção que consiste em um conteúdo que esteja tangencialmente relacionado ao conteúdo que está à sua volta. Essa seção é frequentemente representada como uma coluna lateral em relação ao conteúdo principal de uma página.
Abaixo está o código da página acima. Necessário primeiro
criar a página “índex.html”, e outra como “default.css” define o layout do
site.
<!DOCTYPE html!>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link href="default.css" rel="stylesheet" type="text/css" media="all">
<title>Elementos da Estrutura</title>
</head>
<body>
<div id="container">
<header id="cabecalho">Header</header>
<div id="corpo">
<nav id="menu">nav</nav>
<section id="artigo">
<header class="cabecalho_artigo">header
</header>
<article class="artigo">article
</article>
<footer class="rodape_artigo">footer
</footer>
</section>
<aside id="propaganda">aside</aside>
</div>
<footer id="rodape">footer</footer>
</div>
</body>
</html>
default.css
* { margin : 0; padding : 0; }
#container {
margin: 0px auto 0px auto;
width: 960px;
background:#ccddbb;
}
#cabecalho {
margin:0px auto 0px auto;
width:960px;
height:82px;
position:relative;
background:#c0c0c0;
}
#corpo {
margin: 1px;
padding-top: 10px;
padding-bottom: 20px;
min-height: 500px;
}
#menu {
margin:0px auto 0px auto;
width:160px;
height:500px;
float:left;
background:#c0c0ff;
}
#artigo {
margin:0px auto 0px auto;
width:618px;
height:500px;
float:left;
background:#c0c088;
margin-left:10px;
}
.cabecalho_artigo {
margin:0px auto 0px auto;
width:598px;
height:50px;
float:left;
background:#c0c0c0;
margin:10px;
}
.artigo {
margin:0px auto 0px auto;
width:598px;
height:330px;
float:left;
background:#c0c0c0;
margin:10px;
}
.rodape_artigo {
margin:0px auto 0px auto;
width:598px;
height:50px;
float:left;
background:#c0c0c0;
margin:10px;
}
#propaganda {
margin:0px auto 0px auto;
width:160px;
height:500px;
float:left;
background:#c0c000;
margin-left:10px;
}
#rodape {
margin: 0px auto;
padding-bottom: 20px;
width: 960px;
position: relative;
background:#c0c0c0;
}
Veja
Mais:
- Elemento canvas em HTML5- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5
