HTML stands for HyperText Markup Language. It is the skeleton of every website you see on the internet. Before CSS makes it beautiful and JavaScript makes it interactive, HTML defines the structure.
What is a Web Server?
Those servers who return HTML are known as Web Servers. When you type a URL in your browser, the browser sends a request to a web server. The server responds back with an HTML file. Your browser reads that file and shows you the webpage.
The HTML Boilerplate
Every HTML file starts with this structure. In VS Code, just type ! and press Tab — it generates this automatically.
<!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>
<!DOCTYPE html> tells the browser this is an HTML5 document. lang="en" tells search engines and screen readers the language of the page. Everything visible goes inside <body>. Everything about the page (title, meta, CSS links) goes inside <head>.
Headings
There are six levels of headings. <h1>, <h2>, and <h3> are the most important. <h4>, <h5>, <h6> are rarely used.
<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>
Always use only one <h1> per page — it is important for SEO. Search engines use headings to understand the structure of your content.
Containers
Containers are used to group and organize content on a page.
<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>
<div> is a block element — it takes the full width and starts on a new line. <span> is an inline element — it sits inside text without breaking the line. <p> is for paragraphs — always use it for readable text content.
Text Formatting
<b>Bold text</b>
<strong>Important text (semantic)</strong> <!-- Most Important -->
<i>Italic text</i>
<em>Emphasized text (semantic)</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Smaller text</small>
<time datetime="2026-01-27">Published on January 27, 2026</time>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub> <!-- H₂O, CO₂ -->
<sup>Superscript</sup> <!-- x², E=mc² -->
<strong> and <em> are semantic — they tell the browser and search engines that this text is important. <b> and <i> are just visual. Always prefer <strong> over <b> and <em> over <i>.
The <time> tag is good practice for SEO — use it on blogs and articles to represent specific dates.
Lists
Ordered List:
<ol>
<li>First</li>
<li>Second</li>
</ol>
You can control the style using type and start attributes:
<ol type="A" start="5">
<li>Item</li>
</ol>
type="1" → 1, 2, 3 (default)
type="A" → A, B, C (uppercase)
type="a" → a, b, c (lowercase)
type="I" → I, II, III (Roman numerals uppercase)
type="i" → i, ii, iii (Roman numerals lowercase)
start="5" → starts from 5th value
Unordered List:
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
Definition List:
<dl>
<dt>What is HTML</dt>
<dd>HTML is a HyperText Markup Language. It is the skeleton of the website.</dd>
</dl>
Media
<!-- Image — always use alt -->
<img src="image.jpg" alt="Description" width="300" height="200">
<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<!-- Video — use track for captions -->
<video width="480" height="320" controls>
<source src="video.mp4" type="video/mp4">
<track src="captions.vtt">
</video>
<!-- Embed another website -->
<iframe src="https://www.example.com" width="600" height="400"></iframe>
<!-- PDF from Google Drive — always add /preview at the end -->
<iframe src="https://drive.google.com/file/d/FILE_ID/preview"></iframe>
Always use alt with images — it helps screen readers and improves SEO. For Google Drive PDFs, add /preview at the end of the URL or the PDF will not display correctly.
Tables
Tables have three main parts — <thead> for headings, <tbody> for data, and <tfoot> for totals or summary.
<table border="1">
<colgroup>
<col style="background-color: skyblue;">
<col style="background-color: lightblue;">
<col style="background-color: aquamarine;">
</colgroup>
<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>
colspan="2" makes a cell span across 2 columns horizontally. rowspan="2" makes a cell span across 2 rows vertically. <colgroup> only changes background colors — not the actual structure.
Links
<!-- External link — always use target="_blank" with rel="noopener" -->
<a href="https://www.example.com" target="_blank" rel="noopener">Visit Site</a>
<!-- Email link -->
<a href="mailto:support@example.com">Send Email</a>
<!-- Jump to section on same page -->
<a href="#section1">Jump to Section</a>
<h1 id="section1">Learn Coding</h1>
<!-- Google Drive direct download -->
<!-- https://drive.google.com/uc?export=download&id=FILE_ID -->
Always use rel="noopener" with target="_blank" — without it, the opened tab can access your page through window.opener. It is a security issue.
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" multiple accept=".pdf,.doc,.docx,.jpg,.png"><br>
<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>
multiple on file input lets users select more than one file. accept restricts which file types are allowed. min and max on number input set the allowed range.
Auto Suggestion Search — Datalist
HTML has a built-in autocomplete feature using <datalist> — no JavaScript needed.
<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>
The list attribute on the input connects to the id of the datalist. As the user types, matching options appear automatically.
Semantic Elements
Semantic elements tell the browser and search engines what each part of the page means — not just how it looks.
<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>
Using <div> for everything works — but semantic elements are better for SEO and accessibility. Google understands <article> and <nav> better than a bunch of unnamed <div> tags.
You can find more of my work at abdulrdeveloper.me
Read more posts at blog.abdulrdeveloper.me
Top comments (0)