Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Section x Article #23

Open
felipefialho opened this issue Feb 4, 2016 · 38 comments

Comments

@felipefialho
Copy link
Member

commented Feb 4, 2016

Vamos trazer aquela longa discussão que tivemos no Facebook para cá?

Acredito que a melhor exemplificação tinha sido do @fdaciuk, onde ele da um exemplo de comentários em um blog para exemplificar a diferença entre eles.

Eu acho que é possível usar section dentro de article e vice versa :p. Tudo depende do contexto.

E vocês, como estão usando?

@felipefialho felipefialho added the HTML label Feb 4, 2016

@Mendrone

This comment has been minimized.

Copy link
Member

commented Feb 4, 2016

Um artigo pode ter seções e uma seção pode ter artigos. Essa sempre foi a logica que usei. hahahaha 😄

Mas na verdade acredito que as seções de um artigo são textuais, por isso são "separadas" por outros elementos e não por uma tag section

Afinal de contas o HTML ainda é uma linguagem de marcação para hipertexto/documentos, certo?

@wagnerbeethoven

This comment has been minimized.

Copy link

commented Feb 4, 2016

acho que section não é para esta dentro de article, acredito que ela são para setorizar espaços e não conteúdos, o que divide conteúdo seria h1-6, segundo a w3school, aqui a definição de section:

The section tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. [fonte]

eu já vi blog em domínio próprio que quase não tinha div, não sei se o futuro será o fim dela, acho que as pessoas exageram com o uso dessas novas tags

parabéns ao @LFeh e a todos os envolvidos pela iniciativa

@rickbenetti

This comment has been minimized.

Copy link

commented Feb 4, 2016

Botando lenha na fogueira @wagnerbeethoven a w3school não pode ser muita referência uma vez que eles vão contra a w3c e se recusaram há muito tempo a corrigir os erros de descrição de diversas tags ou seja a definição que eles passam muitas vezes é erronea.

MozDev é da comunidade

Um canal que tem seguido corretamente o que cada tag diz e é acompanhado de perto pela comunidade inclusive é o Mozdev neste artigo eles comentam em português que é uma section:

O elemento HTML section(section) representa uma seção generica de um documento, isto é um agrupamento temático de conteúdos, tipicamente com um título. Cada section deve ser identificada, tipicamente incluindo um título (elemento h1-h6) como um filho do elemento section.

Espero ter ajudado.


Section dentro de Article

Concordo com o @Mendrone uma section pode sim ser usada dentro de um article desde que para pequenos contextos, como por exemplo uma nota que possa servir de complemento ao próprio conteúdo e precisa ser demarcada como conteúdo extra, agora se fosse uma lista de links referentes ao texto eu usaria uma aside com dentro os links.

O que acham?

@wagnerbeethoven

This comment has been minimized.

Copy link

commented Feb 4, 2016

opa @rkb81 valeu o to9que, definitivamente não uso o w3school para estudar, catei o primeiro link que encontrei no google, não sabia dessa treta entre as duas instituições.

não sei por que tiraram o hgrpoup, acho que servia bem pra agrupar h1-6. acho que no meio desse pequenos contexto que deixa a coisa vaga demais.

@rickbenetti

This comment has been minimized.

Copy link

commented Feb 4, 2016

@wagnerbeethoven o conflito que existia com o hgroup é que ele só servia para titulos e nada mais, para isto recomenda-se o header que já supre bastante a necessidade, pois você pode agrupar h1-6 se necessário e adicionar outros itens ligados aos títulos como subtítulos, pequenas notas, links e informações adicionais.

A ideia do hgroup no começo era muito legal, mas viu-se que perdia-se valor ter uma tag de encapsulamento pra só fazer isso e no fim ter o mesmo valor semântico da header que permite muito mais conteúdo.

@fdaciuk

This comment has been minimized.

Copy link
Contributor

commented Feb 4, 2016

A parada é muuuito relativa, e vai depender muito do seu contexto. Mas um pode estar dentro do outro sim, semanticamente falando. Para testar, é só ir no validator do W3C e verificar ;)


Edit: na real, o teste do validator só valida estrutura, e não a semântica. Pode ser que meu comentário acima dê a entender errado, por isso adicionei essa nota :)


