HTML <head> Tag: The Secret to a Well-Structured and Search Engine-Friendly Web Page
{tocify} $title={Table of Contents}
The <head> tag in HTML is an essential element that is used to contain metadata and other important information about a web page.
It is located between the opening <html> tag and the opening <body> tag, and is not visible on the web page itself.
The <head> tag contains information that is not displayed on the web page but is essential for search engines, web browsers, and other software to properly understand and interpret the contents of the page.
Let's take a closer look at the different types of information that can be included within the <head> tag, used in metadata:
- <title>
- <style>
- <link>
- <meta>
- <script>
- <base>
HTML <title> Element
The HTML <title> element is one of the essential elements of an HTML document's <head> section.
It is used to specify the web page's title, which appears in the web browser's title bar, bookmarks, and search engine results pages.
The <title> element should be included in every HTML document and should accurately reflect the content of the page.
Here's an example of how the <title> element is used in an HTML document:
<!DOCTYPE html><html><head><title>My Web Page</title></head><body><h1>Welcome to My Web Page</h1><p>This is the home page of my website.</p></body></html>{codeBox}
In the example above, the <title> element is used to specify the web page title as “My Web Page”.
This title will be displayed in the web browser's title bar, bookmarks, and search engine results pages.
It's important to note that the text contained within the <title> element should be concise, descriptive, and relevant to the content of the page.
Search engines use the title to determine the page's subject matter and display it in search results, so it's essential to choose a title that accurately reflects the page's content and includes relevant keywords.
In addition to being essential for search engine optimization, the <title> element is also important for user experience.
A clear and descriptive title helps users understand the purpose of the page and makes it easier for them to navigate the website.
HTML <style> Element
The HTML <style> element defines a block of CSS (Cascading Style Sheets) within an HTML document.
CSS is used to style the appearance of web pages, including fonts, colors, layouts, and more.
The <style> element allows you to specify CSS rules that apply to the elements within the HTML document.
Here's an example of how the <style> element is used in an HTML document:
<!DOCTYPE html><html><head><title>My Web Page</title><style>body {background-color: #f0f0f0;}h1 {color: blue;font-size: 24px;}</style></head><body><h1>Welcome to My Web Page</h1><p>This is the home page of my website.</p></body></html>{codeBox}
The <style> element defines two CSS rules in the example above.
The first rule sets the background color of the <body> element to light gray (#f0f0f0), and the second rule sets the color of all <h1> elements to blue and the font size to 24 pixels.
It's important to note that CSS rules defined within the <style> element only apply to the HTML document in which they are defined.
If you want to apply the same styles to multiple pages on your website, you can define the CSS rules in an external CSS file and link to it from your HTML document.
The <style> element can also be used to define CSS rules for specific media types, such as print or screen. This allows you to specify different styles for different output devices or media.
HTML <link> Element
The HTML <link> element links external resources to an HTML document, such as CSS files, JavaScript files, and font files.
Using the <link> element, you can separate your content from your styling and functionality, making it easier to manage and update your website.
Here's an example of how the <link> element is used to link a CSS file to an HTML document:
<!DOCTYPE html><html><head><title>My Web Page</title><link rel="stylesheet" href="style.css"></head><body><h1>Welcome to My Web Page</h1><p>This is the home page of my website.</p></body></html>{codeBox}
In the example above, the <link> element links an external CSS file called “style.css” to the HTML document.
The rel attribute is set to “stylesheet” to indicate that the linked file is a CSS file, and the href attribute specifies the location of the file relative to the HTML document.
The <link> element can also be used to link to other types of external resources, such as JavaScript files, font files, and RSS feeds.
Here's an example of how the <link> element is used to link a JavaScript file to an HTML document:
<!DOCTYPE html><html><head><title>My Web Page</title><link rel="stylesheet" href="style.css"><link rel="script" href="script.js"></head><body><h1>Welcome to My Web Page</h1><p>This is the home page of my website.</p></body></html>{codeBox}
In the example above, the <link> element links an external JavaScript file called "script.js" to the HTML document.
The rel attribute is set to "script" to indicate that the linked file is a JavaScript file, and the href attribute specifies the location of the file relative to the HTML document.
HTML <meta> Element
The HTML <meta> element provides metadata about an HTML document.
Metadata is data about the data, and it can include information such as the document's title, author, description, and keywords.
The <meta> element is included in an HTML document's <head> section.
Let's see how to use metadata:
To Define a character set:
<meta charset="UTF-8">{codeBox}
The charset attribute defines the character encoding. In this example, we have set it to "UTF-8," indicating it can handle any language display.
Example:
<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><p>This is written in English language<span style="color: blue"> My friend's name is.......</span></p><p>This is Chinese language <span style="color: red">Wǒ de péngyǒu jiào</span></p></body></html>{codeBox}
To define a description of your webpage:
<meta name="description" content="Free Web tutorials">{codeBox}
If you give a meta description, it will be helpful for the relevant search by search engines.
To define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">{codeBox}
The keyword value is also utilized to deliver keywords for a search engine. However, it may be ignored by the browser due to spammers.
To define author of the webpage:
<meta name="author" content="Akash">{codeBox}
The author value defines the name of the person who composed the page content. It is helpful to extract author information from some content management systems automatically.
Following is an example to show how to use all Meta elements within HTML head
Example:
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="author" content="Akash"> </head><body><p>All the meta information is set.</p></body></html>{codeBox}
HTML <script> Element
The <script> element is an HTML tag used to define client-side JavaScript code that is executed within the browser.
It is typically placed within the <head> or <body> section of an HTML document, although it can also be included in an external file and linked to the HTML document using the <script> tag.
Here's an example of how to use the <script> tag within an HTML document:
<!DOCTYPE html><html><head><title>My Website</title><script>function greet() {alert("Hello, world!");}</script></head><body><h1>Welcome to my website</h1><button onclick="greet()">Click me</button></body></html>{codeBox}
In this example, we define a JavaScript function called “greet()” within the <script> tag in the <head> section of the document.
We then use this function in the onclick attribute of a button element within the <body> section of the document.
When the button is clicked, the greet() function is executed, causing an alert box to appear with the message "Hello, world!".
The <script> tag also has several attributes that can be used to specify how the script should be executed or linked to an external file.
Here are some of the most common attributes:
- src: Specifies an external script file URL to be linked to the document. For example: <script src="myscript.js"></script>.
- async: Specifies that the script should be executed asynchronously, without blocking the loading of the rest of the document. For example: <script async src="myscript.js"></script>.
- defer: Specifies that the script should be executed after the document has finished parsing, but before the DOMContentLoaded event is fired. For example: <script defer src="myscript.js"></script>.
- type: Specifies the MIME type of the script. For JavaScript, the value should be "text/javascript" or "application/javascript". For example: <script type="text/javascript" src="myscript.js"></script>.
HTML <base> Element
The HTML <base> element is used to specify the base URL for all relative URLs in a web page.
It should be placed within the <head> section of an HTML document and should only appear once.
Here's an example of how to use the <base> tag within an HTML document:
<!DOCTYPE html><html><head><base href="https://www.example.com/" /><title>My Website</title></head><body><h1>Welcome to my website</h1><a href="about.html">About Us</a></body></html>{codeBox}
In this example, we use the <base> tag to set the base URL of the page to "https://www.example.com/".
This means that any relative URLs used within the page, such as the "about.html" link, will be resolved relative to this base URL.
Without the <base> tag, the relative URL "about.html" would be resolved relative to the current URL of the page.
For example, if the current URL was "https://www.example.com/products/index.html", the "about.html" link would resolve to "https://www.example.com/products/about.html".
However, with the <base> tag set to "https://www.example.com/", the "about.html" link will resolve to "https://www.example.com/about.html".
The <base> tag has one required attribute, href, which specifies the base URL for relative URLs. Additionally, the <base> tag can have an optional attribute target, which specifies the default target for all links and forms in the document.
For example:
<!DOCTYPE html><html><head><base href="https://www.example.com/" target="_blank" /><title>My Website</title></head><body><h1>Welcome to my website</h1> <a href="about.html">About Us</a><form action="contact.php" method="post"><button type="submit">Contact Us</button></form></body></html>{codeBox}
In this example, we set the target attribute of the <base> tag to "_blank", which means that all links and forms in the document will open in a new browser window or tab by default.
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML <head> Tag” If this post is favourable 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.
