I read in the HTML5 specification that the generic div tag should only be used as "last resort," when a more specific element is unavailable. For example, the tags header, footer and section are preferred for grouping content thematically.
But it seems like the vast majority of websites still use div as the primary element. My question is, how often and in what contexts is it appropriate to use a div? And which other elements should be used in its place?
I'm looking for answers based on the specification rather than personal opinions. Thanks!
There isn't anything that takes the place of <div> (theres a reason its still in the spec), but HTML5 has more elements available that are more specific.
In addition to <header>, <footer>, and <section> there is:
<nav>
<article>
<aside>
<main>
<details>
<summary>
<figure>
<dialog>
<menu>
and more!
Basically any new HTML5 element can take the place of a <div>.
When should you use a div? You answered it yourself:
when a more specific element is unavailable
MDN has a HTML5 element list which contains all standard HTML5 elements, and indicates which elements are new with HTML5.
The thing to remember is that div tag is still a part of HTML5 and it’s not obsolete, yet.
However, div element has been abused a lot with HTML4, and rightfully so as there were never any alternates to it. Now that HTML5 has included some great new structural elements, div is no longer the best option for creating layouts.
The main disadvantage with div is that the element has no meaning due to which creating application-ready layouts is very difficult. The new structural elements introduced in HTML5 will surely help a lot with that issue.
The section element will most likely be used more than the other structural elements like header, footer etc. mainly because it is not specific as others. Also there is no limit as to how many structural elements you can add but the thing to remember is that section is not a complete div replacement.
div still has a role in HTML5. It is great for grouping similar elements as well as dividing elements as needed. Also section should not be used just for styling because section was not intended to be a wrapper.
The reason header, section, footer, and other such elements were created is to help with referencing them in css and scripting languages. W3C looked at the most common IDs web developers were using for divs and made the new elements in HTML5 accordingly. The reason divs and IDs is widely considered bad practice is because all those attributes clutters up the code. And as we all know, cluttered coding leads to mistakes and errors.
Where do you use them? That's pretty self explanatory. Take the header for example. It's most common use is the top of the web page. Right click on the stack overflow logo at the top and view the source. They're actually using a div with an ID of 'header'. Technically, that's bad practice.
A great use for divs is to create a wrapper around your entire content like this.
<div id="wrapper">
<!--content-->
</div>
Then you can reference it in css to center:
#wrapper{margin:20px auto;}
Hoped this helped!
Related
First of all, I apologize that this is probably a basic question, I tried searching other topics for an answer, but I'm still unsure.
I submitted a project where I needed to build a basic portfolio page using Bootstrap. I lost points for the following line of code:
<div class="container">
You need to add semantic tags. A semantic element clearly describes its meaning to both the browser and the developer. You can read more here: http://www.w3schools.com/html/html5_semantic_elements.asp
I understand why we should be using semantic tags however if I change the class from container to anything else it will adjust all the margins on the page. It was my understanding that Bootstrap recognized "container" and automatically applied Bootstrap properties to its children.
Am I doing anything wrong? Or am I just supposed to make a CSS rule that will apply margins to whatever I change container to?
Any help would be greatly appreciated, errors like this will become compounded with further projects!
I believe you are confusing tags and classes slightly: <div> is a tag - more specifically an element - and .container is a class. You can place the .container class on any element you want.
<p class="container"></p>
There are no definitive rules for class names, and as such they are not really a part of semantics, or SEO. A general suggestion is that they simply describe the element, not the styles.
Wherever you submitted your project most likely wanted to see a <section>, <article>, <aside> or some other HTML5 purely semantic element, which may or may not be proper semantics - kind of depends on what's inside it, and where it lies relative to the rest of the markup.
Generally speaking, the .container class is usually applied to generic elements in Bootstrap, and <div> is usually perfectly reasonable.
Another thing to consider, w3schools is a historically low quality source for web information, and usually a good indication that whomever is linking to it doesn't know very much about the web. I'd advise you to just start reading the tutorials and articles over at MDN, you'll learn a lot faster.
In examples for the latest Bootstrap 3 navbars, I found various examples on the web where the outer navbar markup is
<div class="navbar navbar-default navbar-static-top">...</div>
and other examples are using
<nav class="navbar navbar-default" role="navigation">...</nav>
All the examples perform OK, and the documentation calls for NAV. Which leaves me wondering if a lot of examples on the web are version 2 leftovers that were not rewritten for version 3, or it is OK to use either surrounding markup.
Example
<nav> is the semantic HTML5 container element for you main navigation elements.
The nav is a block level element used to denote a section of major navigational links on a page. Not all links should be wrapped within a nav element. The nav should be reserved for primary navigation sections including universal navigation, a table of contents, breadcrumbs, previous/next links, or other noteworthy groups of links.
from http://learn.shayhowe.com/html-css/elements-semantics
If you are using HTML5 then you should use nav.
If you consider "div", it is a block element that contains nothing, it's blank, an empty box ready to be filled with all sorts of html-#X code goodies.
The "Nav" element is much the same, however it is reserved as a block for handling a specific set of html5 code! Hence its reserved for navigation links (in practice of a rule that can be broken). Still, you can do the same in either tag so to speak, its the CSS attributes and classes that controls and manipulates both boxes in most instances.
(in practice of a rule that can be broken)
You could even replace all the div's with nav's throughout a web page and it would render the same if the browser supports nav. But it would only serve to confuse the coder, you and others.
While I am unsure if there are any specific directives that regulates, restricts, or represses nav over div, they seem to be much the same tag in all perspectives, an empty box container.
Both nav and div support Global and Event attributes so there are no differences there. BUT! Since both nav and div are a global box (a container), you have a lot of potential possibilities as a mad scientist coder.
Sorry for the weak references but (W3 Schools)
Offers a pretty good insight to the difference in a more layman terms.
In short: nav(html5) was birthed as a complement twin to div in order to ease visual tag coding and make it more recognizable, readable and understandable to developers. BTW: div is not depreciated as a tag in html5/and never will be IMO. span is another!
The old way to create a navigation container/box was -
<div id="navigate">link</div>
or
<div id="navigate" class="nav">link</div>
and the attributes, css and classes did all the work.
But in the the wonderful world of html 5 the div tag gave birth to the clone nav tag.
<nav> my anchor/button/list of links with sprinkles</nav>
The nav tag offers a more specific indication (identification) of what it is used for "Navigation". It is simply a matter of the elements being Non-semantic (div) and semantic (nav); and as to copy and plagiarize the w3 schools explanation ....
A semantic element clearly describes its meaning to both the browser
and the developer.
nav clearly describes in code that it is a block-tag/container used to hold navigation links (content) with either ul-li's, a/href's, buttons...
Nav does not get or post anything as it is simply an empty box container until you put your code and links in it. Even then nav does nothing, its the links that do the work. The attributes associated to the nav tag do the manipulations to the tag eg.."hide or show" it, in its positions.
Div (divide) is "non semantic" as it does not (so much) semantically describe what it is specifically for or does, other than divides areas within the body of the page.
Nav (navigation) does describe itself as being set aside for navigation only so it is considered semantic.
Lastly and of side note in relations, html5 is catching on as the new standard, but it is not (at the time of the original post 2016-17?) supported by all newer browsers as it is yet to be finalized as an official release. IE has yet to include it in their newer release (10 I believe). But its coming!
But because nav> is newer html 5 (only somewhat supported), we still have to rely on the div tag to surround/encase the
<nav>...</nav>
tag, and its somewhat vital. Thus we must still use
<div> <nav> links 1</nav> </div>
way into the future for older browsers because the nav tag is not recognized and will be ignored by older browsers, else the contents might just float or push outside the margin box or have other ill side effects. While in newer browsers that do support nav will be safe. Having both div and nav will not harm a ting or change the looks to any noticeable degree.
In short and obviously, we cannot rule out earlier versions of browsers that support lower versions of html(3.x and 4.1) in favor of HTML5, we must consider all browsers and be backwards compatible.
There are many users who cannot use the new browsers that support html5 due to older OS such as windows xp. So keep in mind that there are still many users that are forced to run IE 6,7,8 crap which will not recognize or render the new html5 nav and other tags. That is if you want to reach the all of potential audiences.
I hope this offers a insight more so to the difference as I understand the question and purpose of div and nav.
There is absolutely no difference to the browser between a div and a nav tag. The only difference is to the human reader of the HTML. Using a nav tag that encloses navigation elements is the same as using a div tag to enclose navigation elements and adding an HTML comment that informs the human reader of the HTML that the div tag contains only navigation elements.
There is no difference between and . DIV is original HTML tag while NAV was introduced as part of new HTML5 semantic tags. They behave exactly the same. Supports all global attributes and events [w3 link]. The only main purpose is, it introduces semantics to HTML, that is the tag itself says what it should contain, rather than DIV which is without any meaning.
Other purpose is the idea of Affordance, that is a an object tell you just by its property what is used for or how it should be used. For example, you automatically know how to use teapot (it has a handle and a spout), no one needs to teach you about it. Semantics provide affordance. You can think of semantics as same as affordances (affordances are lets say visual, semantics are lets say in coding). More on this excellent youtube link
Third reason for this tag is provide accessibility features for visual impaired people. It is part of WAI-ARIA set of features which are design to improve nagivation including for visualy or otherwise impaired people. So lets say a user interacts with the application through screen reader or otherwise, that application make uses of these HTML5 semantic tags (, , etc) and can pronounce these. Other ways that HTML5 allows semantics is by assigning role="" property provides semantics to a div or an HTML element for example.
I understand all these tags have different semantic meanings, like article is for a story that stand apart; section is for self-contained part of the page...
They are good and useful tags, in many ways. But, are they just syntax sugar? Because I didn't see any style differences among them. When not applied by any CSS rules, they are just like divs.
Hope some webkit/gecko experts can clarify it on the code level.
Mostly yes. They're not actually divs, but block level elements (subtle but different).
http://diveintohtml5.info/semantics.html#new-elements
There are several new elements defined in HTML5 which are block-level elements. That is, they can contain other block-level elements, and HTML5-compliant browsers will style them as display:block by default.
So yes, for now they are just there for shortening your code length and creating cleaner markup, but that's what block level elements do. If you remove the default styling from a <p> tag isn't it just like a <div>?
I didn't see any style differences among them. When not applied by any CSS rules, they are just like divs.
Each browser has it's own native stylesheet that is applied to the page content. This is why we commonly use CSS reset stylesheets - to normalize everything between different browser stylesheets. Style and content are two completely separate things, what something looks like has no bearing on what it is, therefore you should not be marking up your page based on how you want it to appear.
Some day, it may be common for browsers to add default style to certain HTML5 elements, like some padding on <section>s, but it doesn't matter (and is actually unlikely).
Are they just syntax sugar?
Not at all. While there may not seem to be much of a difference, it allows your content to be understood by, for example, screen readers or search engines, in a more meaningful way.
As Grillz's answer mentions, the elements in question are all block level elements, so in that respect - they are basically rendered like divs, but have semantic value and aren't meant to be used as generic container elements.
Is it necessary to have a heading of <section> in HTML5 like mentioned here http://blog.whatwg.org/is-not-just-a-semantic
Sometime on a page we have some elements which are related and can be combined in a <section id="semantic name"> instead <div id="semantic name"> But we don't have any Heading for that..
Is it OK to use <section> without having <h1>, <h2>, <h3> inside
According to the HTML5 Doctor, you should not use <section> if there is no natural heading for it. Also, they say:
The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.
Also, check out this nifty flowchart to decide what element is best to use in your situations.
No, it is not required.
You can easily check this by reading the definition of the section element ("should" is not "must") or by validating your HTML.
The W3C validator will report a warning when no heading is used, but a warning is not an error.
Its only necessary if it wont [validate] (http://validator.w3.org)
The use of section tags is to convey the structure of your content, like a book is split into chapters, paragraphs, etc
If your page is mash of images to look like a magazine cover you may not have a need for adding any sections. You'll most likely still want structure for navigation but that's not done using sections.
I would say any page containing chunks of text (most pages) should use a section tag rather than a div. keep the divs for controlling layout only.
My best advice is to see how your site looks in a text only browser, or other accessible client. It amazing how rubbish most sites are designed for accessibility. My take is that section tags are an attempt to improve that.
I'm learning about HTML5, and honestly I can't say I'm really impressed. Semantics are nice and all, but I think that they introduced new elements with a very thin line between them, and a even thinner line between them and the old divs.
Everything is very clear if you do a generic purpose site, like a blogging engine, news publishing portal, and similar, but web apps... I'm having a lot of dilemmas about new html elements.
Here is my situation. I'm developing an ordering system. On the sellers interface I have 3 columns (inline), which represent the status of the order. When the status is changed element is moved from one column into another (background ajax, and js manipulation).
In Html4 I would use 3 divs and put a heading with a title on top of each one. Elements inside the columns would also be divs.
But what about HTML5? I have been looking at the section element, but I'm not really sure how to use it. Here are the options:
Put everything inside one section - I don't think that is the way to go
Put a section around each of the column divs, and heading inside the section
Replace the divs with sections
Put sections inside column divs
So, which way to go?
EDIT: first of all thanks everyone for your quick replies. In the end I'll probably go with Ian Devlins suggestion, and put each column as section. Anyway, just to point out my dissatisfaction with html5, multiple permitted options aren't always a good thing. I'm afraid what will the html5 web look like in a few years, when we can't fully agree on a simple question like this.
EDIT2: one more thing. I'll ask it here so I don't have to open another question. In addition to these 3 columns I have another div which contains order details, when any of the orders are selected. Should it be an article since its self-contained content, or to use an aside tag?
div is a perfectly valid HTML5 tag. If the new tags don't make any sense in your project, don't feel forced to use them.
To quote the w3.org spec:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
And another quote from the w3.org people:
The section element is not a generic container element. When an element is needed 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.
Given the definition for section by w3 we can conclude that your example would be a good use of section because:
The elements have a header
It is a thematic grouping of content
It is a part of the document outline.
EDIT:
To expand upon your comment below, the new HTML5 elements are NOT supposed to replace the old HTML4 elements. For example, going through a page and replacing all the div elements with section elements would be flat out wrong. The section element was, in my opinion, intended to make it easier for machines to parse certain pages (think: feedburners) by giving a more semantic structure to a page. After all, what's easier to parse, a page with 30 div elements, or a page with 10 div 5 header 5 section 5 article and 5 footer elements?
In this particular case I would have an overall div around them, and then each column as a section as each one has a different meaning, each of which I assume has a heading indicating its status.
e.g.
<div>
<section id="col1">
<header><h1>Column 1</h1></header>
content....
</section>
<section id="col2">
<header><h1>Column 2</h1></header>
content....
</section>
<section id="col3">
<header><h1>Column 3</h1></header>
content....
</section>
</div>