Pode testar com esse HTML (e ativem o outline para facilitar a visualização):

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<header>
  <h1>Main title</h1>
</header>

<section>
  <h2>Section Title</h2>
  <article>
    <h3>Article Title</h3>
  </article>
</section>

<article>
  <h2>Article Title</h2>
  <section>
    <h3>Section Title</h3>
  </section>
</article>
</body>
</html>

O código acima não gera erro semântico.

A grande sacada deles é:

  • section serve para marcar "sessões";
  • article serve para marcar conteúdo auto-sustentável;
  • div para agrupar, ou dividir layouts.

section e article geram outline e têm valor semântico, logo eles precisam necessariamente ter um título (h2-h6) - pode ter h1 também, mas por questões de acessibilidade, é interessante usar só um h1 por página, dentro do body.

div não tem valor semântico, então, se for só pra agrupar, use div, ao invés de colocar articles dentro de uma section ou vice-versa.

E por fim, mas não menos importante: use o bom senso.

@ianvieira

This comment has been minimized.

Copy link

commented Feb 4, 2016

Usando dois exemplos práticos acredito que ambos podem acontecer:

  1. Section dentro do article:
    Em uma publicação cientifica, ela tem diversas partes, introdução, argumentação, etc... tudo isso está dentro de um article e cada uma das parte estaria dentro da section com o seu devido title.

  2. Article dentro de uma section:
    Em um box de publicações relacionadas, que é uma section eu tenho diversos article que seriam as publicações acima.

@felipefialho

This comment has been minimized.

Copy link
Member Author

commented Feb 4, 2016

Perfeito seu exemplo @ianvieira!

@fdaciuk Quanto a usar apenas 1 <h1> por página, acho que depende da estrutura que você está utilizando no projeto. Até onde sei o ideal é manter a consistência. Estou certo?

Costumo começar uma nova sequencia de <h1> a cada <section>, <article> ou <header>. Vocês também fazem dessa forma?

@fdaciuk

This comment has been minimized.

Copy link
Contributor

commented Feb 4, 2016

@LFeh isso é uma grande dicussão na real. Quando o HTML5 começou a aparecer com a ideia de fazer outline, e manter cada section ou article independentes, a ideia era poder usar um h1 para cada uma dessas estruturas.

Mas isso se mostrou inviável por conta da acessibilidade. Os leitores de tela têm dificuldades em se expressar quando existe mais de um h1 na tela.

Até fazendo o teste com o html que mandei acima, se você remover os títulos, vai ver que aparece um warning, que os títulos devem ser adicionados às sections e articles, do h2 ao h6. A sugestão já é por esse motivo :)

@diogorodrigues

This comment has been minimized.

Copy link

commented Feb 4, 2016

Também penso que tudo depende do contexto e, por isso, semanticamente não vejo problemas em:

  • Article > Section
  • Section > Article
  • Section > Section

Dentre todas as combinações possíveis, a única que nunca utilizei foi:

  • Article > Article

Pois, essa sim eu não vejo sentido em termos de semântica e vcs?

Ótima explicação @ianvieira

@wagnerbeethoven , lembre-se que dentro de um artigo temos setores também, assim como o @ianvieira explicou. ;) Portanto, não vejo problemas.

@leandrino

This comment has been minimized.

Copy link

commented Feb 4, 2016

E a tague <main> ? vocês a usam? em landingpages eu utilizo a estrutura header - main - footer, acabo não usando section. acham muito errado?

@bernardodiasc

This comment has been minimized.

Copy link

commented Feb 4, 2016

Olá, escrevi um artigo um tempo atrás que tenta esclarecer esse tipo de dúvida: http://x-team.com/2015/03/structuring-content-html/, espero que gostem, acho que foi o unico artigo tecnico que escrevi, deveria fazer isso mais vezes, é bem legal. :)

@bernardodiasc

This comment has been minimized.

Copy link

commented Feb 4, 2016

@fdaciuk caprichou nas explicações 👍

@vitorbritto

This comment has been minimized.

Copy link
Contributor

commented Feb 4, 2016

É bem relativo esse assunto. Vai muito do contexto da marcação que será apresentada.

Eu utilizo:

<section>
    <!-- foo... -->
