This is a super nice set of functions that’s not obvious from itch’s own documentation.
itch.io's HTML basement
A downloadable html demo
Hypertext Markup Language, the programming language most web pages are written in. 'Hypertext' refers to links and 'Markup' means the text is marked with tags that tell web browsers how to format it. For instance, you can put
<i></i> tags around some text to italicise it, or
<a href="https://itch.io"></a> around some text or an image you wanna put a link in (in this case, to itch's main page). for more info on HTML, see this tutorial.
Some of itch's text editors (like the one used to write project pages) let you switch from the what-you-see-is-what-you-get (WYSIWYG) mode to the underlying HTML mode using the <> button in the top-left of the editor, which lets you add some features that don't have buttons in WYSIWYG. This page shows off a bunch of these features and their code. They're nothing game-changing, but some of them are pretty useful.
A few more things you should know
- Semantic Markup
- A way of writing markup tags that tells you how that text is used, not just displayed. Can help e.g. text-to-speech readers or other apps. Example:
<i>(italics) isn't semantic, while
<em>(emphasis) does the same thing but is semantic. Some tags just change how things display, some just add semantic meaning, and some do both.
- Some characters (e.g. < and >) have specific meanings in markup. They need to be 'escaped'—written as short codes—to display as text. You can do this yourself, use a tool (e.g. this escape/unescape tool), or type them in the WYSIWYG editor (which'll escape them for you).
What HTML doesn't itch let you use?
Whatever you save in the text editor seems to get sanitised by itch at some point for security. Almost anything interactive is out (e.g. buttons, forms, image maps). So are tags that could mess with the page's structure or function, like divisions or header tags. It also converts non-semantic tags to semantic ones. All the features below are confirmed to work, though.
These tags change the text in ways that're visually obvious. They can add new functions or change the way text looks. Some of them have semantic meaning, too. (click each title to expand/collapse)
All the drop-down entries on this page use the
<summary> tags (with a bit more styling).
<details> creates the drop-down box and
<summary> adds the title. You can style both the title and content as normal (and add images, videos, and embedded content inside the expanded area), though using images or paragraph styles in the summary doesn't work so well because itch doesn't let you fully style the summary. Here's what the code looks like:
<details> <summary>Here's the summary</summary> <p>Here's a paragraph of text in the drop-down area.</p> </details>
Which makes a drop-down area like this:
Here's the summary
Here's a paragraph of text in the drop-down area.
You can add horizontal lines using
<hr/> (though itch converts <hr/> to <hr>). This is used semantically to separate kinds of content on the page (e.g. you could put one between blurb and reviews).
You can shrink the width and change the position using style attributes. For example, the following code creates a center-aligned horizontal rule that's 75% of the width of the text column:
Normally, web browsers ignore whitespace (e.g. spaces, new lines) in HTML files, and only format the page using the HTML tags.
<pre> tags mark out text as pre-formatted, which means it keeps any whitespace you add in HTML (spaces are more reliable than tabs for moving stuff left or right). They also mono-space the text, so every character is the same width. This can be handy for code examples (in fact, itch's 'code' paragraph style is actually
<pre> tags) or custom text layout. Here's an example:
Buffalo Bill's defunct who used to ride a watersmooth-silver stallion and break onetwothreefourfive pigeonsjustlikethat Jesus he was a handsome man and what I want to know is how do you like your blueeyed boy Mister Death
Buffalo Bill's, by e e cummings
Sub- and superscript
<mark> tags let you highlight text. The default colour is yellow, but you can change the colour by adding
style="background-color:YOUR_COLOR" inside the first tag (replacing YOUR_COLOUR with a colour name or hex code). For instance, this code:
<mark style="background-color:coral">this text's marked with coral highlighting</mark>
Produces this effect: this text's marked with coral highlighting.
Definition lists let you pair terms with definitions. The whole list needs to be surrounded with
<dl> tags, and then you should alternate between terms written in
<dt> tags and definitions written in
<dd> tags. For example, this code:
<dl> <dt><strong>Term 1</strong></dt> <dd>This term means blah blah blah</dd> <dt><strong>Term 2</strong></dt> <dd>This term means yadda yadda yadda</dd> </dl>
Produces this list:
- Term 1
- This term means blah blah blah
- Term 2
- This term means yadda yadda yadda
Subtle and semantic changes
These tags have much subtler or more basic visual effects, or are purely semantic. (click each title to expand/collapse)
In-line code, sample, and keyboard input
<code> is for short snippets of in-line computer code, sample (
<samp>) is for program outputs, and keyboard input (
<kbd>) is for naming buttons on a keyboard, e.g. Ctrl + V. All three tags mono-space the text between, but they're semantically different.
<time> identifies a date/time as being a date/time for the benefit of computers.
itch has a specific block-quote text style that looks like this:
Here's a sample block-quote.
...but you can also do in-line quotes using
<q>. This adds left/right doublequote marks (different to regular doublequotes) to whatever text they wrap around. For example, this code:
<q>Here's a quote in quote tags.</q>
Produces this text:
Here's a quote in quote tags. Here's what that looks like at a larger size, so left/right marks are clearer:
Here's a quote in quote tags.
Abbreviations, citations, definitions, and variables
<var> are semantic markup for abbreviations, citations, definitions, and variables. They don't do these things by themselves, they just give computers info about the text between them (however,
<var> also italicise the text).
You can add
title="YOUR_EXPLANATION_HERE" inside the first tag to add a tooltip (textbox that appears when you hover over something) with an explanation. For example, the following code:
This sentence includes the abbreviation <abbr title="Powered by the Apocalypse">PbtA</abbr>, with an explanatory tooltip.
Makes this: This sentence includes the abbreviation PbtA, with an explanatory tooltip. You might wanna signify that there's a tooltip by adding emphasis or highlighting (I've often seen people add a dotted underline, but that doesn't seem to work in itch's text editor).
You can do more with HTML styling—this page has a few examples (like the highlighting colour or horizontal rule width). You can also embed certain types of content, e.g. the itch widget (available through the 'Interact' menu when you're looking at a project's dashboard) or even spotify playlists.
You can also download an HTML version of this blurb.
If you found this useful, please leave a tip!
Click download now to get access to the following files:
Log in with itch.io to leave a comment.
Thank you so much! I finally got my itch page exactly how I wanted to be thanks to your guide. My respects man.
This is really great, thank you
Great idea, thanks for putting this together.