attributes web-development drag-and-drop forms html5 semantic-elements multimedia canvas video audio
HTML5 Cheat Sheet
Basic Document Structure
Every HTML5 document begins with a <!DOCTYPE html> declaration to ensure standards-compliant rendering. Here's the basic skeleton of an HTML5 document:
<!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>
Key Elements
<!DOCTYPE html>: Declares the document as HTML5.
<html lang="en">: The root element with the language attribute.
<head>: Contains metadata, links to stylesheets, and the document title.
<meta charset="UTF-8">: Sets the character encoding to UTF-8.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper scaling on mobile devices.
<title>: Specifies the title of the document.
Text Elements
HTML provides various tags for structuring text content:
<h1><code> to : Headings, with <h1> as the most important.
<p>: Paragraph.
<br>: Line break.
---: Thematic break (horizontal rule).
<strong>: Important text (bold).
<em>: Emphasized text (italic).
<small>: Smaller text.
<mark>: Highlighted text.
<blockquote>: Long quotations.
<code>: Inline code.
<pre>: Preformatted text (preserves whitespace).
Lists
HTML supports ordered, unordered, and description lists:
<ul>: Unordered list.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>: Ordered list.
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
<dl>: Description list.
<dl>
<dt>Term 1</dt>
<dd>Description for Term 1</dd>
</dl>
Links and Images
<a href="URL">: Anchor tag for hyperlinks.
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>
<img src="image.jpg" alt="Description">: Embeds an image.
<img src="image.jpg" alt="Description" width="200" height="150">
Tables
HTML tables consist of rows and columns:
| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
Forms
HTML5 introduces new input types and attributes:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<button type="submit">Submit</button>
</form>
Common Input Types
text: Single-line text input.
email: Validated email address.
password: Password input (masked).
number: Numeric input.
date: Date picker.
radio: Single-choice options.
checkbox: Multiple-choice options.
file: File upload.
Semantic Elements
HTML5 introduces semantic elements to improve document structure and accessibility:
<header>: Introductory content or navigation links.
<nav>: Navigation links.
<main>: Main content of the document.
<section>: Thematic grouping of content.
<article>: Independent content (e.g., blog post).
<aside>: Sidebar content.
<footer>: Footer content.
<figure>: Self-contained content, like images with captions.
<figcaption>: Caption for a <figure>.
Multimedia
HTML5 supports native multimedia embedding:
<video>: Embeds a video.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio>: Embeds an audio file.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Inline vs. Block Elements
- Inline Elements: Do not start on a new line and only take up as much width as necessary. Examples include
<span>,<a>,<em>,<strong>.
- Block Elements: Start on a new line and take up the full width available. Examples include
<div>,<p>,<h1>,<ul>,<table>.
Accessibility Best Practices
- Use semantic elements for better structure and SEO.
- Ensure all images have descriptive alt attributes.
- Use
aria-*attributes to improve accessibility where necessary.
- Ensure proper use of heading levels for a clear document outline.
- Use
<label>elements with form controls for better usability.
Additional HTML5 Features
- Data Attributes: Custom attributes prefixed with
data-, e.g.,<div data-info="123">.
- Local Storage: Use the
localStorageAPI for client-side data storage.
- Geolocation API: Retrieve geographic location data of the user.
- Drag and Drop: Built-in drag and drop functionality for elements.
This cheat sheet provides a quick overview of the essential components and best practices in HTML5. For further learning, you can refer to detailed documentation on each feature and tag to master HTML5 in-depth.
Comments
Please log in to leave a comment.