HTML Cheatsheet

A comprehensive reference guide for HTML tags and attributes. Perfect for beginners and experienced developers alike.

General

DOCTYPE

<!DOCTYPE html>

HTML

<html></html>

Head

<head></head>

Body

<body></body>

Title

<title>Page Title</title>
Text Tags

Heading

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>

Paragraph

<p>Paragraph text</p>

Strong

<strong>Important text</strong>

Emphasis

<em>Emphasized text</em>

Span

<span>Inline element</span>
Links

Link

<a href="url">Link text</a>

Email Link

<a href="mailto:email@example.com">Send Email</a>

Phone Link

<a href="tel:+1234567890">Call Us</a>

Target

<a href="url" target="_blank">Open in new tab</a>
Images

Image

<img src="image.jpg" alt="Description">

Responsive Image

<img src="image.jpg" alt="Description" style="max-width:100%;">

Figure

<figure>
<img src="image.jpg" alt="Description">
<figcaption>Image caption</figcaption>
</figure>
Lists

Unordered List

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

Ordered List

<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>

Description List

<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
Tables

Table

<table>
<tr>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>

Table with Head

<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
Forms

Form

<form action="/submit" method="post">
<!-- Form elements -->
</form>

Input

<input type="text" name="fieldname" placeholder="Enter text">

Textarea

<textarea name="message" rows="4" cols="50"></textarea>

Select

<select name="options">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

Button

<button type="submit">Submit</button>
Separators

Horizontal Rule

<hr>

Line Break

<br>
Media

Video

<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Audio

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Semantic HTML5

Header

<header></header>

Navigation

<nav></nav>

Main

<main></main>

Section

<section></section>

Article

<article></article>

Aside

<aside></aside>

Footer

<footer></footer>

What is CodeSikhoWithAJ?

CodeSikhoWithAJ is a coding education platform dedicated to teaching programming skills to everyone who wants to learn. Our mission is to make coding accessible and help people start their journey in the tech industry.

Founded by Ajeet Yadav, CodeSikhoWithAJ provides comprehensive tutorials, practical examples, and hands-on projects to help you master web development and other programming skills.

Trusted by developers at:

Google
Microsoft
Facebook
Amazon
Netflix
Twitter