How to define Head in HTML?
Head elements are containers for elements that define a page’s style, metadata, and references to external resources like the Cascading Style Sheet (CSS) files with additional styling properties that you might want to apply to your web pages. Some of the tags that a developer might want to include in the head section of his document are <tittle>, <base>, <style>, <link>, <meta>, <script>, and <nonscript>.
Tittle Element:
Defines the title of a document. It is a mandatory requirement for all HTML documents. Some of its uses include displaying a title in a browser’s title bar and taskbar, provide a default label for bookmarked pages, and providing a label for the page on a Search Engine Results Page (SERP). Typically, a good title should not be more than 65 characters long.
Base Element:
Developers use the <base> element to assign a base URL for all relative links that are contained in a document. Once the base URL is set at the top of a document, subsequent pages will use it as a starting point for their URLs.
Link Element:
This tag is used to attach external documents including CSS files by pointing in their paths.
Style Element:
Used to specify embedded style information for HTML documents. Note that external style sheets are more efficient than embedded styles because they can be applied to several pages.
<!DOCTYPE html> <html> <head> <title>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>
Meta In HEAD
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe">
Define the character set used:
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free HTML Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
viewport in HTML5
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Add Analytics in Head Section
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141260284-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-141260284-1');
</script>
Google Analytics is provided by Google. Google Analytics is not a product of Pair Networks, Inc., and Pair Networks provides no warranty for Google Analytics.
Please note that there are many levels of website analytics products available. Please consult with your IT professional for advice and guidance on an appropriate analytic tracker. This specific product may or may not meet your needs. Pair Networks, Inc. is providing support for this analytics tracker for your convenience and is not responsible for Google Analytics’ performance.
Please read carefully the terms and scope of services for any online service or product you are considering purchasing or using.
Add Analytics in Head Section
<script data-ad-client="ca-pub-6130383729373611" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
How to add a Style tag inside the head tag?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: skyblue;
}
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>It is a portal for geeks.</p>
</body>
</html>
How to add viewport in Html head?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
How to define author’s name in the head?
<meta name="author" content="John Doe">
This gives the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (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.
