Semantics and naming conventions

"What's in a name? That which we call a rose by any other name would smell as sweet!" ~ Shakespeare's Romeo

OK, Romeo... all might be fair in love and war but when it comes to writing good code, it's called semantics. It surprises me how so many developers ignore proper semantics when writing code. Sometimes, it's because of laziness but mostly I find it's because of ignorance and a lack of empathy for the next developer who has to work with their code. I'm not innocent either, I too was once a programmer who didn't understand the value of good semantics. Luckily, I was fortunate to work alongside some good lead developers who opened my eyes to the value of well written code.

As I advance in my career, I now mentor junior developers and help guide them on their way to becoming better front-end programmers. And semantics is a foundation often over looked, but very important in the life of a long running product.

Let's take HTML as an example, if you need to wrap a button label in an element, use a <span />, not a <p />. Instead of writing a list using a bunch of meaningless <div /> tags, consider if the list is ordered or unordered and use a <ol /> or <ul />. Use a <button /> when you want to perform an action such as opening a modal or submitting a form, and a <a /> when the goal is to navigate to a url.

There is a reason those tags were designed. Browsers and Readers use those tags to understand content heirachy and context. A really easy way to check if a DOM is built using the right tags, is to disable CSS on the browser. The page should still be clearly legible and the content hierachy easy to understand. Check out this simple code pen demonstration: https://codepen.io/Noahdecoco/pen/eYdWPRq

I recommend reading this article for more information: https://developer.mozilla.org/en-US/docs/Glossary/Semantics