HTML Cheatsheet (Structured)
1. Basic HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
</body>
</html>
2. Text Formatting
<b>Bold</b> <i>Italic</i> <u>Underline</u> <mark>Highlighted</mark>
<small>Small text</small> <del>Deleted</del> <ins>Inserted</ins>
3. Lists
<!-- Unordered List -->
<ul><li>Item 1</li><li>Item 2</li></ul>
<!-- Ordered List -->
<ol><li>First</li><li>Second</li></ol>
4. Tables
<table border="1">
<tr><th>Name</th><th>Age</th></tr>
<tr><td>John</td><td>30</td></tr>
</table>
5. Forms & Inputs
<form>
<input type="text" placeholder="Name" required>
<input type="email" placeholder="Email">
<input type="submit">
</form>
6. Multimedia & Embeds
<img src="image.jpg" alt="Description">
<video controls><source src="video.mp4" type="video/mp4"></video>
<audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
7. HTML5 APIs
// Geolocation API
navigator.geolocation.getCurrentPosition(function(pos) {
console.log("Lat: " + pos.coords.latitude);
});
// Local Storage API
localStorage.setItem("user", "JohnDoe");
console.log(localStorage.getItem("user"));
8. Accessibility & SEO
<img src="image.jpg" alt="Detailed description">
<label for="email">Email:</label><input type="email" id="email">
<meta name="description" content="Learn HTML with this guide">
9. HTML & JavaScript Integration
<button onclick="alert('Hello!')">Click Me</button>
<script>console.log("Hello, JavaScript!");</script>