Elementos de Layout do HTML 5

Nesta aula, conheceremos algumas novas tags de layout do HTML5. As tags de layout foram criadas para facilitar a estruturação do site semanticamente. Mas o que isso quer dizer?

A estruturação semântica é importante, pois fica possível entender melhor o que cada parte do código HTML contém e significa. Dessa forma, outros sistemas podem entender melhor seu documento a partir da análise do código. Além disso, a estruturação semântica permite reaproveitar melhor estilos CSSs, uma vez que as tags são padronizadas.

Vamos conhecer as principais tags semânticas do HTML5 e entender melhor seu uso.

<header>

A tag <header> foi criada para conter conteúdo introdutório do seu documento HTML. Nela, normalmente ficam informações gerais como logomarca e navegação.

Você pode ter vários elementos <header> em um documento HTML. No entanto, <header> não pode ser colocado em um <footer>, <address> ou outro elemento <header>.

<nav>

A tag <nav> foi criada para conter as informações de navegação do documento HTML. É nessa tag que deve conter os links para outras páginas do seu site/sistema.

Observe que não são todos os links de um documento que devem estar dentro de um elemento <nav>. O elemento <nav> destina-se apenas ao bloco principal de links de navegação.

<section>

A tag <section> define uma seção de um documento HTML.

<article>

A tag <article> foi criada para indicar o conteúdo principal do documento HTML. O conteúdo do <article> deve ser distribuído independentemente do restante do site. Exemplos de conteúdos que podem ficar na tag <article>

Postagem no fórum
Postagem do blog
Notícia

<aside>

A tag <aside> define algum conteúdo complementar ao conteúdo principal. Caso não seja exibido, não deve prejudicar o entendimento do conteúdo principal.

O conteúdo <aside> geralmente é colocado como uma barra lateral em um documento.

<footer>

A tag <footer> tem o objetivo de indicar o rodapé do documento HTML.

Um elemento <footer> normalmente contém:

Informação de autoria
Informações sobre direitos autorais
Informações de contato
Mapa do site
Links principais
Documentos relacionados

Exemplo

O código abaixo contém uma atualização do layout visto em aulas anteriores, agora com as tags semânticas. Veja o exemplo:

HTML

CSS

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layout div</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <header>
        <h2>Cidades</h2>
    </header>

    <section>

        <nav>

            <ul>
                <li><a href="#">Londres</a></li>
                <li><a href="#">Paris</a></li>
                <li><a href="#">Rio de Janeiro</a></li>
            </ul>

        </nav>

        <article>

            <h2>Londres</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore qui sed numquam nam quo obcaecati,
                doloremque praesentium similique sequi quia nihil eaque fuga optio cumque beatae voluptatem at
                architecto ipsa.</p>

        </article>

    </section>

    <footer>
        <p><a href="http://imd.ufrn.br">www.imd.ufrn.br</a></p>
    </footer>

</body>

</html>

​x
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layout div</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
​
<body>
​
    <header>
        <h2>Cidades</h2>
    </header>
​
    <section>
​
        <nav>
​
            <ul>
                <li><a href="#">Londres</a></li>
                <li><a href="#">Paris</a></li>
                <li><a href="#">Rio de Janeiro</a></li>
            </ul>
​
        </nav>
​
        <article>
​
            <h2>Londres</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore qui sed numquam nam quo obcaecati,
                doloremque praesentium similique sequi quia nihil eaque fuga optio cumque beatae voluptatem at
                architecto ipsa.</p>
​
        </article>
​
    </section>
​
    <footer>
        <p><a href="http://imd.ufrn.br">www.imd.ufrn.br</a></p>
    </footer>
​
</body>
​
</html>

body{
    font-family: "Arial, Helvetica, sans-serif";
}

header {
    background-color: gray;
    color: white;
    padding: 30px;
    text-align: center;
}

nav{
    background-color:#ccc;
    width: 30%;
    height: 300px;
    padding: 20px;
    float: left;
    box-sizing: border-box;
}

nav ul {
    list-style-type: none;
    padding: 20px;
}

article {
    width: 70%;
height: 300px;
    background-color:rgb(238, 238, 238);
    box-sizing: border-box;
    float: left;
    padding: 20px;
}

footer {
    background-color:#777;
    color: white;
    padding: 20px;
    clear: both;
    text-align: center;
}

footer a{
    color: white;
}

 
body{
    font-family: "Arial, Helvetica, sans-serif";
}
​
header {
    background-color: gray;
    color: white;
    padding: 30px;
    text-align: center;
}
​
nav{
    background-color:#ccc;
    width: 30%;
    height: 300px;
    padding: 20px;
    float: left;
    box-sizing: border-box;
}
​
nav ul {
    list-style-type: none;
    padding: 20px;
}
​
article {
    width: 70%;
height: 300px;
    background-color:rgb(238, 238, 238);
    box-sizing: border-box;
    float: left;
    padding: 20px;
}
​
footer {
    background-color:#777;
    color: white;
    padding: 20px;
    clear: both;
    text-align: center;
}
​
footer a{
    color: white;
}

​

Sumário

Aula 11 - HTML Layout

Elementos de Layout do HTML 5

<header>

<nav>

<section>

<article>

<aside>

<footer>

Exemplo

Sumário

Termo de uso

Sumário

arrow_back Aula 11 - HTML Layout

Elementos de Layout do HTML 5

<header>

<nav>

<section>

<article>

<aside>

<footer>

Exemplo

Sumário

Aula 11 - HTML Layout