Skip to content

Structure

The basic structure of the HTML file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page title</title>
</head>
<body>
    Content displayed on the website
</body>
</html>

  • The DOCTYPE declaration tells us about the version and type of HTML document. In the example above we have information that the page will be created in the latest version of HTML5.

  • We place the entire code of our site inside the <html></html> tag. The lang attribute determines the language in which the website is written.

There are two main sections inside the <html> tag:

1) The <head> section, where we will place the so-called metadata, which is important information for the browser, but not displayed directly as web page content.

  • Set the page encoding by adding the attribute charset to the meta tag. If you want the page to have for example Polish characters, set the attribute to UTF-8, i.e:
<meta charset="UTF-8">
  • To help display the page, on mobile devices, set the attribute name to viewport in the <meta> tag. The content attribute sets the display of our page's content to the width of your mobile device and also sets the zoom value when the page is first loaded to 1.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • We use the <title> tag to provide a page title, which is usually visible on the top bar of your browser as a tab title, and in the page search results.
<title>Page title</title>

2) The <body> section contains everything you want to display directly in your browser when you access the page. That is, for example, articles and their content, links, images, tables, etc.

NOTE: Declaration of the DOCTYPE and the tags discussed: html, head and title should be included in every HTML document.