HTML – Web page structure

Web Page Structure – HTML

HTML – Hypertext markup language is not only used to stylise text, insert graphics, setting links to various webpages but also it helps us to define to structure of webpage.

A webpage structure has two main parts

  1. Head Part
  2. Body Part

Head Part

Head part of any webpage tells about the webpage. Such as, title of the page, what is the webpage about (description), and also sets path to various style sheets, scripts etc.

Body Part

Body part is the information part which viewer or user can read or watch.

Note: The most common mistake most of the new learners commit by assuming, the heading portion of the webpage as head part of the webpage and rest portion as body part of the webpage. But this is absolutely wrong. In a webpage, what ever information can be watched is body portion of the webpage. Where as, head part is something which is not visible to users or viewers of the webpage.

Example:

HTML WEBPAGE STRUCTURE

In this picture, this example of one of our article on HTML-Introduction. This is a webpage. This webpage begins with webpage name ‘Gyan Online’. Below it has short description about webpage ‘PHP, JAVASCRIPT, HTML….’ . Below it has, menu bar. Most new learners assume, the top section is head portion of webpage. This is wrong. The entire webpage, what ever is visible to us, is body portion of the webpage. Head portion is not visible to us.

Head portion of the webpage is

<head>

<title>HTML – Introduction</title>

<meta name=”description” content =”Basic introduction to HTML. HTML is Hypertext Markup Language. HTML is used to stylise text, insert graphics, setting hyperlinks and setting structure of webpage”/>

</head>

No need to worry about what are less than symbol, greater than symbol. We are going to cover in another chapter. But for now, keep in mind, this way we set head portion of a webpage and this information is not visible to user or viewer. This head portion is essential for browsers as well as search engines to understand what is the webpage all about. (We are going to cover search engines and its functionality in another chapter)

If you notice the head portion of webpage starts with ‘<head>’ tag and closes with ‘</head>’. ‘<head></head>’ is used to define head portion of the webpage. Similarly we define body portion of webpage by using ‘<body>’ and ‘</body>’.

So far, we have glimpse of how we define head portion of webpage and body portion of webpage. Now lets ask ourself, how do we define, ‘this is a html webpage’.

You might be guessing right. We use tag. We use ‘<html>’ and ‘</html>’ tag to define a webpage is a HTML webpage.

Are there webpage exists which are not html webpage?

Yes. There are other webpages too exist in which are not html webpages. In such scenario we don’t use HTML.

Remember we use HTML to stylise text, insert graphics (images, videos) and set hyperlinks. Which means, if a user is going to view a webpage we are bound to use HTML. Other wise, we are not required to use HTML. Such webpages, which user or viewer are not going to watch are login validation pages, information processing page etc. This happens at the backend. Therefore whenever a webpage needed to appear in front of user or viewer, we are required to develop the page as HTML Page. Otherwise we are not required.

STRUCTURE OF HTML WEBPAGE:

  1. First we need to define the webpage is a html webpage. And we achieve this using ‘<html>’ and ‘</html>’.
  2. Then, we inside these two tags, we need to define head portion of the webpage. We achieve this using ‘<head>’ and ‘</head>’ tags.
  3. Then after, head portion is defined, we need to define body portion. To define body portion, we use, ‘<body>’ and ‘</body>’ tags.

Thats it. We have defined a HTML Webpage successfully.

ASSIGNMENT:

Open any simple text editor. (If you are using windows, then open notepad and if you are using mac then open textedit. Or you can download and install sublime). Copy the following text or type exact the text as below.

<html>

<head>

<title>This is a sample webpage</title>

<meta name=”content” description=”this is a sample webpage for practice purpose.”/>

</head>

<body>

This is a sample webpage. This webpage is for practice purpose. I have successfully developed the webpage.

</body>

</html>

Then save the file as ‘demo.html’

Note: .html is known as extension. It is important. Browser going to understand this file type is html file. You can also provide any name instead of ‘demo’ but keep in mind, no space and special characters are allowed.

Once you save the file. Locate the file, then right click on it and open in any browser (firefox, safari or chrome). Congratulations, you have just created your first html webpage with required structure.

Every webpage is developed this way. Feel free to experiment. Change the text in between the body tag to your desired text and see the result.