Menu
I have a question regarding using Bootstrap - I see that on default they use a lot of DIVs instead of sections etc.
I've been reading the HTML5 specification lately - when to use section and when to use div. The basic idea is that DIVs should be used only if any specific HTML5 element doesn't apply.
Now, if I want to create an HTML5 website using Bootstrap, should I change the DIVs to specific HTML elements (for example SECTION)?
956
When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element instead. A general rule is that the <section> element is appropriate only if the element's contents would be listed explicitly in the document's outline.
Certainly: you can still use <div> ! Despite HTML 5 bringing us new elements like <article> , <section> , and <aside> , the <div> element still has its place.
<div> vs <section> The div element has no special meaning. It is often used as a block of children elements. The section element introduced in HTML5 standard is used to group related elements, such as a subsection of a long article. In short, the section element provides more semantic syntax than the div element.
Section is not for design purpose, it has specific meaning. It indicates separate sections/parts of a web page. On the other hand, div has no specific meaning. You can use div s anonymously for managing your front-end styles.
It really depends on your page's content but basically you could use HTML5 tags and apply bootstrap classes like this:
<section class="row"> ... </section> <footer class="row"> ... </footer> But as said it depends on your content, and even more, you're not forced to use <section> tags, they have the specific purpose to represents a generic document or application section, and they're not mandatory.
The <div> tags are generic tag usually used for styling, as in bootstrap. But if you want to keep the <section> tags, maybe you could prefer a mixed solution like this:
<section> <div class="row"> ... </div> <div class="row"> ... </div> </section> With this solution the <section> tag is used for grouping contents, as it should be, and the <div> tags for styling it.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
