Best Practices in HTML that Web Developers Should Adopt

Best Practices in HTML

The internet has about 1.5 billion websites floating around. And each one of those websites uses HTML markup. As a web developer, it is your responsibility to write good HTML code and use best practices in HTML. Your code after all is going to be around for years to come.

Think about this for a minute, you just got hired to redo an already existing website. The front end is functional, with enough features to keep the business afloat, but the design looks outdated. Your client wants to upgrade to a fresh modern design that incorporates new trending features like a chatbot. The aim is to create a more user-friendly website that attracts new customers.

The job looks simple enough at first glance. That is until you open the HTML files and see the mess. The code in the files are a jumble that you dread entangling.

Best Practices require you to decide consciously whether your coding is good or bad.
Best Practices require you to decide consciously whether your coding is good or bad.

Best practices in HTML isn’t something that you think about after the project is done. Instead, you should be practicing while you are coding the web pages. It is a continuous, conscious process that you have to develop and practice in all your web development projects.

Let’s look at some of the bad practices web developers commit in HTML and how to turn those into best practices.

Declare your Intentions

Introductions make life easier and this principle translates to browsers and your web pages as well. Doctype declaration is nothing more than you handing over a business card to your browser. With this tiny bit of code, you are conveying who you are and what you do.

It is best to write the stricter XHTML code at the start of every HTML file as it enforces you to comply with good html best practices.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Remnants of the Past

HTML is a very flexible code. You can use old tags from HTML 4 or HTML 3 and still have a totally functional web page. And this issue isn’t as rare as you might think. Websites that were developed just 10 to 15 years ago, still have remnants of the past HTML. As a web developer however, it is best practice to update the old and often deprecated tags to HTML 5.

Some of the most common deprecated tags that you still see in use are:

  • Bold <b>
  • Italic <i>
  • Underline <u>
  • Strike-through <s>
  • <font>
  • <align>
  • <bgcolor>
  • <frameset>
  • <center>

To get a complete list of all the deprecated tags, you should check out “HTML5 – Deprecated Tags & Attributes” from TutorialsPoint.

The Case of the Uppercase

This might be a funny thing to include, but there are still HTML files around that have tags in uppercase. Although strictly speaking HTML does display pages no matter if the tags are in lowercase, uppercase or a mix of the two. However, it is better to adopt the lowercase when writing HTML tags as it makes your code easy to read and understand and convenient to type.

Inline Styling is so Passé

You would be surprised to learn that inline styling is alive and thriving in certain web development projects. However, it is not best practice any longer to style in HTML. Instead, for all your styling needs, create a CSS file to store all such information. This works really well for both HTML and CSS as you can easily update your styling requirements without needing to alter your HTML files.

Close those Tags

HTML is a very forgiving language. It understands your dilemma and accepts all your excuses. You had a late night, or you are scampering to meet your client’s deadline. HTML displays your web pages even if you miss closing the tags. However certain browsers, devices and even W3C aren’t that forgiving. It is best to form a habit where you write your opening and closing tags together.

Practicing your Indentation

Web pages are prone to be long with tons of code. Indenting your code saves you time and keeps you sane when schedules are tight. And it makes it super easy to read and test for bugs.

Would you rather be reading this…?

<p><h2>How to Indent HTML codes</h2></p>

Or this…

<p>

        <h2>How to Indent HTML codes</h2>

</p>

Join Divitis Anonymous

Are you addicted to divs? Most web developers are, but you can overcome this bad practice easily. Start thinking of alternatives to divs. HTML 5 has quite a good collection of tags – <main>, <header>, <footer>, <sections>, <aside> – that gives you the same page result, but with fewer lines of code.

Code the Semantic Way

Semantic might sound like a foreign word for many web developers. However, the word can change the way you code. Semantic in plain English means coding in a logical, meaningful way. Which means every time you check an HTML file, you instantly know what is going on without having to dig through tons of code.

Old coding technique:

<div id = “nav”><div class = “header> <div id = “footer”>

Semantic way to code:

<nav><header><footer>

Where are you Heading

Headings are the most misused elements in the HTML tag collection. Usually headings go from <h1> to <h6>. However sometimes you see them used in haphazard ways.

Best practices for headings include:

  • <h1> is only for the title of the page.
  • Headings should follow a system – <h1> to <h6>.
  • Don’t use headings for words or sentences that you want to emphasize.
  • For section headings in your blog posts or web content, start with <h2>.
  • Remember proper headings helps screen readers, keyboards and even Google bots scan your pages without issues.

Turn the Tables

If you ask web developers if you should use tables in your web pages, there will be a resonant “No”. Some even believe the table tag has been deprecated. However, <table> is still around, just how it was previously used has been modified.

