HTML HEAD ELEMENT
In this tutorial, we will learn about the HTML head element and types of element that lies inside it.
HTML head element
HTML head element is one of the most important elements of HTML document, it contains the part of the document which is not directly visible on the window.
The HTML head is the contents of
The head section contains information such as metadata (data about the HTML document, such as keyword, description, author), CSS style, links to 'favicon', script etc. Unlike the body element, the head element contains data which is not visible on the screen.
The head element basically composed of these 6 different types of HTML elements:
1. HTML title element
The title element (
<title>) defines the title of the document.
The title element is required in all HTML documents to produce a valid document. The title of a webpage is shown in the title bar or page's tab.
Only 1 title element should be placed in an HTML document and must be placed in the head of the document. The title element should only contain text element, tags within the title are ignored and treated as simple text.
It is the content of the title tag that is shown as the heading of the specific search result in the search engine. It has a significant role in search engine optimization (SEO).
2. HTML meta elements
The <meta> elements are used to provide metadata about the web page.
Metadata is a set of data that describes and gives information about the webpage. The data of meta tags are not visible on the web page but are machine parsable.
The type of data provided by metadata could be Keywords, author, page description, last modified and other metadata.
Learn about meta tag in detail in next chapter.
3. HTML link tag
The <link> element is used to define relationship between current HTML document and external resource.
The most common external resource added using <link> tag is CSS stylesheets. Other than stylesheet it is also used to add a “favicon" icon.
To add stylesheet href attribute is used inside link tag to provide URL of the stylesheet and rel attribute is used to specify the relation between the documents.
4. HTML base tag
The HTML base element defines a base URL to be used for all relative URLs in a document.
Means, you set a base URL in the head section of the document all the relative URLs will start at that point, e.g if you add base URL to https://www.tutorialstonight.com then any relative URL like html/html-head.php will become https://www.tutorialstonight.com/html/html-head.php regardless of URL of the current webpage.
An HTML document can have one and only one base tag and must be inside the head.
See in the example below.
Note: The HTML <base> element must come before any resource that use base URL.
5. HTML style element
The style element is one of the most important tags of HTML documents. It is used to define internal CSS properties for a web page in the head section.
The CSS properties are defined as the usual way inside <style> element.
You can add more than one style element inside the head section.
Note: It is recomended to put your CSS styles in external stylesheet and link it to the document using <link> element.
6. HTML script tag
It can be anywhere both in the head section or in the body section of the HTML document.
To link external script file
src attribute is used which accepts URL of the script file.