The HTML class attribute is often used to give an HTML element a class. A class can be shared by multiple HTML elements.
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>
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>Note: The class name is case sensitive!
Tip: Our CSS Tutorial will teach you a lot more about CSS.
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>
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>
The same class name can be referenced by many HTML elements.
Both are used in the following example.
points to the "city" class and will share the same style:
Example :
Paris
Paris is the capital of France
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";
}
}
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.
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>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.).
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>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 4Output:
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
Example:
Jump to Chapter 4
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!";
}
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:
JavaScript makes HTML pages more dynamic and interactive.
Example:
My First JavaScript
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:
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.
The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.