More
It is used to change the size of the text.
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
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
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
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
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
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
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> welcome to teknowize </p>
</body>
</html>
Output
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>
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
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
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 |
Specifies how form-data should be encoded before sending it to a server. Only for type="submit" |
formmethod |
get |
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 |
Specifies where to display the response after submitting the form. Only for type="submit" |
name |
name |
Specifies a name for the button |
type |
button |
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
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
It is use to embed external resource like webpage , image , media player or plugin in a webpage.
<img>
tag to display image in webpage.<iframe>
tag to display HTML content like webpage within a webpage.<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
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
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
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
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
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
It is use to implement scrollable text or image in a web page
Syntax -
<marquee> </marquee>
Directions are :
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
Scroll down
Scroll left
Scroll right
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
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
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
Coursera, Codeacademy, Udacity, W3Schools, Udemy, Alison, TheNewBoston, edX, P.S.Codewars,Freecodecamp, Managing technical debt blog, Scrimba, Codepen, Codepen/challenges, The Odin Project, htmlreference.io, cssreference.io, Frontend Mentor, Dev Challenges, MDN, Code Mentor, Coding Dojo, CSS Battle, Codier, Ace Frontend, Can I Use, CSS Tricks, 30 Seconds of Code,tutorialspoint, Neumorphism, Shaddows Brumm, Fancy Border Radius, Glow Generator, Clothoid Corners, Glassmorphism, Clipy, CSS Filters, Base64 Image, Quantity Queries, Animations, Cubic-Bezier, Keyframes, Wait Animate, Transition.Style, graphic design, web design, website design, website builder, web developer, web designer, webdesign, ecommerce website, web design company, website creator, website designer, responsive web design, web development company, best website design, web design software, web page design, build a website, web developer salary, design website, web design courses, how to design a website, web design inspiration, website layout, web designer salary, web application development, ecommerce website design, web agency, software development company, web design tutorial, web programming, design company, website design templates, what is web designing, web developer jobs, website developer, web design agency, freelance web developer, web design services, freelance web designer, graphic design websites, web solutions, ecommerce website development, free website design, web development courses, webdev, web developers, web development tools, website design services, developpeur web, web design london, website design ideas, web designing and programming, design a website, web design and development, web dev, web development services, homepage design, best designed websites, cheap website design, learn web design, web design templates, web design tools, web design jobs, website design inspiration, web design india, flash website, website developers, designer websites, website services, website design cost, good website design, site design, simple website design, cool website designs, modern website design, graphic designer websites, webcode, best web design software, website making, free web design software, mobile website design, learn web development, front end web developer, how to become a web developer, web developer portfolio, web development company in india, python web development, web development tutorial, website company, website design and development, web company, webdesigning, professional website design, affordable web design, best web design company, creative web design, top website designs, website design pricing, web developer tools, how to develop a website