search

86highlander / Dasmotos-Arts-And-Crafts

0 stars 0 forks source link

Sections #2

Open martoio opened 6 years ago

martoio commented 6 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/86highlander/Dasmotos-Arts-And-Crafts/blob/d3bc3b60c093f030af5b863925cbcd0550fdc2af/index.html#L11-L14

86highlander commented 6 years ago

Thanks for the feedback. I have not gone over HTML5 but appears on reading it is more particular about using header, footer, section, article, aside which means it communicates more in the code about the content. Suppose easier to then decide to apply a different class or #id to a section.