ProgramGuru
Programming Language Cheat Sheets14
Web Cheat Sheets2Basic structure of an HTML 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>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>Defines the HTML version. For HTML5:
<!DOCTYPE html>The basic elements of an HTML document:
<html>
<head>
...
</head>
<body>
...
</body>
</html><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML Cheat Sheet">Defines the title shown in the browser tab:
<title>My Web Page</title><link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">Internal CSS styles go inside the <style> tag:
<style>
body {
background-color: #f0f0f0;
}
</style>Use to embed JavaScript:
<script>
console.log("Hello, JavaScript!");
</script>Or link an external script:
<script src="app.js"></script>Use headings to structure content hierarchically:
<h1>Main Heading</h1>
<h2>Subheading</h2>
...
<h6>Smallest Heading</h6>Define blocks of text using paragraphs:
<p>This is a paragraph of text.</p><b>Bold</b>
<i>Italic</i>
<u>Underline</u>
<strong>Important</strong>
<em>Emphasis</em>Line one<br>
Line two
<hr>
New section below horizontal rule<ol>
<li>First item</li>
<li>Second item</li>
</ol><ul>
<li>Item one</li>
<li>Item two</li>
</ul><dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl><img src="image.jpg" alt="Description" width="300" height="200"><figure>
<img src="photo.jpg" alt="Photo">
<figcaption>A scenic view</figcaption>
</figure><audio controls>
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><picture>
<source media="(min-width: 650px)" srcset="img-large.jpg">
<source media="(min-width: 465px)" srcset="img-medium.jpg">
<img src="img-small.jpg" alt="Responsive image">
</picture><table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>30</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">End</td></tr>
</tfoot>
</table><tr><td>Row Cell</td><td>Another Cell</td></tr>
<tr><th>Header 1</th><th>Header 2</th></tr><td colspan="2">Merged Column</td>
<td rowspan="2">Merged Row</td><form action="/submit" method="post">
...
</form><input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">
<input type="checkbox" name="subscribe">
<input type="radio" name="gender" value="male">
<input type="file" name="resume"><label for="msg">Message:</label>
<textarea id="msg" name="message"></textarea>
<select name="country">
<option value="in">India</option>
<option value="us">USA</option>
</select>
<button type="submit">Send</button><fieldset>
<legend>Personal Info</legend>
<input type="text" name="name">
</fieldset><header>Header content</header>
<main>Main content</main>
<section>A section</section>
<article>An article</article>
<aside>Sidebar content</aside>
<footer>Footer content</footer><div>Block element</div>
<span>Inline element</span><address>123 Main St</address>
<time datetime="2025-06-14">June 14, 2025</time>
<mark>Highlighted</mark>
<code>const x = 5;</code>
<pre>Formatted text block</pre>
<blockquote>Quoted text</blockquote><div id="main" class="container" style="color: red;" title="Tooltip text">Content</div><div data-user-id="123" data-role="admin">User Info</div><button aria-label="Close">X</button><iframe src="https://example.com" width="600" height="400"></iframe><embed src="file.pdf" width="500" height="375" type="application/pdf">
<object data="movie.swf" width="400" height="300"></object>Already shown under Semantic HTML — use them for better structure and accessibility.
<input type="text" required pattern="[A-Za-z]{3,}"><input type="text" placeholder="Enter name" autofocus>
<input type="text" value="Fixed" disabled>
<input type="text" value="Read-only" readonly><div id="main" class="container" style="color: red;" title="Tooltip text">Content</div><div data-user-id="123" data-role="admin">User Info</div><button aria-label="Close">X</button><iframe src="https://example.com" width="600" height="400"></iframe><embed src="file.pdf" width="500" height="375" type="application/pdf">
<object data="movie.swf" width="400" height="300"></object>Already shown under Semantic HTML — use them for better structure and accessibility.
<input type="text" required pattern="[A-Za-z]{3,}"><input type="text" placeholder="Enter name" autofocus>
<input type="text" value="Fixed" disabled>
<input type="text" value="Read-only" readonly><img src="cat.jpg" alt="A sleeping cat"><div tabindex="0">Focusable content</div><button aria-label="Close dialog">X</button>& = &
< = <
> = >
" = "
Sign in with Google
Comments
Use comments to annotate your HTML code: