logo

modern front end tech

divs, classes and ids in HTML

In this chapter you are going to learn:-

What is div element in HTML?

The <div> element is a block-level container used to group together HTML elements. It is commonly used for styling and layout purposes, allowing developers to apply CSS styles or JavaScript functionality to a specific section of a webpage.

What are examples of div element in HTML?

Here are some examples of how the <div> element can be used in HTML:

                
                 <div class="container">
                 <h1>Welcome to My Website</h1>
                 <p>This is a sample paragraph inside a div element.</p>
                 </div>
                 
        

What is class attribute in HTML?

The class attribute is used to assign one or more class names to an HTML element. Classes are used to group elements together for styling with CSS or for manipulation with JavaScript. Multiple elements can share the same class name.

remember we can also give same classes to different elements

What are examples of class attribute in HTML?

Here are some examples of how the class attribute can be used in HTML:

                
                 <div class="header">
                 <h1>My Website Header</h1>
                 </div>

                 <div class="content">
                 <p>This is the main content area.</p>
                 </div>

                 <div class="footer">
                 <p>Footer information goes here.</p>
                 </div>
                 
        

What is id attribute in HTML?

The id attribute is used to assign a unique identifier to an HTML element. Each id must be unique within a webpage, meaning no two elements can have the same id. The id attribute is often used for styling with CSS or for targeting specific elements with JavaScript.

remember we can give same id to every element

What are examples of id attribute in HTML?

Here are some examples of how the id attribute can be used in HTML:

                
                 <div id="main-header">
                 <h1>Welcome to My Website</h1>
                 </div>

                 <div id="main-content">
                 <p>This is the main content area.</p>
                 </div>

                 <div id="main-footer">
                 <p>Footer information goes here.</p>
                 </div>
                 
        
our youtube channel+