Loading Please Wait...
HTML Head is used to define meta information (data about data) for the document. Meta information id not displayed on the web browser but very important for the document.
Metadata refers to the document title, charset, styles, scripts, and other meta information about the document.
The <head> element defines the HTML Head (meta information) and work as a container for <title>, <style>, <script>, <meta> elements.
The <head> element is defined just after the <html> tag, before <body> tag.
The <title> element defines the title for the document and displayed on the browser's tab.
Though web page display correctly without HTML title but it is really very important. Try to give a meaningful name for title.
<!DOCTYPE html>
<html>
<head>
<title>A meaningful page title</title>
</head>
<body>
<h1>Page Content</h1>
</body>
</html>
The <style> element defines the style for the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>A meaningful page title</title>
<style>
body{background-color: #ccaaaa;}
h1{color: #4afdaa;}
p{color: #ffffaa;}
</style>
</head>
<body>
<h1>Page Content</h1>
<p>Page Content</p>
</body>
</html>
The <link> element is used to link (define relation) some external resource. Most commonly it is used to link style sheets.
<link rel="stylesheet" href="style.css">
The <script> element is used to define client side script.
The below example "This is div text generated from button click" text when you click on the button.
<!DOCTYPE html>
<html>
<head>
<title>A meaningful page title</title>
<script>
function writeText(){
document.getElementById('myDiv').innerHTML = "This is div text generated from button click";
}
</script>
</head>
<body>
<div id="myDiv"></div>
<button onclick="writeText();">Click Me</button>
</body>
</html>
The <base> element defines a base URL/Path for all the relative url, paths, and link with in the page.
The <base> element must have either href attribute, or target attribute, or both.
Entire HTML document contains only one <base> element.
<!DOCTYPE html>
<html>
<head>
<title>A meaningful page title</title>
<base href="https://lynxsia.com/pages/" target="_blank">
</head>
<body>
<div id="myDiv"></div>
<a href="about.html">Website Link</a>
</body>
</html>
The <meta> element is used to define character set, page title, page description, author of the document, viewport settings, etc.
Content of meta element is not displayed on the web browser at all but used by web browser to properly display the page content and page property. Search Engine uses meta information for search result page to display title, description.
<meta charset="UTF-8">
<meta name="keywords" content="HTML, HTML Tutorials, HTML Head Tag">
<meta name="title" content="HTML Meta Page Title">
<meta name="description" content="HTML page description">
<meta name="author" content="Lynxsia IT Solutions">
<meta http-equiv="refresh" content="30">
Visual area is different for different devices. It is smaller in mobile device and larger desktop PC.
Viewport setting helps the browser to control the page dimension and scaling to look page good on all devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
Below images demonstrate the webpage with and without viewport. Looks how the content (image, text) is affected such as layout, size, etc.
Without Viewport
With Viewport
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved