Should I use the new HTML5 semantic elements? [closed]

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.

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.

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

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...

Jashwant

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.

Joren

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.

来源：https://stackoverflow.com/questions/19744045/should-i-use-the-new-html5-semantic-elements

标签

javascript

css

html5

modernizr