The HTML header is used to define the head portion of the HTML document which contains information related to the document. It is placed between <html> tag and the <body> tag.
The <head> tag specifies header of the document.
The HTML header section is a part whose content is not displayed on the webpage on page loading.
HTML header contains metadata about the HTML document which specifies data about the HTML document.
An HTML document contains a <title> tag, <meta> tags, a <script> tag and a <style> tag, all these elements are enclosed in the <head> element.
Following tags are used in metadata:
- <title>
- <style>
- <meta>
- <link>
- <script>
- <base>
HTML <title> Element:
The title tag is used to declare the title or name of the HTML document. The title written inside <title>…</title> is displayed in browser’s title bar. It is also displayed in the bookmarks and search results.
HTML <Style> Element:
An HTML <style> element is used to style the HTML page. The <style> element have CSS properties for that page only. If you want to apply CSS for multiple pages then you should use the separate CSS file.
HTML <link> Element:
The <link> element in HTML is used to link an external stylesheet to your webpage.
The <link> element has two main attributes which are “rel” and “href”. The “rel” indicates specifies the relationship between two linked documents and “href” specifies the path to that external file.
HTML <meta> Element:
The HTML <meta> element is used to define the character set, page description, keywords, authors and other metadata on the webpage.
Metadata is used by browsers, search engines, and other web services to rank your webpage better.
Let's see how to use metadata:
To define a character set:
The attribute charset = utf-8 is character encoding capable of encoding all characters on the web.
To define a description of your webpage:
The meta description is used for the relevant search, performed by search engines.
To define keywords for search engines:
The keyword value is used to provide keywords for a search engine.
To define author of the webpage:
The author value specifies the name of the person who wrote the page content.
To refresh document every 30 seconds:
Meta refresh is used to give instructions to the browser to automatically refresh the page after the given time interval.
Following example shows how to use all Meta elements within the HTML head.
Use of <meta> tag to set the Viewport:
The viewport is the area of the web page that is visible to the user. The viewport does not have the same size, its size varies with the variation in screen size. HTML5 introduced a method to take control of the viewport by using <meta> tag.
Syntax for viewport element:
The <meta> viewport element specifies how to control dimensions and scaling of the page.
The width=device-width used to set the width of the page to follow the screen-width of the device(which is varying depending on the device).
The initial-scale=1.0 is used to set the initial zoom level when the page is first loaded by the browser.
HTML <script> Element:
The <script> tag in HTML is used to specify client-side script.
The <script> tag either contains the statements to be a script or it points to an external script file through src attribute.
HTML <base> Element:
The <base> element is used to specify a base URL for relative links. This URL will be the base URL for every link on the webpage.
Excluding <html>, <head> and <body> Elements:
In HTML5 standard you can exclude the <html>, the <body>, and the <head> tag.
Note: It is not recommended to exclude the <html> and <body> tags. Excluding these tags can crash DOM or XML software and produce errors in older browsers (IE9).