The <head> element acts as a container for metadata, which encompasses information about the HTML document. Positioned between the <html> and <body> tags, metadata isn’t visible to users.
This metadata commonly includes defining the document title, character encoding, styles, scripts, and various other meta information.
The <title> element specifies the document’s title, which must consist solely of text and appears in the browser’s title bar or tab.
It’s imperative to include the <title> element in HTML documents.
The content of the page title holds significant importance for search engine optimization (SEO), as search engine algorithms utilize it to determine page rankings in search results.
The <title> element:
Thus, it’s advisable to craft the title to be as precise and meaningful as possible.
Example of a simple HTML document:
Example
| <!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body> The content of the document…… </body> </html> |
The <style> element is employed to specify style information for an individual HTML page.
Example
| <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> |
The <link> element establishes the connection between the current document and an external resource.
Typically, the <link> tag is utilized to reference external style sheets.
Example
| <link rel=”stylesheet” href=”mystyle.css”> |
The <meta> element is commonly employed to define the character set, page description, keywords, authorship of the document, and viewport settings.
Although the metadata isn’t visible on the page, it is utilized by browsers to determine how to display content or refresh the page, by search engines to identify keywords, and by other web services.
Example
Specify the character encoding utilized:
| <meta charset=”UTF-8″> |
Specify keywords for search engine optimization:
| <meta name=”keywords” content=”HTML, CSS, JavaScript”> |
Provide a description of your webpage:
| <meta name=”description” content=”Free Web tutorials”> |
Specify the authorship of a page:
| <meta name=”author” content=”John Doe”> |
Refresh the document every 30 seconds:
| <meta http-equiv=”refresh” content=”30″> |
Configuring the viewport to ensure optimal display of your website across various devices:
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
Illustration of <meta> tags:
Example
| <meta charset=”UTF-8″> <meta name=”description” content=”Free Web tutorials”> <meta name=”keywords” content=”HTML, CSS, JavaScript”> <meta name=”author” content=”John Doe”> |
The viewport denotes the portion of a web page that is visible to the user. Its dimensions differ depending on the device, being smaller on a mobile phone compared to a computer screen.
It’s recommended to incorporate the following <meta> element into all your web pages:
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
This provides the browser with directives on managing the page’s dimensions and scaling.
The “width=device-width” segment adjusts the page’s width to match the device’s screen-width, which may vary depending on the device.
The “initial-scale=1.0” segment establishes the initial zoom level when the page is initially loaded by the browser.
Below is an illustration comparing a webpage without the viewport meta tag to the same webpage with the viewport meta tag:
| Note: If you are accessing this page using a smartphone or tablet, you can tap on the two links below to observe the distinction. |
The <script> element is employed to declare client-side JavaScripts.
The subsequent JavaScript code writes “Hello JavaScript!” into an HTML element identified by id=”demo”:
Example
| <script> function myFunction() { document.getElementById(“demo”).innerHTML = “Hello JavaScript!”; } </script> |
The <base> element defines the base URL and/or target for all relative URLs within a page.
The <base> tag must contain either an href attribute, a target attribute, or both.
A document can contain only a single <base> element.
Example
Define a default URL and target for all links within a page:
| <head> <base href=”https://www.w3schools.com/” target=”_blank”> </head> <body> <img src=”images/stickman.gif” width=”24″ height=”39″ alt=”Stickman”> <a href=”tags/tag_base.asp”>HTML base Tag</a> </body> |
