The <head> element in HTML is used to hold metadata (data about data). It goes between the tags <html> and <title>Page Title</title>.
In an HTML document, the head is a part whose content is not shown when the page loads. It only has information about the HTML document\’s metadata, which gives information about the HTML document.
Depending on what we need, an HTML head can have a lot of metadata information, or it can have very little or none at all. But the head part of an HTML document is very important when making a website.
Metadata describes the title, character set, styles, links, scripts, and other information about a document.
The HTML \”head\” tag. Element
Between the <html> tag and the body> tag is the head> element, which holds metadata (data about data).
Metadata in HTML is information about an HTML document. Metadata are not shown.
Following is a list of tags used in metadata:
- <title>
- <style>
- <meta>
- <link>
- <script>
- <base>
Metadata usually describe the title, character set, styles, scripts, and other information about a document.
The <title> Element in HTML
The title of the document is set by the title> element. The title can only be text, and it shows up in the browser\’s title bar or the tab for the page.
HTML documents need to have a <title> element!
For search engine optimization (SEO), it\’s very important what a page title says. Search engine algorithms use the page title to decide how to list pages in search results.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>content here
</body>
</html>
The title element (<title>):
defines a title for the browser toolbar gives the page a name when it\’s saved to favourites.
shows the page\’s title in search engine results.
So, try to make the title as accurate and meaningful as you can.
A simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>content here
</body>
</html>
HTML <style> Element
With the HTML style> element, you can change the way an HTML page looks. The CSS properties for the style> element can only be used on that HTML page. We should use a separate CSS file if we want to use CSS on more than one page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {background-color: yellow;}
h1 {color: #fff;background:red}
p {color: blue;}
</style>
</head>
<body><h1>Your Heading</h1>
<p>Your paragraph.</p></body>
</html>
HTML <link> Element
With the HTML link> element, you can link your page to an external style sheet. The \”rel\” and \”href\” attributes are the most important ones for the \”link\” element. The rel attribute says that it is a stylesheet, and the href attribute gives the path to the file that is outside of the page.
<link type=\”text/css\” rel=\”stylesheet\” href=\”style.css\”>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link type=\”text/css\” rel=\”stylesheet\” href=\”style.css\”>
</head>
<body><h1>Your Heading</h1>
<p>Your paragraph.</p></body>
</html>
HTML <meta> Element
With the HTML meta> element, you can set the page\’s character set, page description, keywords, authors, and other metadata.
Metadata is mostly used by browsers, search engines, and other web services to rank your page higher.
Let\’s look at how metadata can be used:
Define the character set used:
<meta charset=\”UTF-8\”>
Define keywords for search engines:
<meta name=\”keywords\” content=\”HTML, CSS, PHP\”>
Define a description of your web page:
<meta name=\”description\” content=\”Free Coding tutorials\”>
Define the author of a page:
<meta name=\”author\” content=\”Loream Ipsum\”>
Refresh document every 30 seconds:
<meta http-equiv=\”refresh\” content=\”30\”>
Setting the viewport to make your website look good on all devices:
<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”>
Example of <meta> tags:
<!DOCTYPE html>
<html>
<head>
<meta charset=\”UTF-8\”><title>Code Razaa</title>
<meta name=\”description\” content=\”Free coding tutorials\”>
<meta name=\”keywords\” content=\”HTML, CSS, PHP\”>
<meta name=\”author\” content=\”Ipsum loream\”>
</head>
<body><p>All meta information will be inside of head section.</p>
</body>
</html>
Set the Viewport using the meta> tag.
With HTML5, you can use the <meta> tag to take control of the viewport in this way.
The user\’s viewport is the part of a webpage that they can see. It looks different on different devices and is smaller on phones than on computer screens.
Syntax for <meta> viewport element:
<meta name=\”viewport\” \”width=device-width, initial-scale=1.0\”>
Here, the <meta> viewport element says how to change the size and scale of the page.
With width=device-width, the width of the page is set to match the width of the device\’s screen (which will vary depending on the device).
The initial-scale=1.0 setting tells the browser how much to zoom in on the page when it first loads it.
A website page that doesn\’t have the viewport <meta> tag:
<!DOCTYPE html>
<html>
<head>
<meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”/></head>
<body>
<p><b>To understand viewport example, you need to open page in a phone or a tablet device</b></p><img src=\”coderazaa.jpg\” alt=\”image\” >
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
facer possim assum.
</p></body>
</html>
HTML\’s base <base> Element
The HTML base> element is used to tell all relative URLs on a page what their base URL and base target are.
<!DOCTYPE html>
<html>
<head>
<base href=\”https://www.coderazaa.com/\” target=\”_blank\”>
</head>
<body><h1>The base element</h1>
</body>
</html>
HTML <script> element
With the HTML script> element, you can use JavaScript on the client side for the same page or add an external JavaScript file to the current page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function test() {
document.getElementById(\”id_name\”).innerHTML = \”Hello Coders!\”;
}
</script>
</head>
</head>
<body><h1 id=\”id_name\”>Your Heading</h1>
<button type=\”button\” onclick=\”test()\”>Click it</button>
<p>Your paragraph.</p>
</body>
</html>