What are div tags?
In previous episodes, we have learnt that we use tags like h, p, img, etc to signify the purpose of that piece of code. For example, h is used for headings, p is used for paragraphs and img is used for images but sometimes, we have to design components which don’t have an appropriate tag existing for them. This is where we use divs.
Let’s say that you want to create a display card on your website, HTML provides no built-in tag <card> for this purpose so we will use a <div> tag to enclose all the code that contributes to making the card.
<div> <h1>Card Heading</h1> <p>This is the description of the card.</p> </div>
When you will learn CSS in our Conquer CSS series, you will learn that we add styles to the elements of HTML by targeting them with selectors like IDs and Classes.
Classes and IDs allow you to apply the same styles to different HTML elements without actually writing the CSS code multiple times.
The example below illustrates how to add IDs and Classes to HTML tags.
<div class=”card”> <h1 id=”heading”> Card Heading </h1> <p class=”description”> This is the description of the card. </p> </div>
Now we can use the above code to add styles to the card using CSS.
To know more how HTML selectors work in detail, refer to this post from our Conquer CSS series: CSS Selectors Explained
ID is also used to create bookmarks, you must have seen that some websites with long web pages provide a back to top button that leads you back to top of the website. This is made possible using IDs.
For example, in the above code, if we want to provide a link on the same page that scrolls to that card, we can make a link with the ID of the HTML element in it’s href attribute.
<a href="#heading">Jump to Card Heading</a>