DEV Community: Amol Sasane

Stop Using
for Everything!

Amol Sasane — Sun, 17 Aug 2025 15:23:23 +0000

Have you ever opened your old HTML project and seen nothing but a sea of <div> tags? That’s called “ div soup” and trust me, we’ve all been there.

While <div> is useful, overusing it makes your code harder to read, maintain, and understand. More importantly, it gives zero meaning to browsers, search engines, and screen readers.

The good news? HTML already provides semantic tags designed for specific purposes. Let’s explore them! 🚀

Why Not Just `<div>` ?

⚠️ <div> is non-semantic. It doesn’t describe its content.
According to the W3C:

“The div element has no special meaning at all…Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.”

Example:

<div class="header">My Website</div>

👎 This tells nothing to a search engine or screen reader.

Instead, use:

<header>My Website</header>

👍 Much more meaningful, tells the browser 'This is the Header of the website!'

Semantic HTML Tags to Use Instead of `<div>`

Benefits of Using Semantic Tags:

✅Better SEO (search engines understand your structure).
✅Better Accessibility (screen readers can announce meaningful sections).
✅Easier Maintainability (cleaner, structured code).
✅Improves collaboration (developers quickly understand sections).

Let’s explore a few of the more semantic alternatives to the <div> tag.

<header> - Represents top section of a page or section.

<header>
  <h1>My Website</h1>
  <nav> ... </nav>
</header>

<nav> - Defines navigation links.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

<main> - Represents main content of the page (one per page).

<main>
  <article> ... </article>
</main>

<section> - Groups related content with a heading.

<section>
  <h2>Features</h2>
  <p>Our app has amazing features...</p>
</section>

<article> - Independent, reusable content unit.

<article>
  <h2>Blog Title</h2>
  <p>Blog content goes here...</p>
</article>

<aside> - Side content related to the main content.

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li>Post 1</li>
    <li>Post 2</li>
  </ul>
</aside>

<footer> - Bottom of page/section.

<footer>
  <p>© 2025 My Website</p>
</footer>

<figure> - Groups media (image/video) with caption.

<figure>
  <img src="mountain.jpg" alt="Mountain view">
  <figcaption>A peaceful mountain view</figcaption>
</figure>

<address> - Defines contact info.

<address>
    <strong>ABC HQ</strong>
    123, XYZ Street, Pune, India
    Phone: +911234567890">
</address>

<details> - Disclosure widget to hide/reveal content.
<summary> - Used with to provide a clickable summary.

<details>
  <summary>Read more</summary>
  <p>This is the hidden content.</p>
</details>

And many more...

Before vs. After

❌ Div Soup:

<div class="header">
  <div class="nav"> ... </div>
</div>
<div class="main">
  <div class="section"> ... </div>
</div>
<div class="footer"> ... </div>

✅ Clean, Semantic HTML:

<header>
  <nav> ... </nav>
</header>
<main>
  <section> ... </section>
</main>
<footer> ... </footer>

Example of Underrated Tags in Action:

<section>
  <h2>Frequently Asked Questions</h2>

  <details>
    <summary>What is Semantic HTML?</summary>
    <p>Semantic HTML uses tags that have meaning, making code easier to read, maintain, and optimize.</p>
  </details>

  <details>
    <summary>Why not just use div?</summary>
    <p>Because div doesn’t describe content. Semantic tags make your content accessible and SEO-friendly.</p>
  </details>
</section>

Conclusion

You don’t have to throw <div> out completely, it still has its place for grouping and styling when no semantic tag fits. But if you find yourself reaching for <div> by default, pause and ask:

👉 Is there a semantic tag that describes this content better?

Because at the end of the day, HTML tags isn’t just for humans, it’s for browsers too.

Write code that tells a story. ✨

For more such blogs.. Click Here

Understanding CSS Box Model

Amol Sasane — Tue, 28 May 2024 13:46:35 +0000

CSS Box Model is a fundamental concept in web development that plays a crucial role in how elements are displayed and laid out on a webpage. In this blog, we will explore the CSS Box Model, its components, and how it affects the layout and sizing of HTML elements.

What is the CSS Box Model?

The CSS Box Model is a way of representing every HTML element as a rectangular box showing it's occupancy and position on the web page. This model consists of four essential components as shown in the above picture:

