Frequently Used Important HTML Tags

Last modified date

W3HTML stands for Hypertext Markup Language, a confusing question what actually is HTML and its importance in front-end developer life. Learning HTML leads you to learn other on-page customization tools like CSS,JavaScript,Angular Js, JQuery and etc. For now don’t worry what are these tools to deal with, all their importance will be known once you have some good understating of HTML.

Few Important points why you should learn HTML

Heading Tags (h1, h2, h3, h4, h5, h6)

There are total 6 heading tags in HTML (H1-H6), all these tags are used as per size requirements. Every paragraph has a main Heading or side Heading. Main Heading would be bigger comparing to side heading, so depending upon sizes requirements we use these Heading tags.

Example with output: 

<h1>Heading h1</h1>

<h2>Heading h2</h2>

<h3>Heading h3</h3>

<h4>Heading h4</h5>

<h5>Heading h5</h5>

<h6>Heading h6</h6>

output :

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

 

Paragraph Tag(<P>)

P tag stands for paragraph, the name itself stands for saying something like it represents some content should be displayed in between the <p> tags.

Example:

<p>anything you write in between opened and closed p tags its said to be paragraph </p>

outputanything you write in between opened and closed p tags its said to be paragraph

Text Customizing tags or Formatting tags

There are many tags to format your text in html, so here we will discuss all those essential text formatting tags in detail with a useful example.



Italic Text <i> tag

<i>any content you write in between I tag appears to be Italic</i>

outputany content you write in between I tag appears to be Italic

Bold Text <b> tag

<b> any text you write in between b tags appears to be bold</b>

outputany text you write in between b tags appears to be bold

Strong Text <strong> tag

<Strong>Both b tags and strong tags have similar visualization in browser </strong>

outputBoth b tags and strong tags have similar visualization in browser 

Insert added Text or Text Underline <ins> tag

If you want to <ins>underline</ins> some particular text use ins tags in HTML

output : If you want to underline some particular text use ins tags in HTML

Mark Text <mark> tag

<mark>This tag marks the Text</mark>

outputThis tag marks the Text

Deleted Text <del> tag

<del>This text appears to be deleted, with a line over the text</del>

outputThis text appears to be deleted, with a line over the text

Subscript Text and Superscript Text

H<sub>2</sub> O<sub>2</sub>
X<sup>2</sup>+Y<sup>2</sup>

output : H2O2

output : X2+Y2

Quotation Text or Quote Text <q> tag

if you want to show any text as quote in HTML then use <q> tag

<q>This Text has Quotation</q>

output :

 This Text has Quotation

Styles <style> tag

Style tag have the all properties of CSS, it’s a shortcut way to add your custom CSS styles to your individual elements of any HTML tag. A style tag helps easy CSS within the HTML Scripting without using any external CSS file. You can style all your HTML elements within the style tag.

Example:

 

<!Doctype html>

<html>

<title>Style Tags Example</title>

<style>

Body{

Color:green;

}

</style>

<body>

<h4>This is Heading Tag ONE</h4>

<h4 style="color:red" This is Heading Tag TWO</h4>

<h4>This is Heading Tag THREE</h4>

<h4>This is Heading Tag FOUR</h4>

</body>

</html>

output :

This is Heading Tag ONE

This is Heading Tag TWO

This is Heading Tag THREE

This is Heading Tag FOUR

Computer code text <code> tag

Code text is different comparing to default text which appears in browsers, mostly you can write formulas related stuff in code tag. for example line mathematics,physics or chemistry formulas.

example

<code>

math formula=a<sup>2</sup>+ba<sup>2</sup>=2ab         here for 2’s use Superscript

Chemistry= H<sub>2</sub>O<sub>2</sub>                 here for 2’s use Subscript

</code>

output :

math formula=a2+b2=2ab

Chemistry=H2O2

Comments in HTML

Why use comments? Comments describe what you are going to do with your tags or script in the HTML, for example let’s assume you written a 300 line of code which is easy to understand by yourself, but when you give the code to some other person it might be little difficult for them to understand the 300 lines code. so to overcome this problem many language tools use Comments.

Comments are used only for developer consideration but not for the viewers, comments are hidden within the scripting language to understand the logics.

You can write comments anywhere in the HTML, comments won’t be shown by the Browsers

Example:

<!--Write anything in this arrow mark, this is not displayed in the Browser, you can write comments anywhere in HTML page→

Hyperlinks or Links <a href=”your link here”>

<a href=” “> is the mostly widely and commonly used tag across the web. many people think that <a> tag is only used to insert a link to redirect to some particular webpage or some custom HTML page. in <a> tag you can add image link to display or Hyperlink to redirect.

Example:

<a href="http://intactabode.com/">Link</a>

or

<a href="or any image link">image</a>

Insert Image <img src>

How many ways are there to insert image?

(i) Using link you can display image in Browser

(ii) or from current director starting forward slash “/ ” and you image name and extension.

img describes the image and src describes the source of the image.



<img src="/myimage.jpg">

<img src="http://intactabode.com/wp-content/uploads/2018/01/frequently-used-html-tags.jpg">

output :

frequently-used-html-tags

Tables in HTML <table><th><tr><td>

<table> =  Describes Table

<th>       = Describes Table Heading

<tr>        = Describes Table Row

<td>       = Describes Table Data

Table  is also the most commonly used tag to display your content in some specific order or we can say displaying content in rows and columns with table heading,table row and table data;

Let’s go in specific how to use <th><tr><td> in <table>. So we know commonly every Table has Column name on top and required no.of rows depending upon data insertion in it.

(i) First open and close <table> tags to declare a table.

(ii) Create heading row using <tr> and give heading using <th>.

(iii) Now insert data for your no.of required rows using <td>

example:

<table>     <!--Declare a table-->

<tr>           <!--Declaring your Heading row -->


<th>Student ID</th>

<th>Student Name</th>

<th>Fee Details</th>

</tr>

<tr>      < !-- Insert your Data in the Row -- >

<td>1</td>

<td>Jack</td>

<td>50000</td>

</tr>

<tr>      < !-- Inset your Data in the Next Row -- >

<td>2</td>

<td>Smith</td>

<td>10000</td>

</tr>

<table>

output : 

Student ID Student Name Fee Details
1 Jack 50000
2 smith 10000

Ordered List <ol>, Unordered List <ul>, List <li>

Simple Difference between ordered list and unordered list in HTML, If we Declare List <li> items in Ordered list it appears in Number Sequence like 1,2,3 and so on. but if you Declare List <li> items in Unordered list <ul> they appears with dot sequence.

example :

Ordered List <ol>

 

<ol>

<li>Hello</li>      outputs : 1. Hello

<li>Hey</li>        outputs : 2. Hey

<li>Hi</li>         outputs : 3. Hi

</ol>

output :

  1. Hello
  2. Hey
  3. Hi

UnOrdered List <ul>

 

<ul>

<li>Hello</li>

<li>Hey</li>

<li>Hi</li>

</ul>

output : 

  • Hello
  • Hey
  • Hi

intactabode