How Browsers Renders an HTML Document?
All of you know that an HTML Document is simply a text file rendered by the web browsers. But the question is that how does the browser knows that a particular piece of text should be rendered as a heading and other as a paragraph or a table. The page you are currently browsing also contains heading, paragraphs etc .
Here is the answer: HTML uses Elements to tell the browsers that how the HTML Document should be rendered. How the particular piece of text should be rendered as a heading and other should be rendered as a paragraph, this data should be rendered as a table and that should be rendered as a list etc.
HTML Element:
Most of the HTML Elements are consists of a pair of a Starting Tag and Ending Tag. Every thing from starting tag to ending tag is an HTML Element. We have two type of HTML Elements which are given as follows:Not-Empty HTML Elements:
An HTML Element which needs to have both the starting and ending pair of tags otherwise browser might be unable to render that Element correctly such as <html></html> and <body></body> etc.
Empty HTML Elements:
An HTML Elements consists of only Starting Tag and don't need to have an Ending Tag such as Paragraph Element <p> and Image Element<img> .
HTML Tags:
An HTML Tag starts/opens with a left angle bracket (<) and ends/closes with a right angle bracket. There are two types of HTML Tags which are given as follows:Starting Tag:
A Starting Tag consists of the name of the element and some attributes having values. Empty tags such as <br /> and <hr /> don't contains any attribute.
Ending Tag:
An Ending Tag consists of the name of the element preceded by a forward slash. Empty tags don't have the Ending Tag such as <br /> and <hr />. Instead the Element name is followed by a forward slash in in the Starting Tag.
Example of Bold Element:
Here is an example of an HTML Bold Text Element:
Exemplary Code:
<b>Hello! I'm part of the Bold Element of HTML!</b>
Example Result:
Hello! I'm part of the Bold Element of HTML!
Example of Nested Elements:
Here is an example of the nested HTML Elements which is a modification of the previous example. Point to be noted here is that when you want to nest many HTML Elements you should take care of the order of the Elements. The Element started first will be closed in the end. Look at the following example, the starting tag of the Paragraph Element <p> is the first tag but it's closing tag </p> is the last one.
Exemplary Code:
<p><b><i> Hello! I'm testing the bold & Italic Text Elements of HTML! </i></b></p>
Example Result:
Hello! I'm testing the bold & Italic Text Elements of HTML!
No comments :
Post a Comment