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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

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 -

Directions are :

up
down
left
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 -

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 -

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 -

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

Introduction to HTML

HTML basic tags

HTML Elements and Attributes

HTML Formatting

HTML phrase tags

HTML Meta tags

HTML Comments

HTML images

HTML Tables

HTML List

HTML Form

HTML Headings

HTML Paragraphs

HTML Line Break

HTML Pre Tag

HTML <hr> Tag

HTML basic tags

1) HTML heading tag

2) HTML paragraph tag

3) HTML line break tag

4) HTML horizontal line tag

5) HTML pre tag

6) HTML center tag

7) HTML non-breaking space

8) HTML base tag

9) HTML canvas tag

10) HTMLcaption tag

11) HTML button tag

12) HTML div tag

13) HTML embed tag

Suggestion

14) HTML fieldset tag

15) HTML figcaption tag

16) HTML footer tag

17) HTML address tag

18) HTML iframe tag

19) HTML marquee tag

20) HTML nav tag

21) HTML section tag

22) HTML span tag