I'm building a website and need IE 8 support. I'm using HTML5 semantic elements (main, section, article, nav, header and footer).
I know these should NOT work in IE 8 so I included html5shiv.
And styled all elements as display: block;.
My layout was still a mess in IE 8 … so I added classes to all semantic elements and used those classes to style the elements in CSS.
Now the layout is correct AND I no longer seem to need the html5shiv.
Is this even possible? Can you style the semantic elements using classes without the use of html5shiv? If so, why use html5shiv?
nav {color: red}
does not work, but
<nav class="nav">
.nav {color: red}
does seem to work without html5shiv. Can someone confirm this?
EDIT:
After some careful testing I found out the following:
When having a SVG element on the page (which will not render in IE 8) the semantic elements can be styled with classes without the use of html5shiv.
This is very weird and probably some kind of bug in IE 8.
Related
If I use <main>, <article>, <aside>, <footer>, <header>, or <nav> elements will there be any bad side effects when someone with IE8 tries to load my page?
You will find many articles on this saying that some of these new elements are no different than generic block elements so they don’t pose any compatibility problems and all you need to ensure compatibility is to add a CSS rule to your website that causes the relevant elements to behave like block elements. Like this:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
But IE8 and previous versions of IE pose a challenge. Any element not in the official roster of elements cannot be styled with CSS. That means we cannot make then behave like block elements or give them any formatting because they behave as if they don't exist.
Fortunately, a workaround exists for IE to recognize these new elements allowing them to be styled, and thus giving us full use of these new semantic tags. It’s a tool called HTML5Shiv.
The trick is that calling document.createElement("section") will suddenly cause IE to recognize the section element. No one knows why, but it works.
But you need to make sure to call it early on in your website before any of those elements are used, otherwise it won’t work.
To answer your question, (what do older browsers do?), some browsers will ignore the element. Some treat them as errors. Some will treat them as <div>. It's pretty much all over the place. So you need to do something and setting them to block level is the best thing you can do for them.
Here's a longer review along with suggestions.
I am getting started with Twitter Bootstrap and came across a question.
Recently went through some tutorials regarding HTML5 and found out about semantic elements such as header, nav, footer, etc should be used instead of Div.
Now, while learning Bootstrap most of them are using Div tag.
So Which is the good approach Bootstrap Div tags or HTML5 Semantic Tags and Why?
Thanks.
Bootstrap use divs to show how the framework should be used. This is because divs are general block element that can be used in almost every case for containers. But the element you are using with Bootstrap doesn't matter for styling, because Bootstrap uses classes to apply styles to the elements (except for tables which are partially stylised with tagnames).
For example, you will have the same result on screen when using:
<section class="col-md-4">Hello</section>
than when using:
<div class="col-md-4">Hello</div>
The real difference will be for robots and accessibility readers because, as you said, HTML5 elements are semantics.
Each developer will choose the element that he feels most comfortable with. But my point of view is: if you trust the semantical approach of HTML5 elements (and you should :) ), the best way would be to use HTML5 elements for tag that have a special meaning (like header, footer, nav, …) and use div for all cases in which no HTML5 element exist.
Here is a list of all elements with their meanings: HTML elements reference - HTML: HyperText Markup Language | MDN.
You should use HTML5 semantic tags, since they can help both search engines and screen readers.
The Bootstrap documentation and/or template you used (at your time of writing) simply seemed to lag behind. I can find no motivation as to why not to surround the bootstrap div elements (which are correctly applied for styling) with HTML5 semantic tags.
For example, in the case of nav the following is recommended:
<nav role="navigation">
<ul class="nav navbar-nav">
<li>foo</li>
<li>bar</li>
</ul>
</nav>
The current bootstrap navigation for navbar points out the same:
Be sure to use a element or, if using a more generic element
such as a , add a role="navigation" to every navbar to explicitly
identify it as a landmark region for users of assistive technologies.
I plan on using some of the new HTML5 semantic elements, but it looks like some of them aren't well supported even on newer browsers (main isn't supported in IE11 as far as I can tell) is there a way to have them be treated as a <div> if they aren't supported, as the HTML5 semantic tags I plan on using are currently basically the same as divs AFAIK (header, footer, main are the ones I currently plan on using, also canvas but there isn't a good alternative tag to do what canvas does).
Currently if I use one of the unsupported tags in IE it seems to be treated as an unstyled tag but the issue is I can't set the width or height of it in css. What can I do for it to be treated as a and apply all styles that I put in css to that element using the name of the tag as the selector as though it were a <div>.
main
{
width: 100px;
}
does not work in IE11, if it was IE7 or something I wouldn't be too worried but quite a lot of people still use more updated versions of IE and I don't want the website to display improperly to them.
You need the HTML5 shim for supporting older browsers but using just the HTML5 shim does not fix IE11 see: http://jsfiddle.net/jbowyers/n3qZp/. So you also need a CSS reset that includes the 'main' element such as normalize. Or you can just add the CSS reset directly to your project as mentioned by others
main { display: block;}
The html5shiv will allow you to style the main element in IE 11 (and less). There's an explanation of what it does (actually a breakdown of its entire history) here.
Money quote:
Btw, if you want CSS rules to apply to unknown elements in IE, you
just have to do document.createElement(elementName). This somehow lets
the CSS engine know that elements with that name exist
NB. You should probably be using the shiv as a matter of course if you're using HTML5 and plan to support anything less than IE 9.
I think I have found a solution.
In my css file if I do:
main /*or any other unsupported tag that you want treated as a div*/
{
display:block;
other-property:other-value;
other-property:other-value;
...
}
It seems to act identical to a <div> tag. I haven't thoroughly tested or researched this solution (tested several attributes including color, width and text-decoration on IE11 and google chrome with tag named <asdasd> and it worked exactly like a <div>) so if anyone knows any problems with it please let me know.
I’m not sure what the question really is, but the title “Use <div> as backup tag for HTML5 semantic elements” is a good answer to the question “How can I use the HTML5 main, header etc. tags to that my page also works on browsers that do not support them?”
For example, instead of having just <main>...</main> in HTML and main { ... } in CSS, you would have
<div class=main>
<main>...</main>
</div>
in HTML and
.main { ... }
in CSS.
This may look redundant, and you get almost the same browser coverage by using polyfill like html5shiv and explicitly declaring main { display: block } if the polyfill doesn’t do that. But in this approach, you do all the styling in an old robust way and use the new elements only for their semantics. (In reality, the “semantics” means nothing, but maybe some day some programs will recognize main, article etc. and deal with them in some special way.)
So I am trying to get angular working on IE8. I have followed all the steps on http://docs.angularjs.org/guide/ie and it seems to be working -- I see the content of ng-view rendered on IE8 when I switch between views.
The problem is that I don't actually see any content in the inspector:
.. it's just an empty ng-view tag. I can see all of the content on the page, but no styling is applied to anything inside ng-view.
I am not sure whether this is an angular or HTML5 issue. I have added the html5shiv and HTML5 elements outside of ng-view are styled nicely.
EDIT
I have determined that the problem is HTML5 elements. <section> and <article> are not styled inside ng-view, while simple divs receive all the specified styling. Outside of ng-view, <nav> and <header> are styled just fine.
I was able to fix this by conditionally including jQuery in IE8 based on answer given here https://stackoverflow.com/a/18317832/2026098
The problem here is that, even if you add a namespace and/or precreate your elements according to the IE guide there are certain parts of the angular core that don't pass through the normal jQuery element creation - I have had the issue persist even when using full jQuery instead of Angular's jQLite but I've heard that fixes things for most people. Using an HTML5 shim doesn't solve the issue on its own either.
But even so, I would prefer to not have to substitute jQuery if possible, in which case you'll need to also do the following to get a fully working solution:
Add reset styles for the block-level HTML5 elements so they display: block; correctly
Target the HTML5 elements with a colon prefix as well in your CSS. You need to escape these, it will look like this: header, \3A header { /*...*/ }. Note that there is a space between the escape sequence and the rest of the selector.
If you are using jQuery, you will need to use a 1.10.x version or conditional tags to switch to it in IE8.
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.