I’m not much of an expert myself, but I’d say use the first one. It depends what you’re trying to do though. Is wrapper used only for styling purposes or does it really denote a section on the page? I usually divide my pages into sections with the <section> element, and they act as wrappers for everything belonging to that section. By the way, is the container Bootstrap’s container, or is it a class you’ve created?
Do you mind posting the full code or trying to explain what you’re trying to do? It really depends on what you want to do when choosing which tags to use.
Link http://codepen.io/codejsp/pen/oBdVwL
I used the first one too (section id is wrapper), but when looking at other examples, I’ve seen different things so I was just wondering which one is correct in general.
As I’ve said, I’m not an expert myself, but based on what I’ve read, it makes more sense to use sections rather than divs in this case. That’s what I used with my tribute page and what I’m using now with my portfolio project.
Use whatever makes sense. A <section> is for a thematic grouping of content, while a <div> is simply a container with no semantic value (but useful for styling).
@kevcomedia I didn’t know you needed to add a header inside of <section>s. That’s good to know. What if you have more than one header? On my portfolio project, I’m using <section> elements to divide my page into groups that would make sense, and in one of them I have two headers (h3 and h4). Would this be valid HTML?
explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
@kevcomedia Cool. Thanks for the info. I already use the W3 validator, it’s great. What do you think about using a hidden header? Specifically, I have 3 different <section>s in my portfolio page, an about me section, a projects section, and a contact me section. For the projects and contact me sections, I have <h2> elements as headers, but for the about me section I would like it to remain without a header, so I initially didn’t have one (I did have subheadings though). But after you’ve said this, I went ahead and added an <h2> with Bootstrap’s hidden class to make it hidden yet have it there at the same time so my HTML is valid. Do you have any thoughts about this?