Quick question on structure of the html document. I felt like the h3 sections would be indented off the h2 sections. Looking at the answer I see they keep the h2 ,h3, and ,p elements on the same indentation. Just curious why or if indenting is also ok. Thank you for reviewing the code too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" href="./Resources/Css/index.css">
</head>
<body>
<div>
<h1>Dasmoto's Arts & Crafts</h1>
</div>
<div class="items">
<h2 id="brush">Brushes</h2>
<img src="./Resources/Images/hacksaw.jpeg" alt="A stack of hacksaw paintbrushes">
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold
paint in large amounts. Available in different sizes.<span id="price"> Starting at $3.00 / brush.</span></p>
</div>
<div class="items">
<h2 id="frames">Frames</h2>
<img src="Resources\Images\frames.jpeg" alt="Multiple picture frames of varying sizes">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be
sanded and painted according to your needs.<span id="price"> Starting at $2.00 / frame.</span></p>
</div>
<div class="items">
<h2 id="paint">Paint</h2>
<img src="Resources\Images\finnish.jpeg" alt="Finnish paint tubes on table with used paintbrush">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean
Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.<span id="price"> Starting at
$5.00 / tube.</span></p>
</div>
</body>
</html>
As far as the structure of the html goes, I typically like to think of it as so:
<------Wrapping div
<----Could be an h2, h3, or p
<----Could be an h2, h3, or p
<------Another div or ul / ol
<------ li or p depending on document structure
</inner parent>
For me, the indentation is more about wrapping and unwrapping layers of divs / containers rather than thinking about logical content breakpoints in the document. In this instance specifically, I think your h3, h2, and p’s should all be at the same indentation level because they are all siblings in the wrapping divs.
Ahhh, ok that makes sense. I was looking at it a bit too literally with the h1, h2 etc and thinking of it as a sub heading or subset within an h1 element. Appreciate your feedback. Thank you for taking the time!
Sorry, it looks like part of my post was interpreted incorrectly by the Codecademy comment box, haha. I originally had a structure like the following (substitute the “[” for opening and closing “<”; hopefully it will get rendered this time:
[parent] ← div
[child /] ← h2
[sibling /] ← p
[inner parent] ← ul
[child /] ← li
[/inner parent]
[/parent]