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.
Example
<!DOCTYPE html>
<html>
<head>
<title>List of Heading</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Live Preview
Paragraph Tag
<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
<!DOCTYPE html>
<html>
<head>
<title>Example of Paragraph</title>
</head>
<body>
<p>Content of the first paragraph will be placed here.</p>
<p>Content of the second paragraph will be placed here.</p>
<p>Content of the third paragraph will be placed here.</p>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<title>Example of Button</title>
</head>
<body>
<button>I am the Button</button>
<p>No action takes place if you click on this button.</p>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<title>Example of Bold Text</title>
</head>
<body>
<p>In our solar system <b>Jupiter is the largest Planet</b> but <b>Earth is most important</b> for us. </p>
</body>
</html>
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
<!DOCTYPE html>
<html>
<head>
<title>Example of Italic Text</title>
</head>
<body>
<p>Moon is the only <i>Natural Satelite</i> of Earth.</p>
</body>
</html>
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.
Example
<!DOCTYPE html>
<html>
<head>
<title>Example of Line Break</title>
</head>
<body>
<p>Address:</p>
<p>New Town <br>Kolkata <br>West Bengal <br> India</p>
</body>
</html>
Live Preview
Horizontal Lines Tag
The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.
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
