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> to <h6>: Headings, with <h1> as the most important.<p>: Paragraph.<br>: Line break.<hr>: 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>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
<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:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
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 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
localStorage API 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.