Menu
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?
reset.css file, other older browsers support these new tags.no-js class is added to the <html> tag, so what exactly can I do with that?<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.
517
One of the most important features of HTML5 is its semantics. Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages. It makes web pages more informative and adaptable, allowing browsers and search engines to better interpret content.
By adding semantic tags to your document, you provide additional information about that document, which aids in communication. Specifically, semantic tags make it clear to the browser what the meaning of a page and its content is.
Why Do You Need to Use Semantic Tags in HTML? The are several advantages of using semantics tags in HTML: The semantic HTML tags help the search engines and other user devices to determine the importance and context of web pages. The pages made with semantic elements are much easier to read.
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.
162
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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
