10 HTML Tips Every Developer Should Know

Whether you’re just starting your web development journey or you’ve been building websites for years, there are always HTML techniques that can make your code cleaner, more accessible, and easier to maintain. In this article, we’ll cover 10 essential HTML tips that every developer should have in their toolkit.

These aren’t obscure tricks or experimental features—they’re practical, battle-tested techniques that will improve your workflow and help you build better websites starting today.

1. Always Use Semantic HTML Elements

Semantic HTML means using elements that clearly describe their meaning to both the browser and the developer. Instead of wrapping everything in <div> and <span> tags, use elements like <header>, <nav>, <article>, <section>, and <footer>.

Why It Matters

Semantic HTML improves accessibility for screen readers, helps search engines understand your content better, and makes your code more readable for other developers (and your future self).

<!-- Problematic example: Generic divs everywhere -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Home</div>
    <div class="nav-item">About</div>
  </div>
</div>
<div class="content">
  <div class="post">
    <div class="title">Article Title</div>
    <div class="text">Article content...</div>
  </div>
</div>

<!-- Recommended approach: Clear semantic structure -->
<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
</main>

2. Include Alt Text for Every Image

Every <img> tag should have an alt attribute that describes the image. This isn’t just a best practice—it’s essential for accessibility and SEO.

The Right Way to Write Alt Text

Alt text should describe what the image shows, not just repeat the filename or say “image of.” Think about what information the image conveys to someone who can see it.

<!-- Problematic example: No alt text or unhelpful description -->
<img src="team-photo.jpg" />
<img src="chart.png" alt="chart" />
<img src="logo.png" alt="image" />

<!-- Recommended approach: Descriptive alt text -->
<img src="team-photo.jpg" alt="Our development team at the 2024 company retreat" />
<img src="chart.png" alt="Bar chart showing 40% increase in user engagement over 6 months" />
<img src="logo.png" alt="Acme Corporation logo" />

<!-- For decorative images, use empty alt -->
<img src="decorative-divider.png" alt="" />

Pro tip: If an image is purely decorative and doesn’t add information, use an empty alt="" attribute to tell screen readers to skip it.

3. Use <button> for Buttons, Not <div> or <a>

Buttons should be actual <button> elements. This gives you keyboard navigation, proper focus management, and screen reader support automatically.

<!-- Problematic example: Divs styled as buttons -->
<div class="button" onclick="submitForm()">Submit</div>
<a class="button" onclick="openModal()">Open Modal</a>

<!-- Recommended approach: Real buttons -->
<button type="submit">Submit</button>
<button type="button" onclick="openModal()">Open Modal</button>

When to Use Links vs. Buttons

• Use <a> tags for navigation (going to a new page or section)
• Use <button> tags for actions (submitting forms, opening modals, toggling UI)

4. Label Your Form Inputs Properly

Every form input should have an associated <label> element. This improves accessibility and makes the form easier to use—clicking the label will focus the input.

<!-- Problematic example: No labels or disconnected labels -->
<input type="text" placeholder="Enter your name" />
<label>Email</label>
<input type="email" />

<!-- Recommended approach: Properly connected labels -->
<label for="name">Full Name</label>
<input id="name" type="text" name="name" />

<label for="email">Email Address</label>
<input id="email" type="email" name="email" />

<!-- Also valid: wrapping the input -->
<label>
  Phone Number
  <input type="tel" name="phone" />
</label>

5. Use the Right Input Types

HTML5 introduced many specific input types that provide better user experience, especially on mobile devices. Using the correct type triggers the appropriate keyboard and validation.

<!-- Basic input types most people know -->
<input type="email" /> <!-- Shows email keyboard on mobile -->
<input type="tel" /> <!-- Shows numeric keypad -->
<input type="url" /> <!-- Shows URL keyboard with .com button -->
<input type="number" /> <!-- Allows number input with spinners -->
<input type="date" /> <!-- Shows date picker -->
<input type="time" /> <!-- Shows time picker -->
<input type="color" /> <!-- Shows color picker -->

<!-- Less common but useful types -->
<input type="search" /> <!-- Shows search-style input with clear button -->
<input type="range" min="0" max="100" /> <!-- Slider -->
<input type="file" accept="image/*" /> <!-- File upload, images only -->

6. Don’t Skip Heading Levels

Headings (<h1> through <h6>) create a document outline that screen readers use for navigation. Don’t skip levels just to achieve a certain visual style—use CSS for that instead.

<!-- Problematic example: Skipping from h1 to h4 -->
<h1>Main Title</h1>
<h4>Subsection</h4>
<h4>Another Subsection</h4>

<!-- Recommended approach: Logical heading hierarchy -->
<h1>Main Title</h1>
<h2>First Section</h2>
<h3>Subsection</h3>
<h3>Another Subsection</h3>
<h2>Second Section</h2>
<h3>Related Subsection</h3>

Rule of thumb: Each page should have exactly one <h1> (the main title), and subsequent headings should follow in order without skipping levels.