If you look at web pages that have not been updated for years, you will find the table tag used for page layouts. Nowadays the table tag is strictly for tabular data. In other words, if you want your data to be represented on your web page exactly like how it looks in Ms. Excel. HTML 5 however recommends using CSS for your tabular requirements as both screen readers and Google can look at the content without problems.

Commenting Best Practices

Comments are a great way to keep tabs on your progress as you code the web pages. However, there are tons of people writing comments the wrong way. Your comments should be relevant and provide guidance, rather than a hindrance. If you want some reference, go back to your gym teacher and all his helpful comments at every step you took. Annoying wasn’t it, the same thing can happens here. Also remember the more bloated your file is, the slower it will load.

Noob web developers tend to overshare in the comments or try to comment and document every other line of code. On the other side, veteran web developers tend to not comment at all, or commenting is left at a bare minimum. Enough for personal use, but not enough if someone else needs to understand what is going on. And of course, some use abbreviations and special syntax that requires a separate file just to decode what the comments mean.

Challenge the Visually Challenged

Technology and especially the internet has opened the world for the visually challenged. However bad website designs are the biggest threat to this freedom. According to Cathy O’Conner, the designer and author for Smashing Magazine, for every 2 million customers that come to your store or website, around 200,000 would love if you made viewing the site easy on their eyes.

Did you know that about 64 percent of Americans wear glasses? By not creating an inclusive website, you could be excluding a potential client.
Did you know that about 64 percent of Americans wear glasses? By not creating an inclusive website, you could be excluding a potential client.

Some of the best practices you should adopt to help the visually challenged are:

  • Ability to change the text size of the website
  • Use visual friendly colors and avoid colors that affect color blindness
  • Keep a ratio of 4.5 to 1 minimum for background colors and text.
  • Reasonably large buttons
  • Adding subtitles and captions to videos
  • Use the <alt> tag for images and make the text descriptive and relevant to the image
  • Understand the difference between <alt> and <title> and use the tags appropriately.
  • Test any website you design using only the keyboard or if possible a screen reader to find any problems visually impaired people might face.

For more information about how to design websites that assist the visually challenged, read the W3C guidelines.

Validate your Code

Mistakes can happen especially if you are working on a large project that has tons of websites to code. Validating your code syntax is easy with online validators. It is better to check your code during the testing phase, rather than later when things go awry.

The validator from W3C can help you correct bad HTML coding and foster best practices.
The validator from W3C can help you correct bad HTML coding and foster best practices.

Test out how good you write HTML by checking your code on the online validator setup by W3C.

Minimalist Best Practices

Every web page that loads over the 2-second mark, Google rewards you by not giving you a great rank. And as you know page ranks is what every website fights over. When you adopt minimalism for your best practices, you are coding web pages with minimal HTML code. One way is by adopting semantic HTML which eliminates all those extra <div>’s that eat up your bandwidth. Another way is to only use those tags that are necessary.

Frameworks like Bootstrap are easy to set up but do come with bloated code. Templates that CMS programs like Magento and WordPress use also have additional codes. Understanding techniques to optimize your page and ways to minify files is important as well as part of your best practices repertoire.

Final Best Practices Note:

While no one can deny HTML is the building block for every website on the internet, most web developers don’t pay much attention to how the HTML code is written. This could be because HTML isn’t fussy unlike JavaScript or PHP or even Python. There are no temper tantrums, and the only obstacle you face is from the browser side.

HTML is simple and understandable which might make it seem less important compared to other big web development languages. However, HTML isn’t dead, but constantly evolving, albeit silently. Keep yourself knowledgeable about all things HTML and your skills will never seem dated.

Learn about web components like Google’s Lit HTML, web development partner trends like CSS Grids, CSS Custom Variables, JavaScript libraries and frameworks Node.js, Angular, React and so on. A web developer’s educational journey should never be complete.

If you want to continue experimenting with HTML or want to create HTML templates for Magento or WordPress, why not get some webspace in the cloud.

Aspiration Hosting fosters creativity in all web developers. When you host with us, you get:

  • Cloud hosting for Magento, WordPress, Drupal, Joomla, Node.js and dedicated server plans
  • Speed boosters LiteMage and LiteSpeed
  • Unlimited bandwidth
  • SSD drives for faster data retrieval
  • Affordable plans to suit every budget

Besides this, you also become eligible for our exclusive Partner Program

  • 15% Lifetime Commission
  • Custom Link for easy referrals
  • 5 Referrals win you a place in our Partner Directory
  • Payout via PayPal or credit towards the next bill
  • 30 days risk-free trial