First of all I am quite new here and to HTML/CSS but so far I am enjoying it to the fullest. I have read a freecodecamp article about semantic HTML. The article advises to replace div elements as much as possible with elements like header, article and so on.
Is it considered best practice to also assign those semantic elements class and id attributes where needed or should these elements remain clear of attributes and put those attributes in the elements children?
If you wish to give semantic elements ID’s and classes, then I say go for it. It all depends on how with you wish to style your HTML.
The next best thing you can do after using semantic HTML elements is to use descriptive ID and class names. It improves the readability of your code tenfold.
Right, so basically the semantic elements are a better version of div’s. Thanks for the info! I have seen that semantic tags makes the code readable a whole lot more. Perhaps something to add in the challenges? I feel like they are underlighted a bit.
No problem! It’s awesome that you’re thinking of ways to improve the accessibility of your code, and believe me when I say that using semantic HTML is a great way to achieve this. Where you insert ID’s and classes does nothing to improve the accessibility, and can vary greatly from project to project. It all depends on the scope of where you want your styling to be applied.
Like I said previously, you can take accessibility a step further by using descriptive ID and class names, inserting comments in your code and using accessible friendly parameters like alt and perhaps friendly color schemes on your website that help with color-blind individuals.
You’re heading in the right path with your mindset, and we need more accessible conscious individuals like yourself. Great job and keep it up