Previous Next

HTML Basic Tags

HTML Documents

HTML document must have document type  declaration: <!DOCTYPE  html>

HTML document starts with <html> tag and ends with </html>.

The Visible content of HTML document is between <body> and </body>.

Example

<!DOCTYPE html>
<html>
   <body>
      <h1>My First Heading</h1>
      <p>My first paragraph.</p>
   </body>
</html>

 

HTML Heading Tag

HTML has six levels of headings:  <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>

<h1> Represents most important heading.

<h6> Represents least important heading.

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>

Result:

HTML Heading Tags

HTML Paragraph Tag

The paragraph tag is used to define paragraph in HTML document.

Paragraphh tags are defined with <p> and </p>.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Paragraph Example</title>
   </head>
   <body>
      <p>This is a first paragraph.</p>
      <p>This is a second paragraph.</p>     
   </body>
</html>

Result:

This is a first paragraph.

This is a second paragraph.

 

HTML Line Break Tag

Line break tag causes content after this tag to start from new line.

Line break is defined with : <br />. There is no start tag and end tag.

Line break tag contains space between br and forward slash, space is required for older browsers compatibility.

Line break tag is an example of an empty element. Because nothing goes inside <br/> tag.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Line Break  Example</title>
   </head>
   <body>
      <p>Hi Joe<br />
         Happy New Year.<br />
         Tina
      </p>
   </body>
</html>

Result:

Hi Joe
Happy New Year.
Tina

HTML Center Tag

<center> tag puts any content in the center of the HTML page.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Center Tag</title>
   </head>
   <body>
      <p>This text is not in the center.</p>
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
</html>

Result:

This text is not in the center.

This text is in the center.

 

HTML Horizontal Tag

Horizontal lines can be created by using  <hr> tag.

<hr /> tag is an empty element and does not have any opening and closing tag.

Horizontal tag contains a space between hr and forward slash, this space is required to work properly.

Horizontal tag can be used to separate sections in HTML documents like two paragraphs.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Horizontal Line Example</title>
   </head>

   <body>
      <p>This is the paragraph 1</p>
      <hr />
      <p>This is the paragraph 2</p>
   </body>
</html>

Result:

The is the paragraph 1


This is the paragraph  2

 

HTML Pre Tag 

<Pre> tag preserves the formatting of the HTML document. 

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

Example

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

Result:

function testFunction( strText ){
   alert (strText)
}

 

HTML Images

HTML images are defined with <img> tag.

Its attributes are: 

  • src : Source file url of image
  • alt : Alternative text for image, to show when image not displayed
  • width : Width of image
  • Height : Height if image

Example

<img src="http://images.gofreedownload.net/beautiful-small-flowers-vector-78762.jpg" alt="W3Schools.com" width="104" height="142">

Result

W3Schools.com

 

 


Previous Next