2

There are 2 ways I found to mark up a sidebar: 

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

and

<aside id="sidebar">
     <div class="widget" id="widget_1"></div>
     <div class="widget" id="widget_2"></div>
     <div class="widget" id="widget_3"></div>
 </aside>

Please tell me what is difference between both approaches and which one must be used?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
palash140
  • 673
  • 6
  • 13
  • There is a pretty solid answer for your question within the above post: http://stackoverflow.com/a/6941170/1089331 – Note: It's not the accepted answer. Semantic meaning is the difference, I'd use `` personally. You don't *need* to use either one over the other (in this case). – William Isted Aug 31 '16 at 10:16
  • Thanks brother, Yes i have read that post. It covers all possible aspects but i am concern about only sidebar – palash140 Aug 31 '16 at 12:58

2 Answers2

0

Sections generally specify related groups of information - while div tags don't really specify anything and are usually used as children elements :)

If you want yo read up more, you can check this answer which covers it pretty well in my opinion.

To answer your question, either will work - it's more a stylistic choice and how you want the information on your site to be organized.

Community
  • 1
  • 1
Tyler Dickson
  • 473
  • 1
  • 7
  • 24
  • so to design widgets we must always use sections right ?? – palash140 Aug 30 '16 at 16:40
  • Personally, I use `
    ` tags - as widgets don't really qualify as grouped information. If your css specifies `div.widget_1` or `section.widget_1` you'll need to use whichever one is used. Otherwise if the css just looks like `.widget_1{\\css}` it's up to you.
     – Tyler Dickson Aug 30 '16 at 16:43
0

The biggest functional difference of what you're doing there is the semantic meaning difference between <section> and <div>. <div> has no semantic meaning, use it for style, separation, add your own classes and ids, whatever. On the other hand, <section> elements are typically supposed to have headings inside them, or at least gain an entry in the document outline.

In this case, I'd recommend starting with <div>, especially inside an <aside> element.

Kzqai
  • 22,588
  • 25
  • 105
  • 137