Content: The actual content of the element, such as text or an image.
Padding: The transparent space around the content inside the box.
Border: A line that surrounds the padding and content.
Margin: The transparent space outside the border, creating space between elements.

Understanding Each Component:

Let's take a closer look at each component of the CSS Box Model:

Content: The content area is where the actual content of the element resides. Its size is determined by the element's width and height properties.
Padding: Padding is the space between the content and the element's border. It can be set using the 'padding' property and is useful for creating space within an element.
Border: The border surrounds the padding and content, acting as a visible boundary for the element. You can define the border's size, style, and color using the 'border' property.
Margin: The margin is the transparent space outside the border, creating the space between elements. It can be set using the 'margin' property.

Box Model Illustration:

Consider the following example:

HTML

<div class="box">
    This is the content of the box
</div>

CSS

.box {
     width: 10rem;
     height: 3rem;
     padding: 1rem;
     border: 5px solid blue;
     margin: 2rem;
}

Output

Here, in the above example we have created a container using 'div' tag in HTML and added a CSS stylesheet to it having properties width, height, padding, border and margin respectively set to it's perticular given values.

To understand the specific style given to it, consider the following picture:

Here, the blue colored area shows the width and height of the actual content. The green colored area shows the padding given to it. The purple outline is the border and lastly the orange colored area outside the border is the margin applied to it.

Conclusion:

So, the next time you find yourself grappling with layout challenges, remember that the CSS box model is your trusty toolkit for building pixel-perfect designs that leave a lasting impression.

For more such blogs click here

Color Psychology In Web Design

Amol Sasane — Tue, 28 May 2024 13:22:01 +0000

In the vast and competitive world of web design, creating a visually appealing and engaging website is crucial to attracting and retaining users. While various elements contribute to the overall design, the strategic use of colors plays a significant role in shaping the user experience. Understanding the psychology of color and its impact on human emotions and behavior can empower web designers to make informed choices that resonate with their target audience. In this blog, we delve into the fascinating world of color psychology in web design and explore how specific colors can evoke different feelings, thoughts, and actions.

The Basics of Color Psychology:

In this blog, we'll cover the fundamental principles of color psychology, explaining how colors are perceived by the human brain and the emotions they can trigger. This will set the groundwork for the subsequent sections where we'll explore the application of color psychology in web design.

Choosing the Right Color Palette:

It is important to select an appropriate color palette for a website. There are various color schemes, such as monochromatic, complementary, analogous, and triadicres. They have different effects on user experience. Additionally, the significance of cultural differences and certain colors can be interpreted differently in various parts of the world.

Using Colors to Evoke Emotions:

Red : Evokes energy, urgency, and passion.
Blue : Symbolizes trust, tranquility, and professionalism.
Yellow : Radiates optimism, happiness, and warmth.
Green : Represents nature, growth, and harmony.
Purple : Signifies creativity, luxury, and mystery.
Orange : Conveys enthusiasm, creativity, and affordability.
Black : Implies sophistication, power, and elegance.
White : Symbolizes purity, simplicity, and cleanliness.

Applying Color Psychology to Different Industries:

Examples of how color psychology can be applied to web design in various industries are like for instance, using blue tones can be advantageous for financial institutions and vibrant and energetic colors might suit websites for entertainment and sports industries.

Avoiding Color Pitfalls:

Even though color psychology can be a powerful tool, it can also be misused if not applied thoughtfully while using colors in web design. For instance, using too many conflicting colors, clashing with branding guidelines, or inadvertently triggering negative emotions.

Conclusion:

So, we have gone through the color psychology in web design by understanding how colors can influence user behavior and emotional responses, you can create visually stunning and emotionally compelling websites that leave a lasting impact on your visitors.

For more such blogs click here

DEV Community: Amol Sasane

Stop Using for Everything!

Why Not Just <div> ?

Semantic HTML Tags to Use Instead of <div>

Before vs. After

Conclusion

Understanding CSS Box Model

What is the CSS Box Model?

Understanding Each Component:

Box Model Illustration:

Conclusion:

Color Psychology In Web Design

The Basics of Color Psychology:

Choosing the Right Color Palette:

Using Colors to Evoke Emotions:

Applying Color Psychology to Different Industries:

Avoiding Color Pitfalls:

Conclusion:

Stop Using
for Everything!

Why Not Just `<div>` ?

Semantic HTML Tags to Use Instead of `<div>`