HTML5 e DIVS

FRANCISCO CASSIO S. ALVES · Junho 1, 2016

Olá a todos!
Estou com dúvidas com relação ao uso de DIVS no HTML5.
Como trabalhar com as DIVS e os novos elementos HEADER, SECTION, ARTICLE, ASIDE E FOOTER?
Definimos ID ou Class para esses elementos para formatarmos via CSS ou criamos as DIVs e colocamos eles dentro de DIVs e formatamos as DIVs?
Abraços a todos!

L. Henrique · Junho 1, 2016

Francisco,

Você replicou o mesmo tópico três vezes:

Percebi que em uma das perguntas, você escreveu errado, desistiu e acabou repostando e em outra a pergunta não fica tão clara, então vou deixar minha resposta nesse.

Vamos explicar passo a passo o que são cada um dos elementos e o que é HTML5.

HTML5:

Entenda que essa nova estrutura que deram pro HTML é bem simples e tornou muitas coisas mais "organizáveis", sem fazer com que dependêssemos de classes ou id's para elementos simples. Quando surgiu essa nova versão, ela adicionou os que você já citou: header, section, article, aside, footer e entre outros mais. Todos esses elementos estão em inglês, então vamos traduzir na mesma ordem: cabeçalho, seção, artigo, de lado (seria "ao lado"), rodapé.

HEADER (cabeçalho):

Normalmente esse elemento é criado para criar cabeçalhos (ah vá, jura?), então seu menu (navbar) e o conteúdo do topo deve estar dentro dele. Vamos supor que o cliente fale: Eu quero uma barra no topo com minhas redes sociais e um menu logo abaixo. Então com essa informação você já entende que essa será sua header, então vamos estruturar:

<header>
   <div class="social">...</div>
   <nav class="navbar">
      ...
   </nav>
</header>

Você pode substituir nav por div sem problema algum, mas isso é bom pra diferenciar o que será o menu e o que será a div com os links sociais.

Como você vai estilizar isso? É bem simples. Você pode estilizar um elemento sem que ele possua uma classe, mas ele deve ser único, a não ser que você queira estilizar vários com as mesmas propriedades.

Por regra você só terá um cabeçalho e um rodapé, então você não precisará usar classes e id's dentro dessas novas tags do HTML5. A estilização também é bem simples, veja:

header {
   width: 100vw;
   height: 100vh;
   background: black;
}

Caso queira entender o conceito de 100vw e 100vh, deixe um comentário nesse post e explicarei. Como por enquanto esse não é o foco, deixo passar reto.

Bem, eu expliquei somente a header, correto? Então use a mesma explicação para os elementos: article, aside e footer. Na grande maioria das vezes esses elementos também são únicos.

SECTION (seção):

Ele tem várias funções e até hoje é discutido qual a melhor forma, correta ou como as pessoas o utilizam até hoje. Lembre-se que são seções, então uma prática comum é utiliza-los a fim de organizar o seu código.

Vamos supor que seu site tenha somente uma página chamada index.html. Hoje em dia isso é bem comum e é chamado de OnePage - onde todas as informações se concentram em um único arquivo, sem precisar ficar transitando entre páginas.

Dentro da sua index.html você vai ter as seguintes informações: inicio, quem somos, portfolio, clientes e contato. Então pense, você vai ter que criar 5 blocos de informações dentro de uma única página. Para que isso não fique jogado as traças ou que você fique utilizando classes demais, id's demais... É mais fácil utilizar a section, pois ai você entende onde está começando e terminando cada bloco de informação.

Veja um exemplo dessa suposição:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf8">
   <title>Meu site</title>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <header>
      <nav class="menu">
         <ul>
            <li><a href="#inicio">Inicio</a></li>
            <li><a href="#quemsomos">Quem somos</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#clientes">Clientes</a></li>
            <li><a href="#contato">Contato</a></li>
         </ul>
      </nav>
   </header>

   <section id="inicio">
      ...
   </section>

   <section id="quemsomos">
      ...
   </section>

   <section id="portfolio">
      ...
   </section>

   <section id="clientes">
      ...
   </section>

   <section id="contato">
      ...
   </section>

   <footer>
      <p>© Todos os direitos reservados.</p>
   </footer>
</body>
</html>

Viu como fica bem melhor separar em seções? Agora dentro delas você pode utilizar div's para estilização, criação de blocos, grids e por ai vai.

Mas ai vem a sua pergunta:

Q: Por quê minhas section's possuem um id? Não era pra eu não usar?

R: Suas section's possuem id's porque existem múltiplas delas dentro da mesma página e cada uma terá um estilo diferente. A ID nesse caso também é importante, pois o menu tem que apontar para uma delas quando é clicado, é então que entra em função o <a href="#inicio">Inicio</a>. Quando você cria um anchor <a> e coloca uma cerquilha (hashtag) em seu href, ele passa a referenciar um ID.

Resumindo: Quando você clicar em algum item no menu, ele desce pra section com a ID correspondente.

Quanto a estilizar essas sections, o cliente pode pedir: Eu quero todas com a mesma altura e largura, mas a cor de fundo deve ser diferente para cada uma delas. Então ai entra em jogo a vírgula no CSS (vamos supor que a vírgula seja igual a E):

#inicio, #quemsomos, #portfolio, #clientes, #contato {
   width: 100vw;
   height: 100vh;
   position: relative;
}

