clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

More

HTML basic tags

Imperial Advance Hero Image

HTML basic tags

1) HTML heading tag

It is used to change the size of the text.

  • There are six heading tags, each heading tag have different text size.
  • it is used in the body tag.

 

Syntax -

<h1>  </h1>

<h2>  </h2>

<h2>  </h2>

<h4>  </h4>

<h5>  </h5>

<h6>  </h6>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML heading tags</title>
</head>

<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h2>Heading 3</h2>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
</body>

</html>

 

Output

html heading tag

2) HTML paragraph tag 

It is used to define paragraph content in HTML document.

 

Syntax - 

<p>  </p>

 

 For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML paragraph tag</title>
</head>

<body>
  <p>This is paragraph tag in HTML</p>
</body>

</html>

 

Output

html paragraph tag

3) HTML line break tag

It is used to change the line.

This tag does not need a close tag.

 

Syntax - 

<br>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML line break tag</title>
</head>

<body>
    <p>Welcome to teknowize <br> this is line break tag </p>
</body>

</html>

 

Output

html line break tag

4) HTML horizontal line tag 

It is used to add a horizontal line.

 

Syntax -

<hr>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML horizontal line tag</title>
</head>

<body>
    <p>Welcome to teknowize</p>
    <hr>
    <p>Learn web development here</p>
    <hr>
</body>

</html>

 

Output

html horizontal line tag

5) HTML pre tag 

It is used to print same text which has two or more space or written in another line.

 

Syntax -

<pre>  </pre>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML pre tag</title>

</head>

<body>
    <pre> int x,y;.
        here int means integer type 
        x and y is a variable
               thank you 
        </pre>        
</body>

</html>

 

Output

html pre tag

6) HTML center tag

It is used to move anything like text image, video, table etc at the middle.

 

Syntax -

<center>  </center>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML center tag</title>
</head>

<body>
    <center>
        <pre>    center tag is use to 
         move any thing like image,text, table etc 
               in middle of the screen </pre>
        </center>
</body>

</html>

 

Output

html center tag

7) HTML non-breaking space

It is used to put space in the same line without breaking the line.

 

Syntax - 

&nbsp;

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Non breaking space</title>
</head>

<body>
    <p>&nbsp;&nbsp;&nbsp; welcome &nbsp;&nbsp; to &nbsp;&nbsp; teknowize &nbsp;&nbsp;&nbsp; </p>     
</body>

</html>

 

Output

html non breaking tag

8) HTML base tag

  • It is used to put a base url which using in all the relative url in a document.
  • It placed always inside head tag.
  • Base tag must have href or target attribute  or both .

 

Syntax - 

<base href=" " target=" ">

 

Attributes
Value
Description
href url Specify the base urls for all relative urls
target _blank
_parent
_self
_top
It specify the target for all hyperlinks

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="https://www.teknowize.com/" target="_blank">
    <title>HTML base tag</title>
 </head>

 <body>
   <p><a href="articles/tech-articles/5g-technology">HTML base tag</a> </p>
   <!-- the actual url is https://www.teknowize.com/articles/tech-articles/5g-technology -->
</body> 

</html>

 

9) HTML canvas tag

  • It is used to draw graphics basically using JavaScript but we can also use it with its attributes.
  • Any text inside canvas does not visible in browser.
  • Canvas tag must have width and height attributes to define size of the canvas.
  • If we draw canvas using JavaScript then it must be called using id in JavaScript .

 

Syntax - 

<canvas id="" width=" " height=""> </canvas>

 

Attributes
Description
width Specify the width of the canvas
height Specify the height of the canvas

 

For example

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="https://www.teknowize.com/" target="_blank">
    <title>HTML canvas tag</title>
</head>

<body>
   <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;background:green;">it is example of canvas tag</canvas>
</body>

</html>

 

Output

 

10) HTMLcaption tag

  • The HTML caption tag use to define the caption of table
  • The caption tag must come after <table> tag .

 

Syntax - 

<caption> </caption>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML caption tag</title>
</head>

<body>
   <table>
      <caption style="text-align:right">Student Details</caption>
      <tr>
        <th>Name</th>
        <th>Roll</th>
      </tr>
      <tr>
        <td>Rahul</td>
        <td>13</td>
      </tr>
    </table>
</body> 

</html>

 

Output


11) HTML button tag

  • It is a clickable button.
  • Most of the HTML tags like <i> , b> , <strong> , <a> , <img> are using inside button tag.
  • we can style button with CSS or bootstrap to looking good.

 

Syntax - 

<button> </button>

 

Attribute

Value

Description

autofocus

autofocus

Specifies that a button should automatically get focus when the page loads

disabled

disabled

Specifies that a button should be disabled

form

form_id

Specifies which form the button belongs to

formaction

URL

Specifies where to send the form-data when a form is submitted. Only for type="submit"

formenctype

application/x-www-form-urlencoded
multipart/form-data
text/plain

Specifies how form-data should be encoded before sending it to a server. Only for type="submit"

formmethod

get
post

Specifies how to send the form-data (which HTTP method to use). Only for type="submit"

formnovalidate

formnovalidate

Specifies that the form-data should not be validated on submission. Only for type="submit"

formtarget

_blank
_self
_parent
_top
framename

Specifies where to display the response after submitting the form. Only for type="submit"

name

name

Specifies a name for the button

type

button
reset
submit

Specifies the type of button

value

text