</section>
<section>
    <!-- bar... -->
</section>
<section>
    <!-- baz... -->
</section>
<section>
<header></header>
<main></main>
<footer></footer>
</section>
<section>
<article></article>
</section>

Heading Tags, seria uma boa discussão para SEO. =]

@fdaciuk

This comment has been minimized.

Copy link
Contributor

commented Feb 5, 2016

O main eu acho que tem o uso muito específico. Não sei se eu usaria ele em alguma coisa real, não acho que ele faz muito sentido.

Mas enfim.. se for usar o main, ele não pode estar dentro de qualquer tag que gere outline, segundo a documentação:

<main> must not be a descendent of an <article>, <aside>, <footer>, <header>, or <nav> element.

Ele precisa estar logo abaixo do <body>, no máximo dentro de uma div, para marcar o conteúdo principal do site ou aplicação, e deve aparecer somente uma vez por página.

Ainda não consegui ver valor real nessa tag, quem sabe um dia xD

@leandrino

This comment has been minimized.

Copy link

commented Feb 5, 2016

@fdaciuk então, pela documentação que citou ela tem um fim específico, e se tiver algo que transmita a finalidade da página, ela será aplicada ali, pelo que entendi ela ajuda a identificar diretamente qual o conteúdo mais importante na página..vais ver o código de alguém, saberá qual o foco da ação.. agora, precisa ver qual a importância que os buscadores dão a ela.. hehe

@leandrino

This comment has been minimized.

Copy link

commented Feb 5, 2016

mestre ops @fdaciuk hueheu .. olha que lindo o exemplo do w3c https://www.w3.org/TR/html5/grouping-content.html#the-main-element

<!DOCTYPE html>
  <html>
  <head>
<title>Graduation Ceremony Summer 2022</title>
  </head>
  <body>

  <header>The Lawson Academy:
  <nav>
  <ul>
  <li><a href="courses.html">Courses</a></li>
  <li><a href="fees.html">Fees</a></li>
  <li><a>Graduation</a></li>
  </ul>
  </nav> 
  </header>


<main>


  <h1>Graduation</h1>

  <nav>
  <ul>
  <li><a href="#ceremony">Ceremony</a></li>
  <li><a href="#graduates">Graduates</a></li>
  <li><a href="#awards">Awards</a></li>
  </ul>
  </nav>

  <H2 id="ceremony">Ceremony</H2>
  <p>Opening Procession</p>
  <p>Speech by Valedictorian</p>
  <p>Speech by Class President</p>
  <p>Presentation of Diplomas</p>
  <p>Closing Speech by Headmaster</p>

  <h2 id="graduates">Graduates</h2>
  <ul>
  <li>Eileen Williams</li>
  <li>Andy Maseyk</li>
  <li>Blanca Sainz Garcia</li>
  <li>Clara Faulkner</li>
  <li>Gez Lemon</li>
  <li>Eloisa Faulkner</li>
  </ul>

  <h2 id="awards">Awards</h2>
  <ul>
  <li>Clara Faulkner</li>
  <li>Eloisa Faulkner</li>
  <li>Blanca Sainz Garcia</li>
  </ul>

</main>

  <footer> Copyright 2012 B.lawson</footer>

  </body>
  </html>

Eu vejo essa estrutura, acho que fica tão organizado o conteúdo, tem até uma navegação interna no main . :)

@ribeiroevandro

This comment has been minimized.

Copy link

commented Feb 5, 2016

No exemplo acima, cada bloco marcado pelo h2 indica sessões, separar eles por section seria errado?

@leandrino

This comment has been minimized.

Copy link

commented Feb 5, 2016

@ribeiroevandro eu acredito que não, a especificação também não condena o uso do main dentro de uma section eu fiz um teste aqui e está ok o seguinte código:

<!DOCTYPE html>
  <html>
  <head>
