Skip to content

Instantly share code, notes, and snippets.

@DaveyJake

DaveyJake/kitchen-sink.html

Last active August 21, 2025 22:00
Show Gist options
  • Save DaveyJake/640843517137e7b2f8abb0fab3f79032 to your computer and use it in GitHub Desktop.
Save DaveyJake/640843517137e7b2f8abb0fab3f79032 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Kitchen Sink
Raw
kitchen-sink.html
<!DOCTYPE html>
<html lang="en" dir="ltr" class="no-js" data-scope="kitchen-sink" translate="yes">
<head>
<!--
HTML Kitchen‑Sink Template
— Includes every mainstream HTML element at least once, with representative attributes.
— Focuses on modern, standards‑based attributes that work in current evergreen browsers.
— Not literally every possible attribute/event/ARIA token is shown (that set is enormous),
but common/important ones are demonstrated. Use comments as a guide to add more if needed.
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Kitchen‑sink HTML template using most elements and many attributes." />
<meta name="theme-color" content="#0ea5e9" />
<meta name="color-scheme" content="light dark" />
<meta name="referrer" content="strict-origin-when-cross-origin" />
<meta name="robots" content="index,follow" />
<meta name="generator" content="ChatGPT" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Open Graph / Twitter examples (non‑HTML standard but common practice) -->
<meta property="og:title" content="HTML Kitchen‑Sink" />
<meta property="og:description" content="Everyday elements + attributes in one file." />
<meta property="og:type" content="website" />
<!-- Base URL impacts all relative hyperlinks -->
<base href="/" target="_self" />
<!-- Stylesheets & resource hints -->
<link rel="stylesheet" href="/assets/styles.css" as="style" fetchpriority="high" />
<link rel="preconnect" href="https://example.cdn" />
<link rel="dns-prefetch" href="//example.cdn" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials" />
<link rel="modulepreload" href="/app.mjs" crossorigin />
<title>HTML Kitchen Sink</title>
<style>
:root {
--brand: #0ea5e9;
--fg: #222;
--bg: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--fg: #e5e7eb;
--bg: #0b1020;
}
}
html,
body {
height: 100%;
}
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
margin: 0;
color: var(--fg);
background: var(--bg);
}
header,
nav,
main,
aside,
footer {
padding: 1rem;
}
header,
footer {
background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.grid {
display: grid;
grid-template-columns: 1fr 300px;
gap: 1rem;
}
figure {
margin: 1rem 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #5553;
padding: .5rem;
text-align: left;
}
code,
kbd,
samp {
background: #0002;
padding: .1rem .25rem;
border-radius: .25rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
hr {
margin: 2.5rem 0;
}
</style>
<!-- Template & script examples -->
<template id="card-template">
<article class="card" data-kind="templated">
<h3>Template Card <small>(from &lt;template&gt;)</small></h3>
<p>This element was cloned at runtime.</p>
</article>
</template>
<!-- module + classic script; integrity/referrerpolicy shown; blocking="render" example -->
<script type="module" src="/app.mjs" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script nomodule defer src="/legacy.js" integrity="sha384-abc123" referrerpolicy="origin-when-cross-origin" blocking="render"></script>
<noscript>
<style>
.requires-js {
display: none !important;
}
</style>
</noscript>
</head>
<body id="top" class="home" data-page-kind="kitchen" part="body" onload="console.log('loaded')">
<a href="#main" class="sr-only" id="skip">Skip to content</a>
<header role="banner" tabindex="0" aria-label="Site header">
<hgroup>
<h1 title="Main Title">HTML <abbr title="Kitchen Sink">KS</abbr> Template</h1>
<p><small>Demonstrates <strong>elements</strong> and <em>attributes</em>.</small></p>
</hgroup>
<address id="contact" lang="en-US">
Contact: <a href="mailto:[email protected]" rel="author noopener" target="_blank">[email protected]</a>
</address>
<nav aria-label="Primary" popover>
<ul>
<li><a href="#text">Text</a></li>
<li><a href="#media" referrerpolicy="no-referrer">Media</a></li>
<li><a href="#forms" download>Forms (dl)</a></li>
<li><a href="#tables" hreflang="en">Tables</a></li>
<li><a href="#semantics" ping="/click-log">Semantics</a></li>
</ul>
</nav>
<button type="button" id="open-nav" popovertarget="nav-pop" popovertargetaction="show">Open Popover</button>
<div id="nav-pop" popover="auto" aria-live="polite">
<p>This is a <code>popover</code>. Click outside or use ESC to close.</p>
<button type="button" popovertarget="nav-pop" popovertargetaction="hide">Close</button>
</div>
</header>
<div class="grid">
<main id="main" role="main">
<article id="text" aria-labelledby="text-h2">
<header>
<h2 id="text-h2">Text semantics</h2>
</header>
<section>
<p>Inline text: <b>bold</b>, <strong>strong</strong>, <i>italic</i>, <em>emphasis</em>, <mark>mark</mark>, <s>no longer accurate</s>, <u>annotation</u>, <small>fine print</small>, H<sub>2</sub>O, E = mc<sup>2</sup>, <cite>Citation</cite>, <dfn id="def-api">API</dfn>, <abbr title="World Health Organization">WHO</abbr>, bidi: <bdi>User‑42</bdi>, override: <bdo dir="rtl">abc</bdo>, <time datetime="2025-08-21">today</time>, <data value="42">forty‑two</data>, <wbr> soft<wbr>word<wbr>breaks.</p>
<p>Code & friends: <code>&lt;div&gt;</code>, <kbd>Ctrl</kbd>+<kbd>S</kbd>, <samp>output</samp>, <var>x</var>.</p>
<p>Quotes: <q cite="https://example.com/quote">Inline quote</q> and block:</p>
<blockquote cite="https://example.com/source">
<p>Block quotation text…</p>
</blockquote>
<p>Edits: <ins datetime="2025-01-01" cite="/changelog#1">inserted</ins> / <del datetime="2024-12-31" cite="/changelog#0">deleted</del>.</p>
<pre>
&lt;pre&gt; keeps whitespace
and shows code blocks.
</pre>
</section>
<section id="lists">
<h3>Lists</h3>
<ul>
<li>Unordered item</li>
<li>Another item</li>
</ul>
<ol start="3" reversed type="1">
<li value="3">Ordered item</li>
<li>Next</li>
</ol>
<dl>
<dt>Term</dt>
<dd>Description one</dd>
<dt>Another term</dt>
<dd>Description two</dd>
</dl>
</section>
<section id="semantics" aria-label="Grouping">
<h3>Grouping/Sectioning</h3>
<div id="div-example" class="box" title="div with globals" draggable="true" contenteditable="true" spellcheck="true" inert>
<p>This <code>div</code> demonstrates global attributes (id, class, title, draggable, contenteditable, spellcheck, inert, data-*, aria-*).</p>
</div>
<aside role="complementary" aria-labelledby="aside-h4">
<h4 id="aside-h4">Aside</h4>
<p>Supporting content.</p>
</aside>
<section id="figure-image">
<h4>Figure</h4>
<figure>
<img id="logo" alt="Transparent pixel" width="32" height="32" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" decoding="async" loading="lazy" referrerpolicy="no-referrer" fetchpriority="low">
<figcaption>1×1 GIF using <code>&lt;img&gt;</code> attributes (<code>alt</code>, <code>width/height</code>, <code>decoding</code>, <code>loading</code>, <code>referrerpolicy</code>, <code>fetchpriority</code>).</figcaption>
</figure>
</section>
<section id="picture-source">
<h4>Picture / Source</h4>
<picture>
<source type="image/avif" srcset="/img/sample.avif 1x, /img/[email protected] 2x" media="(min-width: 600px)">
<source type="image/webp" srcset="/img/sample.webp 1x, /img/[email protected] 2x">
<img src="/img/sample.jpg" alt="Responsive example" sizes="(min-width: 600px) 600px, 100vw" srcset="/img/sample.jpg 1x, /img/[email protected] 2x" width="600" height="400">
</picture>
</section>
<section id="map-area">
<h4>Map / Area</h4>
<img src="/img/planet.jpg" alt="Planet map" usemap="#planet-map" width="320" height="160">
<map name="planet-map" id="planet-map">
<area shape="rect" coords="0,0,160,160" href="#north" alt="North" target="_self">
<area shape="circle" coords="240,80,40" href="#south" alt="South" rel="noopener">
</map>
</section>
<section id="ruby-rt-rp">
<h4>Ruby / RT / RP</h4>
<p>
<ruby>漢<rt>kan</rt>
<rp>(</rp>
<rt>ji</rt>
<rp>)</rp>
</ruby>
</p>
</section>
</section>
</article>
<hr />
<article id="media" aria-labelledby="media-h2">
<header>
<h2 id="media-h2">Embedded & Media</h2>
</header>
<section>
<h3>Audio / Video / Track</h3>
<audio id="audio-1" controls preload="metadata" crossorigin="anonymous">
<source src="/media/audio.ogg" type="audio/ogg">
<track kind="captions" srclang="en" label="English" default>
</audio>
<video id="video-1" controls width="480" height="270" poster="/media/poster.jpg" preload="metadata" playsinline muted>
<source src="/media/video.mp4" type="video/mp4">
<track kind="subtitles" srclang="en" label="English">
</video>
</section>
<section>
<h3>Iframe</h3>
<iframe id="frame" src="about:blank" title="Blank frame" loading="lazy" sandbox="allow-scripts allow-same-origin" referrerpolicy="no-referrer" allow="fullscreen; geolocation; microphone" width="300" height="150"></iframe>
</section>
<section>
<h3>Canvas</h3>
<canvas id="cnv" width="150" height="80">Your browser does not support canvas.</canvas>
</section>
<section id="object-embed-param">
<h3>Object / Embed / Param</h3>
<object id="obj" data="/media/sample.svg" type="image/svg+xml" name="sample-object">
<param name="quality" value="high">
Fallback content if object fails.
</object>
<embed src="/media/sample.svg" type="image/svg+xml" width="120" height="60" />
</section>
<section id="svg-inline">
<h3>SVG (inline)</h3>
<svg width="120" height="40" viewBox="0 0 120 40" role="img" aria-labelledby="svgTitle svgDesc">
<title id="svgTitle">Inline SVG</title>
<desc id="svgDesc">Simple rectangle</desc>
<rect x="1" y="1" width="118" height="38" rx="6" ry="6" stroke="currentColor" fill="none" />
<text x="60" y="25" text-anchor="middle" font-size="12">SVG</text>
</svg>
</section>
<section id="mathml">
<h3>MathML</h3>
<math display="block" aria-label="Quadratic formula">
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</math>
</section>
</article>
<hr />
<article id="forms" aria-labelledby="forms-h2">
<header>
<h2 id="forms-h2">Forms & interactive</h2>
</header>
<form id="demo-form" action="/submit" method="post" enctype="multipart/form-data" target="_self" accept-charset="utf-8" name="demo" autocomplete="on" rel="opener" novalidate>
<fieldset name="user" formnovalidate>
<legend>Inputs</legend>
<label for="text">Text</label>
<input id="text" name="text" type="text" placeholder="Your name" minlength="2" maxlength="50" size="30" autocomplete="name" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" inputmode="email" autocomplete="email" enterkeyhint="send" spellcheck="false" required>
<label for="pwd">Password</label>
<input id="pwd" name="pwd" type="password" pattern=".{8,}" title="8+ chars" autocomplete="new-password" required>
<label for="num">Number</label>
<input id="num" name="num" type="number" min="0" max="10" step="2" value="4">
<label for="rng">Range</label>
<input id="rng" name="rng" type="range" min="0" max="100" step="10" value="50">
<label for="url">URL</label>
<input id="url" name="url" type="url" placeholder="https://example.com" autocapitalize="off">
<label for="tel">Telephone</label>
<input id="tel" name="tel" type="tel" inputmode="tel" autocomplete="tel">
<label for="search">Search</label>
<input id="search" name="search" type="search" list="q-suggestions">
<datalist id="q-suggestions">
<option value="HTML"></option>
<option value="CSS"></option>
<option value="JavaScript"></option>
</datalist>
<label for="clr">Color</label>
<input id="clr" name="clr" type="color" value="#0ea5e9">
<label for="date">Date</label>
<input id="date" name="date" type="date" min="2020-01-01" max="2030-12-31">
<label for="time">Time</label>
<input id="time" name="time" type="time" step="60">
<label for="dt">Local date & time</label>
<input id="dt" name="dt" type="datetime-local">
<label for="week">Week</label>
<input id="week" name="week" type="week">
<label for="month">Month</label>
<input id="month" name="month" type="month">
<label for="file">File</label>
<input id="file" name="file" type="file" accept="image/*" capture="environment" multiple>
<label><input type="checkbox" name="subscribe" checked> Subscribe</label>
<label><input type="radio" name="plan" value="basic" checked> Basic</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label for="sel">Select</label>
<select id="sel" name="sel" multiple size="3" required>
<optgroup label="Group A">
<option value="a1" selected>A1</option>
<option value="a2">A2</option>
</optgroup>
<optgroup label="Group B" disabled>
<option value="b1">B1</option>
</optgroup>
</select>
<label for="ta">Textarea</label>
<textarea id="ta" name="ta" rows="3" cols="30" placeholder="Write here…" wrap="soft"></textarea>
<output id="out" name="out" for="num rng">54</output>
<meter id="mtr" min="0" low="25" high="75" max="100" optimum="80" value="54">54%</meter>
<progress id="prg" value="54" max="100">54%</progress>
</fieldset>
<fieldset name="actions" disabled>
<legend>Buttons</legend>
<button type="submit" formaction="/submit" formenctype="multipart/form-data" formmethod="post" formnovalidate formtarget="_self">Submit</button>
<button type="reset">Reset</button>
<button type="button" id="btn-pop" popovertarget="tip-1" popovertargetaction="toggle">Toggle Tip</button>
<div id="tip-1" popover>Form tip popover</div>
</fieldset>
</form>
<details id="faq-1" open>
<summary>What is this?</summary>
<p>A demo of <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code>.</p>
</details>
<dialog id="dlg" open>
<p>This is a <code>&lt;dialog open&gt;</code>.</p>
<form method="dialog"><button>Close</button></form>
</dialog>
</article>
<hr />
<article id="tables" aria-labelledby="tables-h2">
<header>
<h2 id="tables-h2">Tables</h2>
</header>
<table id="demo-table" role="table" aria-describedby="tbl-desc">
<caption id="tbl-desc">Example data table</caption>
<colgroup>
<col span="1">
<col span="1">
</colgroup>
<thead>
<tr>
<th scope="col" id="h1">Name</th>
<th scope="col" id="h2">Value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" headers="h1">Alpha</th>
<td headers="h2">1</td>
</tr>
<tr>
<th scope="row">Beta</th>
<td colspan="1" rowspan="1">2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer</td>
</tr>
</tfoot>
</table>
</article>
<hr />
<article id="links" aria-labelledby="links-h2">
<header>
<h2 id="links-h2">Links (&lt;a&gt;)</h2>
</header>
<p>
<a href="/relative" rel="next" target="_self">Relative</a> ·
<a href="https://example.com" rel="noopener external" target="_blank">External (_blank)</a> ·
<a href="/file.txt" download="file.txt">Download</a>
</p>
</article>
<hr />
<article id="scripting" aria-labelledby="scripting-h2">
<header>
<h2 id="scripting-h2">Scripting & template</h2>
</header>
<div id="templated-target" class="requires-js" data-init="false"></div>
</article>
</main>
<aside aria-label="Sidebar widgets">
<section>
<h3>Custom data / ARIA (globals)</h3>
<p id="aria-demo" aria-live="polite" aria-atomic="true" data-note="hello" tabindex="0">This paragraph has <code>aria-*</code> and <code>data-*</code> attributes.</p>
</section>
<section>
<h3>Noscript</h3>
<noscript>
<p>JavaScript is disabled.</p>
</noscript>
</section>
</aside>
</div>
<footer role="contentinfo">
<p>&copy; <time datetime="2025">2025</time> Example Co.</p>
</footer>
<script>
// Populate from <template>
(function(undefined) {
const tpl = document.getElementById('card-template');
const tgt = document.getElementById('templated-target');
if (tpl && 'content' in tpl && tgt) {
const clone = tpl.content.cloneNode(true);
tgt.appendChild(clone);
tgt.dataset.init = 'true';
}
// Canvas demo
const cnv = document.getElementById('cnv');
if (cnv && cnv.getContext) {
const ctx = cnv.getContext('2d');
ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--brand');
ctx.fillRect(10, 10, 130, 60);
}
})();
</script>
<!--
Elements covered (non‑exhaustive list):
a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button,
canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt,
em, embed, fieldset, figcaption, figure, footer, form, h1‑h6, head, header, hgroup, hr, html, i, iframe,
img, input, ins, kbd, label, legend, li, link, main, map, mark, math, menu (deprecated, intentionally omitted),
meta, meter, nav, noscript, object, ol, optgroup, option, output, p, picture, pre, progress, q, rp, rt,
ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table,
tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, svg.
Global attributes shown across elements: id, class, style, title, lang, dir, translate, hidden, inert,
contenteditable, draggable, spellcheck, inputmode, enterkeyhint, tabindex, accesskey, part, data-*, aria-*, popover,
popovertarget, popovertargetaction.
-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment