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