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
,
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 previous chapter we learnt ‘HTML Basics’. Now we will learn about HTML Elements.

Look at below example:


Example - 1

<h1></h1>Heading ElementIt has open & close tags
<p></p>Paragraph ElementIt has open & close tags
<img>Image ElementIt has open tag only. This calls Empty Element.
<br>Line break ElementIt 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>



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>



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 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>



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.



Related Topics

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

0 comments: