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