All geek questions in one place

Should I use the new HTML5 semantic elements?

I am updating my website, and this involves the decision to use the new HTML5 semantic elements <nav> <header> <footer> <aside> <section> for the usual old <div> elements.

I plan to support IE7 and IE8, but I know that these versions do not support the above semantic elements. I read about "plugins" like Modernizr, Initializr, and HTML5shiv, and I know that older browsers will support new IF elements. JavaScript is enabled, but what should I do if it is not

By default, the <html> assigned the no-js class, and if JavaScript is enabled, then Modernizr / Initializr replaces this class with js . This is all good and good, but there are some things that I'm not sure about. So far, what is covered?

Sorting

  • If JavaScript is enabled, IE7 and IE8 are supported by Modernizr / Initializr.
  • In the reset.css file reset.css other older browsers support these new tags.
  • Modern browsers are fine.

Problems

  • If JavaScript is disabled, what should I do with IE8 and below? The no-js class is added to the <html> , so what can I do with this?
  • How can I use <noscript> to my advantage here? I don't want pages to be too large with encoding.

So, besides these questions, I also want to ask whether it is really worth using these tags, when I can just use the good ol <div> tags that will support older browsers, as well as reduce file sizes, eliminating the need for coding for the new tags to work in older browsers?

Thanks, Dylan.

+6
source share
5 answers

It’s good practice to use both, for example

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

If you need to support these legacy browsers, I would not do anything. Benefits like these are not worth the extra effort.

+2
source

I plan to support IE7 and IE8, but I know that these versions do not support the above semantic elements. I read about "plugins" like Modernizr, Initializr, and HTML5shiv, and I know that older browsers will support new elements if JavaScript is enabled, but what should I do if it isn't?

If JavaScript is not enabled, then until the contents of the new elements are shown, CSS will not be correctly applied to them. Theoretically, you can use the noscript element to force a redirect to the page version without using new elements (using the refresh meta tag in noscript ), then you will support two versions of your site.

For example, 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>

... In earlier versions of IE, default text will be displayed. Adding HTML5 shiv 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

+1
source

No need to follow new semantics. New semantics are developed mainly for search engines, and not for site functionality. If you really want to support IE, do it for IE.

If you are really considering no-script cases and CSS is not enough for you than all you can do is the magic of PHP / ASP.

A friend of mine works exclusively in Flash, because there is no js, ​​the client side is completely not concerned about browsers ... Who knows ...

+1
source

Should I use the new HTML5 semantic elements?

Yes.

IF JavaScript is disabled, what should I do with IE8 and below? The no-js class is added to the tag, and what exactly can I do with it?

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 take advantage of this here? I don't want pages to be too large with encoding.

IE Consideration:

IE7 is 7 years old, and most developers today do not support it. IE7 / IE8 users with js disabled are pretty low, and you shouldn't develop these exceptions. Instead, you should give them a suggestion to update using the above method. You can use the noscript tag for the same usecase.

0
source

What can you do (and what is a large website) to display a notification when javascript is disabled (possibly when the browser is IE7 or IE8, but for this you will need to check on the server) that the website will not display like supposed to. See “ How to determine if JavaScript is disabled? ” For how to do this.

Only 5.3% ( source ) of Internet users use Internet Explorer <8 and 0.25% to 2% ( source ) of the total number of users have Javascript disabled. You could spend a lot of time on a smooth solution for a maximum of 5% x 2% = 0.01% of your visitors, or you could spend 5 minutes creating the notification system that I talked about.

-1
source

Source: https://habr.com/ru/post/957254/

More articles:


All Articles