• Have Any Question?
  • contact@eitworld.com

HTML Basic tags





HTML is the tag based and everything is done using the tag for represent any information or designing purpose. The Basic Html Tags are <html> tag, <head> tag, <body> tag, <title> tag, <hr> tag etc. In HTML tags are of two types: paired tag and unpaired tag. Hr Tag in Html is unpaired tag used for horizontal row. You can learn the Basic HTML Tags for simple designing. Eitworld.com provides the basic and simple learning on Basic html tags with example in simple and better way without any cost.

Heading Tags

 

  • Heading of something should be bigger than the other text.
  • In Html 6 tags are used to present a text as heading.
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> are called Heading Tags. They make the text enclosed by them bigger than normal so that it looks like heading.
  • <h1> presents the most important heading and <h6> presents the least important heading.
  • These tags should only be used in case of headings. Do not use them for formatting the text i.e. making a text bold.

Syntax:

 

<h1>Heading here </h1>

 

Example

 

<html>
<body>
<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

As seen in the example, the text that is surrounded by <h1> is the biggest. Then the size is decreasing as the number with <h> increases and finally <h6> gives the smallest heading.

Paragraph Tag

 

  • So this would be the most important to know that how a normal text should be written.
  • You may write the text without using any special tag for it but there will be a lot of problem while formatting it, setting its positions and other important functions.
  • <p> tag is used for enclosing a paragraph.
  • Keep in mind to close this tag when you have completed your paragraph. If not done, all the content after this paragraph may be disturbed.
  • <p> Doesn’t preserve the spaces and line breaks. It considers all consecutive spaces and line changes, as a single space. It means no matter how many time space and enter are pressed between two words; it will show only a single space between those words in output.

Syntax:

 

<p>Text Here </p>

 

Example

 

<!DOCTYPE html >
<html>
<body>
<p>This is the first paragraph.</p>
<p>This is
the second
paragraph.</p>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

In above example, two paragraphs are written. Both are same in output though they are written differently in input. The fact is, <p> tag never notices how the text is written, it only shows it in a single line.

Horizontal ruler tag

 

  • Horizontal ruler is a horizontally drawn line of required width and size.
  • In between the text, you may need to underline your heading thoroughly or separate two sections. For this purpose, a horizontal line may be required.
  • <hr /> is the tag, which can be used for this purpose.
  • This is used as single tag, not in pair.
  • The size and width can be set as required otherwise it will cover the complete screen from left to right with default size=1.
  • It can be converted into vertical line by setting width=1 and size greater than 1.
  • Three attributes are important here-
    • Width=(Optional) Sets the width of the ruler. Default value is 100%.
    • Size= (Optional) Sets the size (height) of the ruler. Default value is 1.
    • align= (Optional) Sets the alignment. Default value is “center”. Other values are “left”, “right”.

Syntax:

 

<hr width= “a” size= “b” align= “center|left|right” />

 

Example

 

<!DOCTYPE html >
<html>
<body>
<h1>This is h1</h1>
<hr />
<h2>This is h2</h2>
<hr width=”500″ />
<h3>This is h3</h3>
<hr width=”500″ size=”5″ align=”left” />
<h4>This is h4</h4>
<hr width=”1″ size=”300″ />
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Line Break tag

 

  • Line changing is not natural in HTML coding.
  • Thus a particular tag is used for line breaking, that is <br>
  • This is used as single tag, not in pair.

Syntax:

 

<br />

 

Example

 

<!DOCTYPE html >
<html>
<body>
<p>This is the first paragraph.</p><br /><br />
<p>This is<br />the second
paragraph.</p>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

In above example-

As <p> tag doesn’t changes line according to enters, so we have used <br> to change the line. And Two <br> tags are used between two <p> tags and in the output, second paragraph is displayed after two line breaks.

Preformatted Text (<pre> tag)

 

  • As described, <p> tag doesn’t preserve spaces and line breaks.
  • <pre> tag is there for preformatted text i.e. to preserve your spaces and line breaks. It shows the text in output as it is written in input.
  • It has a common font always, normally “Courier”.

Syntax:

 

<pre>Text Here </pre>

 

Example

 

<!DOCTYPE html>
<html>
<body>
<pre>This is    pre formatted text.
It has preseved
both the    spaces and line breaks.</pre>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Nonbreaking Spaces

 

  • Suppose you want to use a sentence “I am angry” Here you would not want a browser to split the “I, “am” and “angry” across two lines:
  • I want to say that “I am angry”.
  • In cases where you do not want the client browser to break text, you should use a nonbreaking space entity &nbsp; instead of a normal space. For example, when coding the “I am angry” in a paragraph, you should use something similar to the following code:

Example

 

<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>I want to say that “I&nbsp;am&nbsp;angry.”</p>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

<center> tag

 

  • we can use <center> tag to put any content in the center of the page or any table cell.

Example

 

<!DOCTYPE html>
<html>
<head>
<title>Center Tag Example</title>
</head>
<body>
<p>I am not in center.</p>
<center>
<p>I am in center.</p>
</center>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output



Real Time Web Analytics