Codeskill

Learn to code, step by step

HTML Best Practices

Tips and tricks for clean, efficient code

Practical habits for writing HTML that is readable, maintainable, and does what you intend. Clean markup makes life easier for you, for anyone else who touches the code later, and for browsers and assistive technologies parsing the page.

Use semantic HTML

Semantic elements describe what content is, not just how it looks. That makes your markup easier to read, better for accessibility, and more useful to search engines.

Why semantic HTML matters

  • Accessibility: Screen readers and other assistive technologies rely on semantic elements to interpret page content.
  • SEO: Search engines favour well-structured content.
  • Maintainability: Semantic HTML is easier to read and understand.

Semantic HTML in practice

Reach for specific HTML5 elements instead of generic <div> tags wherever you can.

<!-- Not Semantic -->
<div class="header"></div>
<div class="article"></div>
<div class="footer"></div>

<!-- Semantic -->
<header></header>
<article></article>
<footer></footer>

Clean and organised structure

A well-organised HTML structure is easier to read, debug, and extend.

Best practices for structuring HTML

  • Proper indentation: Consistent indentation makes nested elements obvious at a glance.
  • Use comments wisely: A short comment on a complex section saves future-you some head-scratching.
  • Group related elements: Keep related markup together so the structure reads logically.

Example of structured HTML

<nav>
    <!-- Main Navigation -->
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>
<article>
    <!-- Article Content -->
</article>

Using alt text for images

Descriptive alt text is required for accessibility and helps with SEO.

Importance of alt text

  • Accessibility: Describes images to visually impaired users.
  • Fallback: Displays text if the image fails to load.

Example of alt text

<img src="flowers.jpg" alt="Colorful array of garden flowers">

Responsive images

With so many screen sizes in use, images should scale sensibly rather than overflowing or looking tiny on mobile.

Implementing responsive images

  • Using width and height: Helps maintain the aspect ratio.
  • CSS techniques: Like max-width: 100% and height: auto.

Example of responsive image

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>
<img src="landscape.jpg" alt="Mountain landscape">

Efficient use of CSS and JavaScript

Link external CSS and JavaScript files rather than stuffing styles and scripts inline. Your HTML stays cleaner and your assets are easier to reuse and cache.

Benefits of external resources

  • Separation of concerns: Keeps content, styling, and behaviour separate.
  • Caching: External files can be cached by the browser.

Example of linking external files

<head>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

Form accessibility and usability

Well-structured forms are easier to use and work properly with assistive technologies.

Tips for form optimisation

  • Labelling: Every input field should have a corresponding <label>.
  • Fieldset and legend: Use these to group related form elements.

Example of accessible form

<form>
    <fieldset>
        <legend>Personal Information</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <!-- Additional fields -->
    </fieldset>
</form>

Minimising use of inline styles and scripts

Inline styles and scripts clutter your HTML and make changes harder – especially on larger sites where you want one place to update a style or behaviour.

Why avoid inline styles and scripts

  • Maintainability: Changes are easier when styles and scripts live in separate files.
  • Performance: Inline scripts and styles can increase page load times.

Example of avoiding inline styles

<!-- Avoid -->
<p style="color: red;">Warning message</p>

<!-- Prefer -->
<p class="warning">Warning message</p>

Keeping up with HTML5

HTML5 added a lot of useful features. Knowing what is available stops you reinventing things with JavaScript or extra markup.

Useful HTML5 features

  • New semantic elements: Such as <section>, <aside>, <figure>.
  • Form enhancements: New input types like email, date, and others.

Regular code validation

Validate your HTML regularly using tools like the W3C Markup Validation Service. It catches errors early and keeps your markup standards-compliant.

Benefits of validation

  • Cross-browser compatibility: Reduces issues in different browsers.
  • Professionalism: Clean, error-free code is a mark of professionalism.

Clean HTML is not about being precious – it is about making pages that work reliably, load sensibly, and do not confuse the next person who opens the file. Semantic tags, sensible structure, and a habit of validation go a long way.

PreviousSEO Fundamentals