HTML Cheatsheet

Links and Images

Use this HTML reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Anchor Element `<a>`

<!-- Basic link -->
<a href="https://example.com">Visit Example</a>

<!-- Open in new tab (always add rel for security) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">New tab</a>

<!-- Internal page fragment -->
<a href="#section-id">Jump to section</a>

<!-- Relative link -->
<a href="/about">About</a>
<a href="../parent.html">Parent page</a>

<!-- Download link (suggested filename) -->
<a href="/files/report.pdf" download>Download PDF</a>
<a href="/files/report.pdf" download="annual-report.pdf">Download</a>

<!-- Email -->
<a href="mailto:hi@example.com">Send email</a>
<a href="mailto:hi@example.com?subject=Hello&body=Hi%20there">Pre-filled email</a>

<!-- Phone -->
<a href="tel:+15551234567">+1 (555) 123-4567</a>

<!-- SMS -->
<a href="sms:+15551234567?body=Hello">Send text</a>

<!-- No destination (use JS; not empty href) -->
<a href="#" onclick="doSomething()">Action</a>
<button type="button" onclick="doSomething()">Better: use a button</button>

`<a>` Attributes

Attribute	Values	Description
`href`	URL / fragment / scheme	Destination
`target`	`_self`, `_blank`, `_parent`, `_top`, frame name	Where to open
`rel`	See below	Relationship to linked document
`download`	filename (optional)	Trigger download instead of navigate
`hreflang`	BCP-47 language code	Language of linked document
`type`	MIME type	Media type of linked resource
`ping`	Space-separated URLs	Sends POST on click (analytics)
`referrerpolicy`	`no-referrer`, `origin`, `strict-origin-when-cross-origin`…	Controls `Referer` header

`rel` values for `<a>`

`rel` value	Meaning
`noopener`	Don't pass `window.opener` to new tab
`noreferrer`	Don't send `Referer` header (implies `noopener`)
`nofollow`	Tell search engines not to follow
`sponsored`	Paid/sponsored link
`ugc`	User-generated content
`external`	Link leaves the site
`author`	Link to author info
`license`	Link to license
`prev` / `next`	Pagination
`bookmark`	Permanent link for the containing content

Target Attribute

<a href="/page" target="_self">Same frame (default)</a>
<a href="/page" target="_blank">New tab / window</a>
<a href="/page" target="_parent">Parent frame</a>
<a href="/page" target="_top">Top-level frame</a>
<a href="/page" target="frame-name">Named iframe</a>

Linking to Page Sections

The id on any element becomes an anchor target.

<!-- Target (on any element) -->
<h2 id="installation">Installation</h2>
<section id="contact">...</section>

<!-- Link to it -->
<a href="#installation">Go to Installation</a>
<a href="/docs#installation">Docs → Installation</a>

Image Element `<img>`

alt is required. Empty alt="" for decorative images (tells screen readers to skip).

<!-- Basic image -->
<img src="/images/photo.jpg" alt="Description of photo">

<!-- Decorative image (skip for screen readers) -->
<img src="/images/divider.png" alt="">

<!-- With explicit dimensions (prevents layout shift) -->
<img src="/hero.jpg" alt="Hero image" width="1200" height="600">

<!-- Lazy loading (defers loading until near viewport) -->
<img src="/below-fold.jpg" alt="Description" loading="lazy">

<!-- Eager loading (default for above-fold images) -->
<img src="/hero.jpg" alt="Hero" loading="eager">

<!-- Decoding hint -->
<img src="/photo.jpg" alt="Photo" decoding="async">

<!-- Cross-origin for CORS resources -->
<img src="https://cdn.example.com/img.jpg" alt="CDN image" crossorigin="anonymous">

<!-- Fetch priority -->
<img src="/lcp-image.jpg" alt="LCP" fetchpriority="high">

`<img>` Attributes

Attribute	Description
`src`	Image URL (required)
`alt`	Alternative text (required; `""` for decorative)
`width`	Intrinsic width in pixels
`height`	Intrinsic height in pixels
`loading`	`lazy` / `eager` / `auto`
`decoding`	`async` / `sync` / `auto`
`fetchpriority`	`high` / `low` / `auto`
`crossorigin`	`anonymous` / `use-credentials`
`srcset`	Responsive image candidates (see below)
`sizes`	Breakpoint hints for `srcset`
`usemap`	Links to image map (`#mapname`)
`ismap`	Server-side image map (boolean)
`referrerpolicy`	Controls `Referer` header

Responsive Images with `srcset`

Resolution switching (same image, different sizes)

