what exactly does this HTML tag do?

Question

Actually i am having a source code with me and i do understand the whole except the below code so please provide me the correct explanation for this tag. It is it

<html lang="en" class="no-js">

in the program

<html lang="en" class="no-js">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Navigation - Interactive Demo | Codrops</title>
<meta name="description" content="Circular Navigation Styles - Building a Circular     Navigation with CSS Transforms | Codrops "/>
<meta name="keywords" content="css transforms, circular navigation, round navigation,     circular menu, tutorial"/>
<meta name="author" content="Sara Soueidan for Codrops"/>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="cn-wrapper">
<ul>
<li><a href="#"><span class="icon-picture"></span></a></li>
<li><a href="#" class="active"><span class="icon-headphones"></span></a></li>
<li><a href="#"><span class="icon-home"></span></a></li>
<li><a href="#"><span class="icon-facetime-video"></span></a></li>
<li><a href="#"><span class="icon-envelope-alt"></span></a></li>
</ul>
</div>
<div class="steps">List items are positioned absolutely. Anchor tags inside them are also positioned absolutely, and their size is given so that they are visible at the end of     the      transformation. Red dot represents the container's center.</div>
<button class="play-button">Start Demo</button>
<button class="step-button">Next Step</button>
<button class="reset-button" disabled>Reset</button>
<span><em>*Best experienced in Chrome</em></span>
<ul class="info">
<li>List Item</li>
<li>Nav Container</li>
<li>Anchor inside List Item</li>
<li>Container center</li>
</ul>
<a class="back" href="http://tympanus.net/codrops/?p=16114">
<span>Back to the Codrops Article</span>
</a>
<script src="js/vendor/jquery-1.10.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Here you go: http://stackoverflow.com/questions/6724515/what-is-the-purpose-of-the-html-no-js-class — Billy Moat, Mar 03 '14 at 16:42

score 1 · Answer 1 · edited May 23 '17 at 10:26

"The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. This is meant to assist search engines and browsers." English - en (From http://www.w3schools.com/tags/ref_language_codes.asp)

"The no-js class is used by the Modernizr feature detection library. When Modernizr loads, it replaces no-js with js. If JavaScript is disabled, the class remains. This allows you to write CSS which easily targets either condition." (From @Zach_L's answer in What is the purpose of the HTML "no-js" class?)

score 1 · Answer 2 · edited Mar 03 '14 at 16:55

here you are:

html -The tag tells the browser that this is an HTML document and it represents the root of an HTML document. It is the container for all other HTML elements

lang - Tells what language the content is wrapped by

class - defining the css class used in a stylesheet.

Wanted to add that I found out, that the "no-js" class is used by modernizr ( http://modernizr.com/docs/ ) . What exactly it does can be read here: http://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizr

Next, add the class “no-js” to the element:

When Modernizr runs, it will replace that class with the class “js” which allows you to know, in your CSS, whether or not JavaScript is enabled. But Modernizr doesn’t stop there: It will add classes for every feature it detects, prefixing them with “no-” if the browser doesn’t support it. So, your element will look something like this upon pageload (providing JavaScript is enabled):
<html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs
borderimage borderradius boxshadow opacity cssanimations csscolumns
cssgradients cssreflections csstransforms csstransforms3d
csstransitions video audio localstorage sessionstorage webworkers
applicationcache fontface”>

Reference: http://www.w3schools.com/tags/tag_html.asp

score 1 · Accepted Answer · answered Mar 03 '14 at 16:46

From MDN:

The HTML Element (or HTML root element) represents the root of an HTML or XHTML document. All other elements must be descendants of this element.

As @Buch said the lang attribute says what language the content of the page is in, and the class attribute works like any other element's class attribute. The one you show is usually used when a javascript library such as modernizr is doing feature checking so in your JavaScript you can check for the presence of different classes on the body tag to determine what features are supported by the current browser.

--Edit-- For the languages W3.org has an explanation for what the various language codes are: http://www.w3.org/TR/html401/struct/dirlang.html#h-8.1.1 in your case en stands for English.

Thanx for your valuable answer dude – Rama Krishna Mar 03 '14 at 16:56 — Rama Krishna, Mar 03 '14 at 16:56

score 0 · Answer 4 · edited May 23 '17 at 12:28

0

http://www.w3schools.com/tags/ref_language_codes.asp for lang="en"

and

What is the purpose of the HTML "no-js" class? for class="no-js" (the main use of the class attribute is to be used as a selector in css or in a scripting language)

edited May 23 '17 at 12:28

Community

1
1

answered Mar 03 '14 at 16:44

Hoijof

1,343
15
27

score -1 · Answer 5 · answered Mar 03 '14 at 16:42

-1

The html tag wraps any html page. Lang is an attribute used to specify the language the content is in, and class is the class attribute used to select the tag in CSS or in jQuery.

answered Mar 03 '14 at 16:42

Buch

92
3

2

Then what is that "en" language in that? – Rama Krishna Mar 03 '14 at 16:45
en stands for english – Buch Mar 03 '14 at 17:17

what exactly does this HTML tag do?

5 Answers5