HTML Course 3.2 html, head and body tags

HTML Course 3.2: The html, head and body Tags

In every HTML document there are three fundamental container elements:

• <html> – the root element that wraps everything.
• <head> – holds metadata and links to external resources.
• <body> – contains all visible content.

Understanding the roles, attributes and valid contents of these tags is crucial for creating
well-formed, accessible and standards-compliant pages.

The html Tag

The <html> tag is the document’s root. It must enclose both
<head> and <body> sections. It can carry global attributes:

Example of a minimal root structure:

  
  <head>
    <meta charset='UTF-8'>  <!-- Character encoding declaration -->
    <title>My Page Title</title>  <!-- Page title shown in browser tab -->
  </head>
  <body>
    <p>Hello, world!</p>  <!-- Visible paragraph -->
  </body>

  

The head Tag

The <head> section contains metadata and references to scripts, stylesheets,
icons and more. Nothing inside <head> renders directly on the page.

Common elements inside <head>:

Extended example showing multiple metadata entries:

<head>
  <meta charset='UTF-8'>                              <!-- Required for proper text encoding -->
  <meta name='viewport' content='width=device-width, initial-scale=1'>  <!-- Responsive design -->
  <meta name='description' content='A short page description for SEO'>
  <link rel='icon' href='/favicon.ico'>               <!-- Browser tab icon -->
  <link rel='stylesheet' href='styles.css'>          <!-- External CSS file -->
  <title>Advanced Metadata Example</title>
</head>
  

The body Tag

The <body> tag wraps all elements that are rendered in the browser window:
text, images, links, forms, scripts that manipulate DOM, etc. It should contain:

• Structural sections (<header>, <footer>, <main>, <section>, <article>)
• Text content (<p>, <h2>-h6, <ul>/<ol>)
• Media (<img>, <video>, <audio>)
• Interactive elements (<form>, <button>, <a>)

<body>
  <header>
    <h2>Site Logo</h2>
    <nav>
      <ul>
        <li><a href='/'>Home</a></li>
        <li><a href='/about'>About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h3>Introduction</h3>
      <p>Welcome to our site. We use semantic HTML for structure.</p>
    </section>

    <article>
      <h3>Blog Post Title</h3>
      <p>This is the content of a blog post.</p>
    </article>
  </main>

  <footer>
    <p>© 2024 My Company</p>
  </footer>
</body>