Just as a car needs a chassis, any HTML document will begin with a basic structure. This includes tags that are found in any HTML file. These tags and service information are needed for the browser to display the information correctly.
Let's take a look at the basic structure of any HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
</body>
</html>
This set might not seem like much, but it tells the browser a lot of useful information. In this lesson, we'll look at each line of this structure.
DOCTYPE
The first construction in any HTML document is the <!DOCTYPE> element. It doesn't have anything to do with the tags and cannot be displayed on the page in any way. It just tells the browser which HTML standard is used in this document (document type declaration). At the moment, you'll find the HTML5 standard everywhere. It is written as follows:
<!DOCTYPE html>
With the advent of the HTML5 standard, the <!DOCTYPE> element has become a bit simpler. You will see an entirely different syntax if you come across websites made five to 10 years ago. They were larger and directly affected how the browser would interpret the data. An incorrectly specified <!DOCTYPE> element could lead to the site being displayed incorrectly. There is no such problem now, so you can use the construction specified in this lesson without worry. Using older <!DOCTYPE> values is only necessary when dealing with very old browsers.
Paired html tag
The <html></html> tag is the bare bone of the webpage, it contains all the information. Thanks to this tag, the browser knows where the content to be treated as HTML begins.
An important part of the html tag is the lang attribute. It specifies the language in which the webpage is displayed. Using this attribute enable browsers properly read many specific characters from different languages. In addition, the lang attribute is now used in CSS, which you will learn about in upcoming lessons. New properties relying on this attribute are appearing in the new CSS standards. They enable you, for example, to correctly translate words in a given text.
The lang attribute takes common language abbreviations as a value. For Russian - ru, for English - en, for German - de.
Paired head tag
The <head></head> tag commonly store information about services. They can be combined in a variety of ways to tell the browser the name of the page, its description, keywords, and so on. This information is called metadata. In today's web, it's not only responsible for the service information that the browser uses, but it's also actively used to promote the site.
Search engines parse all this data and, based on a variety of algorithms, determine the site's place in different search queries.
Any data specified inside the <head> tag won't be visible when the page is displayed in the browser. This means that there's no need to place the information you intend to be displayed.
Although there may be a lot of different information inside the head, in this lesson, we'll look at a few basic tags that are useful when creating any webpage.
Metadata
Metatag <meta>. It accepts many different attributes that you'll become familiar with when creating your sites. Nowadays, the meta tag - <meta> - with the charset attribute is quite important. It allows you to set the encoding of the document.
An encoding is a table of characters. In it, each character has a unique code, so that programs, including browsers, can display the same text in the same way. Different users may have different default encodings. This will cause some users to see text displayed as squares, even though it might be displayed correctly for you. One universal encoding that contains most of the necessary characters from different languages is UTF-8. It's recommended to set it as the value of the charset attribute. Now the browser will display all the characters in this encoding.
<meta charset="UTF-8">
Page title
On any website, you may notice a header that appears in your browser tab. For example, the tab with the "Fundamentals of Modern Layout" page in Google Chrome looks like this:
To specify the title of the page, we use a special paired tag, <title></title>, which specifies the necessary information.
<title>My first page</title>
The body of the document
After the <head> tag, we specify the paired <body></body> tag, which is the "body" of the entire page. This is where all the information that will be displayed on the page is.
Let's use one of the examples from the last lesson and add all the missing tags.
<header>
<img src="/logo.png" alt="Logo"> <!-- Site logo -->
<nav id="menu"> <!-- Menu -->
<ul>
<li><a href="/">Main</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contacts">Contact Us </a></li>
</ul>
</nav>
</header>
To fully comply with all HTML standards, we'll add the necessary basic structure to the document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page</title>
</head>
<body>
<header>
<img src="/logo.png" alt="Logo"> <!-- Site logo -->
<nav id="menu"> <!-- Menu -->
<ul>
<li><a href="/">Main</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contacts">Contact Us </a></li>
</ul>
</nav>
</header>
</body>
</html>
Although this tag set is fundamental, browsers can process HTML data without this structure as well. But don't leave everything to the browser. It will try to automatically wrap the content in a <body> tag, and add a modern <!DOCTYPE>, but there's no guarantee it'll be done correctly.
Do it yourself
Create a basic document structure and try different text options inside the <title> tag. You can even try adding an emoji to it and see how the browser displays this header.
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
