Head in HTML:
Head in HTML:
Head element is considered as the crown of king. It is a container which can contains various other elements. <Style>, <title>, <Meta>, <link>, <script> and <base>.
It is a carry bag that holds Meta i.e. data about data and which is placed between <html> and <body> tag. It generally defines the character set, styles, scripts, and other necessary information.
<meta > in html:
This tag is used to define and declare the page description, keywords, character set, viewpoint settings.
Here metadata is not shown in the webpage but it is very valuable for a search engine to track of webpage.
Example:
<meta charset="UTF-8"> Define the character set used
<meta name="keywords" content="HTML, CSS, JavaScript"> Define keywords for search engines
<meta name="description" content="Free Web tutorials"> Define a description of your web page
<meta name="author" content="John Doe"> Define the author of a page
<meta http-equiv="refresh" content="30"> Refresh document every 30 seconds
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Setting the viewport to make your website look good on all devices <link> in HTML:
Word link itself defines the work of linking. <link> element generally specify the bond between the webpage and another page resource. It is also used in an external style sheet for linking the CSS file outside the webpage.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a welcome page</h1>
</body>
</html>
<style> in HTML:
All kinds of styling are done under the head tag, as it is a preferred way of doing it. This styling is also called an internal style sheet.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<style>
body {background-color: blue;}
h1 {color: red;}
</style>
</head>
<body>
<h1>This is Welcome page</h1>
</body>
</html>
<title> in HTML:
It is the tile of the webpage, that reflects at the top of the page in the search bar. You should make a title that is meaningful and effective, that should be easily searched by people.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
Welcome to this document......
</body>
</html>
Viewport in HTML:
Different mobile devices and other electric gadgets have different screen sizes. So, the webpage may vary differently, by defining the viewpoint page will set as the size of the screen. For this, you need to set width=device-width and initial-scale=1.0 in the Meta tag.
Look at the below for more illustration.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Welcome to this document......
</body>
</html>