SIMPLE THE BEST SITE FOR DEVELOPERS
HTML/CSS JAVASCRIPT SQL JAVA PYTHON Golang Data Science Django Books 🔍 ◑ More
HTML5 Lessons for beginners

Ua

HTML page structure

❮ Prev Next ❯

Theory

Programming is not as mechanical and alien as it may seem: in many respects, it is similar to the human world. This is very easy to notice if you look at the structure of HTML pages, which contains elements like <head> and <body>. Making a site is thus a process of creation, and as a creator, you need to be familiar with all the necessary building blocks. There is a lot to learn, but any lot starts with the essential basics: please welcome on stage, HTML tags.

§1. Basic tags in HTML

Among numerous HTML tags that form the logical structure of a page, some are considered the base. The structure can be divided into three main sections: <html>, <head>, and <body>.

Take a look at the code of a simple HTML page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph</p>
  </body>
</html>

If you save this code in the HTML format (.html) and open it in your browser, the page will look like this:

Example html page

This looks quite basic, but with HTML you can do much more: customize the structure of the text, manage its visual presentation, and display paragraphs, forms, pictures, titles, and tables. HyperText Markup Language allows you to format texts, which makes them friendlier to Internet users. It is much more convenient to read text with clear and logical markup rather than plow through an unstructured text.

Let's get back to the code from the previous example and consider the listed tags in more detail.

  • element <!DOCTYPE> specifies the type of the current document: DTD (Document Type Definition). It is necessary that the browser understands according to which HTML standard to display the web page. As you see, this is one of the tags that aren't paired;
  • the <meta> tag with attribute charset specifies document encoding. If it is not specified, some browsers may display obscure characters instead of the text;
  • the <html> tag indicates that it is an HTML document;
  • the <head> tag is designed to store elements that help the browser and search engines to work with data;
  • the <title> contains the HTML document header. Even though this tag is not mandatory, it is still present on almost all web pages on the Internet;
  • the <body> tag defines the page content area. It wraps the content displayed in the main browser window;
  • the <h1> tag holds the page title within the body, and the <p> tag is responsible for the paragraphs. These tags are not the main sections and are provided here as an example, but you're likely to find them useful in the future as you move from basic to artsy.

§2. Basic HTML Page Structure

Here is a visualization of the basic HTML page structure:

Basic HTML Page Structure

As you can see, this structure bears a resemblance to our anatomy. Hopefully, this analogy will help you understand HTML better.

§3. Conclusion

Surely, both humans and web pages are much more complex and show a lot of variations. Modern pages can be very large and may contain a lot of different tags inside <body>, but their basic structure always remains the same. Come to think of it, this is also so very human.

You can also view the Lesson on hyperskill.org.

Practical tasks and answers

Tasks and answer options are given. The correct option is highlighted in blue color.

№1. A missed tag

Question: There is a missing element in the code below:

<!DOCTYPE html>
<html>
  <head>
    <❓>Science News</❓>
  </head>
  <body>
    <h1>Science News</h1>
    <p>Astrophysicists have shown the first black hole photo in history</p>
    <p>Corsica "cat-fox" could be new species, say experts</p>
    <p>Chemists have created a strong anti-cancer drug</p>
  </body>
</html>

Enter the name of a missing element.

Enter a short text: title ✔

№2. Basic tags

Question: Write a page that matches that screenshot:

Basic HTML Page

The text of the web page can be copied from here:

  • Cafe "Sweet"
  • Buy Cakes Online
  • We are happy to implement any of your plans and make a cake worthy of your celebration.

Hint. Check that the characters you entered are correct and make sure there are no extra spaces anywhere.

Correct code:

<!DOCTYPE html>
<html>
  <head>
    <title>Cafe "Sweet"</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>Buy Cakes Online</h1>
    <p>We are happy to implement any of your plans and make a cake worthy of your celebration.</p>
  </body>
</html>

№3. Start tags

Question: Specify all start tags:

Select one or more options from the list:

  • <p> ✔
  • </title>
  • </p>
  • <body> ✔
  • <h1> ✔

№4. Cracking the HTML Page Structure!

Question: Given the knowledge of tags and attributes, which of the following represents a correct and more comprehensive structure of an HTML page with meta data and doctype included?

Select one option from the list:

Example #1

<html>
  <head>
    <meta name='keywords' content='HTML, CSS'>
    <title>Page Title</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>

Example #2

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>

Example #3 ✔

<DOCTYPE html>
<html>
  <head>
    <meta name='keywords' content='HTML, CSS'>
    <title>Page Title</title>
  </head>
  <body>
    Hello, World!
  </body>
</html>

Example #4

<DOCTYPE html>
<html>
  <head>
    <meta name='keywords' content='HTML, CSS'>
  </head>
  <body>
    Hello, World!
  </body>
</html>

№5. Write a page

Question: Write a page that matches that screenshot:

Basic HTML Page

The text of the web page can be copied from here:

  • Events
  • Let’s have a look
  • What’s On In Toronto
  • Select the date you are interested in.

Check that the characters you entered are correct and make sure there are no extra spaces anywhere.

Correct code:

<!DOCTYPE html>
<html>
  <head>
    <title>Events</title>
    <meta charset="utf-8">
  </head>
  <body>
    <p>Let’s have a look</p>
    <h1>What’s On In Toronto</h1>
    <p>Select the date you are interested in.</p>
  </body>
</html>

№6. Document Type Definition

Question: What should you write at the beginning of an HTML page so that the browser understands that HTML5 is used to display the web page?

Enter a short text: <!DOCTYPE html> ✔

№7. End tags

Question: Specify all end tags:

Select one or more options from the list:

  • <h1>
  • <body>
  • </p> ✔
  • <html>
  • </body> ✔

№8. DTD

Question: What does DTD stand for?

Select one option from the list:

  • Data Transfer Device
  • Document Type Descriptor
  • Digital Topographic Data
  • Database Table Definition
  • Data Type Definition
  • Document Type Definition ✔

№9. What Fills in the Blank Spaces?

Question: Given the following code snippet, choose the options that correctly complete the HTML page structure while following the semantic guidelines for properly nesting HTML elements:

Correct code:

<!DOCTYPE html>
<html>
  __1__
    <title>Sample Page</title>
  __2__
  <body>
    <h1>Welcome to the Sample Page</h1>
    <p>This is a sample HTML page.</p>
  </body>
</html>

Select one or more options from the list:

  • <head> ✔
  • </body>
  • </html>
  • </head> ✔
  • <title>

№10. Dissecting a Basic HTML Structure

Question: Given the basic HTML structure below, which of the following statements are correct?

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

Select one or more options from the list:

  • 'DOCTYPE html' is an information tag, letting the browser know that the type of document it's about to process is HTML. ✔
  • 'p' tags are used to determine the style of text.
  • 'h1' tag defines the most important heading in the document. ✔
  • 'Page Title' is the title of the HTML document which is usually displayed on the title bar or tab of the browser. ✔
  • The text 'This is a Heading' and 'This is a paragraph' will not be visible in the web page, because they are enclosed within the head tag.
❮ Prev Next ❯