HTML - Basic Tags

Heading Tags

Heading tags, also known as header tags, are used to define headings and subheadings on a webpage. HTML has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

<h1> defines the most important heading whereas <h6> defines the least important heading. While displaying any heading, browser adds one line before and one line after that heading.

The example below illustrates on HTML heading tags.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

The output of the above script will be:

Paragraph Tag

The HTML <p> element is used to define a paragraph. The text of a paragraph should be enclosed between <p> and </p>.

A paragraph starts with a new line, and browsers automatically add some margin before and after a paragraph. Adding extra spaces or extra lines in a paragraph of the HTML code will not be displayed by the browser. The browser will automatically remove any extra spaces and lines when the page is displayed.

The example below demonstrates on HTML paragraph tag.

<p>This text belongs to the first paragraph.</p>
<p>This text belongs to the second paragraph.</p>
<p>This text 
belongs to the 
third paragraph.
</p>

The output of the above script will be:

Line Break Tag

The HTML <br> element is used to define a line break. The <br> tag is an empty tag, which means that it has no end tag. Anything followed by this element starts from the next line without starting a new paragraph.

The <br /> is an example of the empty element. This tag has a space between the characters br and the forward slash. If the space is omitted, older browsers may have trouble rendering the line break, while if the forward slash character is removed then it will not be valid in XHTML.

The example below demonstrates on HTML line break tag.

<p>
  The item is delivered to:<br>
   Name: John<br>
   City: London
</p>

The output of the above script will be:

Horizontal Line Tag

The HTML <hr> element is used to define a thematic break (horizontal line) in an HTML page. The <hr> tag is an empty tag, which means that it has no end tag. It is used to separate content (or define a change) in an HTML page.

The <hr /> is an example of the empty element. This tag has a space between the characters hr and the forward slash. If the space is omitted, older browsers may have trouble rendering the horizontal line, while if the forward slash character is removed then it will not be valid in XHTML.

The example below demonstrates how to put a line between two paragraphs:

<h1>First Heading</h1>
<p>Some text for first paragraph.</p>
<hr>

<h1>Second Heading</h1>
<p>Some text for second paragraph.</p>
<hr>

<h1>Third Heading</h1>
<p>Some text for third paragraph.</p>

The output of the above script will be:

Centering Content

The HTML <center> element is used to put any content in the center of the page or any table cell.

The example below demonstrates how to put a content in the center of the page.

<p>This text is not in center.</p>

<center>
  <p>This text is in center.</p>
</center>

The output of the above script will be:

Preserve Formatting

The HTML <pre> element is used to define preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

The example below demonstrates the usage of <pre> tag.

<pre>
Whose woods these are I think I know.

His house is in the village though;

He will not see me stopping here

To watch his woods fill up with snow.
</pre>

The output of the above script will be:

Non-breaking Spaces

Consider the phrase "The Sixth Sense" which we do not want a browser to split across multiple lines. This can be achieved by using non-breaking space entity &nbsp; instead of a normal space. Consider the example below:

<p>
After a six-month online promotion campaign, 
"The&nbsp;Sixth&nbsp;Sense" was released 
on VHS and DVD by Hollywood Pictures Home 
Video on March 28, 2000.
</p>

The output of the above script will be: