HTML – Basic Tags

HTML tags defines that how web browser will format and display the content.

Syntax

<tag> content </tag>

Tags Type

1. Paired tags

Paired tags have an opening and closing tag. The opening tag is similar to the single <div> tag, and the closing has the first slash </div>.

2. Singular tags

A tag is defined to be a singular tag when there is no closing tag.

Heading Tags

It defined a title or a subtitle which you want to display on the webpage. HTML also has six levels of headings <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Search engines use the headings to index the structure and content of your web pages

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Heading Example</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>

Paragraph Tag

<p> tag starts on a new line, and is usually a block of text.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
</html>

Line Break Tag

<br> defines a line break

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Line Break Tags</title>
   </head>
	
   <body>
      <p>Hello<br>
         Every one.<br>
         Thanks<br>
         Admin</p>
   </body>
</html>

Centering Content

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

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Centering Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>	
</html>

Horizontal Lines

The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr>
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

Preserve Formatting

<pre> defines preformatted text

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>
Related Articles
Leave A Comment?