In previous chapter we learnt ‘HTML Basics’. Now we will learn about HTML Elements.
Look at below example:
From above example you can understand that an HTML element usually consists of open tag and close tag, with the content inserted in between and in HTML everything should be start with open tags and ends with close tags. Elements like <br>, <hr> do not have end tag and content that is why they are called empty element. Open tags also referred as Start tag and Close tag referred as End tag.
In HTML Close tag are very important. In some cases you can find close tag behave like optional but this doesn’t mean that close tag are optional. It is strongly recommended that every element start with open tag and ends with close tags.
In above example both paragraphs will produce same result but it can be produce unexpected results and error in some cases if you forget to apply close tags.
Tips: Search Engine uses XML sitemap of website therefore use of close tags essentially required for better result of search engine ranking.
HTML is not case sensitive but always use lowercase HTML tags. Although HTML5 does not required the lowercase tags but W3C recommends lowercase in HTML. Always use the tag like below example.
In above example you can see a standard HTML page. The way HTML elements are written is called nesting of elements. First you can see declaration; second thing you can see <html> tags which defines whole and after that the <body> tag defines complete body of document. After that <h1> and <p> tags are written under <div> elements. Every html page an example of nested elements.
Tips: Always use lowercase HTML tag and do not forget close each element. <p> tag is used for writing paragraph only.
Look at below example:
Example - 1
<h1></h1> | Heading Element | It has open & close tags |
<p></p> | Paragraph Element | It has open & close tags |
<img> | Image Element | It has open tag only. This calls Empty Element. |
<br> | Line break Element | It has open tag only. This calls Empty Element. |
From above example you can understand that an HTML element usually consists of open tag and close tag, with the content inserted in between and in HTML everything should be start with open tags and ends with close tags. Elements like <br>, <hr> do not have end tag and content that is why they are called empty element. Open tags also referred as Start tag and Close tag referred as End tag.
Do not ever forget Close tag
In HTML Close tag are very important. In some cases you can find close tag behave like optional but this doesn’t mean that close tag are optional. It is strongly recommended that every element start with open tag and ends with close tags.
Example - 2
<!DOCTYPE html>
<html>
<head>
<title>Example of Standard HTML Page</title>
</head>
<body>
<div>
<p>This is a first paragraph.</p>
<p>This is a second paragraph.
</div>
</body>
</html>
<html>
<head>
<title>Example of Standard HTML Page</title>
</head>
<body>
<div>
<p>This is a first paragraph.</p>
<p>This is a second paragraph.
</div>
</body>
</html>
In above example both paragraphs will produce same result but it can be produce unexpected results and error in some cases if you forget to apply close tags.
How Empty Elements can be closed
HTML elements with no content are called empty element and empty element can be close also. HTML 5 doesn’t required empty element to be closed but if you need to make your document readable by XML parser then you must close all HTML empty element. In below example you can see 'How Empty Elements can be closed'. Read carefully to understand.
Example - 3
<!DOCTYPE html>
<html>
<head>
<title>Example of Standard HTML Page</title>
</head>
<body>
<div>
<h1>This is heading</h1>
<p>This is a first paragraph. Paragraph length is enough so we have break the line with <br/> element. It is an empty element and it can written like <br/> </p>
<p>Below is image element and it can be closed like <img/>, like below example </p>
<img src = "https://goo.gl/oK5ctq" width = "140" height = "140" alt = "Logo Image" title = "Progrramers Logo"/>
</div>
</body>
</html>
<html>
<head>
<title>Example of Standard HTML Page</title>
</head>
<body>
<div>
<h1>This is heading</h1>
<p>This is a first paragraph. Paragraph length is enough so we have break the line with <br/> element. It is an empty element and it can written like <br/> </p>
<p>Below is image element and it can be closed like <img/>, like below example </p>
<img src = "https://goo.gl/oK5ctq" width = "140" height = "140" alt = "Logo Image" title = "Progrramers Logo"/>
</div>
</body>
</html>
Tips: Search Engine uses XML sitemap of website therefore use of close tags essentially required for better result of search engine ranking.
HTML is not case sensitive
HTML is not case sensitive but always use lowercase HTML tags. Although HTML5 does not required the lowercase tags but W3C recommends lowercase in HTML. Always use the tag like below example.
Example - 4
<!DOCTYPE html>
<html>
<body>
<H1>My First Heading.</H1> (Not recommended).
<p>My first paragraph.</p>
<P>This way to write elements is not recommended.</P>
</body>
</html>
<html>
<body>
<H1>My First Heading.</H1> (Not recommended).
<p>My first paragraph.</p>
<P>This way to write elements is not recommended.</P>
</body>
</html>
HTML Element can be Nested
Example - 5
<!DOCTYPE html>
<html>
<body>
<H1>My First Heading.</H1> (Not recommended).
<p>My first paragraph.</p>
<P>This way to write elements is not recommended.</P>
</body>
</html>
<html>
<body>
<H1>My First Heading.</H1> (Not recommended).
<p>My first paragraph.</p>
<P>This way to write elements is not recommended.</P>
</body>
</html>
In above example you can see a standard HTML page. The way HTML elements are written is called nesting of elements. First you can see declaration; second thing you can see <html> tags which defines whole and after that the <body> tag defines complete body of document. After that <h1> and <p> tags are written under <div> elements. Every html page an example of nested elements.
Tips: Always use lowercase HTML tag and do not forget close each element. <p> tag is used for writing paragraph only.
Post A Comment:
0 comments: