Learning web technologies one class at a time

HTML

Semantics in front-end development concerns whether to use a div or a header, or if some text should be a paragraph or a heading, or whether a list is to be ordered or unordered, and so on. It’s about elements and not attributes.

When naming your IDs and classes, it is important that you keep the names as “unpresentational” as possible.

For instance, if you want all of your form notification messages to be red, you could give them a class of red. This is fine as long as there are no other red elements on the page. However, say you wanted to style required form labels red as well. You are now forced to guess to which element that class could refer, and things are already starting to get confusing.

Imagine how confusing the code could become if you used presentational elements across the whole site? Continue reading →