Register to get access to 15+ free programming courses with interactive exercises

Basic structure of HTML document Modern layout fundamentals

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:

FML in Chrome

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.

Document's head n' body

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.

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From zero to a developer. Refunds in case you won't get a job

Frontend Developer icon
Profession
New
Development of front-end components for web applications
start anytime 10 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.