HTML - The Head Element
The head element is a container for other meta elements.
The title, style, meta, link, script and base elements are all contained in the HTML head element.
The HTML <head> Element
Thehtmlandbody tags are separated by theheadelement,
which is a container for metadata (info about data).
HTML metadata is an information about an HTML document. Not shown to users.
Usually, metadata sets the title, character set, styles, scripts and other meta information for the content.
The HTML <title> Element
The title element specifies the document's title. The title must be text-only and appear in the title bar of the browser or in the tab of the page.
In HTML texts, the title element is needed!
For search engine optimization (SEO), the contents of a page title are critical! Search engine algorithms utilize the page title to determine the order in which pages are listed in search results.
The title element:
- creates a title for the toolbar in the browser
- When a page is added to favorites, it gets a title.
- Shows a search engine results page title
Try to make the heading as precise and meaningful as possible!
Example
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>
</body>
</html> The HTML <style> Element
To define the styling information for an HTML page, the style element is used:
Example
<head>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
The HTML <link> Element
The link element establishes a connection between the current document and a third-party resource.
The most common usage of the link element is to link to external style sheets:
Example
<head>
<link rel="stylesheet" href="mystyle.css">
</head> The HTML <meta> Element
Character set, page description, keywords, document author, and viewport settings are all often specified via the meta element.
The metadata is not visible on the page but is utilized by browsers, search engines, and other online services (how to show or reload content).
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 HTML Tutorial"> Define the author of a page:
<meta name="author" content="Suresh Babu"> 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"> Setting The Viewport
The viewport is the visible area of a website for the user. It depends on the device — on your mobile phone, it is smaller than on your computer screen.
All of your web pages should have the following meta element:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> This offers the browser instructions for controlling the size and scale of the page.
Thewidth=device-width section adjusts the page's width to match the device's screen size (which will vary depending on the device).
When the website is first loaded by the browser, the initial-scale=1.0 section specifies the initial zoom level.
The HTML <script> Element
Using script you declare JavaScripts on the client-side.
"Hello JavaScript!" is written into an HTML element with the id="demo" attribute using the JavaScript below:
Example
<head>
<title>Page Title</title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<h2>Your Web Page</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>