HTML Comments

Comment

Comments are invisible notes in your code. Browsers ignore them completely. Use them to explain your code, leave reminders, or temporarily hide elements.

The text above is how a comment looks in your code editor. On the actual page, nothing appears!

Try right-clicking this page → "Inspect" to see real comments in the source!

HTML

<!-- This is a single-line comment -->

<!--
  This is a multi-line comment.
  Great for longer explanations.
-->

<!-- TODO: Add navigation links later -->

<p>This paragraph is visible.</p>
<!-- <p>This paragraph is hidden.</p> -->

Headings

<h1> – <h6>Headings

Headings create a hierarchy on your page, like a book's table of contents. <h1> is the biggest (main title), <h6> is the smallest. Use only ONE <h1> per page!

<h1> Main Page Title

<h2> Section Heading

<h3> Sub-Section

<h4> Detail Heading

<h5> Minor Heading

<h6> Smallest Heading

HTML

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Sub-Section</h3>
<h4>Detail Heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

Text Formatting

<b> <strong>Bold / Strong

Makes text bold. Use <strong> when the text is important (screen readers emphasize it), and <b> for visual-only bold.

This is bold with <b> and this is strong with <strong>.

HTML

<b>Bold text (visual only)</b>
<strong>Important bold text (semantic)</strong>

<i> <em>Italic / Emphasis

Makes text italic. Use <em> for emphasis (screen readers stress it), and <i> for visual-only italics.

This is italic with <i> and this is emphasized with <em>.

HTML

<i>Italic text (visual only)</i>
<em>Emphasized text (semantic)</em>

<u> <del> <ins>Underline / Delete / Insert

<u> underlines text. <del> shows deleted text with a strikethrough. <ins> shows newly inserted text.

Underlined text

Price: ~~$99.99~~ $49.99 — On Sale!

HTML

<u>Underlined text</u>
<del>$99.99</del>  <!-- strikethrough -->
<ins>$49.99</ins>  <!-- newly inserted -->

<mark> <small> <sub> <sup> <code>More Inline Elements

Extra inline formatting for highlighting, small print, math notation, and showing code snippets.

Highlighted text — great for search results

Small print — for fine print or disclaimers

H₂O (water) — subscript for chemical formulas

E = mc² — superscript for math

Use console.log() to debug — inline code

HTML

<mark>Highlighted text</mark>
<small>Small print</small>
H<sub>2</sub>O           <!-- subscript -->
E = mc<sup>2</sup>      <!-- superscript -->
<code>console.log()</code> <!-- inline code -->

<blockquote> <pre> <hr>Block-Level Text

Block-level elements that take up the full width. Quotes, preformatted code blocks, and horizontal rules.

"The only way to do great work is to love what you do." — Steve Jobs

function hello() {
  console.log("Hello, World!");
}

The horizontal line above is <hr> — a thematic break between sections.

HTML

<blockquote>
  <p>"A famous quote goes here."</p>
</blockquote>

<pre><code>
function hello() {
  console.log("Hello, World!");
}
</code></pre>

<hr>  <!-- horizontal rule -->

Paragraphs & Structure

<p>Paragraph

The most common element. Wraps a block of text into a paragraph with automatic spacing above and below.

This is the first paragraph. Notice how it has space below it, separating it from the next paragraph.

This is the second paragraph. Browsers automatically add margin between paragraphs.

This is the third paragraph. You don't need to add extra spacing yourself!

HTML

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

<br> <wbr>Line Break / Word Break

<br> forces a line break inside a paragraph. <wbr> suggests where a long word CAN break if needed.

Roses are red,
Violets are blue,
HTML is awesome,
And so are you!

Don't use <br> for spacing — use CSS margins instead!

HTML

<p>Line one<br>Line two<br>Line three</p>

<!-- Word break opportunity -->
<p>Super<wbr>cali<wbr>fragilistic</p>

<div> <span>Generic Containers

<div> is a block container (takes full width). <span> is an inline container (wraps text). Both are used for grouping and styling.

I'm inside a <div> — a block container with a purple background.

This sentence has a highlighted <span> in the middle of it.

HTML

<!-- Block container (full width) -->
<div class="card">
  <p>Content inside a div.</p>
</div>

<!-- Inline container -->
<p>A <span class="highlight">styled word</span> here.</p>

Links & Anchors

<a>Hyperlinks

