SasikumarTalks.com – Free SEO & Digital Marketing Course

SEO Class 29: Write good, clean HTML. (Tamil) Search Analyst Sasikumar.

Written by

Sasikumar Talks

in

,

Example of Good, Clean HTML

Here’s an example of a simple, well-structured HTML document that adheres to modern standards and best practices:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn how to write clean, accessible, and semantic HTML for better performance and SEO.">
    <title>Good, Clean HTML Example</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header Section -->
    <header>
        <h1>How to Write Clean HTML</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Main Content Section -->
    <main>
        <section id="about">
            <h2>About Clean HTML</h2>
            <p>Clean HTML is all about writing code that is semantic, accessible, and easy to maintain.</p>
            <p>Key principles include:</p>
            <ul>
                <li>Using semantic elements like <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code>.</li>
                <li>Ensuring proper nesting and indentation.</li>
                <li>Adding alt text for images to improve accessibility.</li>
            </ul>
        </section>

        <section id="features">
            <h2>Features of Clean HTML</h2>
            <article>
                <h3>Semantic Structure</h3>
                <p>Using semantic tags improves readability and search engine optimization.</p>
            </article>
            <article>
                <h3>Accessibility</h3>
                <p>Accessible HTML ensures that all users, including those with disabilities, can interact with your website effectively.</p>
            </article>
        </section>
    </main>

    <!-- Footer Section -->
    <footer>
        <p>&copy; 2025 Clean HTML Guide. All rights reserved.</p>
        <p>
            <a href="privacy-policy.html">Privacy Policy</a> | 
            <a href="terms-of-service.html">Terms of Service</a>
        </p>
    </footer>

    <!-- Scripts -->
    <script src="script.js"></script>
</body>
</html>

Key Features of Good, Clean HTML

  1. Semantic Structure:
    • Use elements like <header>, <main>, <footer>, <section>, <article> to provide clear meaning and structure to your content.
  2. Proper Nesting and Indentation:
    • Ensure all elements are correctly nested (e.g., no closing tags out of order) and indented for readability.
  3. Accessibility:
    • Add alt attributes for images and use descriptive link text (e.g., avoid “click here”).
    • Use proper heading hierarchy (e.g., <h1> for the main title, <h2> for subsections).
  4. Responsive Design:
    • Include the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag for mobile-friendly layouts.
  5. External Resources:
    • Link to external CSS and JavaScript files for maintainability.
  6. Minimal Inline Styling or Scripting:
    • Keep styles in a separate CSS file and scripts in a separate JavaScript file for cleaner HTML.
  7. Descriptive Metadata:
    • Use <meta> tags for SEO, such as description and keywords (if needed).
  8. Well-Organized Content:
    • Group related elements (e.g., navigation links in a <nav> tag) for better structure and readability.

This structure ensures that your HTML is efficient, maintainable, and SEO-friendly. Let me know if you’d like assistance with specific HTML features or projects!

More posts