HTML Course
HTML Crash Course
The Essential Reference Guide — HTML5
1. Document Structure
Every HTML document follows the same basic skeleton. The <!DOCTYPE html> declaration tells the browser this is an HTML5 document.
<!-- Every HTML page starts with this -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- All visible content goes here -->
<h1>Hello, World!</h1>
<script src="app.js"></script>
</body>
</html>Rule
CSS links go in <head>. JavaScript links go at the bottom of <body> so the page renders before scripts execute.
2. Text & Headings
<!-- Headings h1–h6: only one h1 per page -->
<h1>Page Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section</h3>
<!-- Paragraphs -->
<p>This is a paragraph of text.</p>
<!-- Inline text formatting -->
<strong>Bold — important content</strong>
<em>Italic — emphasis</em>
<mark>Highlighted text</mark>
<code>inline code</code>
<del>Deleted text</del>
<sup>superscript</sup> <sub>subscript</sub>
<!-- Line break and horizontal rule -->
<br>
<hr>
<!-- Block quote -->
<blockquote cite="https://source.com">
A quoted passage from another source.
</blockquote>Semantic Warning
Use <strong> for importance, not just bold styling. Use <em> for emphasis, not just italics. If you only want visual styling, use CSS instead.
3. Links & Images
<!-- Links -->
<a href="about.html">Internal link</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">External link</a>
<a href="#section-id">Jump to section</a>
<a href="mailto:[email protected]">Email link</a>
<!-- Images -->
<img src="photo.jpg"
alt="A descriptive text for screen readers"
width="800"
height="600"
loading="lazy">
<!-- Figure with caption -->
<figure>
<img src="chart.png" alt="Sales chart for Q1 2026">
<figcaption>Figure 1: Q1 2026 sales data</figcaption>
</figure>Tip
Always include rel="noopener noreferrer" on external links with target="_blank" — it prevents the new tab from accessing your page and is a security best practice.
4. Lists
<!-- Unordered list -->
<ul>
<li>Python</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
<!-- Ordered list -->
<ol>
<li>Install VS Code</li>
<li>Install Python</li>
<li>Write your first program</li>
</ol>
<!-- Description list -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — structure of the web</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — presentation of the web</dd>
</dl>
<!-- Nested list -->
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>5. Tables
<table>
<!-- Caption describes the table for screen readers -->
<caption>Student Grades</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Grade</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ayman</td>
<td>A</td>
<td>95</td>
</tr>
<tr>
<td>Sara</td>
<td>B</td>
<td>88</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average</td>
<td>91.5</td>
</tr>
</tfoot>
</table>6. Forms & Inputs
<form action="/submit" method="POST">
<!-- Text input -->
<label for="name">Full Name</label>
<input type="text" id="name" name="name"
placeholder="Enter your name" required>
<!-- Email -->
<input type="email" id="email" name="email" required>
<!-- Number with min/max -->
<input type="number" min="0" max="100" step="1">
<!-- Select dropdown -->
<select name="course">
<option value="">Choose a course</option>
<option value="python">Python</option>
<option value="sql">SQL</option>
</select>
<!-- Textarea -->
<textarea name="message" rows="5" cols="40"></textarea>
<!-- Checkbox -->
<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to the terms</label>
<!-- Radio buttons -->
<input type="radio" id="beginner" name="level" value="beginner">
<label for="beginner">Beginner</label>
<!-- Submit button -->
<button type="submit">Submit</button>
</form>Best Practice
Always pair every <input> with a <label> using matching for and id attributes. This is required for accessibility and improves the click target size.
7. Semantic HTML5
Semantic elements describe their meaning to the browser and developer. Use them instead of generic <div> and <span> where content has clear meaning.
<body>
<header>
<nav>...</nav>
</header>
<main>
<article>
<h2>Blog Post Title</h2>
<time datetime="2026-06-01">June 1, 2026</time>
<p>Article content...</p>
</article>
<section>
<h2>Related Topics</h2>
</section>
</main>
<aside>
Sidebar content, related links
</aside>
<footer>
<p>© 2026 Ayman Alzaid</p>
</footer>
</body>8. Media
<!-- Responsive image with multiple sources -->
<picture>
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description">
</picture>
<!-- Video -->
<video controls width="640" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>
<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<!-- Embed YouTube -->
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
width="560" height="315"
title="Video description"
allowfullscreen>
</iframe>9. Meta & SEO
<head>
<!-- Essential -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title — Site Name</title>
<!-- SEO -->
<meta name="description" content="150–160 char page summary for search results">
<meta name="author" content="Ayman Alzaid">
<link rel="canonical" href="https://aymanalzaid.com/page.html">
<!-- Open Graph (social sharing) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://aymanalzaid.com/og-image.jpg">
<meta property="og:type" content="website">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
</head>10. Accessibility
<!-- ARIA roles for navigation landmarks -->
<nav role="navigation" aria-label="Main navigation">...</nav>
<main role="main">...</main>
<!-- Skip navigation link (for keyboard users) -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Buttons: use type and aria-label when icon-only -->
<button type="button" aria-label="Close menu">✕</button>
<!-- Hide decorative images from screen readers -->
<img src="decoration.png" alt="" role="presentation">
<!-- Expandable content -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- Live region for dynamic content updates -->
<div aria-live="polite" aria-atomic="true">
Status messages appear here
</div>