The anchor tag creates clickable links — the backbone of the web!

External link — opens in a new tab

Internal link — jumps to Headings section

Email link — opens email with subject & body pre-filled!

Phone link — dials on mobile

Download link — downloads a file

HTML

<!-- External link (new tab) -->
<a href="https://example.com" target="_blank">Visit</a>

<!-- Internal / anchor link -->
<a href="#section-id">Jump to section</a>

<!-- Email (basic) -->
<a href="mailto:user@email.com">Email</a>

<!-- Email with subject and body pre-filled -->
<a href="mailto:user@email.com?subject=Hello&body=Hi%20there%2C%0A%0AI%20wanted%20to%20ask...">
  Email with Subject & Body
</a>

<!-- Email with CC and BCC -->
<a href="mailto:user@email.com?cc=copy@email.com&bcc=hidden@email.com&subject=Meeting">
  Email with CC & BCC
</a>

<!--
  URL Encoding Cheat Sheet:
  %20 = space       %0A = new line
  %2C = comma       %26 = &
  %3F = ?           %3D = =
-->

<!-- Phone -->
<a href="tel:+15551234567">Call</a>

<!-- Download -->
<a href="file.pdf" download>Download</a>

Lists (All Types)

<ul>Unordered List (Bullets)

Bullet points — use when the order doesn't matter. You can nest lists inside each other!

Apples
Bread
Milk
- Whole milk
- Almond milk
Cheese

HTML

<ul>
  <li>Apples</li>
  <li>Bread</li>
  <li>Milk
    <ul>  <!-- nested -->
      <li>Whole milk</li>
      <li>Almond milk</li>
    </ul>
  </li>
</ul>

<ol>Ordered List (Numbers, Letters, Roman)

Numbered list — use when order matters. Change the style with type: numbers, letters (A/a), or Roman numerals (I/i). Use start to begin from a specific number and reversed for countdowns!

Numbers

Preheat oven
Mix ingredients
Bake 30 min

Letters (A)

First item
Second item
Third item

Roman (I)

Chapter one
Chapter two
Chapter three

HTML

<!-- Default numbers -->
<ol><li>First</li><li>Second</li></ol>

<!-- Uppercase letters -->
<ol type="A">...</ol>

<!-- Lowercase letters -->
<ol type="a">...</ol>

<!-- Roman numerals -->
<ol type="I">...</ol>

<!-- Start from 5, reversed -->
<ol start="5">...</ol>
<ol reversed>...</ol>

<dl>Description List (Glossary)

A list of terms and definitions — perfect for glossaries or FAQs. Uses <dt> for terms and <dd> for definitions.

HTML: HyperText Markup Language — the structure of web pages
CSS: Cascading Style Sheets — the styling of web pages
JavaScript: A programming language — the behavior of web pages

HTML

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Tables

<table>Data Table

Tables display data in rows and columns. <thead> / <tbody> / <tfoot> organize sections. <th> = header, <td> = data cell, colspan merges columns.

Student Grades — Spring 2026
Name	Assignment	Grade
Alex Rivera	HTML Portfolio	95 ⭐
Jordan Lee	CSS Layout	88
Sam Patel	JavaScript	72
Class Average		85

HTML

<table>
  <caption>Student Grades</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Assignment</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alex Rivera</td>
      <td>HTML Portfolio</td>
      <td>95</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Average</td>
      <td>85</td>
    </tr>
  </tfoot>
</table>

Forms & Inputs

<form> <input>Complete Form

Forms collect user data. Every input should have a <label> for accessibility. The type attribute changes what the input looks like.

HTML

<form action="/submit" method="POST">

  <label for="name">Name</label>
  <input type="text" id="name" placeholder="Your name">
  <input type="email" placeholder="you@email.com">
  <input type="password">
  <input type="date">
  <input type="color" value="#6c63ff">
  <input type="range" min="0" max="100">
  <input type="number">
  <input type="file">

  <select>
    <option>HTML</option>
    <option>CSS</option>
  </select>

  <fieldset>
    <legend>Experience</legend>
    <input type="radio" name="exp"> Beginner
    <input type="radio" name="exp"> Advanced
  </fieldset>

  <input type="checkbox"> I agree
  <textarea rows="3"></textarea>

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

Images, Video & Audio

<img> <figure>Images

Display images on your page. Always include alt text for accessibility! Wrap in <figure> + <figcaption> for a captioned image.

