Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML Tags You Can Use on GitHub

HTML Tags You Can Use on GitHub

Wherever HTML is rendered on GitHub (gists, README files in repos, comments on issues and pull requests, ...) you can use any of the HTML elements that GitHub Flavored Markdown (GFM) provides syntactic sugar for. You can either use the syntactic sugar that GFM (or other GitHub-supported markup language you're using) provides or, since Markdown can contain raw HTML, you can enter the HTML tags manually.

But GitHub also allows you to use a few HTML elements beyond what Markdown provides by entering the tags manually, and some of them are styled with CSS. Most raw HTML tags get stripped before rendering the HTML. Those tags that can be generated by GFM syntactic sugar, plus a few more, are whitelisted. These aren't documented anywhere that I can find. Here's what I've discovered so far:

<details> and <summary>

A <details> element with a <summary> inside it can be used to create a disclosure widget, and you can add the open attribute to the <details> element if you want it to already be open on page load:

This is the summary

And here are the details:

  1. Cash on hand: $500.00
  2. Current invoice: $75.30
  3. Due date: 5/6/19

<kbd> and <samp>

Sample or quoted output from a computer program using <samp>: sample output.

User input with <kbd>: help mycommand.

Tip: multiple keystrokes as part of a single input like Ctrl+c should be represent with nested <kbd>'s. The Ctrl is wrapped in its own <kbd>, the + doesn't get its own <kbd>, then the c gets its own <kbd>: <kbd><kbd>Ctrl</kbd>+<kbd>c</kbd>. Results in: Ctrl+c

You can also nest <samp>'s inside <kbd>'s to represent text presented by the system which is then used for some user input. With GitHub's CSS these look the same as <kbd>'s nested inside <kbd>'s. For example: the OK button (<kbd><samp>OK</samp></kbd>).

If clicking multiple buttons (or menu items, etc) as part of a single input, you need <kbd>'s nested inside <kbd>'s to represent the multiple parts to a single input, same as with multiple keystrokes. But then you also nest <samp>'s inside the leaf <kbd>'s to represent that it's clicking on things presented by the program rather than just keystrokes. Example: FileNew Document (<kbd><kbd><samp>File</samp></kbd>⇒<kbd><samp>New Document</samp></kbd></kbd>).

A <kbd> inside a <samp> represents output from a computer program, but when the program was echoing back some previous input from the user! Not styled any differently by GitHub: git add my-new-file.cpp. Another example of this from MDN is showing the output of a terminal session as a <samp> inside a <pre>, and with the user-entered parts wrapped in <kbd>'s inside the <samp>. This ends up styled a little oddly on GitHub but it does make sense (also note the use of Unicode █ as the cursor):

mike@interwebz:~$ md5 -s "Hello world"
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

mike@interwebz:~$ █

<sub> and <sup>

Subscriptssub and superscriptssup with <sub> and <sup>.

Footnotes

You can use <sup> to create linked footnotes.1

<ins> and <del>

Inserted text with <ins>: inserted and deleted text with <del>: deleted. These can both have the cite attribute.

<var>

Variables with <var>: myVariable.

<q>

Inline quotes with <q> get curly quotation marks around them: inline quote. You can also use the cite attribute on them. You can use cite on a <blockquote> too, if you enter the <blockquote> manually.

Definition lists (<dl>, <dt> and <dd>)

Publisher
CNN and others
Community admin
Admins of Climate Feedback, Public Editors, etc
Hypothesis admin
Hypothesis developer

<ruby>, <rt> and <rp>

<ruby>, <rt> and <rp> can be used for showing pronunciation of East Asian characters. Example:

(Kan)(ji)

<div>

<div> is also allowed, along with the itemscope and itemtype attributes for defining microdata:

Avatar
Director: James Cameron (born August 16, 1954) Science fiction Trailer

HTML Entities

An & gets changed into &amp; and < and > get changed into &lt; and &gt;. You can also enter HTML entities like &copy; and &pound; directly: ©, £, §, ¶, ←, →, .

Unicode Characters

You can paste unicode characters directly and they'll be rendered. Here's a few: ⌘ ⌥ 🍔 🤷 📚 🎒 👓 🐅.

Emoji

You can type emoji :shortcode:'s like :shipit: into the Markdown source and get an emoji like :shipit:. See the Emoji Cheat Sheet for the full list of emoji :shortcode:'s that you can use.

:bowtie: 😄 😆 😊 😃 ☺️ 😏 😍 😘 😚 😳 😌 😆 😁 😉 😜 😝 😀 😗 😙 😛 😴 😟 😦 😧 😮 😬 😕 😯 😑 😒 😅 😓 😥 😩 😔 😞 😖 😨 😰 😣 😢 😭 😂 😲 😱 :neckbeard: 😫 😠 😡 😤 😪 😋 😷 😎 😵 👿 😈 😐 😶 😇 👽 💛 💙 💜 ❤️ 💚 💔 💓 💗 💕 💞 💘 💖 🌟 💫 💥 💥 💢 💤 💨 💦 🎶 🎵 🔥 💩 💩 💩 👍 👍 👎 👎 👌 👊 👊 ✌️ 👋 👐 ☝️ 👇 👈 👉 🙌 🙏 👆 👏 💪 🤘 🖕 🏃 🏃 👫 👪 👬 👭 💃 👯 🙆‍♀️ 🙅 💁 🙋 👰‍♀️ 🙇 💑 💆 💇 💅 👦 👧 👩 👨 👶 👵 👴 👲 👳‍♂️ 👷 👮 👼 👸 😺 😸 😻 😽 😼 🙀 😿 😹 😾 👹 👺 🙈 🙉 🙊 💂‍♂️ 💀 🐾 👄 💋 💧 👂 👀 👃 👅 💌 👤 👥 💬 💭 :feelsgood: :finnadie: :goberserk: :godmode: :hurtrealbad: :rage1: :rage2: :rage3: :rage4: :suspect: :trollface: ☀️ ☁️ ❄️ 🌀 🌁 🌊 🐱 🐶 🐭 🐹 🐰 🐺 🐸 🐯 🐨 🐻 🐷 🐽 🐮 🐗 🐵 🐒 🐴 🐎 🐫 🐑 🐘 🐼 🐍 🐦 🐤 🐥 🐣 🐔 🐧 🐢 🐛 🐝 🐜 🪲 🐌 🐙 🐠 🐟 🐳 🐋 🐬 🐄 🐏 🐀 🐃 🐅 🐇 🐉 🐐 🐓 🐕 🐖 🐁 🐂 🐲 🐡 🐊 🐪 🐆 🐈 🐩 🐾 💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄 🌵 🌴 🌲 🌳 🌰 🌱 🌼 🌾 🐚 🌐 🌞 🌝 🌚 🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘 🌜 🌛 🌙 🌍 🌎 🌏 🌋 🌌 :octocat: 🎍 💝 🎎 🎒 🎓 🎏 🎆 🎇 🎐 🎑 🎃 👻 🎅 🎄 🎁 🔔 🔕 🎋 🎉 🎊 🎈 🔮 💿 📀 💾 📷 📹 🎥 💻 📺 📱 ☎️ ☎️ 📞 📟 📠 💽 📼 🔉 🔈 🔇 📢 📣 📻 📡 🔍 🔎 🔓 🔒 🔏 🔐 🔑 💡 🔦 🔆 🔅 🔌 🔋 📲 📧 📫 📮 🛀 🛁 🚿 🚽 🔧 🔩 🔨 💺 💰 💴 💵 💷 💶 💳 💸 📧 📥 📤 ✉️ 📨 📯 📪 📬 📭 📦 🚪 🚬 💣 🔫 🔪 💊 💉 📄 📃 📑 📊 📈 📉 📜 📋 📆 📅 📇 📁 📂 ✂️ 📌 📎 ✒️ ✏️ 📏 📐 📕 📗 📘 📙 📓 📔 📒 📚 🔖 📛 🔬 🔭 📰 🏈 🏀 🎾 🎱 🏉 🎳 🚵 🚴 🏇 🏂 🏊 🏄 🎿 ♠️ ♥️ ♣️ ♦️ 💎 💍 🏆 🎼 🎹 🎻 👾 🎮 🃏 🎴 🎲 🎯 🀄 🎬 📝 📝 📖 🎨 🎤 🎧 🎺 🎷 🎸 👞 👡 👠 💄 👢 👕 👕 👔 👚 👗 🎽 👖 👘 👙 🎀 🎩 👑 👒 👞 🌂 💼 👜 👝 👛 👓 🎣 🍵 🍶 🍼 🍺 🍻 🍸 🍹 🍷 🍴 🍕 🍔 🍟 🍗 🍖 🍝 🍛 🍤 🍱 🍣 🍥 🍙 🍘 🍚 🍜 🍲 🍢 🍡 🥚 🍞 🍩 🍮 🍦 🍨 🍧 🎂 🍰 🍪 🍫 🍬 🍭 🍯 🍎 🍏 🍊 🍋 🍒 🍇 🍉 🍓 🍑 🍈 🍌 🍐 🍍 🍠 🍆 🍅 🌽 🏠 🏡 🏫 🏢 🏣 🏥 🏦 🏪 🏩 🏨 💒 🏬 🏤 🌇 🌆 🏯 🏰 🏭 🗼 🗾 🗻 🌄 🌅 🌠 🗽 🌉 🎠 🌈 🎡 🎢 🚢 🚤 🚣 🚀 ✈️ 🚁 🚂 🚊 🚞 🚲 🚡 🚟 🚠 🚜 🚙 🚘 🚗 🚗 🚕 🚖 🚛 🚌 🚍 🚨 🚓 🚔 🚒 🚑 🚐 🚚 🚋 🚉 🚆 🚅 🚄 🚈 🚝 🚃 🚎 🎫 🚦 🚥 ⚠️ 🚧 🔰 🏧 🎰 🚏 💈 ♨️ 🏁 🎌 🏮 🗿 🎪 🎭 📍 🚩 🇯🇵 🇰🇷 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧 🇬🇧 🇩🇪 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🔢 0️⃣ #️⃣ 🔣 ◀️ ⬇️ ▶️ ⬅️ 🔠 🔡 🔤 ↙️ ↘️ ➡️ ⬆️ ↖️ ↗️ 🔽 ⤵️ ⤴️ ↩️ ↪️ ↔️ ↕️ 🔼 🔃 🔄 ℹ️ 🆗 🔀 🔁 🔂 🆕 🔝 🆙 🆒 🆓 🆖 🎦 🈁 📶 🈹 🈴 🈺 🈯 🈷️ 🈶 🈵 🈚 🈸 🈳 🈲 🈂️ 🚻 🚹 🚺 🚼 🚭 🅿️ 🚇 🛄 🉑 🚾 🚰 🚮 ㊙️ ㊗️ Ⓜ️ 🛂 🛅 🛃 🉐 🆑 🆘 🆔 🚫 🔞 📵 🚯 🚱 🚳 🚷 🚸 ✳️ ❇️ ✴️ 💟 🆚 📳 📴 💹 💱 🔯 🅰️ 🅱️ 🆎 🅾️ 💠 ♻️ 🔚 🔙 🔛 🔜 🕐 🕜 🕙 🕥 🕚 🕦 🕛 🕧 🕑 🕝 🕒 🕞 🕓 🕟 🕔 🕠 🕕 🕡 🕖 🕢 🕗 🕣 🕘 🕤 💲 ©️ ®️ ™️ ‼️ ⁉️ ✖️ 💮 💯 ✔️ ☑️ 🔘 🔗 〰️ 〽️ 🔱 ▪️ ▫️ ◼️ ◻️ 🔲 🔳 🔴 🔵 🔷 🔶 🔹 🔸 🔺 🔻 :shipit:

References

Footnotes

  1. Since you need an id attribute on both the footnote and on the footnote reference (to enable the footnote to contain a link back to the reference) I think they both need to be done in raw HTML. I don't think there's any Markdown syntax for this. See the source code of this file for how it's done. ↩︎

@GrpeApple

This comment has been minimized.

Copy link

@GrpeApple GrpeApple commented Apr 2, 2021

Thank you!!!

@SaschaMann

This comment has been minimized.

Copy link

@SaschaMann SaschaMann commented Oct 29, 2021

I know this is an old gist, but for anyone who still finds this:

I don't think there's any Markdown syntax for this. See the source code of this file for how it's done. ↩︎

Footnotes have recently been added via markdown syntax: https://github.blog/changelog/2021-09-30-footnotes-now-supported-in-markdown-fields/

Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment