+ 1
If you were to pick, between using HTML5 elements for sectioning (section, header, nav) & good old div, which would you choose?
14 Answers
+ 8
i always use div.. its better for me to set style as my choice.
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. whereas: The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.
+ 6
I prefer to use div personally
+ 5
I use divs for almost everything because that's how I learned html before html 5
+ 5
Honestly, that's like asking an old man if he prefers the music he always knew or the new music kids listen to these days. Chances are he'll pick his music because it's what he knows and is most familiar with.
Same with me. Although I'm aware of the new tags, I've always used the 'div' tag previously and see no real incentive to change my methods. I'm not gaining enough from the new tags to go against the methods I already use to create websites. If I lost performance or anything else by using DIV over them, then I would switch, but as far as I can tell, doesn't seem to impact much.
+ 5
@Audrey
Understood. I'll try to break it down a bit for you.
DIVS = generic containers. They hold no specific meaning prior to the meaning that you give to it. Most often we use it to contain, section, and style things on our document.
SECTION = This is a tag that's used to... section particular stuff. For example, imagine that you're reading a book and the book is broken down into chapters that make up the book. Each chapter would be its own section.
Okay, so they sound similar... I get it and that's why most people don't care about which you pick. :D However, imagine that you have a screen reader, a bot, a search engine, or something of that nature? They all utilize these tags to more appropriately do what they do, and in this case, having things properly sectioned would be very useful for those things instead of having a bunch of generic containers that mean absolutely nothing at all to those things.
Ultimately, I'd say learn whatever new standards they tell you to use until they say it's "deprecated" and then move on to the next standard. Everything has its relative purpose and is why it was added; if it ends up being useless, they'll deprecate it later.
+ 3
@Audrey it is out of pure habit
+ 2
@Audrey
Well, between me and you, if someone is still using IE6 then they don't deserve to have the internet. ;) Okay, maybe that's a bit harsh, but you get what I mean. It's like someone using an old rotary dial phone, refusing to upgrade, and expecting all of us to write them hand-written letters because they can't receive text messages on their phone.
lol Okay, rant over. Most often, I see the heading tags utilized INSIDE of the section tag, and it is utilized for the purposes that you said. It's similar to the "chapter title" as we mentioned in the example before. As well, you could use the 'noscript' tag to inform the user to enable their Javascript for proper functionality of the current page. People that disable Javascript recognize that they're "breaking" most websites and they will pick/choose which ones to whitelist to allow Javascript. Inform them so they can make their personal choice of it they want to properly use the website or not.
Personally, this is what I hate most about web development. Too many browsers that don't follow the same standards and are allowed to do a lot of things their own way. In some ways that can be good, but from the developer end, it's insanely annoying having to accommodate all of the potentials that people may be using. Ultimately, you could create versions of your website that work properly with each browser/version, and just check what they're using in the beginning & have your code send them the correct website. Kinda like websites recognizing mobile vs desktop and adjusting accordingly.
Now to answer your question. As I mentioned above, I still just use DIVs, so I don't use the `section` tag at all, which may or may not change in the future. However, 99.9% of the web development work that I do is in regards to a commercial intranet site that I built from the ground up for this company, so it's not accessible by the public and I have control over how it'll be used, including which browsers.
Learn all and use best for whatever situation you're in.
+ 2
@Audrey
It's also been a pleasure conversing with you too, Audrey. I'm sure we'll get a chance to speak further here in the future.
https://www.w3schools.com/tags/tag_noscript.asp
^Here is a basic overview of the noscript tag. It can be very useful, especially considering that many people utilize script blockers today.
As far as browsers, most often you can accommodate for most of them via your CSS3 and adding in the various lines that speak to the respective browsers. So if you haven't already, I'd spend some time mastering CSS3, it'll make life a lot easier on ya. As well, it'll make it so you can make more responsive websites that easily transition between desktop and mobile viewports.
Anyways, best of luck to you bro! I hope your training goes smooth.
+ 1
Which one do you use more often yourself? The div or the section? I was reading "The Truth About HTML5" by Luke Stevens and he doesn't seem a big fan of Section and Article.. claims they are barely used as intended in the HTML5 Spec. Also, claims they bring problems in older browsers.. I'm trying to make my own survery to decide which path to take
+ 1
@Jacob Marley well said, I understand what you are trying to say, and it makes a lot of sense.. but I asked this because I started learning HTML right here on Sololearn, and in the HTML course, there is HTML5 at the end of it.. so, for me, it's as good as learning both older versions of HTML and HTML5 simultaneously, which leaves me with the question: which set of elements should I use? which ones are better? which ones are more effective?
+ 1
@Jakob
thank you, the definitions have added some insight I had not considered yet...
but then in the book, I read that for sectioning you could easily use the headings h1 through h6 to indicate sections, which are understood by screen readers to be sectioning tools, which is also more efficient considering section and article tags require JavaScript in older versions of Internet Explorer (IE6-8).. (Though I have to say, I didn't know people still use Internet Explorer, I thought people prefer Opera, Firefox, UC and the like).. apparently section, article, nav, header, footer, aside tags are not recognized by such old browsers as IE6-8 which makes it hard for screen readers and also they require JavaScript to be enabled in other browsers.
so, now my question is, what's your take on using headings instead of section? And also, would you recommend using ARIA roles over sectioning elements? E.G using <div role="banner"> over using <header>.. what's your take on this? I don't want to just accept everything I read in a book.
+ 1
@Jakob
Talking with you has been humbling, educating and fun.. hope to see you on other Q&A's...
Now I need to lookup the noscript tag, see how it's used and when, it seems very helpful..
It's unfortunate that browser developers do whatever they want tho, they should have agreed on some standards that are fundamental, the rest can differ, nobody really cares.. hope to see change in the future.. would be nice.
Anyway, now I have more homework to do, how to make sites adjust to browsers they are viewed on.. Thanks
0
@MemphisReigns why do you prefer div?
0
@Toni so for you it's a matter of habbit and preference? Not really a matter of which one executes better?