Summary of “HTML document structure”

Each HTML document starts with a document type declaration or doctype. The document type is necessary to allow the browser to determine the HTML version and therefore to correctly display the page.

<!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.

You use the <link> tag to link styles to the webpage. To do this, you can use the attribute href, which is used to specify the address to the style file, and the value stylesheet of the rel attribute tells the browser that we want to connect to particular styles and not something else.

<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 assign the page title, which is displayed 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. You can use <meta> to transmit various metadata (or meta information) to the browser, search engine bot or other device about your site, including the character encoding, content description and so on. 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 those tags that are displayed on the page. For example, the <main> tag highlights the main content of the page, which is not repeated on other pages. Usually only one <main> is used on a single page.

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 is used to include additional content that is not directly related to the main content. These blocks are often referred to as sidebars or side panels.

We use headers to create the basic structure for the text. HTML provides an entire family of header tags: from <h1> to <h6>. The <h1> tag indicates the most important heading (top level heading), whereas the <h6> tag denotes the the lowest level subheader.

<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.


Continue