Monday, Sep 25 2017

Basic anatomy of HTML Webpage

Basic anatomy of HTML Webpage

In my previous article “What is HTML and what is it used for?” I tried to give an introduction about HTML. In this article I’ll go more deep about HTML.

Let’s start with an example.  Following text is showing a HTML raw page and after that an image is showing the page in browser.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Page Title
  5. </title>
  6. </head>
  7. <body>
  8. <h1>My First Heading</h1>
  9. <p>My first paragraph.</p>
  10. </body>
  11. </html>

HTML Example

 

Now examine the raw page each item by their number:

  1. The DOCTYPE is a declaration that defines the type of document. Here type is HTML
  2. The text <html> describes that an HTML document is start from here.
  3. The text <head> describes that Heading is started from here and Heading provides information about the document
  4. The text <title> describes that Title is started from here and it provides a title for the document
  5. The text </title> describes that the title that we started at line 4 is closed.
  6. The text </head> describes that the head that we started at line 3 is closed.
  7. The text <body> describes that the body of the HTML content is started from here that will show page content to the viewer.
  8. As like line 4 and 5, The text between <h1> and </h1> describes a heading
  9. As like line 8, The text between <p> and </p> describes a paragraph
  10. The text </body> describes that the body that we started at line 7 is closed.
  11. As like line 10 </html> describes that the html that we started at line 2 is closed.

By the above description, a web browser can display a document with a heading and a paragraph. By this html tag, you can see pages in your browser.

Now a term comes that HTML tag. What is HTML tag? Well, so far we have used <head></head>, <h1></h1> etc. to describe our HTML document and all of these are HTML tag.

In formal definition: HTML tags are keywords (tag names) surrounded by angle brackets: <tagname>content</tagname>

You can find all the HTML tag by clicking this link

Now let’s have a look about HTML page structure:

 

HTML_Page_Structure

 

In the above picture only line 3 is visible by the browser and user will show only two lines and those are, “This is a Heading” and “This is a Paragraph”. Others are for browser to display the page in correct format.

So, now have you got the very simple idea about HTML. If you want to learn more about HTML then w3schools is the best.

Have a nice day.


Comments

No Comments Yet!

Leave a Comment