Hello readers, in this article I have shared all the basic tags needed to get started in HTML. HTML stands for HyperText Markup Language. HTML is used to structure our website so that we can add styling, scripts, etc to make the website complete.
Here, we will learn headings, paragraphs, sections, div, different types of inputs, tables, forms, ids, classes, links, and lists in HTML.
Contents
Tutorial Video of HTML
Source Code:
<!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 Full Course - Zero to Hero</title>
<link rel="shortcut icon" href="./download.png" type="image/x-icon" />
</head>
<body>
<!-- These are the heading tags -->
<h1>Hi, there. I am the h1</h1>
<h2>Hi, there. I am the h2</h2>
<h3>Hi, there. I am the h3</h3>
<h4>Hi, there. I am the h4</h4>
<h5>Hi, there. I am the h5</h5>
<!-- These are other basic tags -->
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet quam
possimus voluptatum voluptatibus dicta maiores nobis deserunt temporibus
aperiam debitis! Quos omnis illo at maiores eius incidunt, eum porro
magni!
</p>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, natus
magnam! Quod quis voluptate quo soluta sint maxime. Voluptate aut
cupiditate minus quibusdam maxime praesentium architecto. Libero optio
facere quae?
</div>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum enim
veritatis sequi earum voluptatibus iusto voluptate odit eos eveniet sunt
est placeat quaerat quos, atque praesentium! Quasi asperiores deserunt
perferendis!
</section>
<!-- Inputs -->
<input type="button" />
<input type="checkbox" name="" id="" />
<input type="color" name="" id="" />
<input type="date" name="" id="" />
<input type="datetime" name="" id="" />
<input type="datetime-local" name="" id="" />
<input type="email" name="" id="" />
<input type="file" name="" id="" />
<input type="hidden" name="" />
<input type="password" src="" alt="" />
<input type="radio" name="" id="" />
<input type="range" name="" id="" />
<input type="search" name="" id="" />
<!-- Inserting image in html -->
<img src="./image.jpg" alt="This is an sample image" height="500px" />
<!-- Creating an table in html -->
<table border="2" width="100%">
<tr>
<td>Name</td>
<td>Roll No</td>
<td>Class</td>
</tr>
<tr>
<td>John</td>
<td>1</td>
<td>12</td>
</tr>
<tr>
<td>John</td>
<td>1</td>
<td>12</td>
</tr>
<tr>
<td>John</td>
<td>1</td>
<td>12</td>
</tr>
<tr>
<td>John</td>
<td>1</td>
<td>12</td>
</tr>
<tr>
<td>John</td>
<td>1</td>
<td>12</td>
</tr>
<tr>
<td>John</td>
<td>1</td>
<td>12</td>
</tr>
<tr>
<td>John</td>
<td>1</td>
<td>12</td>
</tr>
</table>
<!-- Forms in HTML -->
<form action="">
<input type="text" placeholder="Enter Your Name Here" />
<input type="text" placeholder="Enter Your Address" />
<textarea name="" id="" cols="30" rows="10"></textarea>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
<!-- id -->
<div id="header"></div>
<!-- class -->
<div class="headerClass"></div>
<!-- links in html -->
<a href="https://www.google.com/" target="_blank" rel="noopener">Google</a>
<!-- lists in html -->
<ul>
<li>This is a list element</li>
<li>THis is another list emelent</li>
</ul>
<ol>
<li>This is a ol element</li>
<li>This is second ol element</li>
</ol>
</body>
</html>