#inicio { background: red; }
#quemsomos { background: green; }
#portfolio { background: blue; }
#clientes { background: orange; }
#contato { background: black; }

Então aqui o que eu estou dizendo ao CSS é: Aplique as propriedades width, height e position nos id's - inicio E quem somos E portfolio E clientes E contato.

Bem, ai vem o seu seguinte pensamento: Poxa, se todos tem a mesma largura e altura, todos são os mesmos elementos, então eu não preciso chamar id por id com vírgulas? Exatamente meu jovem! Mas quando for colocar cores individuais para cada uma delas, é necessário a referência do id. Veja a forma mais prática:

section {
   width: 100vw;
   height: 100vh;
   position: relative;
}

#inicio { background: red; }
#quemsomos { background: green; }
#portfolio { background: blue; }
#clientes { background: orange; }
#contato { background: black; }

Agora pra finalizar, um método de construção do aside, article e footer:

<body>
   <header>
      ...
   </header>

   <section id="inicio">
      ...
      <aside>
         ...
      </aside>
   </section>

   <section id="quemsomos">
      ...
      <article>
         ...
      </article>
   </section>

   <footer>
      ...
   </footer>
</body>

Bem, a tradução já diz o que são e para o que servem, acho que isso deixa claro, não? Agora aqui vai surgir outra dúvida: Mas e se eu quisesse colocar um aside em cada section... Não teria que usar id ou classes para eles?

R: NÃO! Não precisa, já que ele é um elemento filho da section que já possui um ID. Então você pode estilizar ele da seguinte maneira individualmente:

#inicio aside {
   background: red;
   position: relative;
}

#quemsomos aside {
   background: blue;
   position: absolute;
   top: 0;
   left: 0;
}

Acho que é só isso que tenho para contribuir hoje. Continue estudando e não deixe de se manter atualizado. E se ficou alguma dúvida, por favor comente neste tópico que tentarei explicar.

Boa sorte e bons estudos!

FRANCISCO CASSIO S. ALVES · Junho 1, 2016

Olá Henrique.

Obrigado pela resposta a qual me esclareceu as dúvidas.

Com relação a replicação da mensagem é que estou no trabalho (Escola Técnica de Brasília) e nossa rede possui proxy.

Ao clicar para o envio da pergunta deu uma travada aqui e pressionei F5 para atualizar e acho que isso fez com que a mensagem fosse duplicada.

Abraços

Carlos Henrique A. · Junho 3, 2016

Qual seria o conceito de vw e vh? poderia me explicar exatamente como, quando usa-los e para que serve e em quais situações posso usar?

rikaschmitt · Junho 3, 2016

vw = viewport width

vh = viewport height

equivale a altura e largura da sua janela.

100vw = 100% da largura da janela

100vh = 100% da altura da janela

L. Henrique · Junho 3, 2016

Carlos, tudo certo?

Se possível, gostaria que fizesse um tópico específico pra isso, já que pode ser uma dúvida de muitos outros usuários do fórum. Mesmo assim, deixarei uma resposta aqui e caso pense em criar um tópico, replicarei.

Agora vamos ao que interessa:

vw = Viewport Width (Largura da Janela);
vh = Viewport Height (Altura da Janela).

As suas medidas são equivalentes as porcentagens, mas eles possuem algumas diferenças. Veja a semelhança primeiro:

50vw = 50/100, onde 100 é representado pela largura total da janela. Resumindo: 50vw = width: 50%;
50vh = 50/100, onde 100 é representado a altura total da janela. Resumindo: 50vh = height: 50%.

Bem, até então você deve se perguntar: "Então se as medidas são as mesmas, por quê devo utiliza-lo?" - Existem algumas regras no CSS que se aplicam a porcentagem, mas não se aplicam ao método de cálculo do viewport.

Porcentagens nesse caso possuem uma limitação um pouco maior, exemplo:

A largura da página (width) não inclui margin, ou seja, você precisa anular a margem para que realmente fique 100% da tela;
A altura em porcentagem foi sempre uma questão discutida nos fóruns da vida, mas ela é baseada na quantidade de conteúdo que existe dentro de um elemento e não a janela em si.

Vale também lembrar que quando você utiliza vw e vh, consegue trabalhar de melhor forma o tamanho dos textos e também a estrutura responsiva.

Considere que as porcentagens são sempre relativas ao elemento pai e nunca a viewport.

Q: "Em quais situações posso usar?"

R: Não existe uma regra específica de quando você pode e quando não pode*. Isso vai depender do layout que está montando. Se você recebeu de um cliente "Eu quero um slider que pegue a tela inteira" - então você automaticamente adiciona width: 100vw; e height: 100vh; para que em todos os dispositivos aquela seção ocupe sempre 100% da viewport.

* Adendo a resposta: Lembre-se que ele sempre vai ocupar a VIEWPORT (Janela/Tela) e não o conteúdo. Então se você possui alguma parte do site que contém muito texto, fotos e etc... Essa não será a medida ideal, já que ele não é medido pela quantidade de conteúdo. No caso, a melhor maneira seria utilizar a propriedade height: auto;.

Bons estudos e boa sorte!

Entrar

Arquivado

HTML5 e DIVS

Recommended Posts

FRANCISCO CASSIO S. ALVES 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

FRANCISCO CASSIO S. ALVES 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carlos Henrique A. 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

L. Henrique 179

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante