This element is used to define a section or block of content, to be able to apply different styles and even allow interaction with it through the use of Javascript, PHP, or any other programming language.
The use of this element is simple, it is only necessary to place the element and enter the content between the opening and closing tags (<div> </div>), you can see below.
Code:
<div>
<h1> Section</h1>
Content of this section.
</div>
Result:
Section
Content of this section.
In the previous example in a visual way the element did not cause any change, but in the general structure of the website we have created an important section. If we take the previous code and the <div> element, we apply CSS styles, specifically a blue border, you will notice the change that was actually made last time.
Code:
<div style="border: solid 1px blue;">
<h1> Section </h1>
Content of this section.
</div>
Result:
Section
Content of this section.
This time as you can see the section is defined by the border blue, this edge in the first example code exists but invisibly.
Classes and Identifiers. We recommend reading the post, here.
Using the above identifiers we can divide some <div> elements of others and thus apply different CSS styles, or modifications through the use of some other type of language as we indicated at the beginning of the post, you can see an example below.
Code:
<style>
#section1 {
border: solid 1px blue;
margin: 5px;
padding: 5px;
}
.section2 {
border: solid 1px red;
margin: 5px;
padding: 5px;
}
</style>
<div id="section1">
<h1> Section 1 </h1>
Content of this section.
</div>
<div class="section2">
<h1> Section 2 </h1>
Content of this section.
</div>
Result:
Section 1
Content of this section.Section 2
Content of this section.
As you can see, to use one of the two identifiers it is only necessary to add the attributes, id or class as the case may be, (id = "name", class = "name").