6

I'm in the process of upgrading my website, and this involves the decision of using the new HTML5 semantic elements <nav> <header> <footer> <aside> <section> over regular old <div> elements.

I do plan on supporting IE7 and IE8, but I know that these versions don't support the above semantic elements. I've read up about 'plugins' like Modernizr, Initializr and HTML5shiv, and I know that older browsers will then support the new elements IF JavaScript is enabled, but what am I supposed to do if it's not?

By default, the <html> tag is given the class of no-js and if JavaScript is enabled, Modernizr/Initializr replaces this class with js. That's all well and good, but there are some things I'm uncertain about. So far, what is covered?

Sorted

  • IF JavaScript is enabled, IE7 and IE8 are supported by Modernizr/Initializr.
  • With a reset.css file, other older browsers support these new tags.
  • Modern browsers are all fine.

Problems

  • IF JavaScript is disabled, what am I supposed to do about IE8 and below? The no-js class is added to the <html> tag, so what exactly can I do with that?
  • How can I use <noscript> to my advantage here? I don't want to make pages too large with coding.

So, aside from those questions, I also want to ask if it's really worth using these tags, when I can just use good ol' <div> tags which would both support older browsers and also keep file sizes down by eliminating the required coding to make the new tags work in older browsers?

Thank you, Dylan.

DylRicho
  • 895
  • 1
  • 10
  • 25
  • 1
    What do you think the percent viewership would be with javascript disabled? Is that really something you need to design for any more? – jfriend00 Nov 02 '13 at 16:40
  • @jfriend00 I would expect it to be pretty low; around 5%, but 5% of the population of the US is a large number in itself, let alone the world. And any good web developer would want as much traffic as possible. – DylRicho Nov 02 '13 at 17:02
  • 1
    Seriously 5%? Where do you get that number from? – jfriend00 Nov 02 '13 at 17:07
  • I'd expect people with IE *and* Javascript disabled to be less than 5% – Kos Nov 02 '13 at 17:07
  • 1
    Should we provide old school inline formatting for users who disable css? – Vitim.us Nov 02 '13 at 17:12
  • @jfriend00 It was purely a guess. I've never actually bothered to look it up because Facebook is virtually useless with JS disabled, and we all know how many users that site has. – DylRicho Nov 02 '13 at 17:18
  • It's a lot of work to both use JS in the ways it can make your site great and then try to make things work without JS. Because it's a lot of work, you really ought to know how many additional viewers it will bring you and if those type of viewers are actually valuable or not. The altnerative is that all that extra work could be put into additional capabilities of the site that impact viewership even more. It's a tradeoff and it seems to me that the tradeoff works better by not supporting viewers with no JS. Plus, do you want to nearly double your testing. – jfriend00 Nov 02 '13 at 17:21
  • Well, my website is tech-based, but it will also be offering its own products in the future, so I'd assume at least some compatibility with JS-disabled browsers would be necessary. Although you do bring up very good points, since I don't want any more work than I already have. I have two questions; 1) should I use Initializr to support <=IE8 with JS enabled and 2) I have a mobile version too. Do you suggest I at least support JS disabled for that? – DylRicho Nov 02 '13 at 17:51
  • 1
    I would guess for IE7/8 and no JS about 1%, which is negligible. Future proofing, of course is more important than past proofing. – bjb568 Nov 14 '13 at 19:48
  • Future proofing is indeed important, but with today's modern browsers, it doesn't sound like a problem at all. Even IE11 is somewhat enjoyable to work with. So, do you reckon I at least support no-JS users on mobile devices, or should I just assume that most, if not all users have JS enabled? – DylRicho Nov 15 '13 at 06:56

5 Answers5

2

It's good practice to use both, for example

<nav>
    <div>
        <ul>
        <!-- etc -->
        </ul>
    </div>
</nav>

If you need to support those obsolete browsers, I wouldn't do anything more than that. The benefits, such as they are, are not worth the extra effort.

