Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen HTML Document Structure Explained | Section
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
HTML Basics for Absolute Beginners (Sliced) - 1768407373666

bookHTML Document Structure Explained

An HTML document follows a consistent structure made of a few key elements.

<html> tag

The root element of every page. All content goes inside the opening <html> and closing </html> tags.

<html>
  <!-- Other elements go here -->
</html>

<head> tag

Contains information about the page, not visible to the user. This includes the title, metadata, and links to stylesheets or scripts.

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Common items in <head>:

  • <title>: text shown on the browser tab;
  • <meta charset="UTF-8">: sets text encoding;
  • <meta name="description">: short page description;
  • <meta name="viewport">: needed for responsive design.

<body> tag

Holds everything visible on the page: text, images, links, forms, etc.

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Document type declaration

Tells the browser to use the HTML5 standard when rendering the page.

<!DOCTYPE html>

Full Structure Example

To wrap things up, let's gather all the elements we have considered and combine them into a single HTML document.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

Below, you can see how the HTML document appears in the web browser.

1. Which tag is the root element of an HTML document?

2. What does the <head> tag contain?

3. What does the <title> tag define?

4. What is the purpose of the <body> tag?

question mark

Which tag is the root element of an HTML document?

Select the correct answer

question mark

What does the <head> tag contain?

Select the correct answer

question mark

What does the <title> tag define?

Select the correct answer

question mark

What is the purpose of the <body> tag?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

bookHTML Document Structure Explained

Swipe um das Menü anzuzeigen

An HTML document follows a consistent structure made of a few key elements.

<html> tag

The root element of every page. All content goes inside the opening <html> and closing </html> tags.

<html>
  <!-- Other elements go here -->
</html>

<head> tag

Contains information about the page, not visible to the user. This includes the title, metadata, and links to stylesheets or scripts.

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Common items in <head>:

  • <title>: text shown on the browser tab;
  • <meta charset="UTF-8">: sets text encoding;
  • <meta name="description">: short page description;
  • <meta name="viewport">: needed for responsive design.

<body> tag

Holds everything visible on the page: text, images, links, forms, etc.

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Document type declaration

Tells the browser to use the HTML5 standard when rendering the page.

<!DOCTYPE html>

Full Structure Example

To wrap things up, let's gather all the elements we have considered and combine them into a single HTML document.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

Below, you can see how the HTML document appears in the web browser.

1. Which tag is the root element of an HTML document?

2. What does the <head> tag contain?

3. What does the <title> tag define?

4. What is the purpose of the <body> tag?

question mark

Which tag is the root element of an HTML document?

Select the correct answer

question mark

What does the <head> tag contain?

Select the correct answer

question mark

What does the <title> tag define?

Select the correct answer

question mark

What is the purpose of the <body> tag?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 7
some-alt