Here is HTML5 cheat sheet, covering some of the most commonly used elements and attributes:
Document Structure
<!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>
</body>
</html>
Basic Elements
Heading:
<h1>Heading 1</h1>
Paragraph:
<p>This is a paragraph.</p>
Anchor (Link):
<a href="https://example.com" target="_blank">Visit Example</a>
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>
Forms
Form and Input:
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
Textarea:
<textarea rows="4" cols="50"></textarea>
Multimedia
Image:
<img src="image.jpg" alt="Description">
Audio:
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
Video:
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Semantic Elements
Section:
<section>
<h2>Section Title</h2>
<p>Section content...</p>
</section>
Article:
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
Header and Footer:
<header>
<h1>Page Title</h1>
</header>
<footer>
<p>Copyright © 2022</p>
</footer>
Meta Tags
Charset and Viewport:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Script and Link
Script:
<script src="script.js"></script>
Link (CSS):
<link rel="stylesheet" href="styles.css">
HTML5 APIs
Canvas:
<canvas id="myCanvas" width="200" height="100"></canvas>
LocalStorage:
<script>
localStorage.setItem("key", "value");
var storedValue = localStorage.getItem("key");
</script>
This cheat sheet covers some fundamental HTML5 elements and attributes. HTML5 introduces many new features and semantic elements to enhance web development.