3.5 KiB
3.5 KiB
HTML5 Cheat Sheet
Table of Contents
- Document Structure
- HTML Basic Elements
- Text Formatting
- Links and Navigation
- Multimedia Elements
- Embedded Content
- Forms
- Semantic Elements
- APIs
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</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
HTML Basic Elements
Heading Tags
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ... -->
<h6>This is a Heading 6</h6>
Paragraph
<p>This is a paragraph.</p>
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>
Links
<a href="https://www.example.com">Visit Example</a>
Text Formatting
Bold
<strong>This is bold text</strong>
Italic
<em>This is italicized text</em>
Underline
<u>This text is underlined</u>
Links and Navigation
Anchor Tag
<a href="https://www.example.com">Visit Example</a>
Navigation
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Multimedia Elements
Image
<img src="image.jpg" alt="Description of the image">
Audio
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
Video
<video controls width="300">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Embedded Content
Iframe
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>
Embedded Audio
<embed src="audio.mp3" type="audio/mp3" width="300" height="50">
Forms
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="Submit">
</form>
Semantic Elements
Article
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
Section
<section>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>
Header and Footer
<header>
<h1>Page Header</h1>
</header>
<footer>
<p>Copyright © 2023</p>
</footer>
APIs
Geolocation
<button onclick="getLocation()">Get Location</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
alert("Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude);
}
</script>
Local Storage
<script>
// Store data
localStorage.setItem("username", "John Doe");
// Retrieve data
var username = localStorage.getItem("username");
console.log("Username: " + username);
</script>