HTML Head
The <head> element in HTML is an essential part of every web page. It contains metadata (data about data) and links to external resources that are used by the browser to render the page correctly. The content within the <head> element is not displayed directly on the webpage, but it plays a crucial role in defining the structure, style, and behavior of the page.
Common <head> Section Elements
Here’s a table of common elements that can be included in the <head> section of an HTML document:
| HTML Element | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of the document |
| <base> | Defines a default URL or target for all links |
| <link> | Defines the relationship with an external resource |
| <meta> | Defines metadata about the HTML document |
| <Script> | Defines a client-side script |
| <Style> | Defines internal CSS styles for the document |
1. The <title> Element
The <title> element sets the title of the web page. This title appears in the browser’s title bar or tab and is crucial for search engine optimization (SEO).
Example
<!DOCTYPE html>
<html>
<head>
<title>My Website Title</title>
</head>
<body>
<!–The content of the document–>
</body>
</html>
Output
In this example:
- <head>: Contains meta-information about the HTML document, such as its title and links to stylesheets and scripts.
- <title>My Website Title</title>: Sets the title of the web page, which is displayed in the browser’s title bar or tab.
Note: The title should be accurate and meaningful to improve your page’s search engine ranking
2. The <style> Element
The <style> element is used to define internal CSS styles for a single HTML page. It allows you to add styles directly within the HTML document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body { background-color: powderblue; }
h1 { color: red; }
p { color: blue; }
</style>
</head>
<body>
<h1>Heading Example</h1>
<p>Paragraph Example</p>
</body>
</html>
Output
In this example
- <style>: Defines CSS rules directly within the HTML file.
- body { background-color: powderblue; }: Sets the background color of the <body> element to powderblue.
- h1 { color: red; }: Sets the color of all <h1> elements to red.
- p { color: blue; }: Sets the color of all <p> elements to blue.
3. The <link> Element
The <link> element defines the relationship between the current document and an external resource, most commonly used to link to external stylesheets.
Example
CSS File
body{
background-color: lightyellow;
}
HTML File
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body>
<h1>Heading Example</h1>
<p>Paragraph Example</p>
</body>
</html>
Output
In this example
1. HTML (index.html):
- <head>: Contains meta-information about the document, such as its title and links to external resources like stylesheets (<link> tag).
- <title>Page Title</title>: Sets the title of the web page, which appears in the browser’s title bar or tab.
- <link rel=”stylesheet” href=”mystyle.css”>: Links to an external stylesheet (mystyle.css) that defines styles for the HTML content.
- <body>: Contains the main content of the web page.
2. CSS (mystyle.css):
- body { background-color: lightyellow; }: Defines a CSS rule that sets the background color of the <body> element to lightyellow.
4. The <meta> Element
The <meta> element provides metadata about the HTML document, such as character set, page description, keywords, author, and viewport settings.
1. Charset: Specifies the character encoding for the HTML document
<meta charset=”UTF-8″>
2.Viewport: Ensures your web page is properly scaled on different devices.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
3. Description: Gives a brief description of your web page for search engines.
<meta name=”description” content=”Free Web tutorials”>
4. Keywords: Lists keywords related to your web page for search engines.
<meta name=”keywords” content=”HTML, CSS, JavaScript”>
5. Author: Specifies the author of the page.
<meta name=”author” content=”Amir Shaikh”>
Here's an example of all meta tags
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset=”UTF-8″>
<meta name=”keywords” content=”HTML, CSS, JavaScript”>
<meta name=”description” content=”Free Web tutorials”>
<meta name=”author” content=”Amir Shaikh”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<h1>Heading Example</h1> <p>Paragraph Example</p>
</body>
</html>
Output
In this example
1. <meta charset=”UTF-8″>: Specifies the character encoding for the HTML document, ensuring proper rendering of non-English characters and symbols.
2. <meta name=”keywords” content=”HTML, CSS, JavaScript”>: Provides keywords relevant to the content of the webpage. Although not used by search engines as significantly anymore, it can still be useful for SEO.
3. <meta name=”description” content=”Free Web tutorials”>: Describes the content of the webpage briefly. This description may appear in search engine results pages (SERPs) and is important for SEO.
4. <meta name=”author” content=”Amir Shaikh”>: Specifies the author of the webpage’s content. It’s a good practice to credit the author for their work.
5. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>:
- Configures the viewport to control the layout and scaling on different devices.
- width=device-width: Sets the width of the viewport to the device’s width.
- initial-scale=1.0: Sets the initial zoom level when the page is first loaded.
5. The <script> Element
The <script> element is used to include JavaScript in the HTML document. JavaScript is a programming language that adds interactivity to web pages.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Example</title>
</head>
<body>
<h1>Main Heading (H1)</h1>
<h2>Subheading 1 (H2)</h2>
<h3>Sub-subheading 1.1 (H3)</h3>
<h4>Sub-subheading 1.1.1 (H4)</h4>
<h5>Sub-subheading 1.1.1.1 (H5)</h5>
<h6>Sub-subheading 1.1.1.1.1 (H6)</h6>
</body>
</html>
Output
In this example
- <script>: Embeds JavaScript code directly within the HTML document.
- alert(“Hello, World!”);: Displays a pop-up dialog box with the message “Hello, World!” when the page loads.
6. The <base> Element
The <base> element specifies a base URL and/or a target for all relative URLs in the document. There can only be one <base> element in a document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Base URL Example</title>
<base href=”https://iqratechnology.com/academy/html-training/”>
</head>
<body>
<p><a href=”html-head/”>HTML Head Page</a></p>
<p><a href=”html-attribute/”>HTML Attribute Page</a></p>
</body>
</html>
Output
In this example
- <base href=”https://iqratechnology.com/academy/html-training/”>: Specifies the base URL for all relative URLs in the document. This means any relative links (href attributes without a protocol or domain) will be resolved relative to this base URL.
- <p><a href=”html-head/”>HTML Head Page</a></p>: Displays a paragraph with a link to a page named “HTML Head Page” relative to the base URL (https://iqratechnology.com/academy/html-training/html-head/).
- <p><a href=”html-attribute/”>HTML Attribute Page</a></p>: Displays a paragraph with a link to a page named “HTML Attribute Page” relative to the base URL (https://iqratechnology.com/academy/html-training/html-attribute/).
Summary
- The <head> element is a container for metadata about the document.
- The <title> element is required and defines the title of the document.
- The <style> element is used to define internal CSS styles.
- The <link> element is used to link to external stylesheets.
- The <meta> element specifies metadata like character set, description, keywords, author, and viewport settings.
- The <script> element is used to include JavaScript.
- The <base> element specifies the base URL and target for all relative URLs.
