Section Tag Usage

Hello all,

So I understand the usage behind the section element, however I am a little unsure of the order I should put it in specifically when working with Bootstrap (yes, I know bootstrap elements are not semantic).

For example would it be better for me to wrap everything with a section element and then declare my columns, then my header element? Or should I be nesting the section element within my columns so that my header for the element is a direct child of the section?

I guess my question could be summed up as this. Does the header and footer of a section need to be a direct child of the section element or can my bootstrap markup separate them? Or does it even matter at all?

Thanks for the input.

NEVER think of markup as display. NEVER.

Now that we know that… you can generally think of your markup as “outlining your content” and with the new HTML tags it is also useful o think of a nesting doll structure.

Where a s before you HAD to use ever decreasing Hx tags to indicate the hierarchical structure of your content, now you can wrap each …SECTION individually … which in turn has its own HEADER…H1…H2…etc. ( the Hx within the section would apply only to the content within the section.

Also don’t forget the ASIDE tag, for information that is ‘tangential’ to your content.

hope that helps

Yeah I agree and I know using a grid system like bootstraps to develop responsive design is sacrificing semantic markup for the speed of developing something responsive.

Basically what do you think is the better markup despite having to use these bootstrap elements.

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <section>
                <header>
                    <h2></h2>
                </header>
                <p></p>
                <a href="#" class="btn btn-primary btn-lg">Learn More</a>
            </section>
        </div>
        <div class="col-md-6">
            <figure>
                <img src="" alt="" class="img-responsive">
            </figure>
        </div>
    </div>
</div>

or

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                    <header>
                        <h2></h2>
                    </header>
                    <p></p>
                    <a href="#" class="btn btn-primary btn-lg">Learn More</a>
            </div>
            <div class="col-md-6">
                    <figure>
                        <img src="" alt="" class="img-responsive">
                    </figure>
            </div>
        </div>
  </section>

That depends on whether the figure in the second column is semantically part of the same secion as the content in the first column or not.

Not to mention his second example is invalid :wink:

That’s exactly what I was looking for, I had a feeling the 1st example would be the way to go but I just wanted to be sure. Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.