There are many tags in HTML which can help you to build a good website. Without wasting time I am switching to the example where you will clear most of its topics :
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<link rel='icon' type='image/ico' href='https://www.mindstick.com/Images/mindstick-logo.png' />
<title>Mindstick Software</title>
<link rel='stylesheet' type='text/css' href='style.css' />
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='description' content='Unleash your imagination' />
<meta name='keywords' content='mindstick software' />
<meta name='author' content='Mindstick - Developer' />
<style>
body {
margin-left: 30%;
margin-right: 30%
}
.d-flex {
display: flex;
}
.justify-content-center {
justify-content: center;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.mb-0 {
margin-bottom: 0px !important;
}
.w-100 {
width: 100%
}
.m-1 {
margin: 10px;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<h1 class='d-flex justify-content-center'>Form Tag</h1>
<form class='d-flex m-1 flex-column justify-content-center'>
<fieldset class='w-100'>
<legend>User basic information:</legend>
<div class='d-flex flex-column'>
<label class=' mb-0 m-1 '>First Name</label><br />
<input type='text' class='m-1' placeholder='First Name' required /><br />
<label class='m-1 mb-0'>Last Name</label><br />
<input type='text' class='m-1' placeholder='Last Name' required /><br />
<label class='m-1 mb-0'>Email Id</label><br />
<input type='email' class='m-1' placeholder='Email ID' required /><br />
<label class='m-1 mb-0'>Password</label><br />
<input type='password' class='m-1' placeholder='Password' required /><br />
<textarea class='m-1' rows='9'>
Mindstick deals with all types of Software Development
</textarea><br />
<select class='m-1'>
<optgroup label='Delivery Option'>
<option>Home</option>
<option>Office</option>
<option>Other</option>
</optgroup>
</select>
</div>
<div class='d-flex justify-content-center'>
<input type='submit' class='m-1' value='Submit' />
<button type='reset' class='m-1'>Reset</button>
</div>
</fieldset>
</form>
<hr />
<h2>Map Tags </h2>
<p> At the topleft end there is a link of Mindstick Website which is created with the help of coordiantes.</p>
<code>Syntax : (x1,y1,x2,y2)</code>
<img src='https://source.unsplash.com/500x700/?macbook,laptop' usemap='#web' alt='No image found' />
<map name='web'>
<area shape='rect' coords='0,0,40,20' href=''>
</map>
<hr />
<h2>Link Tags</h2>
<a target='_blank' href='/Services'>Services</a><br>
<a target='_blank' href='/DeveloperSection'>Developer Section</a><br>
<a target='_blank' href='/career'>Career</a><br>
<hr />
<h2>Table tags</h2>
<table border='1' class='text-center'>
<caption>Employee Details</caption>
<colgroup>
<col span='1' style='background-color: #7fffd4'>
<col span='2' style='background-color: #98f5ff'>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Date of Joining</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shivam</td>
<td>Software Developer</td>
<td>1st July,2021</td>
</tr>
<tr>
<td>Sahil</td>
<td>SEO</td>
<td>1st July,2021</td>
</tr>
<tr>
<td>Ravi</td>
<td>Software Developer</td>
<td>1st July,2021</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Role</th>
<th>Date of Joining</th>
</tr>
</tfoot>
</table>
<hr />
<h2>Text tags</h2>
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>
<p>Here is a first paragraph of text. Paragraph tag removes the extra space in the tag</p>
<p>Hello <br /> It breaks the line</p>
<p><strong>I am Strong tag</strong></p>
<p><em>I am Emphasis tag</em></p>
<abbr title='You are in Abbreviation tag'>Hover here!</abbr><br />
<acronym title='Mindstick Software Private Limited'>MSPL</acronym>
<address>
Contact us at:<br>
<a href='mailto:contact@mindstick.com'>contact@mindstick.com</a>
</address>
<bdo dir='rtl'>......tnetnoC</bdo>
<blockquote cite='https://www.mindstick.com/'>
<p>
Welcome to MindStick Software Private Limited
</p>
</blockquote>
<cite>Patrika Chauraha, Prayagraj</cite>
<p> Tag line of the company : <q>unleash your imagination </q></p>
<code>
class Program {
public static void main (String[] args )
{
System.out.println('Hello World');
}
}
</code>
<p>
If you will do <del>hard work </del> <ins>smart work</ins> then you will get success easily
</p>
<p><dfn>HTML</dfn> A markup language for Web designing</p>
<p>If you are using Visual Studio then you can use shortcut <kbd>ctrl + s</kbd> to save your current document. </p>
<pre>
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.
</pre>
<p><samp>Error 5: Access is denied by admin.</samp></p>
<p>The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>
</body>
</html>
This will help you to build more reasoning about the use of HTML.
Thanks for reaching the end. Like it if you find it helpful!
