<!–
main_leaderboard, all: [728,90][970,90][320,50][468,60]
–>
HTML – The Head Element
HTML heads are the topic of the article. Below elements are contained in the HTML <head> element:
<title>, <style>, <meta>, <link>, <script>, and <base>.
The HTML <head> Element
The <head> element, located between the <html> and <body> tags, is a container for metadata.
Metadata is information about HTML documents. This page does not display metadata.
A document’s metadata are determined by its title, character set, styles, scripts, and other elements.
The HTML <title> Element
The <title> element represents the document’s title. It appears in the browser’s title bar or on the tab of the page, and it must be text-only.
HTML documents must contain a title element!
Search engine optimization (SEO) relies heavily on the contents of a page title! Search engine algorithms use page titles to determine the order in which pages appear in search results.
The <title> Tag:
- Creates a toolbar title for the browser
- Sets a title to a favourited page
- Shows the page’s title in search engine results
This is why it’s crucial to provide your HTML head with a title that’s as descriptive and informative as feasible.
Here is a simple HTML document:
Example
The HTML <style> Element
The <style> tag is utilized to specify styling in the below example:
Example
The HTML <link> Element
The <link> tag indicates the link between an external html resource and the current document.
Typically, a <link> element links to an external style sheet:
Example
Tip: Visit our CSS Tutorial to learn all about CSS.
The HTML <meta> Element
Meta <meta> tags are generally use in HTML heads to specify character sets, page descriptions, keywords, authors, and viewport settings.
Metadata doesn’t appear on the page , but it’s utilized by web browsers to show content or reload the page, search engines (keywords), and other web services.
Character encoding
Character encoding is determined by the charset attribute. With “UTF-8” set, any language can be displayed in this example:
<meta charset=”UTF-8″>
Example:
Defining keywords for search engines:
Create a description for your web page:
Identify the author of a page by:
25 second refresh of the document:
<meta http-equiv=”refresh” content=”25″>
Example:
Make your website mobile-friendly by setting the viewport as follows:
The following are examples of <meta> tags:
Example:
Here is another example of complete meta information:
Example:
Setting The Viewport
Viewports are areas of web pages that are seeable to readers. The viewport size changes depending on the device – for example, it will be more minor on a mobile phone than on a computer screen.
Ensure that all your web pages contain the following <meta> tags:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Browsers use this to control the dimensions and scaling of pages.
The width=device-width property sets the width of the page to match the screen-width of the device (which is variable).
When the browser loads the page for the first time, the initial-scale=1.0 part sets the initial zoom level.
A web page without the viewport meta tag and the same web page with the viewport meta tag is shown below:
You can see the difference using a phone or tablet by clicking on the two links below.
Without the
viewport meta tag
With the
viewport meta tag
The <script> Element
The <script> element is used to specify JavaScript.
Here is what JavaScript looks like when it documents “Learn JavaScript!” into an HTML element with id=”js examples”:
Example
Note : Visit upcoming JavaScript classes to learn more.
Here is another example of Script in the head element:
Example:
The HTML <base> Element
An <base> tag define the base URL and/or target of all relative URLs.
At least one href attribute or both target attributes must appear in the <base> tag.
Documents can only contain one <base> tag!
For all links on a page, set a default URL and target:
Example
HTML head Elements
| Tag | Overview |
|---|---|
| <style> | A document’s style information. |
| <title> | Describes the title of a document. |
| <link> | Relationship between a document and an external resource. |
| <head> | Provides information about the document. |
| <script> | Creates a script that runs on the client. |
| <meta> | Determining HTML document metadata. |
| <base> | Sets the default address or target for all links on a page. |
Here is a complete list of all HTML tags.
Benefits of HTML Head Element
The HTML <head> element holds significant importance in web development as it provides metadata and other essential information about the web page to the web browser. Here are some benefits of using the <head> element in web development:
Improved Search Engine Optimization (SEO)
The <head> element enables web developers to include metadata, such as keywords and descriptions, which search engines use to rank and display web pages in search results, resulting in better search engine optimization (SEO).
Better Web Page Loading Times
Web developers can enhance web page loading times by defining and loading external resources like CSS and JavaScript files through the <head> element.
Improved Accessibility
The <head> element enables web developers to specify the language of the web page and other accessibility features, which can improve the experience for users with disabilities.
Better Website Branding
The <head> element can be utilized to define the website’s favicon, the small icon that appears next to the page title in the browser’s tab. This can help to improve the website’s branding and recognition.
Enhanced User Experience
Web developers can use the <head> element to include other elements like meta tags that provide additional information about the web page, resulting in an enhanced user experience.
