From C to C++, C# to Java, Python to JavaScript, there are a countless number of programming languages that are constantly updated and developed to meet the ever-changing needs of modern society. One of the most pivotal coding scripts that acts as the base of programming knowledge is HTML (HyperText Markup Language) As far back as most programmers and coders can recall, HTML was most likely their entry to the world of coding scripts. HTML was the foundation on which our education programming is built as it was easy to understand and learn, and very straightforward. In this article, we will be showing you how you can use the HTML ‘div’ tag and control them with classed and ids. If you are new to this concept, it may sound foreign but it gets easier and easier as we proceed. So, without further ado, let us begin!
Table of Contents
What is ‘div’ in HTML?
The HTML div tag simply stands for ‘division.’ The div tag is essentially used to divide content into logical sections. That is all there is to this concept as it divides sections of code into segments. In essence, we use the div tag to group content into specific sections that are determined by the coder.
One factor to note is that like most other tags used in HTML, the div tag is of a closed kind, that is, <div>…</div> This tag is one of the most used tags by HTML developers as you can witness it in the code of every website or program created by this specific programming language.
Another way to visualize this is to picture the creation of a building, in which you would logically divide it into floors, rooms, stairs, and other structures. Similarly, the construction of an HTML program is also divided in such a manner by using the div tag.
This tag is known to be versatile as it can store multiple data and content types within it, including text, images, audio, video, etc. Before we dive any further, let us look at a few examples of how this HTML div tag can be used in our code.
HTML div tag examples:
<html>
<head>
<title> Sample for div </title>
</head>
<body>
<img src=“img/divisiontag.jpg” alt=“Division sample”>
<h1> This is sample text </h1>
<p> Sample text pt.2 </p>
<h2> Division tag can be used to divide content </h2>
<h3> The HTML div tag is easy to understand </h3>
<p> Try it out with us </p>
</body>
</html>
In the above code snippet, you can see just a generic version of any HTML code. You can now add the div tag to divide and group contents of that group into different segments that you choose. Considering the above example, it would look something like the following:
<html>
<head>
<title> Sample for div </title>
</head>
<body>
<div>
<img src=“img/divisiontag.jpg” alt=“Division sample”>
<h1> This is sample text </h1>
<p> Sample text pt.2 </p>
</div>
<div>
<h2> Division tag can be used to divide content </h2>
<h3> The HTML div tag is easy to understand </h3>
<p> Try it out with us </p>
</div>
</body>
</html>
Dividing content at this basic level will have no visual impact on the output whatsoever but that is because we are using the HTML div tags as standalone tags. It becomes really useful and convenient as we begin using them with ids and classes.
Why use HTML div tags?
I believe there are three main reasons why one would use a div tag within their HTML code. They are as follows:
- As we discussed earlier, to logically divide content into sections so that it is easier for the programmer to come back into the code and know where everything is, and how everything has been segregated.
- If and when you start using CSS, it will become a little easier to adapt certain styles to elements in a document. For instance, when content is divided into segments, especially when they are paired with ids and classes.
- For purely semantic reasons. As you continue using div tags in your code, you will continue to learn how the content within each div tag can be given a different styles and forms, acting as unique identifiers, and how this can help you sort through your code
How to modify HTML div tags>
Any div tag will not have any visual consequence unless you assign any modifying value to it, or define any visual characteristics. To do this, you will need to make the changes in CSS for that particular div. For instance, consider the following as your code:
<html>
<head><title> Div Tga</title>
<link href=“style.css” rel=“stylesheet” type=“text/css”/>
</head>
<body>
<div>
<p> Division Tag </p>
</div>
</body>
</html>
This, in itself, will not lead to any visual change unless you make the following changes to your div tag in CSS:
div{
background-color:#ff0000;
height:150px;
width:150px;
}
OUTPUT
You could then proceed to do lots of different modifications to your div tags like the aforementioned example. Remember: when you assign certain attributes to ‘div’ in CSS, all tags named ‘div’ will adopt those attributes. Hence, if you were to have multiple div HTML div tags in your code, all of them would have the same formatting. In order to format individual div tags in different manners, we need to categorize those tags into classes. The following method is how you make a div class and id.
Step 1:
Add the ‘class’ attribute to your desired div tags. Multiple div tags with the same value of class will all inherit the same formatting from CSS. For example,
<div class=“text”> Division Tag </div>Step 2:
Create the class attribute to your desired div in CSS like so,
div.text{
background-color:#ff0000;
height:150px;
width:150px;
}
Step 3:
To create an id, you need to assign an id to the desired div tag. You can do this by using the following method:
<div class=“text” id=“main”> Division Tag </div>Step 4:
Similar to the creation of classes, you may now add the id to the desired div tag in CSS. Ids are created to pick and choose which particular div tags you would like to bring out a specific modification in.
div#main{
background-color:#ff0000;
}
Conclusion:
After reading this article, you should have gotten a gist of what HTML div tags are, how these tags can be used, how they can be manipulated and modified, and how they can be utilized to the best of the programs’ abilities. This being HTML, it will be one of the easiest concepts you may come across in your journey of learning programming languages but at the same time, it is also one of the most important features of HTML. With the use of classes and ids, it provides impeccable control to the programmer on individual components of the code and lets the coder manipulate it to the slightest detail and that is precisely why, the HTML div tag feature is one of the most widely used functions within this programming language that programmers and developers alike swear by.