Meet the 'head' and 'body' of a webpage
Now, that you know about the three tags i.e. the 'p' (paragraph) tag, the 'h1' to 'h6' (heading) tags and the 'img' (image) tag, we should discuss dividing and wrapping the information or metadata and the title, links etc. from the actual content which will be displayed on the Webpage.
To display the Webpage properly on the browser, we need to provide the browser with the information about the data or content which is to be displayed. This information about the webpage data is called the 'metadata'. Metadata is used to let the browser know about the author, character encoding, update information, title, and the meta description. This metadata is wrapped within the 'head' tag. Let's look at the below example:-
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> The title goes in here. </title>
</head>
Here, the 'meta' tag is used within the 'head' tag on three occasions, the first 'meta' tag uses the attribute 'charset' with the value 'UTF-8' which means that the characterset used in the webpage is Unicode Transformation Format - 8. (We will discuss more on this topic later in the course).
On the second occasion, the viewport meta tag tells the browser that the width of the screen should be considered the "Full Width" of the page. Meaning no matter the width of the device you are on, whether on desktop or mobile. the website will follow the width of the device the user is on. You can read more about the viewport meta tag at W3School.
The third appearance of the meta tag is to standardize the rendering of the webpage according to the highest version of internet explorer available.
The text within the 'title' tag will be displayed as the name of the tab of the webpage.
Apart from 'meta' and 'title' tags the wrapper 'head' may contain the links of Fonts, JavaScript and C.S.S.
Enough about the 'head', now let's talk about the main content the 'body' tag with the example below:
<body>
<p>The 'body' tag comprises of the content which is actually displayed on the webpage</p>
<p> It contains all the text, images, links, buttons, forms, navigation, and headings, etc.</p>
</body>
To display the Webpage properly on the browser, we need to provide the browser with the information about the data or content which is to be displayed. This information about the webpage data is called the 'metadata'. Metadata is used to let the browser know about the author, character encoding, update information, title, and the meta description. This metadata is wrapped within the 'head' tag. Let's look at the below example:-
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> The title goes in here. </title>
</head>
Here, the 'meta' tag is used within the 'head' tag on three occasions, the first 'meta' tag uses the attribute 'charset' with the value 'UTF-8' which means that the characterset used in the webpage is Unicode Transformation Format - 8. (We will discuss more on this topic later in the course).
On the second occasion, the viewport meta tag tells the browser that the width of the screen should be considered the "Full Width" of the page. Meaning no matter the width of the device you are on, whether on desktop or mobile. the website will follow the width of the device the user is on. You can read more about the viewport meta tag at W3School.
The third appearance of the meta tag is to standardize the rendering of the webpage according to the highest version of internet explorer available.
The text within the 'title' tag will be displayed as the name of the tab of the webpage.
Apart from 'meta' and 'title' tags the wrapper 'head' may contain the links of Fonts, JavaScript and C.S.S.
Enough about the 'head', now let's talk about the main content the 'body' tag with the example below:
<body>
<p>The 'body' tag comprises of the content which is actually displayed on the webpage</p>
<p> It contains all the text, images, links, buttons, forms, navigation, and headings, etc.</p>
</body>
All the HTML tags and content is finally wrapped within the <html></html> tags, and we declare the version of HTML by typing <!DOCTYPE html> at the top. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. Let's try with the example below on your text editor:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>connect the head and body</title>
</head>
<body>
<p>The 'body' tag comprises of the content which is actually
displayed on the webpage</p>
<p> It contains all the text, images, links, buttons, forms,
navigation and headings etc.</p>
</body>
</html>
Save and Run the '.html' file on your browser and you will see the title and content displayed as they must.
Comments
Post a Comment