gotofritz
  • 3,341
  • 1
  • 31
  • 47
  • That's actually a very good idea, but wouldn't this then add unwanted padding/margins by using block elements within each other? – DylRicho Nov 02 '13 at 16:33
  • 2
    @DylRicho: You'd ensure that the padding/margin of `nav` was `0`, because that's what it will be on IE7/8 if the shiv isn't loaded (I think). The problem, though, is that then in your normal CSS, you'd always have to style the `div`, not the `nav`. The `nav` would be extra, purely for semantics. But if you really want to support these old browsers *without* JavaScript (and wow that's a small demographic), I don't see much choice. :-) – T.J. Crowder Nov 02 '13 at 16:38
  • If that would purely be for semantics, and the percentage of users with JS disabled is very low, I'm considering using the semantic elements regardless, although I'd still want to support IE8 and below. Such a situation causes a headache. I appreciate the help, thank you. :) – DylRicho Nov 02 '13 at 16:51
  • The nav is not *purely* for semantics. It should also apply a navigation role to the element that accessibility tools can use to help their users skip over the block and get to the real content more easily. – Alohci Nov 02 '13 at 17:31
  • @Alohci Yes, I have read about that. I do think JS will be required for <=IE8, but they're also the browsers which have a greater chance of having JS disabled. – DylRicho Nov 02 '13 at 17:56
  • 1
    @DylRicho You have to ask yourself WHY you want to use semantic tags. The only possible answer is search engines - accessibility could be a second, but you can use aria roles for that. So, really, using old school divs for footers, nav, etc, and wrapping them with the new HTML 5 elements is good enough IMHO. I can't see any benefits in doing anything more than that. – gotofritz Nov 02 '13 at 21:44
  • @gotofritz Thanks for the info. Now that you say that, I think the main reason for me wanting to use the new tags is just that; better SEO, accessibility and I'm just eager to try new tags. `
    ` after `
    ` gets very tiresome.
     – DylRicho Nov 03 '13 at 16:21
  • I was thinking; if I were to use separate CSS files for modern browsers and <=IE8, I could style the HTML5 tags in the modern CSS file, and style the `
    ` tags in the older browser CSS file. Is this a good idea?
     – DylRicho Nov 05 '13 at 05:10
  • 1
    Well, you double the work, and also some tags are not meant to be styled (I am thinking of 'section'), but apart for that there is nothing wrong – gotofritz Nov 05 '13 at 15:57
  • I think IE conditional comments are best, and I don't mind using additional CSS files. Are there any official sources that state which tags cannot be styled? And thank you for the original concept, I'll go ahead and mark this as the answer. :) – DylRicho Nov 06 '13 at 10:38
  • 1
    http://html5doctor.com/ is always a good source – gotofritz Nov 06 '13 at 13:31
  • One last question that I have, if you don't mind me asking; if I use Modernizr to make the new semantic tags work in <=IE8, is it safe to use styling, IDs and classes on the new tags, or would I still need to apply them to the `
    `s inside to manipulate them?
     – DylRicho Nov 08 '13 at 05:03
  • @gotofritz, for example, which method would work with or without Modernizr? - `` with CSS `nav div#nav` OR `` with CSS `#nav div`? – DylRicho Nov 08 '13 at 05:05
1

I do plan on supporting IE7 and IE8, but I know that these versions don't support the above semantic elements. I've read up about 'plugins' like Modernizr, Initializr and HTML5shiv, and I know that older browsers will then support the new elements IF JavaScript is enabled, but what am I supposed to do if it's not?

If JavaScript is not enabled, then while the content of the new elements will be shown, CSS will not be correctly applied to them. While in theory you could use a noscript element to trigger a redirect to a version of the page not using the new elements (via a meta refresh tag within the noscript), then you'd be maintaining two versions of your site.

For example, given this page: Live Copy

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Elements</title>
  <style>
    nav {
      color: green;
    }
  </style>
</head>
<body>
  <nav><ul><li>This text should be green</li></ul></nav>
</body>
</html>

...early versions of IE will show the text in the default color. Adding the HTML5 shiv prior to the style element:

<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>

...which as you know requires JavaScript, makes the text green: Live Copy

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
1

It's not necessary to follow the new semantic. New semantic is developed mostly for search engines, not for site functionality. If you really want to support IE, do it for IE.

If you really consider no-script cases and CSS is not enough for you, than all you can do is PHP/ASP magic.

One my friend works exclusively in Flash, because no js, totally client side, no cares about browsers... Who knows...

Ruben Kazumov
  • 3,803
  • 2
  • 26
  • 39
0

Should I use the new HTML5 semantic elements?

Yes.

IF JavaScript is disabled, what am I supposed to do about IE8 and below? The no-js class is added to the tag, so what exactly can I do with that?

You can do something like this,

HTML

  <div id='wrapper'>
     // Whole website coding here
    </div>
    <div id='old-browsers'>
      Use an upgraded browser
    </div>

CSS 

    .no-js #wrapper {
      display: none;
    }

    #old-browsers {
     display: none;
    }

    .no-js #old-browsers {
      display:block;
    }

How can I use to my advantage here? I don't want to make pages too large with coding.

IE Consideration:

IE7 is 7 years old and most developers today do not support it. IE7 / IE8 users with js disabled is pretty low and you shouldnt develop for those exceptions. Instead you should give them a suggestion to upgrade with above method. You can use the noscript tag for the same usecase.

