Summary of “HTML document structure”

An HTML document begins with a document type declaration, or doctype. The modern HTML doctype tells the browser to use standards mode.

<!DOCTYPE html>

The very simplest HTML page consists of at least three tags: <html>, <head> and <body>. The <head> tag typically contains a title, keywords, page description and other metadata, and it often refers to style files and other external resources. The content of this tag is not displayed directly on the page. Rather, the <body> tag is used to surround webpage contents, which are displayed in the browser window.

Use the <link> tag to link a stylesheet to a webpage. The href attribute gives the stylesheet’s address, and rel="stylesheet" tells the browser what kind of resource the file is.

<head>
  <link href="style_file_address.css" rel="stylesheet">
</head>

The <title> tag is yet another element that is located inside <head>. You can use this tag to set the page title, which appears in browser tabs. The title should make it clear what this page is about, even when it is not open in the browser, since the title is displayed in search engine results or in browser bookmarks.

<head>
  <title>Courses — HTML Academy</title>
</head>

Another important tag that is also located inside <head> is the <meta> tag. This is a single tag. In other words, it does not require a paired closing tag at the end. The <meta> tag provides information about the page to browsers, search engines and other software. This can include the character encoding or a short description of the page. To do this, <meta> tags with various attributes and values are used.

The character encoding for the HTML page is specified using the charset attribute:

<meta charset="name of character encoding">

The most widely used character encoding in current use is utf-8.

You can specify a list of keywords using the tag <meta>, which has the attribute name and is assigned the value keywords. Keywords (the most important words from the page content) are listed in the content attribute and separated from each other with commas:

<meta name="keywords" content="important, key, words">

You can write a short description (or summary) for your page in the same way, only here the value of the attribute name will be changed to description:

<meta name="description" content="short description">

<body> contains the page content displayed in the browser. The <main> tag identifies the page’s main content, excluding repeated elements such as site navigation. Usually, a page has one <main> element.

The <header> tag contains the introductory part of the page, which is often called the “header”, whereas the <footer> tag describes the final part of the page, or the “footer”. We also have the <section> tag, which marks a large content (or “logical”) section.

The <article> tag denotes a complete and independent piece of information.

To create a logical section with main navigation elements, use the <nav> tag (which is an abbreviation for “navigation”). Usually <nav> includes links to other pages or navigation elements for the current page.

The <aside> tag marks content that is indirectly related to the surrounding content. These blocks are often called sidebars or side panels.

We use headings to give text its basic structure. HTML provides six heading levels, from <h1> to <h6>. The <h1> tag marks a top-level heading, while <h6> marks the lowest-level subheading.

<h1>HTML specification</h1>
<h2>Section 1: Introduction</h2>
<h3>Section 1.1: The origin of the language</h3>

You can create the basic structure for the text using headings. The finer structure can be specified using paragraphs. The <p> tag is intended for marking up paragraphs. By default, paragraphs begin with a new line and are separated from the rest of the content by top and bottom margins.