Qual é a diferença entre <section>e <div>in HTML?
Não estamos definindo seções nos dois casos?
Respostas:
<section> significa que o conteúdo interno está agrupado (isto é, se refere a um único tema) e deve aparecer como uma entrada em um esboço da página.
<div>, Por outro lado, não transmite qualquer significado , além de qualquer encontrados no seu class, lange titleatributos.
Portanto, não: usar a <div>não define uma seção em HTML.
Das especificações:
<section>O
<section>elemento representa uma seção genérica de um documento ou aplicativo. Uma seção, nesse contexto, é um agrupamento temático de conteúdo. Cada umsectiondeve ser identificado, geralmente incluindo um cabeçalho (elemento h1-h6) como filho do<section>elemento.Exemplos de seções seriam capítulos, as várias páginas com guias em uma caixa de diálogo com guias ou as seções numeradas de uma tese. A página inicial de um site da Web pode ser dividida em seções para uma introdução, itens de notícias e informações de contato.
...
O
<section>elemento não é um elemento de contêiner genérico. Quando um elemento é necessário apenas para fins de estilo ou como uma conveniência para scripts, os autores são incentivados a usá-lo<div>. Uma regra geral é que o<section>elemento seja apropriado apenas se o conteúdo do elemento for listado explicitamente no esboço do documento.
( https://www.w3.org/TR/html/sections.html#the-section-element )
<div>O
<div>elemento não tem nenhum significado especial. Representa seus filhos. Ele pode ser usado com asclass,langetitleatributos para marcar semântica comum a um grupo de elementos consecutivos.Nota: Os autores são fortemente encorajados a visualizar o
<div>elemento como um elemento de último recurso, para quando nenhum outro elemento for adequado. O uso de elementos mais apropriados em vez do<div>elemento leva a uma melhor acessibilidade para os leitores e uma manutenção mais fácil para os autores.
( https://www.w3.org/TR/html/grouping-content.html#the-div-element )
sectionvs. div, inclusive à luz desta resposta, cheguei à conclusão de que eles são exatamente o mesmo elemento. O W3C diz que div"representa seus filhos". Bem, não é isso também o que o sectionelemento faz? Sim, sectionimplica que seus filhos estão agrupados, mas pelo próprio ato de colocar os filhos dentro de um div, você também está, sim, agrupando-os . Pelo menos do jeito que eu faço, eu não sei sobre vocês.
sectionvs. div” - não pense muito sobre isso. HTML não é complicado. "Pelo próprio ato de colocar as crianças dentro de um div, você também as agrupa ." Não de acordo com a especificação HTML que você não é. Você está agrupando-os em um divpara fins de estilo, conveniência de JavaScript ou outra coisa que o W3C ainda não pensou, mas não indica aos leitores que os elementos filhos são um grupo.
<p>This is a paragraph</p>ou <h2>This is a second-level heading</h2>. Como <div>não adiciona significado, você o utilizaria apenas se não houver outro elemento HTML que adicione significado apropriado ao texto em questão.
<section>marca uma seção , <div>marca um bloco genérico sem semântica associada.
<div> Vs <Section><div>:O elemento HTML (ou Elemento de divisão de documento HTML) é o contêiner genérico para o conteúdo do fluxo, que não representa nada inerentemente. Pode ser usado para agrupar elementos para fins de estilo (usando os atributos de classe ou ID) ou porque eles compartilham valores de atributos, como lang. Deve ser usado apenas quando nenhum outro elemento semântico (como <article>ou <nav>) for apropriado.
<section>:O elemento HTML Section ( <section>) representa uma seção genérica de um documento, ou seja, um agrupamento temático de conteúdo, geralmente com um cabeçalho.
<div>: Suporte do navegador
<section>: Suporte do navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento.
Nesse sentido, uma div é relevante apenas de uma perspectiva pura de CSS ou DOM, enquanto uma seção é relevante também para semântica e, em um futuro próximo, para indexação pelos mecanismos de pesquisa.
Apenas uma observação - não encontrei nenhuma documentação que corrobore isso
Se uma seção contiver outra seção, um cabeçalho h1 na seção interna será exibido em uma fonte menor que um cabeçalho h1 na seção externa. Ao usar div em vez de seção, o cabeçalho div interno h1 é exibido como h1.
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>- o cabeçalho Level2 - é exibido em uma fonte menor que o cabeçalho Level1 -.
Ao usar css para colorir o cabeçalho h1, o h1 interno também era colorido (se comporta como h1 normal). É o mesmo comportamento no Firefox 18, IE 10 e Chrome 28.
No padrão HTML5, o <section>elemento é definido como um bloco de elementos relacionados.
O <div>elemento é definido como um bloco de elementos filhos.
Tome cuidado para não usar demais a tag de seção como substituta de um elemento div . Uma tag de seção deve definir uma região significativa dentro do contexto do corpo . Semanticamente, o HTML5 nos incentiva a definir nosso documento da seguinte maneira:
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>Essa estratégia permite que robôs da Web e leitores de tela automatizados entendam melhor o fluxo do seu conteúdo. Essa marcação define claramente onde está o conteúdo principal da sua página. Obviamente, cabeçalhos e rodapés geralmente são comuns em centenas, senão milhares de páginas em um site. A tag de seção deve ser limitada para explicar onde está o conteúdo exclusivo. Dentro da tag de seção , devemos continuar a marcar e controlar o conteúdo com tags HTML mais baixas na hierarquia, como h1 , div , span , etc.
Na maioria das páginas simples, deve haver apenas uma tag de seção única , não várias. Considere também que existem outras tags HTML5 interessantes semelhantes à seção . Considere usar artigo , resumo , aparte e outros dentro do seu fluxo de documentos. Como você pode ver, essas tags aprimoram ainda mais nossa capacidade de definir as principais regiões do documento HTML.
maintag lá dentro e dentro dela, uma ou mais sectiontags.
<div>- o recipiente genérico de fluxo que todos conhecemos e amamos. É um elemento em nível de bloco sem significado semântico adicional (W3C: Marcação, WhatWG)
<section>—Um documento genérico ou seção de aplicativo. Normalmente, um cabeçalho (título) e talvez um rodapé também. É uma parte do conteúdo relacionado, como uma subseção de um longo artigo, uma parte importante da página (por exemplo, a seção de notícias na página inicial) ou uma página na interface com guias de um aplicativo da web. (W3C: Marcação, WhatWG)
Minha sugestão: div: usou a versão inferior (acho que 4.01 ainda) elemento html (muitos designers lidaram com isso). seção: elemento html recém-chegado (html5).
A tag de seção fornece uma sintaxe mais semântica para html. div é uma tag genérica para uma seção. Quando você usa a tag de seção para o conteúdo apropriado, ela também pode ser usada para otimização de mecanismo de pesquisa. A tag section também facilita a análise de html. para mais informações, consulte. http://blog.whatwg.org/is-not-just-a-semantic
Aqui está uma dica de como eu distingo alguns elementos html5 recentes no caso de um aplicativo da Web (puramente subjetivo).
<section>marca um widget em uma interface gráfica do usuário, enquanto <div>é o contêiner dos componentes de um widget, como um contêiner segurando um botão, um rótulo etc.
<article> agrupa widgets que compartilham um propósito.
<header> é title e menubar.
<footer> é a barra de status.
A <section>tag define seções em um documento, como capítulos, cabeçalhos, rodapés ou qualquer outra seção do documento.
enquanto que:
A <div>tag define uma divisão ou seção em um documento HTML.
A <div>tag é usada para agrupar elementos de bloco para formatá-los com CSS.
<header>, <footer>, <nav>, <article>Etc.)
<section></section>
O
<section>elemento HTML representa uma seção genérica de um documento, ou seja, um agrupamento temático de conteúdo, geralmente com um cabeçalho. Cada um<section>deve ser identificado, geralmente incluindo um cabeçalho (<h1>-<h6>elemento) como filho do<section>elemento. Para detalhes Por favor, siga o link.
Referências :
<div></div>
O
<div>elemento HTML (ou Elemento de divisão de documento HTML) é o contêiner genérico para o conteúdo do fluxo, que não representa nada inerentemente. Pode ser usado para agrupar elementos para fins de estilo (usando os atributos de classe ou ID) ou porque eles compartilham valores de atributos, como lang. Deve ser usado apenas quando nenhum outro elemento semântico (como<article>ou<nav>) for apropriado.
Referências: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div
Aqui estão alguns links que discutem mais sobre as diferenças entre eles: