HTML Document Structure
An HTML document consists of a tag "tree". The following is the minimum required set of tags, which serves as the basis for any HTML document, just like a foundation for a house.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
</head>
<body>
<!-- Content -->
</body>
</html>
Document type declaration
<!DOCTYPE > is not a tag, but a mandatory instruction for document type
declaration. It is required to inform the browser about the HTML version of the
document.
Based on doctype, the browser detects the HTML version used and displays the page correctly. Document type declaration must be the very first thing the browser sees when processing an HTML document.
<!-- Indicates that the document uses the HTML Living Standard specification -->
<!DOCTYPE html>
Previously, HTML had versions, and the last one is HTML5. Now HTML Living Standard is a common HTML specification that has no versions; it is just updated from time to time. If we talk about HTML5, this is the same as the "present-day HTML" or HTML Living Standard.
Top-level elements
They are intended to create the basic structure of a web page and specify the sections of the document head and body.
<html> tag
The root element of the document that contains all the page content, like a container. The browser does not regard anything outside of it as HTML code and does not process.
<!DOCTYPE html>
<html lang="en"></html>
The lang attribute indicates the page text language. This is required for
assistive technologies such as screen readers, etc.
<head> tag
It stores metadata of web pages: heading, description, encoding, etc. All this information is not displayed in the browser window, but it contains data that instruct the browser how to process the page.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
</head>
</html>
<body> tag
Contains the content of the future web page. The content to be displayed on the page must be contained within this tag.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata -->
</head>
<body>
<!-- Content -->
</body>
</html>
Document head tags
A group of meta tags in the document header. Most of them are not directly displayed in the browser window.
Page title
All text placed inside the <title> tag is displayed in a browser tab. The
length of the title must not exceed 60 characters in order to fit in. The title
text should contain a brief description of the web page content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 is easy!</title>
</head>
<body>
<!-- Content -->
</body>
</html>
Document flow
Flow is the vertical and horizontal order in which elements are displayed on a page. Vertically, the flow goes from top to bottom, and, by default, elements are displayed on the page in the order in which they appear in the HTML document. Horizontally, the flow goes from left to right (or from right to left for eastern countries).
All elements without exception are rectangular areas that occupy a certain place in the so-called "lines", just like the words of a sentence on a lined sheet. There are two main types of elements: block-level and inline elements.
<!-- Paragraph is a block-level element -->
<p>Block-level element 1</p>
<p>Block-level element 2</p>
<p>Block-level element 3</p>
<!-- Link is an inline element -->
<a href="">Inline element 1</a>
<a href="">Inline element 2</a>
<a href="">Inline element 3</a>
Block-level element occupies the entire line, regardless of its content length; therefore, several block elements visually follow each other from top to bottom.
Inline element occupies space according to its content, which is why several inline elements can be put on the same line. When there is not enough space on the line to contain an inline element, it is carried over into a new line.
We will learn more about document flow, block-level, inline, inline-block and flex elements in the following lessons.