HTML head and meta tags
The HTML head tag contains the metadata and links to external resources that are used by a web page. The contents of the head section are not visible on the web page but are used by the browser to render the page. In this article, we will discuss the different tags that can be used in the head section of an HTML document, along with examples and their outputs.
HTML <head> tag
The <head> tag is used to enclose the head section of an HTML document. The contents of the head section are not displayed on the web page but are used by the browser to provide information about the page. Here is an example of how to use the <head> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 <meta name="description" content="This is my website."> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <h1>Welcome to my website</h1> 10 <p>This is the content of my website.</p> 11 </body> 12</html>
HTML <title> tag
The <title> tag is used to specify the title of an HTML document. The title is displayed on the browser's title bar and is used by search engines to identify the page. Here is an example of how to use the <title> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 </head> 6 <body> 7 <h1>Welcome to my website</h1> 8 <p>This is the content of my website.</p> 9 </body> 10</html>
HTML <meta> tag
The <meta> tag is used to specify metadata about an HTML document. The most commonly used attributes for the <meta> tag are the name and content attributes. The name attribute is used to specify the name of the metadata, and the content attribute is used to specify the value of the metadata. Here is an example of how to use the <meta> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 <meta name="description" content="This is my website."> 6 </head> 7 <body> 8 <h1>Welcome to my website</h1> 9 <p>This is the content of my website.</p> 10 </body> 11</html>
HTML <link> tag:
The <link> tag is used to link an HTML document to an external resource, such as a stylesheet or a JavaScript file. The href attribute is used to specify the URL of the external resource, and the rel attribute is used to specify the relationship between the document and the external resource. Here is an example of how to use the <link> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 <link rel="stylesheet" href="style.css"> 6 </head> 7 <body> 8 <h1>Welcome to my website</h1> 9 <p>This is the content of my website.</p> 10 </body> 11</html>
HTML <style> tag
The <style> tag is used to define the styles for an HTML document. The styles are written in CSS, and are used to control the appearance of the elements on the web page. Here is an example of how to use the <style> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 <style> 6 h1{ 7 color: blue; 8 font-size: 24px; 9 } 10 p 11 { 12 color: red; 13 font-size: 18px; 14 } 15 </style> 16 </head> 17 <body> 18 <h1>Welcome to my website</h1> 19 <p>This is the content of my website.</p> 20 </body> 21</html>
HTML <script> tag
The <script> tag is used to embed scripts in an HTML document. The scripts are written in JavaScript, and are used to add interactivity to the web page. Here is an example of how to use the <script> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 <script> function changeText() 6 { 7 document.getElementById("demo").innerHTML = "Hello World!"; 8 } </script> 9 </head> 10 <body> 11 <h1>Welcome to my website</h1> 12 <p id="demo">This is the content of my website.</p> 13 <button onclick="changeText()">Click me</button> 14 </body> 15</html>
HTML <base> tag
The <base> tag is used to specify the base URL for all the links on an HTML document. The href attribute is used to specify the base URL. Here is an example of how to use the <base> tag:
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>My Website</title> 5 <base href="https://www.example.com/"> 6 </head> 7 <body> 8 <h1>Welcome to my website</h1> 9 <p>This is the content of my website.</p> 10 <a href="about.html">About Us</a> 11 </body> 12</html>