Day 2: HTML5 Document Anatomy

Daily Objective

Understand each component of the standard HTML5 boilerplate and how metadata instructs the browser.

1. The Standard HTML5 Boilerplate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document Anatomy</title>
  </head>
  <body>
    <main>
      <h1>Understanding Document Structure</h1>
    </main>
  </body>
</html>

2. Breakdown of Components

• <!DOCTYPE html>: Tells modern browsers to render in standards-compliant mode according to HTML5 specifications.
• <html lang="en">: Root container of all markup. Declaring the language allows screen readers and search engines to parse pronunciation and indexing properly.
• <head>: Container for metadata (not visible directly on the page):
  • <meta charset="UTF-8">: Character encoding that supports all universal characters, accents, and emojis.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Crucial for responsive design across mobile phones and desktop screens.
  • <title>: The title displayed on the browser tab and bookmark bars.
• <body>: Holds all content rendered on the user’s screen.

Daily Hands-on Practice (70%)

1. In VS Code, type ! and hit Tab to expand the built-in Emmet HTML5 boilerplate.
2. Inspect the tags generated by Emmet.
3. Change the <title> and verify the browser tab updates.
4. Try writing characters like ñ, é, or emojis 🚀 and verify they render correctly thanks to UTF-8.