HTML TAGS

❮ Prev Next ❯

HTML tags are the basic building block of webpages. Tags are like a sign board which tells the browser how to display and format content inside the tag.

HTML tag starts and close with angle brackets (<tagname>) and the name of tag lies within the brackets. Example <p>, <h1>, <div>, etc.

HTML tags are used in nested form. Like: <head> and <body> tags are used inside <html> tag, inside <head> we use <title> tag and inside <body> we use other tags like headings, paragraphs, etc.

The following example is a valid HTML code, you can see how HTML tags are nested in each other. Tags used in example below are <html>, <head>, <title>, <body>, <p> and <h2>.

<!DOCTYPE html>
<html>
  <head>
    <title> Title of page </title>
  </head>
  <body>
    <p>Paragraph of the webpage</p>
    <h2>Heading of the webpage.</h2>
  </body>
</html>

▶ Run the code

Note: HTML tags are always written in lowercase.

Lets discuss basic HTML tags here:-

html tag

<html> tag is called root tag of HTML document because it is root element in tree of elements of a web page.
All other elements like head or body goes inside it.
It contain all other element of web page except <!DOCTYPE>.

head tag

<head> contain all necessary information related to web page but not actual content.
Information like: title, base address, script, meta data, style all resides in <head>.
Contents of <head> element is not diaplayed in web page.

<head>
  <title> Title of page </title>
  <meta name="author" content="john smith" />
  <style>
    body{
      background-color:lightblue;
    }
  </style>
  <script src="URL"></script>
</head>

body tag

A <body> tag defines body of HTML document.
All the element which are displayed on web page lies inside <body> tag.
Paragraphs, headings, images, videos,links every visible content is defined inside <body> tag.

<!DOCTYPE html>
<html>
  <head>
    <title> Title of page </title>
  </head>
<body>
  <p>Paragraph of the webpage</p>
  <h2>Heading of the webpage.</h2>
  <img src="flowers.jpg" alt="flowers" />
</body>
</html>

▶ Run the code

Heading tags

Heading tags are used to give headings in HTML documents.
There are six levels of headings representing six different sizes of heading.
Headings are <h1>,<h2>,<h3>,<h4>,<h5> and <h6>. Where <h1> is biggest in size and <h6> is smallest in size.

<!DOCTYPE html>
<html>
  <head>
    <title> Title of page </title>
  </head>
<body>
    <h1>First level heading (h1)</h1>
    <h2>second level heading (h2)</h2>
    <h3>Third level heading (h3)</h3>
    <h4>Fourth level heading (h4)</h4>
    <h5>Fifth level  heading (h5)</h5>
    <h6>Sixth level heading (h6)</h6>
</body>
</html>

▶ Run the code

Paragraph tag

<p> tag defines paragraphs in HTML documents. It is used to write content on webpage in form of a paragraph.
Writing content to one <p> tag and then moving to the next <p> tag automatically changes the paragraph in the web page.

<body>
  <p>This is paragraph 1.</p>
  <p>This is paragraph 2.</p>
</body>

▶ Run the code

Preformatted tag( pre tag)

<pre> tag allows you to define spacing and lining itself in an HTML document.
Content on a web page is decorated in the same fashion as you define in <pre> tag.

<body>
  <pre>Lorem ipsum dolor sit amet consectetur adipisicing elit.
   Corrupti sequi quisquam dicta ullam 
        officia voluptatem       cum rem incidunt, nulla voluptatibus id
                   itaque iure eligendi, consequuntur
   temporibus similique,                  praesentium ex in.</pre>
</body>

▶ Run the code

table tag

<table> tag is used to create tables on a webpage. table tag contains many helper tags which are used within table tag to create table-rows, table-columns, table-cells, etc.
Some of helper table tags are <tr>, <th>, <td>, etc.

<p>This is a paragraph with line <br> break at word line.</p>

▶ Run the code

list tags

<list> tag is used to create lists on a webpage. list tag are of 2 types unordered and ordered list.
Unordered list is created using <ul> tag, whereas ordered list is created using <ol> tag.

<p>I am first paragraph.</p>
<hr>
<p>I am second paragraph.</p>

▶ Run the code

br tag (line breaking tag)

In HTML line breaking is specified by the <br> tag.

The <br> tag is an empty tag. We do not need to close it in HTML but in XHTML it is not valid you have to close it as <br />.

<center>
  <p>I am in center of the page.</p>
</center>
<p>But i am not in center of the page.</p>

▶ Run the code

Note: It is valid to use <br> in HTML but in XHTML it's not valid instead we use <br />

hr tag

In HTML horizontal line is specified by the <hr> tag.

The <hr> tag is an empty tag.We need not to close it in HTML but in XHTML it is not valid you have to close it as <hr />

<table>
  <tr>
    <th>food</th>
    <th>drink</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>milk</td>
  </tr>
  <tr>
    <td>Pizza</td>
    <td>cold-drink</td>
  </tr>
</table>

▶ Run the code

Note: It is valid to use <hr> in HTML but in XHTML it's not valid instead we use <hr />.

center tag

HTML <center> tag is used to put any content in the center of the block of webpage.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

▶ Run the code

Points to remember:

HTML tags are building blocks of webpage. HTML tags can be written in nested form.
There are 2 different types of HTML tags closing tags like p tag, heading tag, div tag and self closing tag like br tag, hr tag, img tag, etc.
html tags contains all tags nexted inside it.

HTML Attribute

❮ Prev Next ❯