WordPress is one of the “tools” i love to use in my day to day projects. Because WordPress is fast enough, secure enough, easy to learn and adapt enough (for my clients), easy to get modular, etc … so WordPress in most of the cases, in 90% of the cases is a good choice. Actually WordPress in my opinion might not be as good as other frameworks only for a very specific use-case, web apps … but even in that area WordPress is evolving.
Working daily with WordPress in a team with other developers have come to the understanding that not everyone (even persons who work daily with WordPress themes) still don’t know fully well the basics of web semantics, HTML5 code structuring and how to write clean code (without problems, readable, code that don’t repeat itself, etc).
The idea of this article is to help other developers not do the same mistakes i have seen some developers do, the idea of this article is to teach how and where to use correctly the HTML tags (in other words, how to structure your code as much as possible semantically, etc).
Bad usage of heading tags
Every page should have only 1 header h1 tag (because of on-page search engine optimization).
You can use the other heading tags as much as you want but keep in mind to don’t use them without a good reason. Heading tag have a sole purpose of existence, to divide content into sections/areas. This way the content will be more readable, easy to understand for both human readers and web spiders. This means, you can’t/should not use h3 tag for example inside a button or inside a select drop-down, etc. This is completely wrong.
Don’t use a cannon to kill a fly.
Don’t use lists (ul, ol) unnecessarily, for example when you have only 1 list element why should you create a list at all? This is completely wrong, this is non semantic, this creates extra non needed code. It might seem strange to you but i have seen this happen …
Try to use as much as possible HTML5 semantics
For example instead of using <div class=”main”></div>, you could use <main></main>. Instead of using <div id=”sidebar”></div>, use <aside id=”sidebar”></aside>, etc. Also try to use as much as you can the correct tag for the correct thing, when you want to display an address, use <address></address>, <time></time> for displaying time, etc. This is important since a good semantic helps making the site more readable to the web crawlers/spiders. It also helps with web accessibility.
Try to use the aria roles correctly
This is an area where almost everyone does it wrong. Web accessibility is still a thing to be explored for most of the developers community … probably because until now making websites accessible for all users, without making “prejudices” if they can see/hear, etc … has been something not required in most of the world countries. Probably putting some rules, for example all websites should be certificated following Web Content Accessibility Guidelines (WCAG) 2.0 could help going in the right direction.
Don’t use HTML tags for changing the layout use CSS
Using empty HTML elements just for creating spaces, etc. HTML is a structural language … it should not be used to affect how the way how things are rendered in the browser. For example, adding an empty <p></p> tag to create some spaces, etc. There are exclusions to this rule, for example the usage of <br/>, <hr>, etc.
Keep the code structure clean
Working in big/small projects changes the way how you handle the code. I have noticed that in smaller projects the possibility of code structural errors is bigger then in big projects. Probably because in big projects, everything gets checked, double checked and even triple checked when the developer moves things around, initially when he setups the structure of the project, then when he starts adding modules, etc. So the more he adds, the more he thinks how to divide the project structure into components/modules, etc. On the contrary, in smaller projects, the developer sometimes finishes the project without working this much with the project structure and in the end the quality of the code might be lower (even though sometimes this is not noticeable to the end-user).
These rules i have explained above are true for the WordPress world but not only. These guidelines, are not exclusive for the WordPress world. Same rules can be applied everywhere, in all web frameworks/CMS i only took WordPress as an example since that’s the one i work with the most. This though is not a problem that i have encountered only in the WordPress community, other platforms suffer from same issues also (developers not knowing how to use html5 tags correctly, not knowing how to write good and clean code).