There are lots of tags and they are all in pairs; there are opening tags and closing tags . The closing tag is always slightly different from the opening tag in that it has a forward slash after the first angled bracket:
A pair of tags and the content these include are known as an element . In Figure below, you can see the
heading tag
Opening Tag: The opening tag says This is the beginning of a heading
Closing Tag: The closing tag says This is the end of a heading.
Text Inside: The text inside the angled brackets explains the purpose of the
tag — here h1 indicates that it is a level 1 heading (or top - level heading)
Title Tag
The <head> element: Often referred to as the head of the page, this contains information about
the page (this is not the main content of the page). For example, it might contain a title and a
description of the page, or instructions on where a browser can find CSS rules that explain how
the document should look. It consists of the opening <head> tag, the closing </head> tag, and
everything in between.
The <title> element is a required HTML element used to assign a title to an HTML document. Page titles are not display
the browser window, but they are used as the page name by search engines and displayed by browsers in the title
page tab, and as the page name of bookmarked webpages.
The <body> element: Often referred to as the body of the page, this contains the information you actually see in the main browser window. It consists of the opening <body> tag, closing
</body> tag, and everything in between.
Output Preview in internet explorer
Heading Tags
HTML has six levels of headings, which are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
<h1> describes the most important heading and <h6> describes the least important headings.
Search Engines(like google) use the headings to index the structure and content of your web pages.
Users skim your pages by their headings. It is important to use headings to show the document structure.
headings should be used for main headings, followed by <h2> headings, then the
less important <h3>, and so on.
<p> element describes a paragraph into whole document. Content of the each paragraph will be placed between opening tag <p> and closing tag
</p>.
Example
<span class="pln">
</span><span class="dec"><!DOCTYPE html></span><span class="pln">
</span><span class="tag"><html></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
</span><span class="tag"><title></span><span class="pln">Example of Paragraph</span><span class="tag"></title></span><span class="pln">
</span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">Content of the first paragraph will be placed here.</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">Content of the second paragraph will be placed here.</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">Content of the third paragraph will be placed here.</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span><span class="pln">
</span>
Live Preview
Button Tag
<button> element is used to create an HTML button. Any text appearing between the opening tag (<button>) and closing tag (</button>)
appear as text on the button. No action takes place by default when a button is clicked. Actions must be added to be
using JavaScript or by associating the button with a form.
Example
<span class="pln">
</span><span class="dec"><!DOCTYPE html></span><span class="pln">
</span><span class="tag"><html></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
</span><span class="tag"><title></span><span class="pln">Example of Button</span><span class="tag"></title></span><span class="pln">
</span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
</span><span class="tag"><button></span><span class="pln">I am the Button</span><span class="tag"></button></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">No action takes place if you click on this button.</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span><span class="pln">
</span>
Live Preview
Bold Tag
<b> element is used to differenciate words from the surrounding text by styling the text in bold. Another way bold text is described as a important part of the whole text. The text which you want to bold must be written between <b> and </b>.
Example
<span class="pln">
</span><span class="dec"><!DOCTYPE html></span><span class="pln">
</span><span class="tag"><html></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
</span><span class="tag"><title></span><span class="pln">Example of Bold Text</span><span class="tag"></title></span><span class="pln">
</span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">In our solar system </span><span class="tag"><b></span><span class="pln">Jupiter is the largest Planet</span><span class="tag"></b></span><span class="pln"> but </span><span class="tag"><b></span><span class="pln">Earth is most important</span><span class="tag"></b></span><span class="pln"> for us. </span><span class="tag"></p></span><span class="pln">
</span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span><span class="pln">
</span>
Live Preview
Italic Tag
The <i> element is used to differentiate words from the surrounding text by styling the text in italic. Italic text must be written between <italic> and </italic>
Example
<span class="pln">
</span><span class="dec"><!DOCTYPE html></span><span class="pln">
</span><span class="tag"><html></span><span class="pln">
</span><span class="tag"><head></span><span class="pln">
</span><span class="tag"><title></span><span class="pln">Example of Italic Text</span><span class="tag"></title></span><span class="pln">
</span><span class="tag"></head></span><span class="pln">
</span><span class="tag"><body></span><span class="pln">
</span><span class="tag"><p></span><span class="pln">Moon is the only </span><span class="tag"><i></span><span class="pln">Natural Satelite</span><span class="tag"></i></span><span class="pln"> of Earth.</span><span class="tag"></p></span><span class="pln">
</span><span class="tag"></body></span><span class="pln">
</span><span class="tag"></html></span><span class="pln">
</span>
Live Preview
Line Break Tag
The <br> element is used to insert a line break in the document. This tag is an example of an empty element,
where you do not need opening and closing tags, as there is nothing to go in between them.
The <iframe> creates an inline frame, which embeds an independent HTML document into the current
document. Content will be placed within opening tag (<iframe>) as a attribute and do not forgot to write
closing tag ().
The <img> tag is used to insert an image into the document. This tag is also an example of an empty element, where you do not need opening and closing tags
