How to Write Better HTML Code?

4 min readSep 5, 2024

HTML (Hypertext Markup Language) is the foundation of every website. Writing clean, efficient, and well-structured HTML code is essential for improving website performance, maintainability, and user experience. Whether you’re a beginner or an experienced developer, adopting best practices can make your HTML more readable, scalable, and future-proof.

In this article, we’ll explore some tips on how to write better HTML code, with practical examples.

1. Use Semantic HTML

Semantic HTML means using HTML tags according to their intended purpose. It makes your code easier to understand for both developers and browsers, and improves accessibility for assistive technologies like screen readers.

Example of Non-Semantic HTML:

<div class="header">
  <h1>Welcome to My Website</h1>
</div>

<div class="main">
  <p>This is an example of a paragraph.</p>
</div>

Improved Semantic HTML:

<header>
  <h1>Welcome to My Website</h1>
</header>

<main>
  <p>This is an example of a paragraph.</p>
</main>

Using <header>, <main>, and other semantic tags like <section>, <article>, and <footer> makes the purpose of the content clear, improving SEO and accessibility.

2. Use Proper Indentation

Proper indentation helps improve readability and makes it easier to debug your code. It allows developers to quickly see which elements are nested within others.

Example Without Proper Indentation:

<body>
<h1>My Blog</h1>
<article>
<h2>Post Title</h2>
<p>Content of the post.</p>
</article>
</body>

Example with Proper Indentation:

<body>
  <h1>My Blog</h1>
  <article>
    <h2>Post Title</h2>
    <p>Content of the post.</p>
  </article>
</body>

The properly indented code is more readable and easy to maintain.

3. Keep HTML Structure Organized

Break your code into smaller, manageable parts by grouping related elements and sections. Consistent formatting and spacing can make your code more readable.

Example of Unorganized Code:

<section>
<h2>Services</h2><div><h3>Web Design</h3></div>
<div><h3>SEO</h3></div></section>

Improved Organized Code:

<section>
  <h2>Services</h2>
  <div>
    <h3>Web Design</h3>
  </div>
  <div>
    <h3>SEO</h3>
  </div>
</section>

Here, spacing and line breaks make the structure clear and logical.

4. Use Comments

Comments are a great way to describe the purpose of different sections in your HTML code. This is especially helpful when working on large projects or collaborating with other developers.

Example:

<!-- Main header of the website -->
<header>
  <h1>Welcome to Our Website</h1>
</header>

<!-- Services section -->
<section id="services">
  <h2>Our Services</h2>
</section>

Comments don’t affect the HTML output but can provide useful information for those working with your code.

5. Avoid Inline Styles

It’s a best practice to keep your CSS (Cascading Style Sheets) separate from your HTML. Using inline styles can clutter your HTML and make it difficult to maintain.

Example with Inline Styles:

<p style="color: red; font-size: 18px;">This is a warning message.</p>

Improved HTML with External CSS:

<p class="warning-message">This is a warning message.</p>

In your CSS file:

.warning-message {
  color: red;
  font-size: 18px;
}

This method keeps your HTML clean and your styles centralized.

6. Minimize the Use of Div and Span Elements

While <div> and <span> are useful for grouping content, overusing them can make your code harder to read. Use more specific, semantic HTML elements where appropriate.

Example of Overusing <div>:

<div class="nav">
  <div class="nav-item">Home</div>
  <div class="nav-item">About</div>
  <div class="nav-item">Contact</div>
</div>

Improved HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Using <nav>, <ul>, and <li> creates a more meaningful structure and reduces unnecessary <div> elements.

7. Use Self-Closing Tags Correctly

Some HTML elements don’t require a closing tag. For example, <img>, <br>, and <input> are self-closing elements, so don’t include an extra closing tag.

Incorrect Example:

<img src="image.jpg"></img>

Correct Example:

<img src="image.jpg" alt="Description of image">

Using the correct format ensures your HTML is syntactically correct.

8. Ensure Proper Use of Alt Attributes

When adding images, always include alt attributes to describe the image. This is important for accessibility and helps search engines understand the content of the image.

Example:

<img src="logo.png" alt="Company logo">

Without an alt attribute, users with screen readers or those who cannot load the image won’t know what the image represents.

9. Validate Your HTML

Using an HTML validator, such as the W3C HTML Validator, can help you find errors or warnings in your HTML code. This ensures that your HTML adheres to web standards and improves compatibility across browsers.

Conclusion

Writing better HTML code is about adopting good habits like using semantic elements, proper indentation, and avoiding bad practices like inline styles. By following these tips, your HTML code will not only be cleaner and more readable but also more accessible, maintainable, and optimized for SEO.

Do you need a Website or Redesign Website Service Contact Us