HTML HEAD
HTML <head> Elements
Examples
<title> - Defines the Title of an HTML Document
Use the <title> tag to define the title of an HTML document.
<html>
<head>
<meta charset="utf-8">
<title>My First HTML Page</title>
</head>
<body>
<p>The content within the body element is displayed in the browser.</p>
<p>The browser's title bar displays the content of the title element.</p>
</body>
</html>
<base> - Defines the Base URL for All Links
Use <base> to set the default URL for all links on the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebCode101 Tutorial (webcode101.com)</title>
<base href="http://www.webcode101.com/" target="_blank">
</head>
<body>
<img src="logo.png"> <!-- This relative URL is resolved using the base URL -->
<br><br>
<a href="http://www.webcode101.com">WebCode101 Tutorial</a> <!-- Opens in a new window due to base tag -->
</body>
</html>
<meta> - Provides Metadata for the HTML Document
Use the <meta> element to describe the HTML document, including its description, keywords, author, and character set.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebCode101(webcode101.com)</title>
<meta name="description" content="Free web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="W3Cschool">
</head>
<body>
<p>All meta tags are placed in the head section...</p>
</body>
</html>
HTML <head> Element
The <head> element contains all the head elements. You can insert scripts, stylesheets, and various meta information within the <head> element.
Elements that can be included in the head section are: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
HTML <title> Element
The <title> tag defines the title of different documents.
The <title> element is required in HTML/XHTML documents.
- It defines the title displayed on the browser toolbar.
- It appears in the bookmarks when a page is added to favorites.
- It is shown in search engine results pages.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document Title</title>
</head>
<body>
Content of the document...
</body>
</html>
HTML <base> Element
The <base> tag describes the base URL/target for all links in the HTML document.
Example:
<head>
<base href="http://www.webcode101.com/images/" target="_blank">
</head>
HTML <link> Element
The <link> tag defines the relationship between the document and an external resource.
It is commonly used to link to stylesheets.
Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <style> Element
The <style> tag defines the style information for an HTML document. You can also include styles directly within the <style> element.
Example:
<head>
<style type="text/css">
body {
background-color: yellow;
}
p {
color: blue;
}
</style>
</head>
HTML <meta> Element
The <meta> tag provides metadata about the HTML document. Metadata is not displayed on the page but is parsed by browsers.
The <meta> element is often used to specify the page description, keywords, last modified date, author, and other metadata.
Example:
<!--Define keywords for search engines:-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!--Define the description for the webpage:-->
<meta name="description" content="Free Web & Programming Tutorials">
<!--Define the description for the webpage:-->
<meta name="author" content="Runoob">
<!--Refresh the current page every 30 seconds:-->
<meta http-equiv="refresh" content="30">
HTML <script> Element
The <script> tag is used to load script files such as JavaScript.
Summary of HTML <head> Elements
| Tag | Description |
|---|---|
| <head> | Defines document information |
| <title> | Defines the document title |
| <base> | Defines the base URL/target for all links |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata for an HTML document |
| <script> | Defines client-side script files |
| <style> | Defines style information for an HTML document |