HTML <head> Tag
Let’s talk about HTML Tag head examples in this post. It should be a worthwhile learning experience.
The <head> tag is an important element in HTML that is used to provide information about the document that is not visible on the web page itself. It is located between the opening <html> tag and the opening <body> tag of an HTML document.
A basic HTML document with a <title> tag as a part of the head section:
Example
The following are further examples of Tag Head.
<base> tag (defines the URL and target for any links on a page) appears within <head>:
Example:
<style> tag (for including style details to a page) is placed inside <head>:
Example:
<link> tag (for linking to an external style sheet) appears inside <head>:
Example:
An HTML document’s <meta> tag specifies its metadata. In other words, metadata is data (information) about data. Here is an example of meta within the <head> tag:
Example:
HTML <head> Tag Working
Here are some of the things that can be included within the <head> tag:
- The title of the web page is typically included within the <title> tag. This text appears in the browser’s title bar and is also used by search engines to describe the page in search results.
- Meta tags can be included within the <head> section to provide information about the web page to search engines and other software. Common meta tags include description, keywords, author, and viewport.
- The <head> section can include references to external CSS and JavaScript files. This is typically done using the <link> and <script> tags, respectively.
- A favicon is a small icon that appears in the browser’s address bar and on browser tabs. It can be included within the <head> section using the <link> tag and the rel=”icon” attribute.
- Other elements that can be included within the <head> section include the <base> tag, which specifies the base URL for all relative URLs on the page, and the <style> tag, which is used to embed CSS styles directly within the HTML document.
Tag Head Usage
The <head> element includes metadata (data about data) and lies between the <html> tag and the <body> tag.
The document’s metadata is information about it. There is no display of metadata.
Titles, character sets, styles, scripts, and other meta information are generally specified by metadata.
Elements that can be placed inside the <head> element include:
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <head> | Yes | Yes | Yes | Yes | Yes |
Attributes
Global
The Tag head <head> is compatible with the Global Attributes in HTML.
Predefined CSS
When it comes to Tag head, a lot of browsers provide the <head> element with the default values as follows:
head {
display: none;
}HTML <head> Tag Benefits
The HTML <head> tag provides several benefits for web developers and website visitors. Here are some of the key benefits:
- The <head> tag allows you to include meta tags that provide information about the web page to search engines. This can help to improve the search engine rankings of your website and increase traffic to your site.
- By including a <title> tag in the <head> section, you can provide users with a clear and descriptive title for the web page. This can help to improve the user experience and make it easier for users to find the information they are looking for.
- The <head> tag allows you to include information that is specific to certain browsers, such as a favicon or viewport meta tag. This can help to ensure that your website displays properly on different devices and browsers.
- The <head> tag can be used to include accessibility-related metadata, such as language and accessibility settings. This can help to ensure that your website is accessible to all users, including those with disabilities.
- By including external CSS and JavaScript files in the <head> section, you can help to improve the page loading speed of your website. This is because the browser can begin downloading these files while it is parsing the rest of the HTML document.
