head element
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata typically define the document title, character set, styles, scripts, and other meta information. The <head> element can include several different types of elements, including:
- <title>: Specifies the title of the document, which is displayed in the browser's title bar or tab.
- <meta>: Provides metadata about the HTML document, such as character encoding, author, description, and keywords for search engines.
- <link>: Used to link external resources like stylesheets (CSS) to the HTML document.
- <style>: Contains internal CSS styles that apply to the HTML document.
- <script>: Used to embed or reference JavaScript code that adds interactivity to the web page.
- <base>: Specifies a base URL for all relative URLs in the document.
title tag
The <title> tag defines the title of the HTML document. The title is displayed on the browser's title bar or tab, and it is also used by search engines to identify the content of the page. The <title> tag must be placed within the <head> section of the HTML document. Here is an example of how to use the <title> tag:
<head>
<title>My Web Page</title>
</head>
meta tag
The <meta> tag provides metadata about the HTML document. Metadata is information that describes other data, and it is not displayed on the web page itself. The <meta> tag is typically used to specify the character set, author, description, keywords, and viewport settings for the document. Here are some common uses of the <meta> tag:
- Character Set: Specifies the character encoding for the document.
<meta charset="UTF-8"> - Description: Provides a brief description of the page's content for search engines.
<meta name="description" content="This is my web page about HTML"> - Keywords: Lists keywords relevant to the page for search engine optimization.
<meta name="keywords" content="HTML, CSS, JavaScript"> - Viewport: Controls the layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
link tag
The <link> tag is used to link external resources to the HTML document. It is commonly used to link stylesheets (CSS) that define the visual appearance of the web page. The <link> tag must be placed within the <head> section of the HTML document. Here is an example of how to use the <link> tag to link an external CSS file:
<head>
<link rel="stylesheet" href="styles.css">
</head>
style tag
The <style> tag is used to define internal CSS styles for the HTML document. It allows you to include CSS rules directly within the HTML file, rather than linking to an external stylesheet. The <style> tag must be placed within the <head> section of the HTML document. Here is an example of how to use the <style> tag to define some CSS styles:
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>
script tag
The <script> tag is used to embed or reference JavaScript code within an HTML document. JavaScript is a programming language that allows you to create dynamic and interactive web pages. The <script> tag can be placed either in the <head> section or at the end of the <body> section of the HTML document. Here is an example of how to use the <script> tag to include JavaScript code:
<head>
<script>
function showMessage() {
alert("Hello, welcome to my web page!");
}
</script>
</head>
base tag
The <base> tag is used to specify a base URL for all relative URLs in the HTML document. This means that any relative links or resources (like images, stylesheets, or scripts) will be resolved based on the URL defined in the <base> tag. The <base> tag must be placed within the <head> section of the HTML document. Here is an example of how to use the <base> tag:
<head>
<base href="https://www.example.com/">
</head>
In this example, if you have a relative link like <a href="page.html">Page</a>, it will be resolved to https://www.example.com/page.html based on the base URL specified in the <base> tag.