# HackMD 書本模式 HTML 測試
By 毛哥EM 文章：如何用 CSS 裝飾 HackMD 書本模式側邊欄 https://emtech.cc/p/hackmd
## Document / Metadata
* [<html>html element</html>](https://placehold.co/800x600?text=HackMD+Book+Mode+HTML+Test+By+EM)
* [<head>head element</head>](https://example.com)
* [<body>body element</body>](https://example.com)
* [<title>title element</title>](https://example.com)
* [<base href="https://example.com/">](https://example.com)
* [<link rel="stylesheet" href="https://example.com/style.css">](https://example.com)
* [<meta charset="utf-8">](https://example.com)
* [<style>.html-test-style { color: red; }</style>](https://example.com)
* [<script>console.log("script test");</script>](https://example.com)
* [<noscript>noscript fallback</noscript>](https://example.com)
## Sectioning / Layout
* [<header>header element</header>](https://example.com)
* [<nav>nav element</nav>](https://example.com)
* [<main>main element</main>](https://example.com)
* [<section>section element</section>](https://example.com)
* [<article>article element</article>](https://example.com)
* [<aside>aside element</aside>](https://example.com)
* [<footer>footer element</footer>](https://example.com)
* [<address>address element</address>](https://example.com)
* [<hgroup><h1>hgroup h1</h1><p>hgroup subtitle</p></hgroup>](https://example.com)
* [<search>search element</search>](https://example.com)
* [<h1>h1 element</h1>](https://example.com)
* [<h2>h2 element</h2>](https://example.com)
* [<h3>h3 element</h3>](https://example.com)
* [<h4>h4 element</h4>](https://example.com)
* [<h5>h5 element</h5>](https://example.com)
* [<h6>h6 element</h6>](https://example.com)
## Text Content
* [<p>p element</p>](https://example.com)
* [<hr>](https://example.com)
* [<pre>pre element</pre>](https://example.com)
* [<blockquote>blockquote element</blockquote>](https://example.com)
* [<ol><li>ol li element</li></ol>](https://example.com)
* [<ul><li>ul li element</li></ul>](https://example.com)
* [<menu><li>menu li element</li></menu>](https://example.com)
* [<dl><dt>dt element</dt><dd>dd element</dd></dl>](https://example.com)
* [<figure><figcaption>figcaption element</figcaption>figure content</figure>](https://example.com)
* [<div>div element</div>](https://example.com)
## Inline Text Semantics
* [<a href="https://example.com">a element</a>](https://example.com)
* [<abbr title="HyperText Markup Language">abbr element</abbr>](https://example.com)
* [<b>b element</b>](https://example.com)
* [<bdi>bdi element</bdi>](https://example.com)
* [<bdo dir="rtl">bdo element</bdo>](https://example.com)
* [<br>](https://example.com)
* [<cite>cite element</cite>](https://example.com)
* [<code>code element</code>](https://example.com)
* [<data value="123">data element</data>](https://example.com)
* [<dfn>dfn element</dfn>](https://example.com)
* [<em>em element</em>](https://example.com)
* [<i>i element</i>](https://example.com)
* [<kbd>kbd element</kbd>](https://example.com)
* [<mark>mark element</mark>](https://example.com)
* [<q>q element</q>](https://example.com)
* [<ruby>漢<rp>(</rp><rt>han</rt><rp>)</rp></ruby>](https://example.com)
* [<s>s element</s>](https://example.com)
* [<samp>samp element</samp>](https://example.com)
* [<small>small element</small>](https://example.com)
* [<span>span element</span>](https://example.com)
* [<strong>strong element</strong>](https://example.com)
* [<sub>sub element</sub>](https://example.com)
* [<sup>sup element</sup>](https://example.com)
* [<time datetime="2026-04-24">time element</time>](https://example.com)
* [<u>u element</u>](https://example.com)
* [<var>var element</var>](https://example.com)
* [<wbr>](https://example.com)
## Edits
* [<ins>ins element</ins>](https://example.com)
* [<del>del element</del>](https://example.com)
## Embedded Content
* [<img src="https://placehold.co/120x60" alt="img element">](https://example.com)
* [<iframe src="https://example.com" width="300" height="120">iframe fallback</iframe>](https://example.com)
* [<embed src="https://example.com" width="300" height="120">](https://example.com)
* [<object data="https://example.com" width="300" height="120">object fallback</object>](https://example.com)
* [<picture><source srcset="https://placehold.co/120x60" media="(min-width: 1px)"><img src="https://placehold.co/120x60" alt="picture element"></picture>](https://example.com)
* [<portal src="https://example.com">portal element</portal>](https://example.com)
## Media
* [<audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">audio fallback</audio>](https://example.com)
* [<video controls width="240"><source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"><track kind="captions" src="captions.vtt" srclang="en" label="English">video fallback</video>](https://example.com)
## Image Map
* [<img src="https://placehold.co/200x100" alt="map test" usemap="#test-map">](https://example.com)
* [<map name="test-map"><area shape="rect" coords="0,0,100,100" href="https://example.com" alt="area element"></map>](https://example.com)
## SVG / MathML
* [<svg width="120" height="60" viewBox="0 0 120 60"><circle cx="30" cy="30" r="20"></circle><text x="60" y="35">svg</text></svg>](https://example.com)
* [<math><mi>x</mi><mo>=</mo><mn>1</mn></math>](https://example.com)
## Tables
* [<table border="1"><caption>caption element</caption><colgroup><col><col></colgroup><thead><tr><th>th element</th><th>th element</th></tr></thead><tbody><tr><td>td element</td><td>td element</td></tr></tbody><tfoot><tr><td>tfoot td</td><td>tfoot td</td></tr></tfoot></table>](https://example.com)
## Forms
* [<form action="https://example.com" method="get"><fieldset><legend>legend element</legend><label for="input-test">label element</label><input id="input-test" name="input-test" placeholder="input element"><button type="button">button element</button><select name="select-test"><optgroup label="optgroup element"><option>option element</option></optgroup></select><textarea name="textarea-test">textarea element</textarea><datalist id="datalist-test"><option value="datalist option"></datalist><input list="datalist-test" placeholder="input with datalist"><output>output element</output><progress value="40" max="100">progress element</progress><meter value="0.6">meter element</meter></fieldset></form>](https://example.com)
* [<input>](https://example.com)
* [<input type=radio> Radio](https://example.com)
* [<input type=checkbox> Checkbox](https://example.com)
## Interactive
* [<details><summary>summary element</summary>details element</details>](https://example.com)
* [<dialog open>dialog element</dialog>](https://example.com)
## Scripting / Web Components
* [<canvas width="120" height="60">canvas fallback</canvas>](https://example.com)
* [<template>template element content</template>](https://example.com)
* [<slot>slot fallback</slot>](https://example.com)
## Obsolete / Deprecated / Non-standard Test
* [<acronym title="test">acronym element</acronym>](https://example.com)
* [<applet>applet element</applet>](https://example.com)
* [<bgsound src="test.mid">](https://example.com)
* [<big>big element</big>](https://example.com)
* [<blink>blink element</blink>](https://example.com)
* [<center>center element</center>](https://example.com)
* [<dir><li>dir li element</li></dir>](https://example.com)
* [<font color="red">font element</font>](https://example.com)
* [<frame src="https://example.com">](https://example.com)
* [<frameset><frame src="https://example.com"></frameset>](https://example.com)
* [<image src="https://placehold.co/120x60" alt="image element">](https://example.com)
* [<marquee>marquee element</marquee>](https://example.com)
* [<menuitem>menuitem element</menuitem>](https://example.com)
* [<nobr>nobr element</nobr>](https://example.com)
* [<noembed>noembed element</noembed>](https://example.com)
* [<noframes>noframes element</noframes>](https://example.com)
* [<param name="test" value="test">](https://example.com)
* [<plaintext>plaintext element test](https://example.com)
* [<rb>rb element</rb>](https://example.com)
* [<rtc>rtc element</rtc>](https://example.com)
* [<strike>strike element</strike>](https://example.com)
* [<tt>tt element</tt>](https://example.com)
* [<xmp><b>xmp element</b></xmp>](https://example.com)
{"GA":"UA-34467841-15","description":"#summary > ul:last-of-type a::after {content: \"\";display: block;width: 2px;background-image: var(–a);}","title":"HackMD HTML Element Support Test","contributors":"[{\"id\":\"8f132721-c3d8-4f7b-ad18-088df543b7bc\",\"add\":13122,\"del\":17857,\"latestUpdatedAt\":1777010507189}]"}