A purple placeholder image — This is a `<figcaption>` — a caption for the image

HTML

<!-- Basic image (always include alt!) -->
<img src="photo.jpg" alt="Description" width="400">

<!-- Image with caption -->
<figure>
  <img src="sunset.jpg" alt="A beautiful sunset">
  <figcaption>Sunset over the ocean</figcaption>
</figure>

<!-- Image as a link -->
<a href="https://example.com">
  <img src="logo.png" alt="Logo">
</a>

<video> <audio> <iframe>Video, Audio & Embeds

Embed playable media directly. Use controls to show play/pause. Use <iframe> to embed other pages or YouTube videos.

Audio Player:

Video Player:

Iframe (embedded content):

HTML

<!-- Audio -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<!-- Video -->
<video controls width="640">
  <source src="clip.mp4" type="video/mp4">
</video>

<!-- YouTube embed -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Video" allowfullscreen>
</iframe>

Emojis, Icons & Special Characters

Emojis & EntitiesUnicode Emojis & HTML Entities

Emojis work directly in HTML — just paste them! HTML entities give you special characters like ©, →, and ♥.

😀 🎉 🚀 💡 ❤️ ⭐ 🔥 👍 📧 🎓

I ❤️ HTML! This course gets ⭐⭐⭐⭐⭐

HTML entities: © → © &hearts; → ♥ → → → &check; → ✓ & → &

HTML

<!-- Paste emojis directly -->
<p>I ❤️ HTML!</p>
<p>Rating: ⭐⭐⭐⭐⭐</p>

<!-- HTML entities -->
&copy;    <!-- © -->
&hearts;  <!-- ♥ -->
&rarr;    <!-- → -->
&amp;     <!-- & -->
&lt;      <!-- < -->
&gt;      <!-- > -->

Font AwesomeIcon Library

Thousands of scalable icons. Add the CSS link, then use <i class="fa-..."> tags. They scale with font-size!

Hover to see names. These scale to any size.

HTML

<!-- 1. Add to <head> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- 2. Use icons -->
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-brands fa-github"></i>

Phosphor IconsLightweight Line Icons

Phosphor Icons — 1,200+ icons in 6 weights (thin, light, regular, bold, fill, duotone). Clean, minimal, and great for modern UIs. Add the CSS link and use <i class="ph-light ph-..."> tags.

Hover to see names. Light weight shown — also available in thin, regular, bold, fill, and duotone.

HTML

<!-- 1. Add to <head> (light weight) -->
<link rel="stylesheet"
      href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css">

<!-- 2. Use icons -->
<i class="ph-light ph-house"></i>
<i class="ph-light ph-user"></i>
<i class="ph-light ph-star"></i>

<!-- Other weights: ph-thin, ph-bold, ph-fill, ph-duotone -->
<i class="ph-bold ph-heart"></i>
<i class="ph-fill ph-star"></i>

<!-- Browse all: phosphoricons.com -->

LucideModern Line Icons

Lucide — 1,500+ clean, minimal line icons. Community-driven fork of Feather with many more icons. Popular with React, Next.js, and Shadcn UI projects. Add the script and use data-lucide attributes.

Hover to see names. 1,500+ icons with consistent 24x24 grid and adjustable stroke width.

HTML

<!-- 1. Add script to end of <body> -->
<script src="https://unpkg.com/lucide@latest"></script>

<!-- 2. Use data-lucide attribute -->
<i data-lucide="home"></i>
<i data-lucide="user"></i>
<i data-lucide="star"></i>

<!-- 3. Initialize (call after DOM loads) -->
<script>lucide.createIcons();</script>

<!-- Browse all: lucide.dev/icons -->

HeroiconsTailwind CSS Icons

Heroicons — ~300 icons by the Tailwind CSS team. Available in outline (24px) and solid (24px) styles. Used as inline SVG — copy from the website and paste into your HTML.

By the Tailwind CSS team. Copy SVG code from heroicons.com and paste directly into your HTML.

HTML

<!-- Heroicons uses inline SVG — no CDN needed! -->
<!-- Copy from heroicons.com and paste: -->

<!-- Outline style (24x24) -->
<svg xmlns="http://www.w3.org/2000/svg"
     fill="none" viewBox="0 0 24 24"
     stroke-width="1.5" stroke="currentColor"
     width="24" height="24">
  <path d="M..." />
