HTML formatting question

HTML formatting question
0.0 0

#1
<section class="wrapper">
  <div class="container">

  </div>
</section>

or

<div class="wrapper">
  <section class="container">

  </section>
</div>

or

<div class="wrapper">
  <section>
    <div class="container">

    </div>
  </section>
</div>

Which one do I use? Should wrapper be outside of container or vice versa? Does it matter? :confused:


#2

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?


#3

Just a class I created


#4

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.


#5

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.


#6

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.


#7

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).

If you’re using <section>, you also need to add an <h*> element as one of its children, or else your HTML is invalid.

I’ve seen the first code example in http://learn.shayhowe.com/html-css/


#8

@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?


#9

@kevcomedia So in my link above, I should switch all my sections into divs since none of them contain an <h*> element?


#10

If you want to check for validity of your HTML code, you can use https://validator.w3.org/#validate_by_input

from StackOverflow:

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.


#11

Oh, what a nice little website. This will be very helpful! :heart_eyes:


#12

I think you should.

This might also be relevant:


#13

@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?


#14

I always add (visible) titles to my sections, As for making them hidden, you’re not the only one who does this:

I think that a nice rule of thumb might be to consciously add a title for each , even if you then hide the title with CSS
http://html5doctor.com/the-section-element/#comment-940