CODEWITHSUNDEEP
htmlsemantic-markup
Sarah
Sarah

Reputation: 83

Are divs allowed within <section> and <article> elements?

Is it ok to use, for example:

<section>
  <div class="container">
    <div class="column">
      <h2>Perm page title</h2>
      <p>Page body copy.... </p>
    </div class="column">
    <div class="column">
      <iframe><!-- YT video --></iframe>
    </div class="column">
  </div>
</section>

<article>
  <div class="container">
    <div class="column">
      <h2>Blog post title</h2>
      <p>Post body copy.... </p>
    </div class="column">
    <div class="column">
      <iframe><!-- YT video --></iframe>
    </div class="column">
  </div>
</article>

Is it ok to use divs inside section and article like this or should section and article only contain h2 p etc?

Upvotes: 1

Views: 124

Answers (3)

Abhitalks
Abhitalks

Reputation: 28387

As per the specs (W3C) (here) and (here):

For, article:

Permitted contents: Zero or more style elements, followed by flow content

and for section:

Content model: Flow content.

And again, as per the specs (W3C) (this) and (this), div is "flow content", hence answer to your question is yes, it is ok to use div in this context.

Further down, the following exerpts from the same specs are worth noting:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

In your example, you are not using h2 as a child of the section element but is rather wrapped by divs. This may not be semantic.

And then, specifically this (as it pertains to the example in your question):

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

Bottom-line: If you are not using section semantically, then div is a recommended choice.

Upvotes: 2

web-tiki
web-tiki

Reputation: 103780

The specs say :

The div element has no special meaning at all [...] w3.org

So you can use it for styling without changing the semantics of your HTML.

An other interesting article about the use of divs in HTML5 : http://html5doctor.com/you-can-still-use-div/

Upvotes: 1

Cl&#233;ment Malet
Cl&#233;ment Malet

Reputation: 5090

Since h1, h2, ... are block elements, and div is the generic block element, there is no particular reasons to refuse the use of divs inside of sections and articles.

On the semantic aspect, div and span are most likely considered neutrals.

Upvotes: 1

Related Questions