</svg>

<!-- Tip: Use stroke="currentColor" so
     the icon inherits your text color! -->

<!-- Browse all: heroicons.com -->

Feather IconsSimple Line Icons

Feather Icons — ~280 simple, clean icons with a consistent 2px stroke. Lightweight and perfect for minimalist designs. Add the script and use data-feather attributes.

Hover to see names. ~280 icons, all with consistent 24x24 grid and 2px stroke.

HTML

<!-- 1. Add script to end of <body> -->
<script src="https://unpkg.com/feather-icons"></script>

<!-- 2. Use data-feather attribute -->
<i data-feather="home"></i>
<i data-feather="user"></i>
<i data-feather="star"></i>

<!-- 3. Initialize (call after DOM loads) -->
<script>feather.replace();</script>

<!-- Browse all: feathericons.com -->

Noun ProjectSVG Icon Library

The Noun Project has over 5 million icons you can download as SVG or PNG. Great for projects where you need a specific icon style or want to customize colors and sizes. You download the icon file and reference it in your HTML.

Sample SVG icons like those found on thenounproject.com. You download SVGs and add them directly to your HTML.

HTML

<!-- Option 1: Inline SVG (paste the SVG code directly) -->
<svg width="40" height="40" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#333"/>
</svg>

<!-- Option 2: Reference a downloaded SVG file -->
<img src="icons/star.svg" alt="Star icon" width="40">

<!-- Tip: Inline SVGs let you change colors with CSS! -->
<svg class="icon" fill="currentColor">...</svg>

<!--
  Where to get SVG icons:
  - thenounproject.com (5M+ icons, free & paid)
  - fontawesome.com
  - heroicons.com
  - feathericons.com
-->

Page Layout & Semantic Structure

Semantic LayoutHow a Page is Structured

Semantic tags tell the browser what each section IS. Instead of <div> for everything, use tags that describe their purpose.

<header>

Logo, site title, intro

<nav>

Navigation links

<main>

Primary content

<section> — Themed group

<article> — Standalone content

<aside>

Sidebar

<footer>

Copyright, contact info

This is how a typical web page is organized

HTML

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

  <nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
  </nav>

  <main>
    <section>
      <h2>About Us</h2>
      <p>We build cool things.</p>
    </section>

    <article>
      <h2>Blog Post</h2>
      <p>Content here...</p>
    </article>
  </main>

  <aside>
    <h3>Sidebar</h3>
  </aside>

  <footer>
    <p>&copy; 2026 My Website</p>
  </footer>
</body>

<details> <time> <abbr>Interactive & Metadata Tags

Collapsible content, machine-readable dates, abbreviations, and contact info.

Click to expand (details/summary)

Hidden content — no JavaScript needed! Great for FAQs.

Posted on March 20, 2026

HTML — hover to see full name

professor@university.edu — <address> tag

HTML

<details>
  <summary>Click to expand</summary>
  <p>Hidden content.</p>
</details>

<time datetime="2026-03-20">March 20, 2026</time>
<abbr title="HyperText Markup Language">HTML</abbr>
<address>Contact info here</address>

Accessibility (a11y)

aria-* & altMaking Your Site Accessible

Accessibility ensures everyone can use your site — including people using screen readers, keyboards, or assistive technology.

Always add alt to images

Screen readers read alt text aloud for blind users.

Use <label> for every form input

Clicking the label focuses the input — better UX for everyone.

Use semantic tags (<header>, <nav>, <main>)

Screen readers use these to let users jump between sections.

Use aria-label for icon-only buttons

Gives invisible labels to buttons with just icons.

Set lang="en" on <html>

Helps screen readers pronounce content correctly.

Don't use only color to convey meaning

About 1 in 12 men are colorblind — always pair color with icons, text, or patterns.

HTML

<!-- DO: Alt text for images -->
<img src="cat.jpg" alt="An orange tabby cat sleeping">

<!-- DO: Label inputs -->
<label for="email">Email:</label>
<input type="email" id="email" required>

<!-- DO: aria-label for icon buttons -->
<button aria-label="Close menu">✕</button>

<!-- DO: Skip navigation -->
<a href="#main" class="sr-only">Skip to content</a>

<!-- DO: ARIA roles -->
<div role="alert">Saved!</div>

<!-- DO: Language attribute -->
<html lang="en">