EDIT: as of July 17, 2020, the iNaturalist site is:
supporting Markdown on comments, identifications, journal posts, and mostly on user profiles and project descriptions (you may run into trouble if that text is being truncated as it is on the project detail page). We’re also supporting Markdown in the mobile apps for comments and IDs right now, even though we don’t have the formatting buttons there. Mobile support for Markdown in user profiles, project descriptions, and journal posts is a work in progress (bold, italic, and links work fine, lists and tables not quite). We’re still supporting HTML like we used to, but we’re parsing it a bit more striclty than we used to. There are also a few weird cases where past text may now be formatted incorrectly.
See the full blog post for more details (ignore the parts about Agree Button changes, which were reversed later).
BOTTOM LINE: in places where Markdown is now supported, use the following with caution (if at all) and double-check that it is being displayed as expected. For other comment and text areas not yet supporting Markdown, the following should still work.
Here on the forum there are handy Markdown tools for creating hyperlinks, embedding images, etc. in our posts. Some areas of iNaturalist itself don’t yet support these Markdown tools, and in those areas, the following basic html tags can help you replicate what is available with Markdown (and maybe more!). Credit and thanks to the iNaturalistNZ Tips & Tricks page which covers this and much more useful information!
- Once you save text with these tags, you should see appropriately formatted links, images, etc. If you still see the tags, then either the formatting wasn’t quite right (just edit and fix), or that particular location does not accept HTML tags.
- HTML tags require exact syntax - a missing bracket, letter, quote, etc., will give you a mysteriously non-functioning tag.
- Where a URL is needed as part of a tag, this can be copied and pasted out of the address bar of your web browser when you are at the desired web location, or right-clicked and copied from an existing link.
There may be nuances yet to be discovered as to how iNaturalist handles HTML, so this is a wiki topic to which anyone can contribute more and better advice.
A useful HTML primer
Never worked with HTML before? You might find the w3schools tutorial helpful, especially the sections about tags, links, images, and text formatting.
The most useful tags for iNaturalist are listed below. There are a lot more HTML tags available, most of which are not supported or needed in iNaturalist text.
Linking to another web page
<a href="web address (URL) of page, in quotes">Text to display on link</a>
example:
<a href="http://plantsoftheworldonline.org">POWO</a> produces POWO
-
You don’t have to use HTML tags to link to a web page in iNaturalist. Any correctly formatted URL is automatically treated as a link by iNaturalist - it just won’t look as pretty:
https://www.pugetsound.edu/academics/academic-resources/slater-museum/biodiversity-resources/dragonflies/world-odonata-list2/ -
To make the link open in a new tab (so that the page you’re on stays open), add the parameter
target="_blank". So your link will look like this:
<a href="http://plantsoftheworldonline.org" target="_blank">POWO</a>produces
POWO which, if clicked, should take you to a new browser tab or window, depending on your browser settings.
Linking across iNaturalist portals
For link URLs that come from inside one of the iNaturalist Network portals (see list below), it is best to use a relative address instead of a complete absolute address, so that users don’t get logged out trying to follow your link to a different portal. Just drop the initial https://www.inaturalist.org, https://inaturalist.nz, etc. part of the URL.
-
For example, use the relative address
<a href="/observations/5598233">bristlecone pine</a>for bristlecone pine
instead of the absolute address
<a href="https://inaturalist.nz/observations/5598233">bristlecone pine</a> -
Relative addresses work only for URLs starting with any of the following portal domains, and only from inside one of these domains:
https://www.inaturalist.org(iNaturalist Global)
https://www.naturalista.mx(NaturaLista México)
https://inaturalist.nz(iNaturalist NZ — Mātaki Taiao)
http://www.inaturalist.ca(iNaturalist Canada)
https://colombia.inaturalist.org(Naturalista Colombia)
https://www.biodiversity4all.org(Biodiversity4all Portugal)
https://panama.inaturalist.org(iNaturalist Panamá)
https://ecuador.inaturalist.org(iNaturalist Ecuador)
https://inaturalist.ala.org.au/(iNaturalist Australia)
https://www.argentinat.org/(ArgentiNat Argentina)
http://israel.inaturalist.org/(iNaturalist Israel)
https://inaturalist.laji.fi/(iNaturalist Finland)
https://inaturalist.mma.gob.cl/(iNaturalist Chile)
http://greece.inaturalist.org/(iNaturalist Greece)
https://inaturalist.lu/(iNaturalist Luxembourg)
https://uk.inaturalist.org/(iNaturalist United Kingdom)
https://costarica.inaturalist.org/(Naturalista Costa Rica)
https://guatemala.inaturalist.org/(iNaturalist Guatemala)
https://www.inaturalist.se/(iNaturalist Sweden)
…and others that may get added here in the future.
- Relative iNaturalist links will not work to or from any other domains, including some associated with iNaturalist. For example, complete addresses must be used for links to or from:
https://static.inaturalist.org(iNaturalist photo storage location)
https://forum.inaturalist.org(this iNaturalist Forum)
Embedding an image
<img src="web address (URL) of image, in quotes, including ending .jpg, .png etc." width="500px">
example:
<img src="https://live.staticflickr.com/4611/39953309384_641b1a1732_k.jpg" width="250px"> produces
- Note: Discourse (the platform of this forum) replaces embedded images with locally saved copies, altering the HTML in the process.
- the width parameter is optional, but strongly recommended to keep larger images from blowing up too big on the page.
- a working
<img>tag can be included in the display portion of a hyperlink tag, like so:
<a href="url"><img src="url"></a>
Some tips on adding images to comments & journal posts.
Text Formatting
<strong>Bold Text</strong>
<b>Bold Text</b>
<i>italic text</i>
<s>strikeout text</s>
<strong><i><s>Bold italic strikeout text</s></i></strong>
Subscript<sub>subscript</sub>
Superscript<sup>superscript</sup>
Looks like this:
Bold Text
Bold Text
italic text
strikeout text
Bold italic strikeout text
Subscriptsubscript
Superscriptsuperscript
- Text formatting tags should be placed outside the link (
<a>) tags above if you want them to affect the link display. For example,<b><a href="http://plantsoftheworldonline.org">POWO</a></b>produces POWO.
Horizontal Line Separator <hr />
The separators in this post are generated by putting the <hr /> tag on a line all by itself, with an extra blank line afterward. (The Forum context seems to require that extra blank line for it to work.)
Tables
Tables can be used to lay out other elements on a page, such as having an image in the left cell and text in the right.
<table align=center border=1 cellpadding=5 cellspacing=5 width=80%>
<tr>
<th><b><i>Latrodectus katipo</i></b></th>
<th>The "Black katipo"</th>
</tr>
<tr>
<td></td>
<td>The katipo is an endangered species of spider native to New Zealand. The black form is only found in the north, the red form in the south. This one here is from Gisborne, near the southern extent of it's range.</td>
</tr>
<tr>
<td>cell 1 row 2</td>
<td>cell 2 row 2</td>
</tr>
</table>
produces:
| Latrodectus katipo | The "Black katipo" |
|---|---|
|  | The katipo is an endangered species of spider native to New Zealand. The black form is only found in the north, the red form in the south. This one here is from Gisborne, near the southern extent of it's range. |
| cell 1 row 2 | cell 2 row 2 |
To experiment with various table formats:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_elements
Troubleshooting
We can help you with problems you might be having. Just comment below with the nature of the problem you are having, describe what you are trying to achieve, and include copied examples of what you have tried. To stop Discourse (this forum) trying to interpret your code, highlight it and click the “pre-formatted text” option in the forum editor (the </> button). It should then show you in the preview pane what it looks like as code, rather than what it is being converted to by the forum.
The draft and preview options on journal posts, or here on forum posts, are also helpful to test and adjust your code, without actually saving or publishing anything. The preview pane will show what your code will look like to the outside world. Then you can just discard or delete your draft when you are done testing.
