+ 14

Using divs VS Html new structure, what's the good practice?

I'm having confusion on creating a practice web site (should i use divs or the new element structure on html 5). Since element on html 5 such as <header><nav> and so on.. does not work out as divs should be. Need suggestion

1st Mar 2017, 1:33 AM
Mark Aldrin Aboganda
Mark Aldrin Aboganda - avatar
22 ответов
+ 26
I'm old school so you can imagine I like divs, but with the new HTML5 semantics there's more benefits. Spiders, crawlers, or bots that index pages use such elements to understand the structure, and content more better than they did before - especially the mighty Googlebot that I believe every website owner wants to attract for PageRank purposes. I recommend using the new semantics to give content better meaning, but there's no harm in using divs - replace it with section or article where necessary.
5th Mar 2017, 5:30 PM
Mark Foxx
Mark Foxx - avatar
+ 18
I would suggest using html5 tags for semantics. if you are worried about those tags not being supported in older browsers you can use a javascript library called html5shiv. it will make those elements act like they do in html5.
2nd Mar 2017, 12:46 PM
Aaron White
Aaron White - avatar
+ 11
<div> was and still is a valid generic container. New Html5 semantics elements, are less generic by definition. You can consider <header> as a generic title container, <nav> a generic navigation container, and so on... As "specialized generic" containers, they comes with default styles, that <div> don't have. So, you need to style them at your convenience ( to get an <div> equivalent, mostly is enough to define margin and/or padding to zero value ;) )...
1st Mar 2017, 5:43 PM
visph
visph - avatar
+ 8
old is gold.. div is good but if there's new option than we should use them to see what are the benefits because I think the new html5 elements comes with great benefit.
20th Mar 2017, 2:37 AM
Samira
Samira - avatar
+ 6
Now all major browsers supports new HTML5 elements like header, nav, section, aside etc. So it's a good practice to use these semantic elements. But divs are not going anywhere! You'll still need & use them ;)
4th Mar 2017, 1:28 PM
Naresh Singh Rana
Naresh Singh Rana - avatar
+ 3
the <div> tag requires you to set id and class for it when you want to insert css. Other html5 elements help you save time coding for this and one more thing is search engines often prefer the newest semantic elements. have fun marking :))
6th Mar 2017, 6:03 AM
Dinh Phuc Tran
Dinh Phuc Tran - avatar
+ 3
divs - old method, nowadays it is mostly used for grid system layout, good for all browsers html5 new - semantic , search engine friendly, easily understandable by all coders, best for modern browsers
16th Mar 2017, 6:00 PM
SR Praveen Kumar
SR Praveen Kumar - avatar
+ 2
I like divs.
1st Mar 2017, 5:10 PM
Michael Szczepanski
Michael Szczepanski - avatar
+ 2
Old: for everything you need to do there is the <div>. Stuff was simple. Html>head>body>div<body<html New : the html5 way! Structure is pretty much the same html head body elements. However now you have to get in the habit of choosing the tag that has the name similar to what the class of the div in it's place wiukd have been. Ex: <div class="header">other stuff </div> now becomes <header>stuff</header>. Instead of calling the header a div you now call it what it is! Nav, article, aside and other tags follow tge same logic. With the mention that tables have not changed much and that the content is separated into sections. <section></section>. This is tge tag to use when creating division. There would also be another mention regarding the article tag. It also contains a header, footer and content. Other thungs are just html5 in it's "new technology" glamor! Structurally you will have sum trouble getting your head wrapped around the tags but once you do it's actually easier to write. Oh, and it's waaay easier to READ! don't underestimate reading code! On tge other hand the div class construct is still vaoid html5. Cheers!
4th Mar 2017, 3:25 PM
florin holban
florin holban - avatar
+ 2
I use divs for bootstrap styling and MVC razor views. I try and use as much as much as the new element structure as possible though.
6th Mar 2017, 4:53 AM
Curtis
Curtis - avatar
+ 2
I guess your question is why nav, header, footer, section, etc elements do not function like sectioning tag such as <div>, my answer would be: you're the developer, whatever you want your elements to do, define it with your CSS. Add appropriate margins and padding and the rest, just like your <div>
7th Mar 2017, 4:01 AM
Ezekiel Oladejo
Ezekiel Oladejo - avatar
+ 2
in earlier version of HTML like HTML4 , for a block-level, section in a documents and for other reason "<div></div> used widly but in HTML5 with many meaning full tags like audio video quet etc. we dont use <div> tag like HTML4
16th Mar 2017, 11:06 PM
Nima Mohamadian
Nima Mohamadian - avatar
+ 2
I'm still stuck on divs.
17th Mar 2017, 9:15 AM
Olawale
Olawale - avatar
+ 2
html5 es mejor
20th Mar 2017, 7:52 PM
JDL
JDL - avatar
+ 1
use common sense for new html5 techniques. if you are building a site with a great enough percentage of ancient browsers then you need to build everything to the old standards. Generally most sites can get away with html5 elements. In my experience even with sites that get millions of hits, people using browsers without html5 element capability are less than 0.001%, so it's not something we usually have to worry about. Just always check the trends with your own demographic and clientele though (and there is always the html5 shiv fix)
20th Mar 2017, 11:58 AM
J o
J o - avatar
0
when a language is rising, all others features complains it ,arise also.So it will be filthy to use <div>while we are using news versions HTML features.
16th Mar 2017, 6:07 PM
Fabien Godcoder
Fabien Godcoder - avatar
0
div support all browser
16th Mar 2017, 7:10 PM
Hercival Aragon
Hercival Aragon - avatar
0
thank you very match
17th Mar 2017, 1:15 PM
‎علاء العمارين‎
‎علاء العمارين‎ - avatar
0
the new document structure should be used but div should not be totally ignored​ also.new document structure like header,have,article,section are used for semantic purposes.but these are not supported in IE so we can use document.createE!ement('header') and so on
20th Mar 2017, 5:52 PM
gaurav jha
0
use the one you are good at... "anyone goes"
20th Mar 2017, 11:23 PM
Aqua Lynards
Aqua Lynards - avatar