Introduction to HTML <head> Element | Also known as metadata (data about data)
The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.{alertSuccess}
The <head> tag primarily acts as a container for all head elements, which provide additional information about the HTML document – such as metadata.
Head tags refer to other resources that are necessary for the document to display or behave correctly in a web browser.
Head elements collectively describe properties of the document, such as the title; Head elements provide information about metadata like character set; Within the Head tag, we can define CSS properties or JavaScript script.
We can also link the external stylesheet or javascript files within the Head Tag with the HTML document.{alertInfo}
{tocify} $title={Table of Contents}
HTML <head> Element
The HTML <head> element is utilized as a container for metadata (data about data). It is operated between <html> tag and <body> tag.
The head of an HTML document is a part whose content is not displayed in the browser on page loading. It just contains metadata about the HTML document, specifying the HTML document's data.
An HTML head can contain lots of metadata information or significantly less or no information, depending on our requirements.{alertSuccess}
But the head part has an essential role in an HTML document while creating a website.
Metadata defines the document title, character set, styles, links, scripts, and other meta information.
Following is a list of tags used in metadata:
- <title>
- <style>
- <link>
- <meta>
- <script>
- <base>
HTML <title> Element
The <title> element represents the title of the document. The title must be text-only, and it must be displayed in the browser's title bar or in the page's tab.
The <title> element is required in HTML documents!
The content of a page title is essential for search engine optimization (SEO)! Search engine algorithms use the page title to decide the order when listing pages in search results.
What does <title> element do?
- It represents a title in the browser tab.
- It delivers a title for the page when it is added to favorites.
- It shows a title for the page in search engine results.
So, create a title as accurate and meaningful as possible!
A simple HTML document:
Example -
<!DOCTYPE html><html><head><title> The Ultimate Guide To Page Titles </title></head><body>Your content of the document......</body></html>{codeBox}
HTML <style> Element
The <style> element is utilized to define style information for a single HTML page:
Example:
<style>body {background-color: lightgrey;}h1 {color: crimson;}p {color: black;}</style>{codeBox}
Note: We should use a separate CSS file if we want to apply CSS for multiple pages.{alertInfo}
1. The <style> element must be contained inside the <head> of the document.
2. it is more profitable to put your styles in external stylesheets and apply them using <link> elements.
3. If you have multiple <style> and <link> elements in your document, they will be applied to the DOM in the order they are included in the document — make sure you contain them in the correct order to avoid surprising cascade issues.
4. In an exact manner as <link> elements, <style> elements can have media attributes that have media queries, permitting you to selectively apply internal stylesheets to your document relying on media features such as viewport width.
HTML <link> Element
The HTML <link> element links an external style sheet to your webpage. The <link> element includes two main attributes, which are "rel" and "href".
The rel attribute points that it is a stylesheet, and the href gives the path to that external file.
Example:
<!DOCTYPE html><html><head><title> The Ultimate Guide To Page Titles </title><link rel="stylesheet" href="mystyle.css"></head><body>Your content of the document......</body></html>{codeBox}
HTML <meta> Element
The <meta> element is generally utilized to determine the character set, page description, keywords, author of the document, and viewport settings.
The metadata will not be shown on the page but is utilized by browsers (how to deliver content or reload the page), by search engines (keywords), and for different web services.
Examples:
Define the character set used:
<meta charset="UTF-8">{codeBox}
The charset attribute determines the character encoding. In the example down below, we have set it to "UTF-8," which means it can handle to display of any language.
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">{codeBox}
The keyword value is also utilized to provide keywords for a search engine. However, it may ignore by the browser due to spammers.
Define a description of your web page:
<meta name="description" content="Free Web tutorials">{codeBox}
If you give a meta description, then it will be helpful for the relevant search to perform by search engines.
Define the author of a page:
<meta name="author" content="John Doe">{codeBox}
The author value defines the name of the individual who wrote the page content, and it is helpful to automatically extract author information by some content management systems.
Refresh the document every 30 seconds:
<meta http-equiv="refresh" content=20">{codeBox}
Meta refresh is used to automatically instruct the browser to refresh the page after the given time interval. As in the above example, it will automatically refresh after 20 sec.
Setting the viewport to make your website look good on all devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">{codeBox}
Setting The Viewport
This technique is presented in HTML5 to grab control over the viewport by using <meta> tag.
The viewport is the user's seeable area of a webpage. It transforms from device to device and appears smaller on mobile phones than on computer screens.
Syntax for <meta> viewport element:
<meta name="viewport" content="width=device-width, initial-scale=1.0">{codeBox}
This gives the browser instructions on controlling the page's dimensions and scaling.
The width=device-width part sets the page width to follow the device's screen width (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the browser first loads the page.
Example of <meta> tags:
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML, CSS, JavaScript"><meta name="author" content="John Doe">< meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><p>All meta information goes inside the head section.</p></body></html>{codeBox}
HTML <script> Element
The HTML <script> element applies client-side JavaScript for the same page or adds an external JavaScript file to the current page.
The following JavaScript writes "MY JavaScript!" into an HTML element with id="AT-demo":
Example:
<!DOCTYPE html><html><head><title>Page Title</title><script>function myFunction() {document.getElementById("AT-demo").innerHTML = "MY JavaScript!";}</script></head><body><h1>My Web Page</h1><p id="AT-demo">A Paragraph</p><button type="button" onclick="myFunction()">Try it </button></body></html>{codeBox}
HTML <base> Element
The <base> element determines the base URL and/or target for all relative URLs in a page.
The <base> tag must include either an href, a target attribute present, or both.
There can only be one single <base> element in a document!
Example:
<!DOCTYPE html><html><head><base href="https://www.xyz.com/" target="_blank"></head><body><h1>The base element</h1><p> <img src="images/stickman.gif" width="24" height="39" alt="Stickman">- Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at"https://www.xyz.com/images/stickman.gif".</p><p> <a href="tags/tag_base.html"> HTML base tag </a>- Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p></body></html>{codeBox}
Note: Do not forget to change the image and other links to make your document work.{alertWarning}
Chapter Summary
- The <head> element is a container for metadata (data about data)
- The <head> element is placed between the <html> tag and the <body> tag
- The <title> element is needed to define the document's title.
- The <style> element specifies style information for a single document.
- The <link> tag is most frequently used to link to external style sheets.
- The <meta> element is generally utilized to specify the character set, page description, keywords, author of the document, and viewport settings.
- The <script> element is used to specify client-side JavaScript.
- The <base> element determines the base URL and/or target for all relative URLs in a page.
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML <head>: Metadata (Header) elements, Usage, Attributes, and Examples.” If this post is favorable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
 elements, Usage, Attributes, and Examples){kind=link}