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
course content

Course Content

HTML Essentials

HTML Essentials

1. Understanding the Web and HTML
2. HTML Fundamentals
3. Images and Media
4. Tables and Forms
5. Advanced HTML

HTML Document Structure

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:

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?

Select the correct answer

What does the <head> tag contain?

Select the correct answer

What does the <title> tag define?

Select the correct answer

What is the purpose of the <body> tag?

Select the correct answer

Everything was clear?

Section 2. Chapter 1
We're sorry to hear that something went wrong. What happened?
some-alt