Learn

HTML – Basic Tags

Advertisement

Heading Tags

Any doc begins with a heading. You need to use completely different sizes on your headings. HTML additionally has six ranges of headings, which use the weather <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Whereas displaying any heading, browser provides one line earlier than and one line after that heading.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Head Example</title>
   </head>
  
   <body>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
   </body>
  
</html>

This can produce the next result −

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

Paragraph Tag

The <p> tag presents a approach to construction your textual content into completely different paragraphs. Every paragraph of textual content ought to go in between a gap <p> and a closing </p> tag as proven under within the instance −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
  
   <body>
      <p>First paragraph of text.</p>
      <p>Second paragraph of text.</p>
      <p>Third paragraph of text.</p>
   </body>
  
</html>

This can produce the next result −

First paragraph of text.

Second paragraph of text.

Third paragraph of text.

Line Break Tag

Everytime you use the <br /> element, something following it begins from the following line. This tag is an example of an empty element, the place you don’t want opening and shutting tags, as there’s nothing to go in between them.

The <br /> tag has an area between the characters br and the ahead slash. For those who omit this space, older browsers could have hassle rendering the line break, whereas in case you miss the ahead slash character and just use <br> it’s not valid in XHTML.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break</title>
   </head>
  
   <body>
      <p>Hello World<br />
         Your assignment ontime.<br />
         Thanks<br />
         Hamza</p>
   </body>
  
</html>

This can produce the next result −

Hello World
Your assignment ontime.
Thanks
Hamza

Centering Content

You should utilize <center> tag to place any content material within the heart of the web page or any table cell.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Example</title>
   </head>
  
   <body>
      <p>Text in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
  
</html>

This can produce the next result −

This text is not in the center.

This text is in the center.

Horizontal Lines

Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

For example, you may want to give a line between two paragraphs as in the given example below −

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line</title>
   </head>
  
   <body>
      <p>Paragraph one and should be in top</p>
      <hr />
      <p>Paragraph two and should be in bottom</p>
   </body>
  
</html>

This can produce the next result −

Paragraph one and should be in top


Paragraph two and should be in bottom

Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line, while if you miss the forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting

Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
  
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
  
</html>

This can produce the next result −

         function testFunction( strText ){
            alert (strText)
         }

Try using the same code without keeping it inside <pre>…</pre> tags

Nonbreaking Spaces

Suppose you want to use the phrase “12 Angry Men.” Here, you would not want a browser to split the “12, Angry” and “Men” across two lines −

An example of this technique appears in the movie "12 Angry Men."

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 “12 Angry Men” 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>An example of this technique</p>
   </body>
  
</html>

This can produce the next result −

An example of this technique

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close
Privacy Policy | DMCA | Contact US
Back to top button
Close