HTML Tutorial: Understanding DIV Tag, ID, and class Attributes

HTML Tutorial: Understanding DIV Tag, ID, and class Attributes

byRAYS CODING -
0
In this HTML tutorial, we will discuss HTML Div Tag, ID, and Class Attributes. Let's see what Div Tag ID and Class Attributes are and how to use HTML Div Tag, ID, and Class Attributes.

HTML TUTORIAL

DIV Tag

Div Tag is a block-level container that is used to manage the content of web pages. Inside the div tag, we use other HTML tags like anchor tag <a>, paragraph tag <p>, heading tag <h1>, image tag <img>, and table tag <table> to add content to the web pages. The default display property of the div tag is the display block. It means if two div tags are used then the content of the second div will start from the next line.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
    </head>
    <body>
        <div class="para_1">
            <h3>dummy content</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="para_2">
            <h3>dummy content</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus eaque reiciendis laudantium perferendis. At veritatis quibusdam amet quos debitis molestias minima nulla accusantium in incidunt, sequi dignissimos voluptate soluta.</p>
        </div>
    </body>
    </html>




HTML TUTORIAL

ID Attribute

The ID attribute provides a unique identifier to the HTML element. It is used when you need to apply a specific style or functionality to a single element. Each ID must be unique within the document.

ID is an attribute that is used in HTML tags. The ID attribute is used only when we need to implement a specific functionality on the content of a tag or we can also say that we need to implement a specific functionality on the tag.

Suppose there are 5 paragraphs on a web page and you want to add some different style (CSS) on the second paragraph, then you can do it with the help of the ID attribute.

ID is unique on any web page. As I told you, if there are 5 paragraphs on a web page, then the value of the ID of all the paragraphs will be different.

Example:- Suppose you want to hide the second paragraph with the click of a button then you can hide it by changing the value of the ID attribute of the paragraph.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
        <style>
            body{
                background: aliceblue;
            }
        </style>
    </head>
    <body>
        <div id="para_1">
            <p>paragraph 1 . Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div id="para_2">
            <p>paragraph 2 .Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus eaque reiciendis laudantium perferendis. sequi dignissimos voluptate soluta.</p>
        </div>
        <div id="para_3">
            <p>paragraph 3 . Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div id="para_4">
            <p>paragraph 4 .Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus eaque reiciendis laudantium perferendis. sequi dignissimos voluptate soluta.</p>
        </div>
        <div id="para_5">
            <p>paragraph 5 . Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div>
            <button id="hideparagraph" onclick="hide()">CLICK</button>
        </div>
        <script>
            function hide(params) {
                document.getElementById('para_2').style.display='none';
            }
        </script>
    </body>
    </html>


In the above code, you can see that I have written the code to hide the second paragraph with the help of JavaScript at the click of a button.

But I am not hiding the paragraph but I am hiding the div with the value of ID attribute.

HTML TUTORIAL

Class Attribute

The Class Attribute, like the ID Attribute, is used to apply specific functionality, but you can use one class in multiple places on a web page.

This means if paragraphs five and two have the same class attribute value across the page, whatever functionality is applied to either paragraph based on the value of the class attribute will apply to both paragraphs.

Note:- A paragraph can have more than one value of the class attribute.

 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML TUTORIAL</title>
        <style>
            body{
                background: aliceblue;
            }
        </style>
    </head>
    <body>
        <div id="para_1">
            <p class="insidePara1  para">paragraph 1 . Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div id="para_2">
            <p>paragraph 2 .Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus eaque reiciendis laudantium perferendis. sequi dignissimos voluptate soluta.</p>
        </div>
        <div id="para_3">
            <p class="insidePara1">paragraph 3 . Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div id="para_4">
            <p>paragraph 4 .Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatibus eaque reiciendis laudantium perferendis. sequi dignissimos voluptate soluta.</p>
        </div>
        <div id="para_5">
            <p class="para">paragraph 5 . Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div>
            <button id="hideparagraph" onclick="hide()">CLICK</button>
        </div>
        <script>
            function hide(params) {
                var paragraphs = document.getElementsByClassName('insidePara1');
                for (var i = 0; i < paragraphs.length; i++) {
                    paragraphs[i].style.color = 'red';
                    paragraphs[i].style.fontSize = '20px';
                }
            }
        </script>
    </body>
    </html>


HTML TUTORIAL

Conclusion

By now you must have understood how you can manage the content of a web page using Div Tag, Class Attribute, and ID attribute in HTML.


Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement