HTML Tags You Can Use on GitHub

html_tags_you_can_use_on_github.md

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: File⇒New 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>

Subscripts_sub and superscripts^sup with <sub> and <sup>.

Footnotes

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

<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 & and < and > get changed into < and >. You can also enter HTML entities like © and £ 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 . See the Emoji Cheat Sheet for the full list of emoji :shortcode:'s that you can use.

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

References

• GitHub's HTML sanitization code
• A GitHub issue about this

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. ↩︎

Tip: Use https://dillinger.io/ to test comments and see how they work.

FYI: GitHub markdown fields learnt footnotes in Sept 2021, see 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.

Here is a simple footnote¹. With some additional text after it.

Footnotes

1. My reference. ↩

Don't suppose Github allows the use of span tags? ☹️

For what is worth, https://github.com/gjtorikian/html-pipeline/blob/main/lib/html_pipeline/sanitization_filter.rb is the new link. So... @SirMoogle span is allowed, but given that you can use style=, what do you even use a span for?

Oh wait. GitHub isn't using that gem any more! Where's the new thing located?

Sigh, just sent them https://github.com/orgs/community/discussions/58528.

thanks, I'm finding this

<i style="margin: 5px; font-size: 65px" class="devicon-react-original-wordmark colored"></i>

use the svg image from https://github.com/devicons/devicon

<img height="65" src="https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original-wordmark.svg">

limitation: no margin

how to add today's date to github?

that makes little sense...

you can use a badge from https://github.com/badges/shields

there is relative-date

timestamp 1540814400 was
timestamp -62167219200 was

you could ask them to add a current-date badge, accepting a format string like %F and a timezone
a current-time badge would not work because of caching

stupid workaround: dynamic-json-badge

<video/> tags are also allowed now, as long as they are from a github source.

For reference:

Screen.Recording.2023-11-26.at.1.32.19.PM.mov

\<pre\> can be used for preformatted text <span> can be used to set text color

<pre>
<span color="red">red</span>
  <span color="orange">orange</span>
<span color="yellow">yellow</span>
  <span color="lime">lime</span>
<span color="green">green</span>
  <span color="turquoise">turquoise</span>
  <span color="cyan">cyan</span>
<span color="blue">blue</span>
  <span color="purple">purple</span>
  <span color="magenta">magenta</span>
<span color="red">red</span>
</pre>

demo:

red
orange
yellow
lime
green
turquoise
cyan
blue
purple
magenta
red
see also my https://github.com/milahu/random/blob/master/markdown/test-github-markdown-renderer.md there are some differences between blob api and comments api, for exampe line endings (softbreak vs hardbreak)

I don't see colors :(

So I guess this is now disabled by GitHub?? I really need that for manually highlight syntax

Long gone, a different closed-source sanitizer is used now. Maybe you can get some colored text via SVG <img>.

Long gone, a different closed-source sanitizer is used now. Maybe you can get some colored text via SVG <img>.

That's unfortunate. I guess I move to GitLab

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

Nice but it would be good if footnotes were rendered where they are placed in the markdown, instead of assuming the bottom of the document. Often there is a need to footnote a section without scrolling an unknown number of pages to find the footnote.