<title>Graduation Ceremony Summer 2022</title>
  </head>
  <body>

  <header>The Lawson Academy:
  <nav>
  <ul>
  <li><a href="courses.html">Courses</a></li>
  <li><a href="fees.html">Fees</a></li>
  <li><a>Graduation</a></li>
  </ul>
  </nav> 
  </header>


  <main>

    <h1>Graduation</h1>

    <nav>
      <ul>
        <li><a href="#ceremony">Ceremony</a></li>
        <li><a href="#graduates">Graduates</a></li>
        <li><a href="#awards">Awards</a></li>
      </ul>
    </nav>
    <section>
      <h2 id="ceremony">Ceremony</H2>
      <p>Opening Procession</p>
      <p>Speech by Valedictorian</p>
      <p>Speech by Class President</p>
      <p>Presentation of Diplomas</p>
      <p>Closing Speech by Headmaster</p>
    </section>
    <section>
      <h2 id="graduates">Graduates</h2>
      <ul>
        <li>Eileen Williams</li>
        <li>Andy Maseyk</li>
        <li>Blanca Sainz Garcia</li>
        <li>Clara Faulkner</li>
        <li>Gez Lemon</li>
        <li>Eloisa Faulkner</li>
      </ul>
    </section>
    <section>
      <h2 id="awards">Awards</h2>
      <ul>
        <li>Clara Faulkner</li>
        <li>Eloisa Faulkner</li>
        <li>Blanca Sainz Garcia</li>
      </ul>
    </section>
  </main>

  <footer> Copyright 2012 B.lawson</footer>

  </body>
  </html>

e uma observação é que section pode receber ARIA role de main também

@fdaciuk

This comment has been minimized.

Copy link
Contributor

commented Feb 5, 2016

Pois é.. eu entendo que tem uso, o problema que eu tenho com ele é: qual a real função dele? Em que ele vai adicionar na minha página ou aplicação? Vai fazer diferença para o usuário final ou para buscadores? Esse propósito final que eu ainda não entendi. Os benefícios de usar ele xD

Mas usar dentro de section não pode não. Dá uma olhada no link que passei em #23 (comment), onde eu destaquei o texto que diz que ele não pode estar contido dentro de tags que geram outline.

@leandrino

This comment has been minimized.

Copy link

commented Feb 5, 2016

Realmente, verifiquei a outline e section gera, porém o validator não considera o erro utilizar main dentro de uma section o.o

@diogorodrigues

This comment has been minimized.

Copy link

commented Feb 5, 2016

@fdaciuk admito que meu coração gelou quando li seu comentário sobre não poder usar a tag <main>
dentro de uma <section>, pois na maioria das vezes eu faço isso. Na documentação que você mencionou não cita a <section> como problema em ser container de <main>.

@fdaciuk

This comment has been minimized.

Copy link
Contributor

commented Feb 5, 2016

@diogomoretti section dentro de main pode. O contrário que não xD

@Meche o validator não valida regras semânticas. Basicamente ele valida se elementos block estão dentro de elementos inline pra acusar erro. Fora isso, passa praticamente tudo xD

@fdaciuk

This comment has been minimized.

Copy link
Contributor

commented Feb 5, 2016

E pra não ficar contraditório o que acabei de dizer (huehuebrbr), fiz uma nota no meu comentário lá de cima pra deixar mais claro sobre o validator :)

@fdaciuk

This comment has been minimized.

Copy link
Contributor

commented Feb 5, 2016

@diogorodrigues, e agora lendo melhor, realmente: a nota não fala sobre section somente. Não sei se isso foi um erro de digitação ou se é válido mesmo. Fiquei em dúvida agora xD

Acho que essas novas tags só vieram pra confundir mais hauehae

@leandrino

This comment has been minimized.

Copy link

commented Feb 5, 2016

faz os testes no HTML 5 Outliner com o main dentro da section acho que vai gerar outline.. acredito que mesmo não estando na especificação.. essa regra não pode.. agora, como disse.. a section dentro do main é liberado.. hehe

@felipefialho

This comment has been minimized.

Copy link
Member Author

commented Feb 5, 2016

@Meche Utilizo o <main role='main'> em todos os projetos. Deve ser usada como filho imediato do <body>, talvez entre o <header> e o <footer> principal. É uma forma de dizer "aqui está o conteúdo principal do projeto".

Pode usar seu medo de ser feliz.

@diogorodrigues

This comment has been minimized.

Copy link

commented Feb 5, 2016