jamesmortensen
  • 33,636
  • 11
  • 99
  • 120
Jashwant
  • 28,410
  • 16
  • 70
  • 105
  • this is not helpful at all; -1 and flagged as VLQ – tckmn Nov 02 '13 at 16:29
  • @Doorknob, I am writing detailed answer. By the way, my answer clearly consider the OP's question and answer that specifically – Jashwant Nov 02 '13 at 16:32
  • Ok, -1 removed, but "yes" is **not** an answer, so don't post it as one. – tckmn Nov 02 '13 at 16:33
  • For a question 'Should I use the new HTML5 semantic elements ?'. 'Yes' is definitely an answer. – Jashwant Nov 02 '13 at 16:34
  • 1
    No, "yes" is a comment. To be an answer, you actually have to explain it. – tckmn Nov 02 '13 at 16:34
  • Leave. The thing matters most is that we help the people in need :) – Jashwant Nov 02 '13 at 16:37
  • However, "yes" is not helping anybody. – tckmn Nov 02 '13 at 16:39
  • Well, this question is actually pretty opinion based, which I have voted to close as such, but that's irrelevant - "yes" or "no" doesn't help in any case. – tckmn Nov 02 '13 at 16:42
  • 2
    Protip: if you have a detailed answer, wait until you have finished writing it before hitting submit. – BoltClock Nov 02 '13 at 16:42
  • Ok. I'll wait before hitting submit. But I don't see anything bad in a short answer. Do we have a reference where I can look ? – Jashwant Nov 02 '13 at 16:46
  • 1
    [answer] and common sense. – tckmn Nov 02 '13 at 16:48
  • I've read that earlier, may be I lacked common sense. – Jashwant Nov 02 '13 at 16:58
  • Marking this as 'opinion-based' doesn't help me in the long run. I come here to ask for help from other web developers. Closing my question doesn't help me. There aren't many other places where I can get help for topics like this. If these versions of IE really aren't used by many people, I may just go ahead with semantics and tell those users to upgrade. If organizations do, I don't see a reason why we shouldn't follow. – DylRicho Nov 02 '13 at 17:00
  • As I answered, "IE7 / IE8 users with js disabled is pretty low and you shouldnt develop for those exceptions. Instead you should give them a suggestion to upgrade". If you have an old website, changing the markup to use semantic HTML5 elements won't be good choice. But if you are starting something new in Nov 2013, please use HTML5 elements. – Jashwant Nov 02 '13 at 17:06
  • The website has been running since 2010, although the current version uses an HTML5 doctype. However, it doesn't use any of the new HTML5 semantic elements. I'm in the process of recoding the entire thing, which is why I asked this before starting. That's good advice, but I wouldn't have expected businesses to do that. – DylRicho Nov 02 '13 at 17:10
  • 1
    If you are recoding the entire thing, use HTML5 elements. Every answer on this page advises the same. – Jashwant Nov 02 '13 at 17:15
  • So, to round it up, are you saying that I should only support IE8 and below with JavaScript enabled (using Initializr), and if it's disabled, tell them to either upgrade their browser or turn JavaScript on? – DylRicho Nov 02 '13 at 17:32
-1

What you could do (and what a lot of big website's do) is to display a notice when javascript is disabled (optionally when the browser is IE7 or IE8 but you'll need a serverside check for that), that the website would not be displayed the way it is supposed to. See "How to detect if JavaScript is disabled?" on how to do so.

Only 5.3% (source) of internet users are using Internet Explorer < 8 and 0.25% to 2% (source) of the total users have Javascript disabled. You could spend a lot of time making a smooth solution for max 5% x 2% = 0,01% of your visitors or you could spend 5 minutes building the notice system I described.

Community
  • 1
  • 1
Joren
  • 3,068
  • 25
  • 44
  • Thank you for the information; I would be considering PHP to detect user agents for a mobile version anyway, so extra PHP would be fine. However, if the number of users with JS disabled is really that low, I wouldn't mind simply going with the semantic elements. Of course, I'd still want to support IE8 and below, so JS would be required, but then when you think of Facebook and how many users it has, JS must practically be a requirement by most websites for a better experience. For the mobile version, I was considering some ` – DylRicho Nov 02 '13 at 16:54
  • 1
    -1: just because 5.3% of internet users are using IE7 and below doesn't mean 5.3% of OP's potential users are using IE7 and below. For example, desktops at corporations generally have a higher IE usage than iOS users, so it's always important to know the demographics – SheetJS Nov 02 '13 at 17:03
  • 2
    @Nirk I agree. I also think W3School's statistics only reflect what's visiting their website, and not a representation of worldwide statistics (which is probably hard to achieve). – DylRicho Nov 02 '13 at 17:07