HTML Tag

An HTML tag is defined by start tag, end tag, and between the tags some content. Tag is also known as an element. The HTML element is everything from the start tag to the end tag. Some tag is only open not close that is called empty tag which is described below with an example.

<opentag> Content  </closetag>

Example

Try Now


  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
  <i> Italic text </i>
Start tag Element content End tag
<h1> My Heading </h1>
<p> My paragraph </p>
<br> none none
<hr> None none

 

Note: Some HTML tag has no content (like <hr> , <br> etc.). These tags are called empty tags. Empty tags do not have an end tag!

The HTML tag is like keywords that define how the web browser will display the content.  The web browser reads an HTML document from top to bottom and left to right.

  • HTML tag must enclosed with <> brackets.
  • HTML tags perform different task, we can use tags as per our code requirement.
  • HTML tag must be open and closed ( like <open tag> Some content </close tag> ).
  • HTML tag can be nested ( this means the tag can contain other tags ).
  • The HTML tag is always written in lowercase letters. 

Example

Try Now


<!DOCTYPE html>
<html>
<head>
     <title>Tags example</title>
lt;/head>
<body>
<h1>About HTML</h1>
<hr>
<p>HTML stands for Hypertext markup Language <br> It run on web browser</p>
</body>
</html>

Never Skip the End Tag

In HTML, sometimes some elements will display correctly, even we forget the end tag. Sometimes get unexpected results and errors may occur if we forget the end tag!

Example

Try Now


<!DOCTYPE html>
<html>
<head>
     <title>Never skip tag</title>
</head>
<body>
     <h1> Headline without close tag
     <p> Paragraph without close tag
</body>
</html>

HTML Empty Tags

In HTML some tag has no content that is called empty elements.

In the given following example in which <hr> the tag is used to create a horizontal rule and <br> the tag is used to break the new line, both are empty elements without a closing tag.

Example

Try Now


<!DOCTYPE html>
<html>
<head>
     <title>Empty tag</title>
</head>
<body>
      <h1>Hello</h1>
      <hr>
<p>Paragraph close <br> tag</p>
</body>
</html>

In the given above example <hr> and <br> tag is an empty tag or element.

HTML tags are Case Sensitive or Not?

HTML tags are not case sensitive : <H1> Means the same as <h1>.

In HTML if you have stated some tag with uppercase or lowercase then close with upper case or lower case like ( <H1> some content </H1> Or <h1> Some content </h1>).

In HTML the tag does not require in lowercase, but W3C recommends lowercase in HTML.

Example

Try Now


<!DOCTYPE html>
<html>
<head>
     <title>Not Case sensitive</title>
</head>
<body>
     <H1>Headline in Uppercase </H1>
     <H1>Wrong Practice</h1>
     <p>This paragraph in Lowercase</p>
</body>
</html>

In the given above example, <H1> </H1> headline tag is in uppercase and <p></p> the paragraph is lowercase both tags is correct.

But <H1> < /h1> is Wrong Practice because starts with uppercase and closes with lowercase but the result will show correctly.

If you want to check where you did some mistakes while writing code, then use the HTML Syntax checker ( Search on Google).   

 

HTML Meta Tags

DOCTYPE, title, link, meta, and style

HTML Text Tags

<p>, <h1>-<h6>, <strong>,<sup>,<sub>,<big>,<em>,<i>,<abbr>, <acronym>,<output>,<address>,<nav>,<main>,<section>,<canvas>,<article>, <bdo>, <header>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>, <small>.

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags

form, input, textarea, select, option, optgroup, button, label, fieldset and legend, date, time,

Note: Before using the given above tag please read the next chapter. In the next chapter, we will learn Block level and Inline tag or element.

Prev Next