Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Diferença Container com Div e section

Fala galera, beleza ?

Fiquei com uma duvida, quanto ao arquivo final do Yuri na segunda parte do curso e quanto ao que estava sendo apresentado na aula.

Na video aula ele colocou a tag : '

<div class="container">

mas no arquivo final está :

<section class="container">

Testei o arquivo index e não vi diferenças visual entre ambos, então qual seria a diferença de usar div e section nesse caso ?

Valeu!

2 respostas

Caio, a tag section define uma seção no documento, como um capítulo, um cabeçalho, um rodapé ou qualquer outra seção do documento. Ela serve apenas para colocar texto.

A tag div é um container para outras tags. Assim, usamos uma div para definir um bloco de código que queremos manipulá-lo em conjunto. Você pode criar uma div e preenchê-la apenas com o content(conteúdo) do seu site. Pode criar uma div e colocar o menu dentro. Pode usar uma div para fazer o layout do site. Ou seja, pode usar uma div como section também, mas a div é mais abrangente, além de ser um container para outras tags. Seu uso mais comum, como falei, é na estruturação e divisão do código HTML na página.

Algo assim:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div class="menu" id="menu">
            <ul>
                <li>Home</li>
                <li>Matérias</li>
                <li>Sobre</li>
            </ul>
        </div>
        <div class="conteudo" id="conteudo">
            <section>Seção 1</section>
            <section>Seção 2 - Texto da página</section>
            <section><p>Seção 3<p></section>
        </div>
        <div class="rodape" id="rodape">
            <p>Todos os direitos reservados</p>
        </div>
    </body>
</html>

Dentro da tag section você pode colocar algumas tags de marcação de texto, como h1, p, etc, mas não pode estruturar sua página como quando usa uma div, definindo áreas dentro da página que conterão blocos de código.

Espero ter ajudado.

Abraço.

solução!

Opa Caio, tudo bem?

Cara, primeiramente vc tem razão, ficou diferente o código, todavia isso não gera problemas! (:

A diferença está puramente na semântica, repare que a tag div não tem semântica nenhuma, ela é como se fosse uma tag genérica. Por exemplo:

Um <h1> a gente sabe que é um titulo. Um <p> a gente sabe que é um parágrafo, e por aí vai. Uma <div> é oq? Entende a diferença?

No caso a <section> trás mais conteúdo semântico do que a <div>, a gente realmente divide o nosso site em seções!

Perceba que essa diferença é só do HTML e da semântica do site. Com relação ao estilo nada muda (:

Espero ter ajudado, qualquer coisa só falar, abraços!