Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
HTML Document Structure | HTML Fundamentals
HTML Essentials

HTML Document StructureHTML Document Structure

Now that we comprehend the mechanics of the web and recognize the significance of HTML, we can concentrate on crafting the HTML document and delve deeply into its concepts.

Firstly, we explore the structure of an HTML document.

HTML Document Structure

Each HTML document must adhere to a consistent structure. The elements outlined here establish the foundation for organizing content, defining the page's structure, and enhancing the user experience on the web.

html tag

The <html> tag is the root element of an HTML document. All other elements will be written inside of it. The opening <html> tag marks the beginning of the HTML document, while the closing </html> tag marks the end.
Example:

head tag

The <head> tag contains meta-information about the HTML document, such as title, character encoding, and external resources like stylesheets and scripts. It does not contain content directly visible to the user on the web page.
Example:

Explanation:

  • <title> tag defines the title of a web page. It is displayed in the web browser's title bar or browser tab. The title of a page gives a brief overview of its content, making it easier for users to understand the page's purpose and navigate through multiple tabs more efficiently;
  • <meta charset="UTF-8"> is responsible for specifying the character encoding used in an HTML document. This character encoding is what determines how web browsers interpret and display text;
  • Some common meta tags include:
    • <meta name="description" content="Brief description of the page">: Provides a concise description of the page's content, which may appear in search engine results;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Specifies keywords relevant to the page's content, helping improve search engine optimization (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport settings for responsive design, ensuring proper scaling on different devices.

body tag

The <body> tag holds the main content visible to users on a web page. This content comprises text, images, links, forms, and other elements that users can interact with while visiting the website. Essentially, the <body> tag contains what users see and engage with when they browse a website.
Example:

Document type declaration (<!DOCTYPE html>)

The document type declaration informs the web browser about the version of HTML used in the document. This declaration ensures that the web browser correctly renders the document by following the specified HTML standard. For HTML5 documents, the doctype declaration is <!DOCTYPE html>.
Example:

Ever wondered about the existence of other HTML versions? Well, indeed, they do exist. However, it was in 2008 that HTML 5 made its debut, establishing itself as the cornerstone of modern web development.

Resulting structure

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

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

Video Tutorial

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?

Which tag is the root element of an HTML document?

Виберіть правильну відповідь

What does the <head> tag contain?

Виберіть правильну відповідь

What does the <title> tag define?

Виберіть правильну відповідь

What is the purpose of the <body> tag?

Виберіть правильну відповідь

Все було зрозуміло?

Секція 2. Розділ 1
course content

Зміст курсу

HTML Essentials

HTML Document StructureHTML Document Structure

Now that we comprehend the mechanics of the web and recognize the significance of HTML, we can concentrate on crafting the HTML document and delve deeply into its concepts.

Firstly, we explore the structure of an HTML document.

HTML Document Structure

Each HTML document must adhere to a consistent structure. The elements outlined here establish the foundation for organizing content, defining the page's structure, and enhancing the user experience on the web.

html tag

The <html> tag is the root element of an HTML document. All other elements will be written inside of it. The opening <html> tag marks the beginning of the HTML document, while the closing </html> tag marks the end.
Example:

head tag

The <head> tag contains meta-information about the HTML document, such as title, character encoding, and external resources like stylesheets and scripts. It does not contain content directly visible to the user on the web page.
Example:

Explanation:

  • <title> tag defines the title of a web page. It is displayed in the web browser's title bar or browser tab. The title of a page gives a brief overview of its content, making it easier for users to understand the page's purpose and navigate through multiple tabs more efficiently;
  • <meta charset="UTF-8"> is responsible for specifying the character encoding used in an HTML document. This character encoding is what determines how web browsers interpret and display text;
  • Some common meta tags include:
    • <meta name="description" content="Brief description of the page">: Provides a concise description of the page's content, which may appear in search engine results;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Specifies keywords relevant to the page's content, helping improve search engine optimization (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport settings for responsive design, ensuring proper scaling on different devices.

body tag

The <body> tag holds the main content visible to users on a web page. This content comprises text, images, links, forms, and other elements that users can interact with while visiting the website. Essentially, the <body> tag contains what users see and engage with when they browse a website.
Example:

Document type declaration (<!DOCTYPE html>)

The document type declaration informs the web browser about the version of HTML used in the document. This declaration ensures that the web browser correctly renders the document by following the specified HTML standard. For HTML5 documents, the doctype declaration is <!DOCTYPE html>.
Example:

Ever wondered about the existence of other HTML versions? Well, indeed, they do exist. However, it was in 2008 that HTML 5 made its debut, establishing itself as the cornerstone of modern web development.

Resulting structure

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

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

Video Tutorial

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?

Which tag is the root element of an HTML document?

Виберіть правильну відповідь

What does the <head> tag contain?

Виберіть правильну відповідь

What does the <title> tag define?

Виберіть правильну відповідь

What is the purpose of the <body> tag?

Виберіть правильну відповідь

Все було зрозуміло?

Секція 2. Розділ 1
some-alt