Home >> html >> HTML Class attribute

HTML Class attribute

The HTML class attribute is often used to give an HTML element a class. A class can be shared by multiple HTML elements.

Using The class Attribute

In a style sheet, the class attribute is frequently used to point to a class name. A JavaScript can also utilize it to access and manipulate components that have the specified class name.

We have three people in the following scenario.

elements with the value "city" for the class attribute All three of them ,The elements will all be styled in the same way.

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

Try with example

In the following example we have two <span> elements with a class attribute with the value of "note". Both <span> elements will be styled equally according to the .note style definition in the head section:

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Try with example

Note: The class name is case sensitive!

Tip: Our CSS Tutorial will teach you a lot more about CSS.

The Syntax For Class

To create a class, type a period (.) followed by the name of the class. Then, inside curly brackets{}, define the CSS properties:

Example :

Create class named “city” :

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Try with example

Multiple Classes

HTML components can be assigned to several classes.

To define multiple classes, use a space between the names, such as <div class="city main">. All of the classes supplied will be applied to the element.

Example :

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Different Elements Can Share Same Class

The same class name can be referenced by many HTML elements.

Both are used in the following example.

and

points to the "city" class and will share the same style:

Example :

Paris
Paris is the capital of France

Use of The class Attribute in JavaScript

JavaScript can also use the class name to do particular operations for specific items.

The getElementsByClassName() method in JavaScript allows you to get elements with a given class name:

Example:

Click on a button to hide all elements with the class name "city":


function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}

HTML id Attribute

The HTML id attribute is used to give an HTML element a unique identifier. In an HTML document, you can't have more than one element with the same id.

Using The id Attribute

The id attribute gives an HTML element a unique identifier. The id attribute must have a unique value within the HTML content.

The id attribute in a style sheet is used to identify a specific style declaration. JavaScript also uses it to access and manipulate the element with the given id.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

  <div id="myHeader">My Header</div>

</body>
</html>

Try with example

Note: The name of the id is case-sensitive!

Note: The id name must be at least one character long, cannot begin with a number, and cannot contain any whitespaces (spaces, tabs, etc.).

Difference Between Class and ID

A class name can be used by numerous HTML components on the same page, however an id name can only be used by one HTML element:

Example :

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

  <div id="myHeader">My Cities</div>

<div class="city">
London
London is the capital of England.
</div>
  <div class="city">
Paris
Paris is the capital of France.
  </div>
  <div class="city">
Tokyo
Tokyo is the capital of Japan.
  </div>

</body>
</html>

Try with example

HTML Bookmarks with ID and Links

Readers can use HTML bookmarks to jump to certain areas of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example :

First, create a bookmark with the id attribute:

Chapter 4

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Example :

Jump to Chapter 4

Output:

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

Example:

Jump to Chapter 4

Output:

Using The id Attribute in JavaScript

JavaScript can use the id attribute to execute some operations for that specific element. The getElementById() method in JavaScript allows you to get an element by its id.

Example:


function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}

HTML Iframes

A web page within a web page is shown using an HTML iframe.

HTML Iframe Syntax

The HTML tag specifies an inline frame.</p><p>An inline frame is used to embed another document within the current HTML document.</p><p> </p><p><strong>Syntax:</strong></p><pre><code class="language-plaintext"><iframe src="url" title="description">

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

Example:

My First JavaScript

HTML File Paths

The location of a file in the folder structure of a website is described by a file path.

File Path Examples :

Path	Description
<img src="picture.jpg">	The "picture.jpg" file is located in the same folder as the current page
<img src="images/picture.jpg">	The "picture.jpg" file is located in the images folder in the current folder
<img src="/images/picture.jpg">	The "picture.jpg" file is located in the images folder at the root of the current web
<img src="../picture.jpg">	The "picture.jpg" file is located in the folder one level up from the current folder

HTML File Paths

The location of a file in the folder structure of a website is described by a file path.

When linking to external files, file paths are used, such as:

Web pages
Images Style
sheets
JavaScripts

Best Practice

Use relative file paths whenever possible (if possible).

Your web pages will not be bound to your current base URL if you use relative file paths. All links will function on your local machine (localhost), as well as on your existing and future public domains.

HTML - The Head Element

The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.

-Advertisement-