As a starter or a seasoned web developer, we usually tend to skip out on some great practices that we should be using merely because we have never heard about them. To reduce this gap of missing goodies, we cover several practices no developer should live without.
Doctype Declaration
Many do it, others choose to not. However, it is in your best interest to declare the doctype in your HTML files for better standards compliance. Browsers usually have their own ways to fix errors you accidentally or unknowingly left in to get the HTML better interpreted. However, as with most browsers, they all have different ways to interpret things and thus, when it comes to individual browsers trying to fix or “patch” your errors on the fly, things start to get messy and your website will appear different across these different browsers and platforms.
Therefore, by declaring the doctype, you force these browsers to enter standards compliance mode, which cancels out their correction systems. With this, you can easily locate the errors you have made and be able to fix them to get your website to look and work the same across many browsers and platforms. Think of the doctype as a keycard to open all the doors in a building versus a key that may or may not open a few. You would definitely choose the keycard that opens all the doors rather than a key that may or may not work, the same applies to declaring the doctype so definitely use it, you will be glad you did.
Meta Description Attribute
Many search engine optimization radicals always seem to deter us from using the meta description attribute with the argument that search engines do not use them anymore. Actually, they do, but if they are not available, they will use other means to formulate a description about your website. Therefore, as a good practice, always include a meta description attribute with a great description of the website as this is what search engines use to formulate that description right below your title when you search for your website.
To get back to the search engine optimization radicals, they do have a point, especially for those who misuse the meta description attribute. Search engine bots are getting smarter by the day and can detect whether you deliberately misused the attribute or not. Therefore, use it as intended, as this is a gold mind for HTML as well as the key to improved search engine optimization.
Footer Content
This HTML practice is a bit subjective however very useful and vital to keeping your website running smoothly. We all have landed on a website that takes a good several seconds to a minute to load anything that is viewable due to the cause of external scripts bogging down on the load time. The way HTML is loaded is in sequential form, from top to bottom, line after line. What this means is, it will halt on a line of code until it is fully interpreted or executed, and in this case, it will wait until the external JavaScript file is fully loaded before proceeding on to the next line.
Therefore, stick this JavaScript code in the footer to have the content that is important to load first. For example, if you have your analytics code such as Google analytics, stick it in the footer right before the end of your body tag so that your website can load the content quicker and not bog down until it reaches the end of your content where users do not have to actually wait for it to load.
The reason this idea is subjective is that some may disagree with the idea of taking JavaScript code outside of the head tags, however, in such situations, it is a better practice to take upon as it is what keeps your website running more efficiently in such a case.
Using Unordered Lists for Navigation Bits
Many developers whip up all sorts of concoctions to create a navigation bit. So instead of using the accepted and preferred markup they decide to use a set of divs and all sorts to achieve similar results. This technique is not only inefficient, but it is also very tedious and redundant. Therefore, use unordered lists as a basis for your navigations as the code is simple, the functionality is pretty much completed for you already, and all you need to do is give it some style. Remember, reinventing the wheel is not something you want to do, let alone reinventing it and losing efficiency.
Leaving Your Front Door Open
Whenever you are in your home, out of your home, or on your way home, you always have your doors closed and locked. I mean, who would want to leave their home doors unlocked and open when they are not around? Other than the neighbor I once had who left their front door wide open at night, we all know it is a good practice to keep our windows and doors closed when we are not home. Similarly, always close the tags you open for clean and validated markup.
I have seen countless tutorials out there that are available to teach new developers how to code HTML and they almost always leave their tags open such as image tags or break tags. This not only affects the new generation of developers, but it is a terrible practice. Browsers will always attempt to close them for you causing errors and unwanted results, so save yourself from bad practices, and make closing the HTML tags a habit as you do with closing your doors when you leave your home.
Validate Your Code
Validating your code helps you keep your code clean from nasty errors you may have missed or unintentionally thrown in. While having valid code does not indicate you are a great developer or not, it does help eliminate possible errors you may find in the future within many different browsers and platforms. It additionally throws a good image about your practices for your portfolio for future hires.
