HTML5 Beginners Guide [Cheat Sheet]

1. Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Title</title>
<meta name="description" content="A short description of the page">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to external CSS file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Page content goes here -->
</body>
</html>

Description:

<!DOCTYPE html>: Declares the document as HTML5.
<html lang="en">: The root element; lang specifies the language.
<head>: Contains metadata such as the character set, title, and links to stylesheets or scripts.
<meta charset="UTF-8">: Sets character encoding.
<meta name="viewport"...>: Ensures the page scales correctly on different devices.
<title>: Sets the title shown in the browser tab.

2. Basic Content Elements

<body>
<header>
<h1>Page Header</h1>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
</header>

<main>
<section id="section1">
<h2>Section 1</h2>
<p>This is a paragraph inside section 1.</p>
</section>

<article>
<h2>Article Title</h2>
<p>Content for an independent piece of content, like a blog post.</p>
</article>

<aside>
<h3>Related Information</h3>
<p>Side content like links or ads.</p>
</aside>
</main>

<footer>
<p>© 2025 Your Site Name</p>
</footer>
</body>

Page Header

Section 1

This is a paragraph inside section 1.

Article Title

Content for an independent piece of content, like a blog post.

© 2025 Your Site Name

Description:

<header>: Defines introductory content or navigational links.
<nav>: Contains primary navigation links.
<main>: Encloses the dominant content of the <em>body</em>.
<section>: Groups related content, typically with a heading.
<article>: Represents a self-contained composition (e.g., a blog post).
<aside>: Contains tangential or supplementary content.
<footer>: Defines the footer for a document or section, often with copyright information.

3. Media and Embedded Content

<body>
<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>Caption for the image</figcaption>
</figure>

<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>

Description of image
Caption for the image

Description:

<img>: Embeds an image; always include the alt attribute for accessibility.
<figure> and <figcaption>: Group an image with its caption.
<video>: Embeds a video; includes fallback text if unsupported.
<audio>: Embeds audio content; similar fallback strategy as <video>.

4. Interactive Elements

<body>
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<button type="submit">Submit</button>
</form>

<button onclick="alert('Button clicked!')">Click Me!</button>
</body>

Description:

<form>: Creates a form for user input.
<label>: Defines labels for input elements, improving accessibility.
<input>: Various types (text, email, etc.) for user data entry.
<button>: Triggers actions; can be used inside or outside a form.

5. Semantic Markup

<body>
<header>
<h1>Welcome to My Website</h1>
</header>

<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>

<main>
<article>
<h2>Article Heading</h2>
<p>This is an article section which stands alone as a piece of content.</p>
</article>

<section>
<h2>Section Heading</h2>
<p>This section groups related content.</p>
</section>
</main>

<footer>
<p>Contact us at email@example.com</p>
</footer>
</body>

Welcome to My Website

Article Heading

This is an article section which stands alone as a piece of content.

Section Heading

This section groups related content.

Contact us at email@example.com

Description:

Semantic tags (e.g., <header>, <nav>, <main>, <article>, <section>, <footer>) provide meaning to the structure of the document, which helps with SEO and accessibility.

6. Additional Elements

<blockquote cite="https://example.com">
<p>This is a blockquote from a cited source.</p>
</blockquote>
<code>console.log('Hello, world!');</code>
<pre>
// Preformatted text with preserved whitespace
function greet() {
console.log("Hello, world!");
}
</pre>
<hr><br>

This is a blockquote from a cited source.

console.log('Hello, world!');
 // Preformatted text with preserved whitespace function 
greet() { console.log("Hello, world!"); }

Description:

<blockquote>: Used for longer quotes; the cite attribute references the source.
<code>: Represents a fragment of computer code.
<pre>: Preserves whitespace and line breaks, ideal for code blocks or formatted text.
<hr>: Inserts a thematic break (horizontal rule).
<br>: Inserts a line break.