HTML5 Cheat Sheet

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.