Tutorials

KodeKite Tools

HTML
Flexbox
SVG
Canvas
HTML Tutorial

More


Tag vs Element
HTML Tag

HTML tags are keywords or names that are surrounded by angle brackets "<>"
There are two types of HTML tags.


  • Pair Tags
  • Unpair Tags
Pair Tags

Pair tags are the combination of both open tag "<tag>" and closing tag "</tag>".


  • <tag> is called open tag
  • </tag> is called closing tag

Note:

Close tag is open tag followed by forward slash "/" before open tag name.

Syntax

<Tagname></Tagname>


Note:

Tag names are not case sensitive it means you can use either upper case tag names "<TAGNAME></TAGNAME>" or lower case tag names "<tagname></tagname>" but it's better to use lowercase names.


There are so many pair tags in html but <b></b> , <i></i> and <p></p> are the common examples of pair tags.


Example

This is bold text
This is italic text

This is paragraph

Unpair Tags

Unpair tags are the single open tags "<tag>".


  • <tag> is called open tag

Note:

Unpair tag is an open tag followed by single space and forward slash "/" after open tag name.

Syntax

<Tagname />


Note:

Tag names are not case sensitive it means you can use either upper case tag names "<TAGNAME />" or lower case tag names "<tagname />" but it's better to use lowercase names.


The common examples of unpair tags are <hr /> <br /> etc.


Example

Paragraph before horizontal line





Paragraph after horizontal line



Note:

Pair tags are called non empty elements and unpair tags are called empty elements and pair tag and unpair tags both are non case sensitive.

Element

HTML Elements are combination of open tag "<tag>", content and close tag"</tag>".

Syntax

<Tagname>Content</Tagname>


There are hundereds of html elements like <img />, <em></em>, <p></p> and many more.


Note:

here "<img />" is called empty element and "<em></em>", "<p></p>" are called non empty elements.

Empty Element
Example

image
Non-Empty Element
Example

This is emphasized text

Don't worry if you can't understand "<img />", "<em></em>" elements at this time we will explain them in detail in latter chapters.

Tag vs Element

Here is difference between tag and element

Tag
  • Tag is a label used to markup the beggining and end of an element
  • All tags have same syntax
Element
  • An Element is a set of opening, content and closing of tag
  • The opening and closing tags are only different in slash sign "/"

Practice Task

Open notepad or any other text editor, follow the following points.


  • Write two non empty elements
  • write one empty element
  • Use <br /> element for next or new line if neccessary

save file with name task.html or task.htm and then open it using any browser and see results.


Solution

This is heading 3 non empty element

This is paragraph non empty element