<img
  src="/img/photo-800.jpg"
  srcset="
    /img/photo-400.jpg  400w,
    /img/photo-800.jpg  800w,
    /img/photo-1600.jpg 1600w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1200px) 50vw,
    800px
  "
  alt="Description"
  width="800"
  height="600"
>

Art direction with `<picture>`

Use when you want different crops or formats at different sizes.

<picture>
  <!-- Landscape crop on wide screens -->
  <source
    media="(min-width: 800px)"
    srcset="/img/hero-wide.jpg"
  >
  <!-- Portrait crop on narrow screens -->
  <source
    media="(max-width: 799px)"
    srcset="/img/hero-square.jpg"
  >
  <!-- Fallback <img> is required -->
  <img src="/img/hero-wide.jpg" alt="Hero image">
</picture>

Modern format with fallback

<picture>
  <source type="image/avif" srcset="/img/photo.avif">
  <source type="image/webp" srcset="/img/photo.webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600">
</picture>

Combined: format + responsive sizes

<picture>
  <source
    type="image/avif"
    srcset="/img/photo-400.avif 400w, /img/photo-800.avif 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <source
    type="image/webp"
    srcset="/img/photo-400.webp 400w, /img/photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <img
    src="/img/photo-800.jpg"
    srcset="/img/photo-400.jpg 400w, /img/photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Description"
    width="800"
    height="600"
    loading="lazy"
  >
</picture>

`<figure>` and `<figcaption>`

Groups an image (or other content) with its caption. Caption is optional.

<figure>
  <img src="/charts/revenue.png" alt="Bar chart showing Q4 revenue up 20%">
  <figcaption>Q4 2024 revenue grew 20% year-over-year.</figcaption>
</figure>

<!-- Figure with code block -->
<figure>
  <pre><code>const x = 42;</code></pre>
  <figcaption>Example variable assignment.</figcaption>
</figure>

Image Maps

Clickable regions on an image.

<img src="/map.jpg" alt="Floor plan" usemap="#floorplan" width="400" height="300">

<map name="floorplan">
  <!-- Rectangle: x1,y1,x2,y2 -->
  <area shape="rect" coords="0,0,100,100" href="/room/a" alt="Room A">

  <!-- Circle: cx,cy,radius -->
  <area shape="circle" coords="200,150,50" href="/room/b" alt="Room B">

  <!-- Polygon: x1,y1,x2,y2,x3,y3,... -->
  <area shape="poly" coords="300,0,400,100,300,100" href="/room/c" alt="Room C">

  <!-- Default: catches all other clicks -->
  <area shape="default" href="/map" alt="Full map">
</map>

SVG Images

Inline SVG is fully accessible and styleable with CSS.

<!-- External SVG via <img> -->
<img src="/icon.svg" alt="Logo" width="48" height="48">

<!-- Inline SVG (can be styled/animated with CSS) -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
  <path d="M2 12l10 5 10-5"/>
</svg>

<!-- SVG used as background image in CSS -->
<!-- background-image: url('/icon.svg'); -->

Link + Image Combinations

<!-- Clickable image -->
<a href="https://example.com">
  <img src="/logo.png" alt="Example.com home">
</a>

<!-- Image button -->
<a href="/" class="logo-link">
  <img src="/logo.svg" alt="My Site" width="120" height="40">
</a>

<!-- Card link wrapping mixed content (HTML5) -->
<a href="/article/1" class="card">
  <img src="/thumb.jpg" alt="Article thumbnail">
  <h2>Article Title</h2>
  <p>Article excerpt...</p>
</a>

Favicon Patterns

<head>
  <!-- Legacy browsers -->
  <link rel="icon" href="/favicon.ico" sizes="any">

  <!-- SVG (modern browsers, supports dark mode) -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- PNG fallback -->
  <link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
  <link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">

  <!-- iOS home screen -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

  <!-- Web app manifest (includes icons for Android PWA) -->
  <link rel="manifest" href="/site.webmanifest">
</head>

Accessibility Checklist for Images

Always write alt text that conveys the purpose of the image, not just "image of".
Use alt="" (empty) for purely decorative images.
Complex images (charts, diagrams) need a longer description — use aria-describedby pointing to a nearby element, or a caption in <figcaption>.
SVGs used as UI icons: add aria-hidden="true" if the icon's parent has a label; otherwise add <title> inside the SVG and role="img".

<!-- Informative image -->
<img src="/chart.png" alt="Bar chart: sales rose from $1M in Q1 to $1.4M in Q4 2024">

<!-- Decorative -->
<img src="/decorative-swirl.png" alt="">

<!-- Icon button with label on parent -->
<button aria-label="Delete item">
  <svg aria-hidden="true" focusable="false">...</svg>
</button>

<!-- SVG with accessible name -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Company Logo</title>
  <!-- paths -->
</svg>