Div Tags ?

Div Tags are non-semantic tags and used to wrap any content or any section of a webpage In simple terms, div means division. In the past, for developing a webpage, we needed to divide it (like visually separate it not physically..hahhaha) into small sections(like header or navbar or sidebar or footer) and then we develop those small sections individually by wrapping it inside a div tag.
Nowadays, we have header or footer tags like semantic tags for us to use.

But still div tag is the most used tag in html as we need to wrap a lot of block level elements to apply css or make it look beautiful as per design, also it is needed to wrap contents even inside a semantic tag.. You can use as many div tag as you want in any html file or webpage.

Syntax and Usage :

To use the <div> tag, simply include it in your HTML markup with an opening and closing tag.
Within the <div> tags, you can include any other HTML elements, such as text, images, headings, lists, or even other <div> tags. The <div> tag acts as a container for these elements, allowing you to group and manipulate them together. Here's an example: 

<div> A new day.</div>

<header>
  <div> A div wrapping content inside semantic header tag.</div>
</header>

<div>
  <p> Life is a learning.</p>
  <p> Life is amazing.</p>
  <p> Life is funny.</p>
</div>
Styling with CSS :

One of the primary purposes of using <div> tags is to apply styling using CSS. You can add class or ID attributes to your <div> tags to target them specifically in your CSS stylesheets. This allows you to control the layout, positioning, colors, and other visual aspects of the content within the <div>. 

<div class="container">
    <!-- Content goes here -->
</div>
.container {
    /* CSS styles */
}
Benefits of Using <div> Tags :

Using <div> tags offers several benefits in web development:

1. Structure and Organization : <div> tags help create a well-structured and organized layout for your web page, making it easier to manage and maintain.

2. Flexibility and Versatility : <div> tags can be used in various ways, such as creating columns, sidebars, headers, footers, or any other structural element you require.

3. Separation of Concerns : By separating content into different <div> tags, you can apply targeted styling and functionality without affecting other parts of the page.

Best practices :

When working with <div> tags, it's important to follow these best practices:

Semantic HTML : Use <div> tags judiciously and ensure they are used for non-semantic purposes, such as layout and styling, rather than for structural elements like headings or lists.

Meaningful Class and ID Names: Choose descriptive class and ID names for your <div> tags, making it easier to understand their purpose and differentiate them in your stylesheets.

Keep Code Readable: Maintain proper indentation and formatting to improve code readability, especially when nesting multiple <div> tags.



Note::
Please do not forget that div tags are block level element. And if you remember, it has top/bottom/right/left extra margins and paddings by default.
FYI :: These extra margins and paddings we need to remove from all block elements and then only UI will be consistent and follow css box model, obviously when we go to css.

PrevNext