-1

I am writing guidelines in two columns. It came across whether placing sections inside divs is a good practice. 

<div class="col-md-6">
  <section> 
     <h5>Heading 1</h5>
     <p>Paragraph 1</p>
  </section><!-- Content 1 -->                             
  <section> 
     <h5>Heading 2</h5>
     <p>Paragraph 2</p>
  </section><!-- Content 2 -->  
</div>

Thanks in advance.

user2771704
  • 5,994
  • 6
  • 37
  • 38
user2307087
  • 423
  • 11
  • 25

2 Answers2

1

The <div> tags are generic tags usually used for styling, as in Bootstrap like in your example. You could do something like this to have more semantically right HTML5:

<article class="col-md-6">
  <section> 
     <h5>Heading 1</h5>
     <p>Paragraph 1</p>
  </section><!-- Content 1 -->                             
  <section> 
     <h5>Heading 2</h5>
     <p>Paragraph 2</p>
  </section><!-- Content 2 -->  
</article>

or with keeping the div in your markup, just put your initial code in article tag, where div will be used for styling purpose:

<article>
 <div class="col-md-6">
  <section> 
     <h5>Heading 1</h5>
     <p>Paragraph 1</p>
  </section><!-- Content 1 -->                             
  <section> 
     <h5>Heading 2</h5>
     <p>Paragraph 2</p>
  </section><!-- Content 2 -->  
 </div>
</article>
user2771704
  • 5,994
  • 6
  • 37
  • 38
  • i'm really not sure of this answer, refering [this](http://stackoverflow.com/questions/7549561/section-vs-article-html5) or [this](http://www.w3schools.com/html/html5_semantic_elements.asp). – goupil Nov 25 '15 at 17:46
-1

i think a better way to do this is to use section instead div and then article instead section

<section class="col-md-6">
  <article> 
     <h5>Heading 1</h5>
     <p>Paragraph 1</p>
  </article><!-- Content 1 -->                             
  <article> 
     <h5>Heading 2</h5>
     <p>Paragraph 2</p>
  </article><!-- Content 2 -->  
</section>
goupil
  • 175
  • 10
  • Regarless to a previous post "
    is related to
    , but is distinctly different. Whereas
    is for grouping distinct sections of content or functionality,
    is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items.". Could read [here](http://stackoverflow.com/questions/7549561/section-vs-article-html5);
     – goupil Nov 25 '15 at 17:49