Could you please help me by reviewing my code? Thank you!

I would like to know if I am using the appropriate tags, semantics, structure. Is my code readable? I really appreciate your suggestions. Thank you.
Also, this is my first post, so I don’t know how to publish the pure code; so I added a space in between the tag name and the left angular bracket. If you know how to publish the pure code here, please let me know, thanks!

HTML:
< !DOCTYPE html>
< html>
< head>
< meta charset=“utf-8”>
< !–Title of website–>
< title>Dasmoto’s Art and Crafts
< !–Insert keywords and description for website–>
< meta name=“keywords” content=“Arts and crafts, dasmoto, dasmoto arts and crafts”>
< meta name=“description” content=“E-commerce website for Dasmoto Arts and Crafts”>
< !–Attach external css file–>
< link rel=“stylesheet” type=“text/css” href=“style.css”>
< /head>

< body>
< !–Header text goes here–>
< header>
< h1>Dasmoto’s Arts & Crafts
< /header>
< !–Create main section for website–>
< main>

	< !--Divide section into three to store the three categories-->
	< !--First section of the three categories-->

	< section class="brushes">
		< !--Make header for brushes section-->
		< h2 class="brush-bar">Brushes</h2>
		< !--Insert image file with alt text-->
		< img src="Images/hacksaw.webp" alt="paint brushes">
		< !--Provide name and information for image-->
		< p class="bold-items">Hacksaw Brushes< /p>
		< 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 class="price">Starting at $3.00 / brush.</span></p>
	< /section>
	< !--Second section of the three categories-->
	<section class="frames">
		< !--Make header for frames section-->
		< h2 class="frame-bar">Frames</h2>
		< !--Insert image file with alt text-->
		< img src="Images/frames.webp" alt="colorful picture frames">
		< !--Provide name and information for image-->
		< p class="bold-items">Art Frames (assorted)</p>
		< p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.<span class="price">Starting at $2.00 / frame.</span></p>
	< /section>
	< !--Third section of the three categories-->
	< section class="paint">
		< !--Make header for paint section-->
		< h2 class="paint-bar">Paint</h2>
		< !--Insert image file with alt text-->
		< img src="Images/finnish.webp" alt="colorful picture frames">
		< !--Provide name and information for image-->
		< p class="bold-items">Clean Finnish Paint</p>
		< 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 class="price"> Starting at $5.00 / tube.</span>< /p>
	< /section>
	< !--End of the three categories-->
< /main>
< !--End of the main section-->

< /body>
< /html>

CSS:
body { /Set background color, font and margin/
background-color: #ffffff;
margin: 2em 1em 2em 1em;
font-family: Helvetica;
overflow-x: hidden;
}

h1 { /Style and size h1 text and image/
background-image: url(Images/pattern.webp);
font-size: 100px;
text-align: center;
font-weight: bold;
color: khaki;
}

.brush-bar { /Style and size brush text and background color/
background-color: mediumspringgreen;
font-size: 32px;
font-weight: bold;
color: white;
}

.frame-bar { /Style and size frame text and background color/
background-color: lightcoral;
font-size: 32px;
font-weight: bold;
color: white;
}

.paint-bar { /Style and size paint text and background color/
background-color: skyblue;
font-size: 32px;
font-weight: bold;
color: white;
}

.bold-items { /size name of image/
font-size: 18px;
font-weight: bold;
}

.price { /Style price information/
color: blue;
font-weight: bold;
}

Hello @tayhiggins2885318509 , welcome to the forums! Please see this post on how to format code in the forums

1 Like