๐ HTML Cheatsheet
๐งฑ Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
๐ Common Tags
Tag | Description |
<html> | Root of the document |
<head> | Metadata container |
<title> | Title shown on browser tab |
<body> | Main content |
<h1>-<h6> | Headings |
<p> | Paragraph |
<br> | Line break |
<hr> | Horizontal line |
<strong> | Bold text |
<em> | Italic text |
<div> | Block container |
<span> | Inline container |
๐ Links
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Site</a>
๐ผ๏ธ Images
<img src="image.jpg" alt="Description" width="300" height="200">
๐ Lists
Unordered List
<ul>
<li>Item</li>
</ul>
Ordered List
<ol>
<li>First</li>
</ol>
๐ฆ Tables
<table>
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>25</td></tr>
</tbody>
</table>
๐ Forms
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Send">
</form>
Common Inputs
- <input type="text">
- <input type="email">
- <input type="password">
- <input type="checkbox">
- <input type="radio">
- <textarea></textarea>
- <select><option></option></select>
๐ง Semantic Elements
Tag | Purpose |
<header> | Top section |
<nav> | Navigation |
<main> | Main content |
<section> | Grouped content |
<article> | Standalone item |
<aside> | Sidebar |
<footer> | Bottom section |
๐งฉ Media Elements
Audio
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>
Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
๐ก Metadata & SEO
<meta name="description" content="Brief description of page">
<meta name="keywords" content="HTML, cheat sheet, tutorial">
<meta name="author" content="Your Name">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
๐ช Special Characters
Character | Code |
& | & |
< | < |
> | > |
" | " |
' | ' |
ยฉ | © |
โข | ™ |
๐งช Useful Attributes
Attribute | Use |
class | Styling with CSS |
id | Unique identifier |
style | Inline CSS |
title | Tooltip |
hidden | Hide element |
disabled | Disable input |
required | Make form input mandatory |