HTML may be a simple language to learn, but it has its own intricacies and challenges that can be tricky for a beginner to pick up. While HTML is so popular that it makes up the backbone of the web, many new developers often speed through the learning process to get to more fun things.
Sure, HTML might not be the most entertaining aspect of web development. At least not as cool as CSS and JavaScript. But if you want to become a master of the web and move on to other languages and frameworks, a solid foundation of HTML skills is essential.
Let’s review a few HTML best practices so that you can get off on the right foot!
1. Write Semantic HTML
As a web developer myself, I can’t believe how long I went before learning this. On any given day, you could find me hammering away in my text editor or IDE, cobbling together some website or project. My favorite ingredient was <div>, and oh, how I loved to use it for everything. Little did I know, I was cooking up the infamous “div soup.”
The correct way to write HTML is to use semantic tags. Instead of using divs for everything, you must use the appropriate tags. A header would use the <header> tag. A footer would use the <footer> tag. Almost every element has a corresponding tag.
HTML best practices include using semantic tags for code readability and accessibility and improving your document’s clarity.
Some of the primary semantic tags to be aware of:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>2. Write HTML in All Lowercase
While lowercase typing is no longer a requirement, like in the days of XHTML, you should still follow it as one of the cornerstone HTML best practices. HTML5 does not follow the strict requirements of XML and no longer requires lowercase, leading some developers to use it while others do not. This causes endless confusion in the web dev world.
Most developers will agree that reading lowercase HTML is simply easier to read. But that’s purely subjective. Whatever the case may be, all browsers load HTML documents and parse them into DOMs (Document Object Models). Using the built-in developer tools of the browser, you can view the DOM for the site, and all elements will appear as lowercase, regardless of their coding style.
As a result, sticking to lowercase will make it easier for you to work with the developer tools since the code you see in the DOM view will be more consistent with the source code.
3. Properly Indent Your HTML
One of the essential HTML best practices is proper indentation. In addition to improving readability, it also reduces development time and makes it easier to prevent bugs. Some text editors and IDEs like VS Code and Atom have their own indentation settings.
HTML code should always follow consistent indentation and spacing patterns. Indentation and spacing are even required in some languages, like Python. While HTML or JavaScript don’t have that limitation, you still need to properly indent your code. Code that is properly indented is cleaner and easier to read.
4. Avoid Inline Styles in Your HTML
Inline CSS is one of those things that you learn about in a tutorial but should never use in the real world. It might be a quick and dirty way to style a single element, but your code will quickly turn into a cluttered and unreadable mess if you use it too much.
The solution is to use external style sheets. This is one of the
best practices because it allows you to consolidate all of your CSS into a single file. If you use inline styles, you’ll waste too much time hunting for your selectors and trying to make sense of your code. Not to mention other developers won’t want to touch your code with a ten-foot pole.
Content should always be separated from presentation. Do this by utilizing external style sheets.
5. Avoid Too Many Comments In Your HTML
Comments are helpful and can make your code more readable and maintainable. They are especially useful if you have other developers reading over your code too. While commenting code is certainly not a bad practice, you should avoid overusing comments for a few reasons.
Though not visible on the finished page, HTML comments are a part of the DOM and therefore increase the number of DOM elements. The result is slower DOM manipulation, ultimately leading to a poorer user experience. Additionally, since comments increase your document’s size, they will also hurt SEO by slowing down page loading speeds.
Final Thoughts
While this isn’t a definitive list of every “do and don’t” in web development, these are some of the top HTML best practices you should be aware of as a beginner. If you can clean up your code by using semantic tags, typing in lowercase, indenting correctly, and avoiding things like inline styles and overusing comments, you’ll have a much stronger foundation of HTML knowledge.
If you have any questions or need any help setting up your project, feel free to drop a comment below!
