Each HTML document on the Internet consists of various elements. Many of them are quite common and are found on almost every site. For example, the content of a page is usually divided into paragraphs; it contains headings, images, and links. But, despite the fact that these elements are common, their presence in the code is optional. There is no technical need for them on the web page. However, it’s rare to find a site without these tags.
<head> tag assignment
There are elements that must be present in the code. Technically, there is only one tag that should be present at the top of all documents written in HTML - the <html> tag. It allows the browser to understand where the page starts and ends. Between the opening and closing <html> tags, the entire contents of the HTML page is placed. Before it is only a doctype. Most of the other technically important elements are inside the <head> tag, which is located inside the <html> and located at the very beginning of the code. He and the <body> tag are his descendants.
What is contained in <head>
The <head> element is a container for other elements. It contains general information (metadata) about the document, including its name, links to scripts and style sheets. Metadata provides technical information about the document, such as title, description, keywords. Where the <head> tag is located, the <body> is located where the site content is placed. Metadata is hidden from visitors, but used by optimizers to promote the page. They and heading tags (<h1> - <h6>) are very useful because they transmit information to the web browser, as well as search engines about this page.
The order of most elements in <head> is not significant. This is a matter of preference, so they can be written in a way convenient for the layout designer. Metadata is necessary for search engine optimization, as it makes it easier for bots indexing sites to find and display them in a specific order on the search page. The display order depends on the algorithms of their work, which include including the correct technical information about the page.
What elements may be present in <head>
The following elements may be inside this tag: <title> (this element is required for an HTML document), <style>, <base>, <link>, <meta> <script>, <noscript>.
In the <head> tag you can:
- Include external files such as CSS, JavaScript, etc.
- Insert links to plugins carousel, pickdate, etc.
- Add links to libraries like jquery, Angularjs, vuejs, etc.
- Connect frameworks like bootstrap.
- Embed meta tags that describe how the site will look in the browser.
- This is where the required <title> tag is located, which contains the page title.
Most metadata is not displayed in the browser. Only <title> usually appears in the browser title bar. This can be useful for the functionality of the page, and the information can be easily checked through the "Inspector".
Syntax and Attributes
The <head> tag is a pair. What does it mean? The information in it is written between the opening and closing tags as <head> </head>. What should most HTML documents have? This is the <title> tag in the <head>. The only exception: if the document is an <iframe> srcdoc, or the information that needs to be enclosed in the header is already in the higher level protocol. An example is the HTML email format. Attributes can be added to an HTML element to provide more information about how the element should look or behave. The <head> tag accepts the profile attribute, where the address of the metadata profile and other global attributes are written. But they are not required.
<title> tag and its features
The <title> element or page title is one of the most important meta tags in <head>. It should always be present on the web page, otherwise the search robots will not be able to quickly find it and correctly display it in the search results. In addition to this, there are a number of reasons why its use is mandatory:
- It displays the name of the site.
- It is used as the main tool for cataloging. If a web page does not have a name that describes its content, search engines give it a lower rating.
- Also, the contents of the <title> are displayed as a text link on the SERP page.
- It is displayed at the top of the browser window. Or on the tab that describes the page in the browser.
- Information from the page title is recorded when someone bookmarks the site. Therefore, its contents must be memorable so that the user can easily remember and find it among other web pages.
- If this tag is not used, then the website will display an "Untitled Document". It is the default page title. This title is used on many web development software platforms.
Since the <title> tag is intended to display information about the site, each page should have a unique title, since it contains unique content. This is the most important thing for SEO. A good headline should be realistic and display the information that is actually present on the page. It is believed that the optimal content for this tag should not exceed 60 characters. You can add more, but search engines will clip content if it exceeds this number.
Metadata in <head>
The <head> tag defines the section in which the technical information of the HTML document is located. Metadata contains additional information about the web page in the browser. They can include information such as the name of the author, the program that was used to create the page, and keywords. The most important meta tag that should be in the page code is the encoding. Meta tags are very important to get a good ranking on search engines. Therefore, it is important to create quality page headers and descriptions.
Other important tags
There may be other elements in the <head> tag. For example, <style> is used to add internal styles and change the appearance of a document. However, it is recommended to include external styles in <head> - this is much better in order to separate the content from its design. This can be done using the <link> tag. You can add an external stylesheet using the following code: <link href = "main.css" rel = "stylesheet">. The href attribute is required for this tag, which indicates a link to a file with CSS styles, as well as rel, which states that these are styles. There are other options for using the <link> tag, for example, to create a favicon, an icon for a web page that appears in search results. The rel attribute is also used differently and is often used when creating mobile applications.
If you add multiple <style> and <link> elements to the document, they will be applied in order. Therefore, it is important to make sure that they follow each other in the correct order to avoid surprises. In the HTML language, the <link> element is used to add an external resource to the current document and is most often used to refer to styles. Scripts can also be included in the <head> tag. The <script> tag allows you to add JavaScript to the site, but it is recommended to embed it shortly before closing the <body>. Then all content will be loaded first, and then JavaScript will be processed. This will help increase the page loading speed and prevent the user from viewing a blank screen while the script is connecting.