HTML Basics
Basic HTML Structure
<!-- Tells browser this is an HTML5 document -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Note: All HTML documents must start with <!DOCTYPE html> declaration.
Headings & Paragraphs
<!-- Headings -->
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Third Level Heading</h3>
<h4>Fourth Level Heading</h4>
<h5>Fifth Level Heading</h5>
<h6>Sixth Level Heading</h6>
<!-- Paragraphs -->
<p>This is a paragraph.</p>
<p>This is another paragraph with a <br> line break.</p>
<!-- Horizontal Rule -->
<hr>
<!-- Preformatted Text -->
<pre>
This text will
preserve both spaces
and line breaks.
</pre>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Third Level Heading</h3>
<h4>Fourth Level Heading</h4>
<h5>Fifth Level Heading</h5>
<h6>Sixth Level Heading</h6>
<!-- Paragraphs -->
<p>This is a paragraph.</p>
<p>This is another paragraph with a <br> line break.</p>
<!-- Horizontal Rule -->
<hr>
<!-- Preformatted Text -->
<pre>
This text will
preserve both spaces
and line breaks.
</pre>
Text Formatting
<!-- Bold Text -->
<b>Bold Text</b> or <strong>Important Text</strong>
<!-- Italic Text -->
<i>Italic Text</i> or <em>Emphasized Text</em>
<!-- Underlined Text -->
<u>Underlined Text</u>
<!-- Marked/Highlighted Text -->
<mark>Highlighted Text</mark>
<!-- Small Text -->
<small>Smaller Text</small>
<!-- Deleted Text -->
<del>Deleted Text</del>
<!-- Inserted Text -->
<ins>Inserted Text</ins>
<!-- Subscript and Superscript -->
H<sub>2</sub>O <sup>2+</sup>
<b>Bold Text</b> or <strong>Important Text</strong>
<!-- Italic Text -->
<i>Italic Text</i> or <em>Emphasized Text</em>
<!-- Underlined Text -->
<u>Underlined Text</u>
<!-- Marked/Highlighted Text -->
<mark>Highlighted Text</mark>
<!-- Small Text -->
<small>Smaller Text</small>
<!-- Deleted Text -->
<del>Deleted Text</del>
<!-- Inserted Text -->
<ins>Inserted Text</ins>
<!-- Subscript and Superscript -->
H<sub>2</sub>O <sup>2+</sup>
Links & Images
<!-- Basic Link -->
<a href="https://www.example.com">Visit Example</a>
<!-- Link with Target -->
<a href="https://www.example.com" target="_blank">Open in New Tab</a>
<!-- Email Link -->
<a href="mailto:someone@example.com">Send Email</a>
<!-- Phone Link -->
<a href="tel:+1234567890">Call Us</a>
<!-- Anchor Link -->
<a href="#section1">Go to Section 1</a>
<div id="section1">Section Content</div>
<!-- Basic Image -->
<img src="image.jpg" alt="Description of image">
<!-- Image with Dimensions -->
<img src="image.jpg" alt="Description" width="500" height="300">
<a href="https://www.example.com">Visit Example</a>
<!-- Link with Target -->
<a href="https://www.example.com" target="_blank">Open in New Tab</a>
<!-- Email Link -->
<a href="mailto:someone@example.com">Send Email</a>
<!-- Phone Link -->
<a href="tel:+1234567890">Call Us</a>
<!-- Anchor Link -->
<a href="#section1">Go to Section 1</a>
<div id="section1">Section Content</div>
<!-- Basic Image -->
<img src="image.jpg" alt="Description of image">
<!-- Image with Dimensions -->
<img src="image.jpg" alt="Description" width="500" height="300">
Note: Always include the
alt attribute for accessibility and SEO.
Lists & Tables
Lists
<!-- Unordered List -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered List -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- Ordered List with Type -->
<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>
<!-- Description List -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
<!-- Nested List -->
<ul>
<li>First item
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Second item</li>
</ul>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- Ordered List -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!-- Ordered List with Type -->
<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>
<!-- Description List -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
<!-- Nested List -->
<ul>
<li>First item
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Second item</li>
</ul>
Tables
<!-- Basic Table -->
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
</table>
<!-- Table with Caption and Structure -->
<table>
<caption>Employee Details</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>John Doe</td>
<td>IT</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Employees: 1</td>
</tr>
</tfoot>
</table>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
</table>
<!-- Table with Caption and Structure -->
<table>
<caption>Employee Details</caption>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>101</td>
<td>John Doe</td>
<td>IT</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total Employees: 1</td>
</tr>
</tfoot>
</table>
Forms & Inputs
Form Structure
<!-- Basic Form -->
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Register">
</form>
<!-- Form with Fieldset and Legend -->
<form>
<fieldset>
<legend>Personal Information</legend">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
</form>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="Register">
</form>
<!-- Form with Fieldset and Legend -->
<form>
<fieldset>
<legend>Personal Information</legend">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</fieldset>
</form>
Input Types
<!-- Text Input -->
<input type="text" name="username" placeholder="Enter username">
<!-- Email Input -->
<input type="email" name="email" placeholder="Enter email">
<!-- Password Input -->
<input type="password" name="password" placeholder="Enter password">
<!-- Number Input -->
<input type="number" name="quantity" min="1" max="10">
<!-- Date Input -->
<input type="date" name="birthday">
<!-- Checkbox -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
<!-- Radio Buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<!-- Select Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<!-- File Upload -->
<input type="file" id="myfile" name="myfile">
<input type="text" name="username" placeholder="Enter username">
<!-- Email Input -->
<input type="email" name="email" placeholder="Enter email">
<!-- Password Input -->
<input type="password" name="password" placeholder="Enter password">
<!-- Number Input -->
<input type="number" name="quantity" min="1" max="10">
<!-- Date Input -->
<input type="date" name="birthday">
<!-- Checkbox -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
<!-- Radio Buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<!-- Select Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<!-- File Upload -->
<input type="file" id="myfile" name="myfile">
Semantic HTML
Semantic Elements
<!-- Basic Page Structure with Semantic Elements -->
<body>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
<section>
<h3>Section Title</h3>
<p>Section content...</p>
</section>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</body>
<body>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
<section>
<h3>Section Title</h3>
<p>Section content...</p>
</section>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</body>
Note: Semantic HTML improves accessibility, SEO, and makes code easier to understand.
More Semantic Elements
<!-- Figure with Caption -->
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Caption for the image</figcaption>
</figure>
<!-- Details and Summary -->
<details>
<summary>Click to expand</summary>
<p>Hidden content that appears when expanded.</p>
</details>
<!-- Mark Element -->
<p>Search results for <mark>HTML5</mark> syntax.</p>
<!-- Time Element -->
<p>The event is on <time datetime="2023-12-25">Christmas Day</time>.</p>
<!-- Navigation -->
<nav>
<ul>
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/js/">JavaScript</a></li>
</ul>
</nav>
<!-- Section vs Article -->
<section>
<h2>Blog Posts</h2>
<article>
<h3>Post Title 1</h3>
<p>Post content...</p>
</article>
<article>
<h3>Post Title 2</h3>
<p>Post content...</p>
</article>
</section>
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Caption for the image</figcaption>
</figure>
<!-- Details and Summary -->
<details>
<summary>Click to expand</summary>
<p>Hidden content that appears when expanded.</p>
</details>
<!-- Mark Element -->
<p>Search results for <mark>HTML5</mark> syntax.</p>
<!-- Time Element -->
<p>The event is on <time datetime="2023-12-25">Christmas Day</time>.</p>
<!-- Navigation -->
<nav>
<ul>
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/js/">JavaScript</a></li>
</ul>
</nav>
<!-- Section vs Article -->
<section>
<h2>Blog Posts</h2>
<article>
<h3>Post Title 1</h3>
<p>Post content...</p>
</article>
<article>
<h3>Post Title 2</h3>
<p>Post content...</p>
</article>
</section>
Media Elements
Audio & Video
<!-- Audio Element -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<!-- Video Element -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- Video with Poster -->
<video controls poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
<!-- Embedding YouTube Video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Embedding Google Map -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1840523769665!2d-73.9876141845941!3d40.74824397932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1580401041328!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen></iframe>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<!-- Video Element -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- Video with Poster -->
<video controls poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
<!-- Embedding YouTube Video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Embedding Google Map -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1840523769665!2d-73.9876141845941!3d40.74824397932681!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1580401041328!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen></iframe>
Canvas & SVG
<!-- Canvas Element -->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<!-- Simple SVG -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<!-- More Complex SVG -->
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
<!-- SVG with Text -->
<svg height="30" width="200">
<text x="0" y="15" fill="red">SVG Text Example</text>
</svg>
<!-- SVG with Multiple Shapes -->
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
<circle cx="125" cy="95" r="50" fill="blue" />
</svg>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<!-- Simple SVG -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<!-- More Complex SVG -->
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
<!-- SVG with Text -->
<svg height="30" width="200">
<text x="0" y="15" fill="red">SVG Text Example</text>
</svg>
<!-- SVG with Multiple Shapes -->
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
<circle cx="125" cy="95" r="50" fill="blue" />
</svg>
Advanced HTML
Meta Tags & SEO
<!-- Essential Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SEO Meta Tags -->
<title>Page Title - Website Name</title>
<meta name="description" content="Brief description of the page content">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author Name">
<!-- Open Graph Meta Tags (for social media) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description of page content">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://www.example.com/page">
<meta property="og:type" content="website">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description of page content">
<meta name="twitter:image" content="image.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- SEO Meta Tags -->
<title>Page Title - Website Name</title>
<meta name="description" content="Brief description of the page content">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author Name">
<!-- Open Graph Meta Tags (for social media) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description of page content">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://www.example.com/page">
<meta property="og:type" content="website">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description of page content">
<meta name="twitter:image" content="image.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Accessibility (ARIA)
<!-- Landmark Roles -->
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<footer role="contentinfo">...</footer>
<!-- ARIA Labels and Descriptions -->
<button aria-label="Close menu">X</button>
<div aria-describedby="description">Content</div>
<p id="description">This describes the content above.</p>
<!-- ARIA Live Regions -->
<div aria-live="polite" id="status-message"></div>
<!-- ARIA Roles for Custom Widgets -->
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</div>
<!-- Skip Navigation Link -->
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main">...</main>
<!-- High Contrast Support -->
<button style="background-color: #000; color: #fff; border: 2px solid #fff;">
High Contrast Button
</button>
<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<footer role="contentinfo">...</footer>
<!-- ARIA Labels and Descriptions -->
<button aria-label="Close menu">X</button>
<div aria-describedby="description">Content</div>
<p id="description">This describes the content above.</p>
<!-- ARIA Live Regions -->
<div aria-live="polite" id="status-message"></div>
<!-- ARIA Roles for Custom Widgets -->
<div role="tablist">
<button role="tab" aria-selected="true">Tab 1</button>
<button role="tab" aria-selected="false">Tab 2</button>
</div>
<!-- Skip Navigation Link -->
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main">...</main>
<!-- High Contrast Support -->
<button style="background-color: #000; color: #fff; border: 2px solid #fff;">
High Contrast Button
</button>
Note: ARIA should be used to enhance accessibility, not replace semantic HTML.
Comprehensive HTML Web Development Cheatsheet Reference
This HTML Web Development cheatsheet on Nikhil Learn Hub collects syntax, commands, and practical snippets for quick revision. Learn HTML tags, forms, tables, semantic elements, multimedia, and webpage structure concepts with practical examples.
Use the reference cards and examples above during coding sessions; return here instead of scattered searches when you need dependable reminders. New learners can pair this sheet with the HTML tutorial. Follow the HTML learning roadmap when you want structured lessons beyond one-page lookups.
Quick lookup coverage
- Syntax, commands, and API signatures
- Copy-ready examples and common patterns
- Terminology for coursework and interviews
- Cross-links to the matching learning roadmap
How to study with this sheet
- Production debugging and tuning reminders
- Security, performance, or scale cautions
- Integration with adjacent stacks on this site
- Deeper study through tutorials and roadmaps
Who Should Use This Cheatsheet
Students, self-taught developers, and professionals who need fast HTML Web Development lookups during labs, debugging, or interview revision should keep this page bookmarked.
Related Resources on Nikhil Learn Hub
- HTML learning roadmapstructured learning path for the same technology
- Cheatsheets hubbrowse all quick-reference sheets
- Technology hubtutorials, roadmaps, and practice hubs