Center, Bold, Paragraph, Nextline, Horizontal Line

Common HTML Tags

HTML tags and HTML elements are the building blocks of any HTML page. These make up any HTML page. Now that you know what they are (or at least have some idea about it) we will explore some well know HTML tags. We will read about the following HTML tags and elements. (Most of the times, the terms 'Tag' and 'Element' are used interchangeably. So I will also do the same. But you know the basic difference between them. Right?)

The Bold <b> .. </b> Element

All the text which is present directly inside these tags appears in bold font when rendered by browser. This is illustrated by an example below.

Code
<b> This is the text in bold </b>
Output
This is the text in bold

The Bold tags do not increase font size.
Try to use CSS whenever possible. (CSS property font-weight)

The Center <center> .. </center> Element

Every child element placed directly below the HTML <center> element is placed centerally with respect to the parent element of center. Confused? The example below will make it clear.

Code
Inline comments this text is not centered. <center>Centered comments. This text is now centered.</center>
Output
Inline comments this text is not centered.


Centered comments. This text is now centered.

Notice the positioning of "Inline comments.." and "Cenetered comments..". The first comment has not been centered so it appears inline. While the latter comment has been placed between the <center> .. </center> tags hence it appears centered.

For a better understanding, Try to see the texts at different resolutions and screen width. You can resize this window also for this purpose. Notice that the centered text is allways centrally placed with respect to its parent element. The text wrapping for these two comments also differ due to this.
This tag has been deprecated now. Using CSS is recommended for this (CSS property text-align)

The Paragraph <p> .. </p> Element

The example of an HTML paragraph element is as below.

Code
This is before the Paragraph. <p>This text is inside the HTML paragraph tags.</p>This is after the HTML paragraph. This is before the Paragraph.
Output:
This text is inside the HTML paragraph tags.

This is after the HTML paragraph.

Notice that the browser adds one line before and after the

element. The text is also padded little.
To contol the properties of an HTML Paragraph, CSS is recommended.

The Nextline <br /> And Horizontal Line <hr /> Elements

The <br /> element forces the text after it to appear on the nextline. This tag becomes ineffective if some other elements like paragraph <p> appears just after this tag.

The <hr /> element draws a horizontal line. The width of the horiztal line is equal to the width of its parent element.
Code
Example of br element.<br /> This text will appear on the next line.
Output
Example of br element.
This text will appear on the next line.

Code
This is before the horizontal line. <hr /> This is after the horizontal line.
Output
This is before the horizontal line.


This is after the horizontal line.

As you see above, <hr> hr element is generally used to separate two contexts or topics.
None of these elements has any closing tag. So while using them in XHTML, which requires every element to begin and end with tags, use slash inside the start tag itself like this <br />. These two tags are examples of self closing tags.