An HTML document consists of several parts that together determine how a webpage is displayed in a browser. The HTML document begins with a 

 declaration, which informs the browser that it is an HTML5 document. After this, there is the 

 element, which tells the browser that all the content of the document is HTML code.

The head element contains information that is not visible in the browser but is important for building the document. For example, meta tags can be added to the head element to determine the page's language and character set. In addition, link and script elements can be added to the head element to bring CSS style sheets and JavaScript code to the page.

The body element contains all the content that is visible in the browser. In addition to the text and other content of the page, various HTML elements can be added to the body element, such as images, links, tables, lists, and forms. The closing tag for an HTML document is used as </html> identifier.

The following is an example of a simple HTML document that contains the basic structure:

Do not worry if you do not yet understand the purpose of all the tags, we will cover them. What is important now is to get a basic idea of the structure of an HTML document.

The meta tags inside the head section determine the character set of the document so that, for example, special characters work correctly, and inform the browser to scale the website according to the screen size.

The title tag inside the head section determines the text that is displayed in the browser's tab.

The link tag inside the head section links to a stylesheet that provides colors and fonts, for example, to the website.

The script tag inside the body section downloads a JavaScript file to the page and executes its code.

An HTML document consists of several parts that together determine how a webpage is displayed in a browser. The HTML document begins with a **<!DOCTYPE html>** declaration, which informs the browser that it is an HTML5 document. After this, there is the **<html>** element, which tells the browser that all the content of the document is HTML code.

Next come the **<head>** and **<body>** elements.

## HTML Head

The head element contains information that is not visible in the browser but is important for building the document. For example, meta tags can be added to the head element to determine the page's language and character set. In addition, link and script elements can be added to the head element to bring CSS style sheets and JavaScript code to the page.

---

## HTML Body

The body element contains all the content that is visible in the browser. In addition to the text and other content of the page, various HTML elements can be added to the body element, such as images, links, tables, lists, and forms. The closing tag for an HTML document is used as </html> identifier.

---

## Putting the pieces together

The following is an example of a simple HTML document that contains the basic structure:

```html
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title> HTML document</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body> This is a properly formatted HTML page.<script src="script.js"></script></body></html>
```

Do not worry if you do not yet understand the purpose of all the tags, we will cover them. What is important now is to get a basic idea of the structure of an HTML document.

But here's briefly if you're curious:

- The meta tags inside the head section determine the character set of the document so that, for example, special characters work correctly, and inform the browser to scale the website according to the screen size.
- The title tag inside the head section determines the text that is displayed in the browser's tab.
- The link tag inside the head section links to a stylesheet that provides colors and fonts, for example, to the website.
- The script tag inside the body section downloads a JavaScript file to the page and executes its code.

---

## Practice

@embed 99243d2929f0


HTML Document Structure

This course is an introduction to web development and focuses on the basics of HTML, CSS, JavaScript and backend systems. The aim of the course is to provide students with the necessary skills and knowledge to design, develop and understand simple web applications.

This course is an introduction to web development and focuses on the basics of building websites, namely HTML, CSS, JavaScript, and fundamentals of backend systems. The goal of the course is to provide you with the necessary skills and knowledge to design and develop simple full-stack web applications, as well as understand web applications made by others.

In the first part, HTML is studied, which is a markup language used in building websites.


The second part covers the basics of CSS, such as the use of style sheets, rules, selectors, and formatting. It also covers advanced features of CSS, such as animations and responsive design.

In the third part, we will study JavaScript, which is currently an incredibly important tool in both frontend and backend development, and thus also in cybersecurity and ethical hacking.

In the final part, we will learn how to build back-end systems using the Python Flask framework. You will learn the basics of back-end systems, such as using databases, authentication, session management, and access control.

You can do the course exercises on your own computer if you want, but each code example has a button that allows you to directly run the code in the browser and see what the page looks like or what the script prints. So you do not need to install anything, but you can if you want.

It is recommended but optional to create an account on replit.com service. In that case, you can just click "Fork" on the code examples to make a copy for yourself to play with

HTML Document Structure

HTML Head

Learn to hack — start here