Classes and IDs are useful for labeling elements, but a disorganized, overuse of classes and IDs can result in an HTML file that is difficult to read. We need a way of organizing the contents of the HTML file. This will help:
- Keep HTML code easy to read.
- Group elements that belong together.
HTML offers an element that is the backbone of code organization: the div, represented by
<div> in HTML.
You can think of the div as a box, or container, that groups elements that belong together.
For example, a
<div> can be used to group together all of the elements that make up the navigation for a web page, or any other section of a page.
<h1>Alice In Wonderland</h1>
<p> ... </p>
In the example above, a heading for "Alice In Wonderland" and a brief paragraph description of the book are contained within a single
<div>. If more books were to appear on the page, additional divs could be used to organize them. This would keep the code easier to read, maintain, and style.