Nearby lessons
8 of 24📦 HTML <div> Element
📌 What is the <div> Element?
The <div> element is a generic block container used to group HTML elements for styling or scripting.
The <div> element is like an empty box. It groups other HTML elements together so you can style or manage them with CSS or JavaScript. It's super flexible!
📄 <div> Element Example
This example shows three <div> blocks aligned left, center, and right using CSS:
Code Example
PREVIEW READY
📦 Common Uses of <div>
- 📁 Create layout sections (header, footer, sidebar)
- 🎨 Group elements to apply styles
- 🧩 Organize content for JavaScript control
- 🧱 Build grid or flexbox layouts
- 📱 Make content responsive
✅ Best Practices
- 💡 Use semantic elements like
<section>or<article>when they fit - 🚫 Avoid using too many nested
<div>s (called div soup!) - 🔖 Give your
<div>s clear and meaningful class names - 🧼 Prefer CSS classes over inline styles
- ♿ Ensure accessibility when using
<div>for interactive parts - 🆔 Use ARIA roles if you're using
<div>for non-semantic tasks
🔁 <div> vs Semantic Elements
| Attribute | Description |
|---|---|
<header> | 👆 Top section like page or article headers |
<footer> | 👇 Bottom section like footnotes or copyright |
<section> | 📚 Group of related content or topic |
<article> | 📰 Independent content like blogs or news |
<nav> | 🧭 Navigation links like menus or toolbars |
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!HTML Block vs Inline