I’m currently reading the 2nd edition of “BUILD YOUR OWN WEBSITE THE RIGHT WAY USING HTML & CSS” by Ian Lloyd in an attempt to learn how to build and run my own website. I’ve run into divs and I don’t understand the purpose of them. Are they purely cosmetic or do they actually serve a purpose within the structure of the site. Any help would be greatly appreciated!
Hi aarond. Welcome to the forums. 
Divs are very useful (basically essential) for being able to group elements for styling purposes. If you want anything other than a plain web page with title, text below etc. then you’ll want to group elements with divs to create headers, footers, columns and so on. There are new elements in HTML that perform the same tasks (theoretically with extra semantics) like <header>, <footer>, <section>, <article>, <aside> and so on, but there are still lots of uses for divs.
Thank you ralph.m for the welcome and the info.
In addition to what Ralph has said:
A DIV is a semantically neutral ( it literally means nothing) block level element; it is the block level equivalent of a SPAN. They can be a great way to group other semantic elements for layout purposes , and/or as CSS hooks. But be careful not to overuse and fall pray to the dreaded ‘divitis’
Use divs to groups things together that belong together, for instance, if there are several similar groups. For instance, these three similar groups have their own div:
<div class="box">
<h3>A Title 1</h3>
<p>Content about the title goes here. Content about the title goes here.</p>
</div>
<div class="box">
<h3>A Title 2</h3>
<p>Content about the title goes here. Content about the title goes here. Content about the title goes here.</p>
</div>
<div class="box">
<h3>A Title 3</h3>
<p>Content about the title goes here. Content about the title goes here.</p>
</div>
Now you can stylize the divs attractively in your <head>:
<style type="text/css">
.box {
margin: .5em;
padding: .5em;
border: 1px solid #000; border-radius: 8px;
width:25%;
float:left;
background-color:#ccc;
}
</style>
If you give each div a different class name, then you can style them differently. For instance you could style the background color differently.
<style type="text/css">
.box1, .box2, .box3 {
margin: .5em;
padding: .5em;
border: 1px solid #000; border-radius: 8px;
width:25%;
float:left;
}
.box1 {background-color: red;}
.box2 {background-color: yellow;}
.box3 {background-color: green;}
</style>
The complete test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
.box {
margin: .5em;
padding: .5em;
border: 1px solid #000; border-radius: 8px;
width:25%;
float:left;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="box">
<h3>A Title 1</h3>
<p>Content about the title goes here. Content about the title goes here.</p>
</div>
<div class="box">
<h3>A Title 2</h3>
<p>Content about the title goes here. Content about the title goes here. Content about the title goes here.</p>
</div>
<div class="box">
<h3>A Title 3</h3>
<p>Content about the title goes here. Content about the title goes here.</p>
</div>
</body>
</html>