search

hamishv3000 / prj-rev-bwfs-dasmoto

0 stars 0 forks source link

HTML Sections #2

Open martoio opened 7 years ago

martoio commented 7 years ago

Your HTML is correct, but there is one thing you could do to improve it. Currently, each section has the same sort of pattern: h2, img, h3, p. So we can extract those and put them into a div to make it clear that each one is a section. It would look something like:

<!-- First section -->
<section> <!-- or <div>, but <section> is more semantic -->
  <h2 class="brushes">Brushes</h2>
  <img src="#" alt="#" />
  <h3>Text</h3>
  <p>
    Lorem <span class="price">ipsum</span>
  </p>
</section>

Your page won't change visually, but your code is much more semantic and more professional. It will also make it easier to make any changes in the future, (e.g. if you want to extract the section div to use as a template).

If you want to be completely semantic, you would replace the div with the <section> element in HTML5.

If you are interested in learning more about what 'semantic HTML' means, take a read here: http://www.hongkiat.com/blog/html-5-semantics/

https://github.com/hamishv3000/prj-rev-bwfs-dasmoto/blob/d7d09e0efa19c1c663d34bbf428be7d6e871ef78/DasmotosArtsAndCrafts/index.html#L10-L15

hamishv3000 commented 7 years ago

Thanks for this feedback. I've made the necessary changes on my local copy of HTML and CSS code. Using div element makes more sense. I was able to learn more on our to make the necessary changes in CSS. I will read more on how to use the section element and thanks for providing the article as well.