The bulk of the html document, in fact everything that we see in our browser when loading a web page, is located between theandtags . This is where most of the html elements go.
While most elements in HTML5 remain the same as in earlier versions, the way they are used has changed somewhat. Let’s take a look at the basic elements of HTML5, their purpose and use.
The head element and web page metadata
Typically, one of the first elements of an html document is the head element , whose task is to set the page metadata and some accompanying information. Metadata contains information about the html document.
Heading
To set the document title, which appears in the browser tab, use the element title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab Title</title>
</head>
<body>
<p>This will appear into browser tab</p>
</body>
</html>
Base element
The element baseallows you to specify the base address, relative to which other addresses used in the document are set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="content/">
<title>Base</title>
</head>
<body>
<a href="aboutpage.html">About</a>
</body>
</html>
Although the URL for the link is aboutpage.html, the actual URL will be content / aboutpage.html . That is, in the same folder with the current page there should be a content subfolder, in which the newpage.html file should be located
You can also specify the full address:
<base href="https://www.example.com/">
In this case, the link will lead to the address https://www.example.com/aboutpage.html
Meta element
The meta element defines the metadata for the document.
For the document to display the text correctly, you need to set the encoding using the charset attribute . Recommended encoding is utf-8:
<meta charset="utf-8">
It should be remembered that the metaencoding specified for the element must match the encoding of the document itself. Typically, a text editor allows you to specify the encoding of the document. If we want to focus on utf-8, then in the text editor settings we must select UTF-8 w / o BOM .
The element metaalso has two attributes: nameand content. The attribute namecontains the name of the metadata and contentits value.
By default, HTML defines five types of metadata:
application name : the name of the web application of which this document is a part
author : the author of the document
description: a short description of the document
generator: the name of the program that generated this document
keywords: keywords of the document
It should be noted that the most relevant is the type description. Its meaning is often used by search engines as an annotation to a document in search results.
Let’s add a number of meta elements to the document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="content/">
<title>This will appear into browser tab</title>
<meta name="description" content="easywptutorials.com HTML5 Tutorial">
<meta name="author" content="Larry Page, Sergey Brin">
</head>
<body>
<a href="aboutpage.html">About</a>
</body>
</html>