If you learn only one HTML tag from this course, make it div. In LWC development, you'll use it in almost every component you build.
Remember from the Tags topic that whitespace doesn't matter in HTML. If you write three words on three separate lines, the browser still puts them all on one line:
<body>
Sales Cloud
Service Cloud
Marketing Cloud
</body>All three show up next to each other: "Sales Cloud Service Cloud Marketing Cloud" - no separation at all. The browser ignores your line breaks. So how do you actually separate things on a page?
div wraps content into a block. Each block starts on a new line:
<body>
<div>Sales Cloud</div>
<div>Service Cloud</div>
<div>Marketing Cloud</div>
</body>Now each one sits on its own line. That's the core purpose of div - it groups content into a block and separates it from everything else.
The real power of div is that you can nest them to build layouts. Think of it like boxes inside boxes. Here's a simple page layout with a header and two sections:
<div>
<div>CloudForce Consulting</div>
<div>
<div>About Us</div>
<div>We help companies implement Salesforce.</div>
</div>
<div>
<div>Services</div>
<div>Sales Cloud, Service Cloud, Custom LWC</div>
</div>
</div>The outer div wraps the entire page. Inside it, three divs create the header, about section, and services section. Each section has its own nested divs for the title and content.
This nesting pattern is exactly how LWC components work. Every LWC template is basically a tree of nested elements, and div is the building block you'll use to structure them.
This is important: div has no special meaning. It doesn't make text bold, doesn't create a link, doesn't display an image. It just groups things into a block. That's it.
The name probably comes from "division" - it divides content into sections. Later, when we add CSS, we'll use div to control layout, spacing, colors, and everything visual. But on its own, it's just a container.