Chai aur HTML
Updated
•5 min readA
CS student and full-stack developer from Pakistan. Building with JavaScript, TypeScript, React, and Node.js. Currently in ChaiCode's Web Dev Cohort 2026.
Web Servers:
- Those servers who return HTML is known as Web Servers.
HTML stands for " Hyper Text Markup Language. "
Boilerplate:
<!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>document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Very Useful for Beginners ,
Just write, " ! " and it will auto generate boilerplate.
It saves time and increases speed in Coding.
Headings :
There are six levels of headings. <h1> <h2> and <h3> are most important headings, and <h4> <h5> <h6> are not widely used now, less important.
<h1>Heading 1</h1> <!-- Most Important -->
<h2>Heading 2</h2> <!-- Most Important -->
<h3>Heading 3</h3> <!-- Important -->
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Containers :
<div>This is a block container (div)</div> <!-- Most Important -->
<span>This is an inline container (span)</span> <!-- Important -->
<p>This is a paragraph</p> <!-- Most Important -->
<pre>Preserves formatting and spaces</pre>
<code>console.log("Code snippet")</code>
<blockquote>A block quotation of text</blockquote>
Text Formatting :
<b>Bold text</b> <!-- Important -->
<strong>Important text (semantic)</strong> <!-- Most Important -->
<i>Italic text</i> <!-- Stylish Font -->
<em>Emphasized text (semantic)</em> <!-- Stylish Font -->
<u>Underlined text</u> <!-- Most Important -->
<mark>Highlighted text</mark>
<small>Smaller text</small>
<time datetime="2026-01-27">Published on January 27, 2026</time> <!-- Good Practice for SEO,
you can use div and p also but use it to represent specific date on blogs,articles etc -->
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub> <!-- H₂O, CO₂ -->
<sup>Superscript</sup> <!-- x², E=mc² -->
Lists :
Ordered List :
<ol> <li>First</li> <!-- display output : 1,2,3 in order --> <li>Second</li> </ol>Use
typeandstartattributes inside the<ol>tag.type="A"gives uppercase letters, (A, B, C...)<ol type="A" start="5">Both can be used at same time.type="1"→ 1, 2, 3 (default)type="A"→ A, B, C (uppercase letters)type="a"→ a, b, c (lowercase letters)type="I"→ I, II, III (Roman numerals uppercase)type="i"→ i, ii, iii (Roman numerals lowercase)
start="5"means It will start by 5th letter (E, F, G...)start="5"→ 5 se start hogastart="10"→ 10 se start hoga etc.
Unordered List :
<ul> <li>First Item</li> <!-- display output : • • • without any order --> <li>Second Item</li> </ul>Definition List :
<dl> <dt>What is HTML</dt> <dd>HTML is a HyperText Markup Language. It is Known as the skeleton of the website.</dd> </dl>
Media :
<img src="image.jpg" alt="Description" width="300" height="200">
<!-- Always use alt with images, (and width and height can be adjusted by using CSS also) -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="480" height="320" controls>
<source src="video.mp4" type="video/mp4">
<track src="captions.vtt"></track> <!-- Use track tag to add captions in video -->
</video>
<iframe src="https://www.example.com" width="600" height="400"></iframe>
<!-- Get video iframe: Share → Embed → Copy code -->
<iframe src="https://drive.google.com/file/d/1KasLwUTg39qp54-ZH3sZ/preview"></iframe>
<!-- or you can use embed | But always use preview word at the end of the pdf link -->
<embed src="https://drive.google.com/file/d/1EV-MO8TuJhHCfpmfvfD0/preview" ></embed>
<!-- Use embed or iframe for PDFs to show them on the webpage -->
Tables :
There are three Parts of Table in HTML ,
<thead></thead>Here we give the top heading inside the table like student marks, grade etc.<tbody></tbody>Here we add Real data like 99 marks,83 marks ,C grade ,B grade etc.<tfooter></tfooter>Here we add a final display colomn like Total Marks, CGPA, etc<td colspan = "2">use colspan to control and increase specific colomns width.<td rowspan = "2">use rowspan to control and increase specific row’s height.
<table border="1"> <!-- use border = "1", it will add border directly on table -->
<colgroup>
<col style="background-color: skyblue;">
<col style="background-color: lightblue; color:white;">
<col style="background-color: aquamarine;">
</colgroup>
<!-- With the help of colspan, we can change the background colors of
our columns. But remember that colspan only changes the background
colors, not the actual structure of the columns.-->
<thead>
<tr>
<th>Column 1</th>
<th colspan="2">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Rowspan</td>
<td>Data A</td>
<td>Data B</td>
</tr>
<tr>
<td>Data C</td>
<td>Data D</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td colspan="2">100</td>
</tr>
</tfoot>
</table>
Links :
<a href="https://www.chaicode.com" target="_blank" rel="noopener">Visit CodeWithHarry</a>
<!-- Google Drive direct download pattern:
https://drive.google.com/uc?export=download&id=FILE_ID -->
<a href="mailto:support@chaicode.com">Send Email</a> <!-- Use maitro: and then email -->
<a href="#section1">Jump to Section</a>
<!-- also add jump section id like this → <h1 id="section">Learn Coding </h1> -->
Forms :
<form action="/action.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<input type="password" name="password" placeholder="Enter Password"><br>
<input type="checkbox" name="subscribe" value="yes"> Subscribe<br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<select name="country">
<option value="us">USA</option>
<option value="ca">Canada</option>
</select><br>
<textarea name="comments" rows="4" cols="30"></textarea><br>
<input type="file" name="resume" muliple accept=".pdf,.doc,.docx,.jpg,.png"><br>
<!-- type="file" → File upload input
multiple → can select multiple files
accept=".pdf,.jpg" → only .pdf files allow , can adjust by own choice -->
<input type="number" name="age" min="18" max="100"><br>
<input type="range" name="volume" min="0" max="100"><br>
<input type="date" name="dob"><br>
<input type="email" name="email"><br>
<input type="url" name="website"><br>
<input type="search" name="query"><br>
<button type="submit">Submit</button>
</form>
HTML all input Types Image Preview:
Auto Suggestion Search System Using HTML :
<!DOCTYPE html>
<html>
<head>
<title>Datalist Autocomplete</title>
</head>
<body>
<h1>Search Fruit</h1>
<input type="text" list="fruits" placeholder="Type fruit name">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Mango">
<option value="Orange">
<option value="Grapes">
<option value="Strawberry">
<option value="Pineapple">
</datalist>
</body>
</html>
Output :
Semantic Elements :
<header>Page header</header>
<main>Main content</main>
<footer>Page footer</footer>
<nav>Navigation links</nav>
<section>Section of content</section>
<article>Independent article</article>
<aside>Sidebar content</aside>
17 views