HTML head: The HTML <head> element is a container for the accompanying elements: <title> , <style>, <meta>, <link>, <script>, and <base>
The <head> element primarily is the container for all the head elements, which provide additional information about the document (metadata), or reference to different resources that are needed for the document to show or behave accurately in an internet browser.
The head elements collectively describes the properties of the document like title, give meta information like character set, instruct the browser where to discover the style sheets or scripts that allows you to extend the HTML document in a profoundly active and interactive ways.
The HTML elements that can be used inside the <head> element are: <title>, <base>, <link>, <style>, <meta>, <script>, and the <noscript> element.
In this tutorial, you will learn-
In this article, you will learn-
The HTML <head> Element
The <head> element is a container for metadata (data about data) and is set between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata isn’t shown.
Metadata normally define the document title, character set, styles, scripts, and other meta data.
The HTML <title> Element
The <title> element defines the title of the document. The title should be text-just, and it is displayed in the browser’s title bar or in the page’s tab.
The <title> element is needed in HTML documents!
The substance of a page title is vital for search engine optimization (SEO)! The page title is used via web crawler algorithms to choose the order when listing pages in search results.
The <title> element:
• defines a title in the browser toolbar
• provides a title for the page when it is added favorites
• displays a title for the page in search engine-results
Along these lines, attempt to make the title as precise and meaningful as possible!
A straightforward HTML document:
Example
<!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body> The content of the document...... </body> </html>
The content of the body element is displayed in the browser window.
The content of the title element is displayed in the browser tab, in favorites and in search-engine results.
The HTML <style> Element
The <style> element is used to define style data for a single HTML page:
Example
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link Element>
The <link> element defines the relationship between the current document and an external resource.
The <link> tag is most often used to connection to external style sheets:
Example
<link rel="stylesheet" href="mystyle.css">
The HTML <meta> Element
The <meta> element is typically used to determine the character set, page description, watchwords, author of the document, and viewport settings.
The metadata won’t be shown on the page, however are used by browsers (how to show content or reload page), via web search engines (watchwords), and other web services.
Examples
Define the character set used:
<meta charset="UTF-8">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define the author of a page:
<meta name="author" content="Salman Khan">
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:
Example
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Salman Khan">
Setting The Viewport
The viewport is the user’s apparent area of a site page. It varies with the gadget – it will be smaller on a cell phone than on a computer screen.
You ought to incorporate the accompanying <meta> element in the entirety of your website pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser directions on how to control the page’s measurements and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the gadget (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an illustration of a site page without the viewport meta tag, and a similar website page with the viewport meta tag:
The HTML <script> Element
The <script> element is used to define client-side JavaScripts.
The accompanying JavaScript states “Hi JavaScript!” into an HTML element with id=”demo”:
Example
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
My Web Page
A Paragraph
The HTML <base> Element
The <base> element determines the base URL and/or target for all general URLs in a page.
The <base> tag should have either an href or a target attribute present, or both.
There can only be one single element in a document!
Example
Specify a default URL and a default target for all links on a page:
Chapter Summary
- The
<head>element is a container for metadata (data about data) - The
<head>element is placed between the<html>tag and the<body>tag - The
<title>element is required and it defines the title of the document - The
<style>element is used to define style information for a single document - The
<link>tag is most often used to link to external style sheets - The
<meta>element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings - The
<script>element is used to define client-side JavaScripts - The
<base>element specifies the base URL and/or target for all relative URLs in a page
HTML head Elements
| Tag | Description |
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
HTML Layout Elements and Techniques
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
