HTML

Lesson 01

Document language and metadata

Declare the document basics so browsers, search, and assistive technology start with the right context.

Good Code

document.html
<!doctype html>
<!-- Document metadata gives browsers and assistive tech the right defaults. -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Code review checklist</title>
  </head>
  <body>
    <main>...</main>
  </body>
</html>

Bad Code

document.html
<html>
  <!-- Missing language and viewport leave important defaults implicit. -->
  <head>
    <title>Untitled</title>
  </head>
  <body>
    <div>Code review checklist</div>
  </body>
</html>

Review Notes

What to review

Good Code

The good version gives the browser the page language, character encoding, viewport behavior, and a specific document title before rendering the body.

Bad Code

The bad version leaves important document defaults implicit, which can cause wrong pronunciation, weak browser behavior, and unclear page identity.

Takeaways

  • Start every page with language, charset, viewport, and a useful title.