HTML Dos and Don'ts

Explore the essential dos and don'ts of HTML to create clean, accessible, and maintainable web pages
HTML Dos and Don'ts Lesson

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.

Use lowercase element names Bad Practice
Use lowercase element names Best Practice

Technically, you can use WhaTeveR FonT CasE you LIKE. HTML accepts mixing lowercase and uppercase letters in code. But let's admit that it looks horrible. A consistent, neat, and well-organized HTML markup makes it easier for everyone to read and understand your code. Stick to lowercase formatting as it is more legible and more popular among developers.

Close all HTML elements Bad Practice
Close all HTML elements Best Practice

As you might remember from our previous lessons, some HTML elements, like <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.

Use lowercase attribute names Bad Practice
Use lowercase attribute names Best Practice

Like HTML tags, attribute names are not case sensitive, but XHTML requires lower case. Even when coding in HTML, it's a good habit to write attribute names in lower case. It looks cleaner and enhances readability.

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.

Always quote attribute values Bad Practice
Always quote attribute values Best Practice

Another W3C recommendation relates to HTML attribute values. It would be best if you always put them in quotes. Plus, there are cases when you MUST use quotes. When a value contains spaces, apostrophes ('), equals signs (=), less than or greater than signs (<,>), and quotation marks ("), the code won't work without a proper markup. Also, using quotes around attribute values makes your code consistent and excuses you from memorizing and recalling the rules when quotes are optional.

Always specify alt, width, and height for images Bad Practice
Always specify alt, width, and height for images Best Practice

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 tags, alt descriptions) provides written copy of images and increases the websites ranking for search engines.

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.

Spaces and equals signs Bad Practice
Spaces and equals signs Best Practice

If you put spaces around equals signs, the browser will still render the page. However, if we talk about good manners, the less spacing the code has, the better. Less-spaced documents are easier to read and group related entities together. Plus, code with extra spaces looks cluttered and can confuse other developers who may read your code.

Avoid long code lines Bad Practice
Avoid long code lines Best Practice

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 tags that can be as long as they need.[2]

Blank lines and indentation Bad Practice
Blank lines and indentation Best Practice

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>.

Never skip the <title> tag Bad Practice
Never skip the <title> tag Best Practice

You should never skip the <title> element in your HTML document. Users don't see it on a page, but it defines a title in the browser toolbar. Plus, search engine algorithms use this element to grab the website's purpose and decide its ranking in search results.

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.

Avoid omitting <html> and <body> tags Bad Practice
Avoid omitting <html> and <body> tags Best Practice

The <html> and <body> elements are essential, but the browser will handle it and still render your page if you skip them. So then why does the W3C strongly recommend adding those elements? Firstly, omitting <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 search engines. The syntax will look like this: <html lang="en-US">. The tags also maintain readability and consistency.

Avoid omitting <head> tag Bad Practice
Avoid omitting <head> tag Best Practice

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 HTML page. Browsers will simply add this information before <body> and call it a day. However, we'd recommend keeping the <head> element to avoid confusion among developers and provide consistency.

Add the lang attribute Bad Practice
Add the lang attribute Best Practice

The lang attribute is vital to include within an <html> element. Its primary goal is to define the natural language of the content. Browsers and search engines use this information for a more accurate page ranking in search results. If there's a piece of text in a different language, you can specify the language with the lang attribute for the element that surrounds the content.

Familiarize yourself with SEO Bad Practice
Familiarize yourself with SEO Best Practice

To get organic traffic to your website, familiarize yourself with SEO (Search Engine Optimization). SEO is a set of rules for optimizing your website to increase its online visibility and get more traffic. Websites with good SEO appear in the top positions of the search results of Google, Yahoo, Bing, and other search engines.

At the start of your HTML journey, you need to know that several HTML tags in your code define how users will see the link to your website on the search results page.

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 best practices to make your website discoverable.

Start thinking in modules

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 page anew, you assemble them from the components you already have.

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]

Complete the lesson quiz and track your learning progress.
Start
<?xml version="1.0" encoding="utf-8"?>