HTML Dos and Don'ts
Correct spelling of element and attribute names is just the beginning when it comes to writing clean HTML. The World Wide Web Consortium (W3C) outlines essential guidelines for structuring code, ensuring consistency and readability across the web. Adhering to these best practices not only enhances collaboration among developers but also creates a more accessible and maintainable codebase that stands the test of time. Discover the key dos and don'ts for writing HTML that’s clean, organized, and future-proof.
Technically, you can use WhaTeveR FonT CasE you LIKE.
As you might remember from our previous lessons, some <br>
or <img>
, are self-sufficient and don't require an end tag. However, the World Wide Web Consortium (W3C) strongly recommends closing all HTML elements that do have an end tag. Reasons for this include more enhanced readability and a cleaner markup.
Besides, one day, you may write code in XHTML, which is another markup language. It's more flexible for processing different data formats but also stricter when it comes to rules. This means browsers may not display the page correctly if the code contains unclosed tags.
Like
The thing is, when text is in all caps, letters are much harder to distinguish. As a result, people have to read letter-by-letter at a noticeably slower pace. The Nielsen Norman Group states that reading speed may reduce by 10%.[1] The same happens when you use a title case or capitalize letters randomly.
Another W3C recommendation relates to
Designers can spend hours meticulously picking the right visuals for your website. But without proper alt text, screen reader users won't see them and get the intended message. Additionally, alt text (alt
We also recommend always defining the width and height of images. It reduces flickering, which can happen when the browser loads images. Such behavior is particularly annoying for users, especially when they have already started reading the article and suddenly the content shifts somewhere. As a result, they have to find the place where they finished reading again. A proven technique to avoid this is to set width and height.
If you put spaces around equals signs, the browser will still render the
Okay, no one loves horizontal scrolling, either average users or developers. Avoid using lengthy lines — they're incredibly inconvenient! Google's HTML/CSS Style Guide recommends breaking lines at 80 characters unless it's a URL or the metadata
White space is important when it comes to enhancing readability. However, the W3C recommends using blank lines, spaces, or indentations within reason. Firstly, be consistent and use 4-space or 2-space indentation. For example, when you apply nesting elements. Secondly, add blank lines to separate block elements and large or logical code blocks, but keep it up to one in a row.
As for spacing, never leave white space between a tag's braces and the element name. This is a bad pattern — < p >
, while this one is correct — <p>
.
You should never skip the <title>
element in your
The title should grab users' attention after their first glance at the search results page:
• Avoid using 2 or 3-word titles. Make them descriptive and meaningful enough.
• Titles that are too lengthy are also not good. Search engines usually display the first 55–60 characters of a page title and cut out the rest.
• Keywords are important, but search engines may reduce your page's position in the search results if you cram too many keywords within a title.
The <html>
and <body>
elements are essential, but the browser will handle it and still render your <body>
can cause errors in older browsers.
Secondly, developers use the <html>
element to specify the page language, which is important for accessibility applications like screen readers and <html lang="en-US">
. The
Generally, the <head>
element contains metadata like document title, styles, links, scripts, and other similar information. The omission of the <head>
element isn't the end of the world for the <body>
and call it a day. However, we'd recommend keeping the <head>
element to avoid confusion among developers and provide consistency.
The lang
attribute is vital to include within an <html>
element. Its primary goal is to define the natural language of the lang
attribute for the element that surrounds the content.
To get organic traffic to your website, familiarize yourself with SEO (
At the start of your
Some of these tags are:
- The title tag that sets up the clickable headline users see on the search results page
- The meta description tag that sets up the description within the search result snippet
- Heading tags that structure your pages for both the reader and search engines
- Alt text that describes the appearance or function of an
image for image indexing.[3]
Do your research to ensure that you follow all the
Once your website grows bigger than a couple of pages, you need to start thinking in terms of modularity. Modular websites reuse components such as menus, headers, footers, logos, etc. Instead of creating every
The main benefit of using modules is twofold:
- You don't need to repeat yourself. You can write code once (or use someone else's code) and
link it everywhere you need the same module. - Modular code is easier to maintain. When you need to update one of the components, the changes can be easily made in just one place.
Making your website modular can require more coding and effort initially but it leads to a much cleaner code base that is easy to maintain and scale.[4]
References
- Weblog Usability: The Top Ten Design Mistakes | Nielsen Norman Group
- HTML formatting | Google developer documentation style guide | Google Developers | Google Developers
- 8 of the Most Important HTML Tags for SEO | Social Media Today