7. Use <ul> and <ol> for Lists

If you’re displaying a list of items, use proper list elements. This seems obvious, but it’s common to see <div> or <p> tags used instead.

<!-- Problematic example: Fake lists with divs -->
<div class="list">
  <div>First item</div>
  <div>Second item</div>
  <div>Third item</div>
</div>

<!-- Recommended approach: Unordered list -->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<!-- Recommended approach: Ordered list for sequential items -->
<ol>
  <li>Preheat oven to 350°F</li>
  <li>Mix dry ingredients</li>
  <li>Add wet ingredients</li>
  <li>Bake for 25 minutes</li>
</ol>

8. Add lang Attribute to Your HTML Tag

The lang attribute tells browsers and assistive technologies what language your content is in. This affects pronunciation in screen readers, translation tools, and search engines.

<!-- Example in English -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

<!-- For other languages -->
<html lang="es"> <!-- Spanish -->
<html lang="fr"> <!-- French -->
<html lang="de"> <!-- German -->
<html lang="ja"> <!-- Japanese -->

You can also mark specific sections in different languages:

<p>Welcome to our site!</p>
<p lang="es">¡Bienvenido a nuestro sitio!</p>
<p lang="fr">Bienvenue sur notre site!</p>

9. Use <meta> Tags for Mobile Responsiveness

The viewport meta tag is essential for making your site work well on mobile devices. Without it, mobile browsers will zoom out to show the full desktop version of your site, making everything tiny.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Responsive Site</title>
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

What this does:

• width=device-width - Makes the page width match the device’s screen width
• initial-scale=1.0 - Sets the initial zoom level to 100%

10. Close Your Tags and Validate Your HTML

Modern browsers are forgiving of HTML mistakes, but that doesn’t mean you should write sloppy code. Always close your tags and validate your HTML regularly.

<!-- Problematic example: Unclosed tags -->
<div>
  <p>This paragraph is never closed
  <p>Neither is this one
  <div>Nested div not closed
</div>

<!-- Recommended approach: Properly closed and nested -->
<div>
  <p>This paragraph is properly closed.</p>
  <p>So is this one.</p>
  <div>Nested div is closed too.</div>
</div>

Self-Closing Tags

Some HTML elements don’t have closing tags because they can’t contain content. In HTML5, you don’t need the trailing slash (though you can include it for compatibility).

<!-- Both are valid in HTML5 -->
<img src="photo.jpg" alt="Photo">
<img src="photo.jpg" alt="Photo" />

<br>
<br />

<input type="text">
<input type="text" />

Validate Your HTML

Use the W3C Markup Validation Service to check your HTML for errors. Common issues it catches:

• Unclosed tags
• Improperly nested elements
• Missing required attributes
• Deprecated elements
• Invalid attribute values

Putting It All Together

Here’s an example that incorporates all these tips into a simple contact form:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Us - Acme Corporation</title>
  </head>
  <body>
    <header>
      <img src="logo.png" alt="Acme Corporation logo" />
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h1>Contact Us</h1>
        <p>We'd love to hear from you! Fill out the form below and we'll get back to you soon.</p>

        <form action="/submit-contact" method="post">
          <label for="name">Full Name</label>
          <input id="name" type="text" name="name" required />

          <label for="email">Email Address</label>
          <input id="email" type="email" name="email" required />

          <label for="phone">Phone Number (optional)</label>
          <input id="phone" type="tel" name="phone" />

          <label for="message">Message</label>
          <textarea id="message" name="message" rows="5" required></textarea>

          <button type="submit">Send Message</button>
        </form>
      </article>
    </main>

    <footer>
      <p>&copy; 2024 Acme Corporation. All rights reserved.</p>
    </footer>
  </body>
</html>

Before You Ship: Checklist

Before deploying your HTML, make sure you’ve:

• Used semantic HTML elements (<header>, <nav>, <main>, <article>, <footer>)
• Added descriptive alt text to all images
• Used <button> elements for buttons, not divs or links
• Connected all form inputs to labels using id and for attributes
• Used appropriate input types (email, tel, date, etc.)
• Created a logical heading hierarchy (h1, h2, h3, etc.)
• Used proper list elements (<ul>, <ol>, <li>)
• Added lang attribute to the <html> tag
• Included the viewport meta tag for mobile responsiveness
• Validated your HTML with the W3C validator

Keep Learning

These tips are foundational, but there’s always more to learn about HTML. Here are some next steps:

• Learn HTML: Your First Page - Start with the fundamentals
• HTML Forms Tutorial - Master form creation and validation
• Semantic HTML Guide - Deep dive into semantic elements
• Explore HTML Templates - Get started with ready-made examples

Want to practice these tips? Try them out in the htmlEditor.net playground right now—no setup required!

By following these 10 tips, you’ll write cleaner, more accessible, and more maintainable HTML. Your users (and future you) will thank you for it.

← Back to all blog posts