Printing and PDF export are disabled for this content. View it online at Full Stack Learning Simplified.

HTML Document Structure🌱 Beginner

Every single HTML document must follow a strict, standardized boilerplate structure. This hidden structure tells the web browser how to safely render the visual elements inside.

What is the HTML Structure?

An HTML file is built using a hierarchy of "tags". A tag is simply a keyword surrounded by angle brackets, like <body>. Almost all tags require an opening tag and a closing tag (which includes a forward slash, like </body>).

Why Do We Need Head and Body?

The document is strictly divided into two zones. The Head contains metadata (like the page title, SEO descriptions, and links to CSS files) that the user never actually sees. The Body contains the actual visual content (text, buttons, images) that renders on the screen.

How to Write the Boilerplate

Here is the mandatory skeleton of every HTML5 page on the internet:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Hidden Metadata -->
    <meta charset="UTF-8">
    <title>My Awesome Website</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- Visual Content -->
    <h1>Hello World</h1>
    <p>This text will actually appear on the screen.</p>
  </body>
</html>

Pro Engineering Tip: If you use Visual Studio Code, you never have to type this manually. Simply open a blank .html file, type the ! character, and hit Enter. Emmet will instantly generate the perfect boilerplate for you!

Free preview. Sign in and subscribe to unlock all 982 lessons across 31 courses.

Printing and PDF export are disabled for this content. View it online at Full Stack Learning Simplified.

HTML & CSSHTML5 & CSS3 Pro

HTML Document Structure🌱 Beginner

Every single HTML document must follow a strict, standardized boilerplate structure. This hidden structure tells the web browser how to safely render the visual elements inside.

What is the HTML Structure?

Why Do We Need Head and Body?

How to Write the Boilerplate

Here is the mandatory skeleton of every HTML5 page on the internet:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Hidden Metadata -->
    <meta charset="UTF-8">
    <title>My Awesome Website</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- Visual Content -->
    <h1>Hello World</h1>
    <p>This text will actually appear on the screen.</p>
  </body>
</html>

Free preview. Sign in and subscribe to unlock all 982 lessons across 31 courses.