0
0
HTMLmarkup~5 mins

Clean HTML structure

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Clean HTML structure helps your webpage work well and be easy to understand. It makes your site look good on all devices and helps people and search engines read your content.

When creating a new webpage from scratch.
When fixing a webpage that looks messy or breaks on phones.
When you want your website to be easy to update later.
When making sure your site is accessible to everyone, including screen readers.
When improving your website's search engine ranking.
Syntax
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
  </head>
  <body>
    <header></header>
    <nav></nav>
    <main></main>
    <footer></footer>
  </body>
</html>

Use <!DOCTYPE html> at the top to tell browsers this is an HTML5 page.

Use semantic tags like <header>, <nav>, <main>, and <footer> to organize content clearly.

Examples
A simple page with clear sections for header, main content, and footer.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Page</title>
</head>
<body>
  <header>
    <h1>Welcome</h1>
  </header>
  <main>
    <p>This is a clean HTML page.</p>
  </main>
  <footer>
    <p>Ā© 2024</p>
  </footer>
</body>
</html>
This example adds a navigation menu inside a <nav> tag for easy site navigation.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page with Navigation</title>
</head>
<body>
  <header>
    <h1>Site Title</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>About Us</h2>
      <p>Information about the site.</p>
    </section>
  </main>
  <footer>
    <p>Contact info here.</p>
  </footer>
</body>
</html>
Sample Program

This full example shows a clean HTML page with header, navigation, main content divided into sections, and a footer. It uses semantic tags and includes a viewport meta tag for mobile friendliness.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clean HTML Example</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
  <main>
    <section id="home">
      <h2>Welcome</h2>
      <p>This is a clean and simple HTML page structure.</p>
    </section>
    <section id="services">
      <h2>Services</h2>
      <p>We offer web design and development.</p>
    </section>
    <section id="contact">
      <h2>Contact Us</h2>
      <p>Email: info@example.com</p>
    </section>
  </main>
  <footer>
    <p>Ā© 2024 My Website</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Always include lang attribute in <html> for accessibility and SEO.

Use <meta name="viewport"> to make your page look good on phones and tablets.

Keep your code neat with indentation to make it easy to read and fix later.

Summary

Clean HTML uses semantic tags to organize content clearly.

Include important meta tags for character set and responsive design.

Good structure helps users, search engines, and devices understand your page.