Specifies an initial value for the button

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="https://www.teknowize.com/" target="_blank">
    <title>HTML button tag</title>
</head>
<body>
   <button>Click me</button>
</body> 
</html>

 

Output

 

12) HTML div tag

  • The div tag is a division or a section in HTML  document.
  • we can also called that , div tag is a container in which we can use others tags and style them with CSS.
  • we can also style the div with CSS.

 

Syntax - 

<div> </div> 

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML div tag</title>
<style>
   div{
       background:saddlebrown;
   }
   p{
       color:white;
       font-size: 2rem;
   }
</style>
</head>

<body>
   <div>
       <p>Welcome to teknowize</p>
   </div>
</body> 
</html>

 

Output

13) HTML embed tag

It is use to  embed external resource like webpage ,  image , media player or plugin in a webpage.

Suggestion

  • It is better to use the <img> tag to display image in webpage.
  • It is better to use the <iframe> tag to display HTML content like webpage within a webpage.
  • It is better to use the <video> and <audio> tags to display video or audio in webpage.

 

Syntax - 

<embed> </embed> 

 

Attributes

Attribute

Value

Description

height

pixels

It is use to specify the height of embedded content

src

URL

It is use to specify the source of external file

type

media_type

It is use to specify the type of embedded content

width

pixels

It is use to specify the width of embedded content

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML embed tag</title>
</head>

<body>
   <div>
       <p style="font-weight: 800;">Here we embeded teknowize.com</p>
      <embed src="https://www.teknowize.com/" width="400px" height="400px"></embed>
   </div>
 </body> 

</html>

 

Output

 14) HTML fieldset tag

  • It is use to group related details in the form.
  • When we use it in form then it draw a box around the related element.

 

Note : You can use <legend> tag to specify the caption of the  related element in the form.

 

Syntax - 

<fieldset> </fieldset> 

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML fieldset tag</title>
</head>

<body>
    <div style="width: 400px;">
    <form action="/action_page.php">
        <fieldset>
         <legend>Personal details:</legend>
         <label for="first_name">First name:</label>
         <input type="text" id="first_name" name="first_name"><br><br>
         <label for="last_name">Last name:</label>
         <input type="text" id="last_name" name="last_name"><br><br>
         <label for="email_id">Email:</label>
         <input type="email" id="email_id" name="email"><br><br>
         <input type="submit" value="Submit">
        </fieldset>
       </form>
       </div>
</body>

</html>

 

Output

 

15) HTML figcaption tag

It is use to define caption of image.

 

Syntax - 

<figcation> </figcaption> 

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML fieldset tag</title>
</head>

<body>
    <img src="demo.jpg" alt="Trulli" style="width:100%">
    <figcaption>Fig.1 - Health</figcaption>
</body>

</html>

 

Output

 16) HTML footer tag

  • The footer tag is use to define footer section of webpages.

 

Syntax - 

<footer> </footer> 

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML footer tag</title>
</head>

<body>
<nav>this is header</nav>
    <img src="demo.jpg" alt="Trulli" style="width:20%">
    <footer>This is footer</footer>
</body>

</html>

 

Output

 17) HTML address tag

It is use to  display address in webpage.

 

Syntax - 

<address> </address>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML address tag</title>
</head>

<body>
       <address> dwarka , new delhi</address>
 </body> 

</html>

 

Output

18) HTML iframe tag

It is use to  display another document like video, audio, pages in a webpage.

 

Syntax - 

<iframe> </iframe>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML iframe tag</title>
</head>

<body>
       <iframe src="https://www.teknowize.com/"></iframe>
 </body> 

</html>

 

Output

 

19) HTML marquee tag

It is use to  implement scrollable text or image in a web page

 

Syntax - 

<marquee> </marquee>

 

Directions are :

  1. up
  2. down
  3. left
  4. right

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML marquee tag</title>
</head>

<body>
<marquee width="300px" direction="up" height="100px">
        Welcome to teknowize
    </marquee>
    <!--  -->
    <marquee width="300px" direction="down" height="100px">
        Welcome to teknowize
    </marquee>
    <!--  -->
    <marquee width="300px" direction="left" height="100px">
        Welcome to teknowize
    </marquee>
    <!--  -->
    <marquee width="300px" direction="right" height="100px">
        Welcome to teknowize
    </marquee>
 </body> 

</html>

 

Output

Scroll up

Welcome to teknowize

 

Scroll down

Welcome to teknowize

 

Scroll left

Welcome to teknowize

 

Scroll right

Welcome to teknowize

 

 

20) HTML nav tag

It is use to  display header / navigation bar in HTML webpage.

 

Syntax - 

<nav> </nav>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML nav tag</title>
</head>

<body>
<nav>this is header</nav>
    <img src="demo.jpg" alt="Trulli" style="width:20%">
    <footer>This is footer</footer>
 </body> 

</html>

 

Output

21) HTML section tag

It is use to  divide each section in HTML webpage with multiple sections .

 

Syntax - 

<section> </section>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML section tag</title>
</head>

<body>
<section>this is section 1</section>
<section>this is section 2</section>
 </body> 

</html>

 

Output

 

22) HTML span tag

It is used when you need to style any word from a line without break line because span tag is a inline HTML tag .

 

Syntax - 

<span> </span>

 

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML span tag</title>
</head>

<body>
<p>welcome to<span style="color:red;font-weight:800;">Teknowize</span><p>
 </body> 

</html>

 

Output

HTML 5