@LFeh , mas se usar como elemento imediato de <body>, uma navegação lateral, comentários e demais itens que não fazem parte do meu conteúdo principal podem acabar sendo incluído dentro de <main>. Assim, eu teria que utilizar <div> para separar conteúdos que semanticamente teriam q ser separados com <section>. Não faz sentido.

@diogorodrigues

This comment has been minimized.

Copy link

commented Feb 5, 2016

Lendo a documentação da W3C eu acho que o uso da <main> dentro da <section> pode depender do contexto. Lá também não cita explicitamente que é errado - vejam essa citação:

Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.

O mesmo que o @fdaciuk citou com a documentação da mozilla.

No entanto, diz que <main> não é aconselhável para identificar o conteúdo principal de uma sectioning content (e isso já envolve a <section>).

Então, penso que depende do contexto, pois, se a <section> está sendo utilizada para fins muito genéricos (algo mais amplo), entendo que se pode usar uma <main> dentro dela, desde que <main> contenha como filho uma sectioning content, mesmo que seja a própria <section>.

Acho essa tag muito importante, já que ela pode substituir a "role=main" futuramente.

@felipefialho

This comment has been minimized.

Copy link
Member Author

commented Feb 5, 2016

@diogorodrigues, penso que uma estrutura concisa para um projeto padrão, seria da seguinte forma:

body 
    header
        .logo
        nav
    main 
        AQUI O CONTEÚDO DO SITE
    footer 
@diogorodrigues

This comment has been minimized.

Copy link

commented Feb 5, 2016

@LFeh E quando houver uma sidebar, como acontece muito em um blog, por exemplo? Ou, e se tiver uma lista de artigos relacionados? Como ficaria a estrutura?

@felipefialho

This comment has been minimized.

Copy link
Member Author

commented Feb 5, 2016

Dentro da <main> se fizer parte do conteúdo principal ou fora se for aquelas sidebars de propaganda por exemplo. Entende?

A main serve basicamente para colocar o que tem de mais importante no seu projeto. Header, Navbar, Footer e Sidebars normalmente são coisas complementares.

@felipefialho

This comment has been minimized.

Copy link
Member Author

commented Feb 5, 2016

hahahaha, quando quis dizer filho imediato não é logo em sequencia, acho que me expressei mal :p

Quis dizer em um nível seguindo ao <body>, no mesmo nível por exemplo da <header> e do

, entende?

O que acha de abrir um tópico para discutir a <main>? haha

@diogorodrigues

This comment has been minimized.

Copy link

commented Feb 5, 2016

Exato @LFeh ! Então, perceba que neste caso o <main> já deixa de ser filho imediato de <body> . =P

Ficando:

body 
     header
          .logo
          nav
     div
          aside
          main
               article (ou section)
                    conteúdo principal
     footer 

Ou:

body 
     header
          .logo
          nav
     section
          aside
          main
               article (ou section)
                    conteúdo principal
     footer

@bernardodiasc

This comment has been minimized.

Copy link

commented Feb 5, 2016

o documento html tem cabeça e corpo. dentro do corpo colocamos conteúdo que o usuario pode ver, o conteúdo tambem pode ter cabeça (cabeçalho) e corpo, e ainda tem o pé (rodapé). imagina como seria se chamassem o corpo do conteúdo dentro do corpo do documento html com a mesma tag <body>, não rola, igual head e header, da pra correlacionar mas é diferente na semantica. A tag main é o corpo do conteúdo, aquela parte recheada da informação que queremos ver. poderia ser um artigo, poderia ser um div, ou uma section, não tem que usar todas as tags html em todos os projetos, não existe essa regra. vc escala a utilização da marcação do conteúdo a medida que a complexidade da estrutura do conteúdo cresce. :)

@felipefialho

This comment has been minimized.

Copy link
Member Author

commented Feb 5, 2016

@diogorodrigues Não tem problema. O "filho imediato" é jeito de dizer, você pode fazer dessa forma desde que o conteúdo principal do site esteja dentro da main.

@suissa

This comment has been minimized.

Copy link

commented Feb 13, 2016

Essa da pano pra manga hehehehe

@eduardojmatos eduardojmatos added the CSS label Feb 25, 2016

@duduindo

This comment has been minimized.

Copy link

commented Mar 24, 2016

Curti os comentários.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.