Useful HTML tags for iNaturalist comments and other text - wiki

Here on the forum there are handy tools for creating hyperlinks, embedding images, etc. in our posts. We may eventually have such tools in iNaturalist itself, but for now, here are some basic html tags that will help you replicate what is available here on the forum (and maybe more!). Credit and thanks also 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.

I am by no means an HTML guru, and there may be more nuances 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

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)
    …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_0f407d6dd8_c.jpg" width="250px"> produces

  • 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>

Looks like this:

Bold Text
Bold Text
italic text
strikeout text
Bold italic strikeout text

  • 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><img src="https://static.inaturalist.org/photos/50191459/large.jpeg?1567474258" width=200></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.

10 Likes

What about adding how to add bold or italic text to the wiki? I’d don’t know how to do that, otherwise I would add it myself

I just found how to add bold or italic text in the iNat NZ Tips & Tricks page, so I can add them to the wiki.

It’s already there – see near the bottom.

1 Like

Thanks, somehow I missed that :)

1 Like

@jdmore Wonderful, beautifully laid out (with separator lines!) and exactly what I needed. Learning these things had just got to the top of my to-do list. I read the tips and Tricks yesterday too, thanks to @kiwifergus’ link, but hhere you have covered the things i need “right now”.
I needed to express my heartfelt thanks for your work in response to my plea for help, but now may i, or you, delete this comment so that the thread can remain full of useful html tags and realted discussion?

1 Like

you can delete it or you can leave it, it is fine either way :)

1 Like

So now I have images in my post, which is great, thanks again. Rather than leaving the rest of the line blank, is it possible to layout text or images side by side, or in columns? I thought I had seen the html for adding a table somewhere, but can’t find it.

https://www.w3schools.com/

I’ll work up a bit on tables to add to Jim’s tutorial, but you will find heaps of interesting tags in the html primer at this link

1 Like

thanks Mark…that Reference list at the linkyou gave is good. The first thing I learned is that a table should not be used for page layout :(

I’ll just add the disclaimer that not all available tags may be supported in the iNaturalist context, and there may be differences between what is supported there versus here in forum posts too. Anything beyond what is listed in the NZ Tips & Tricks linked above should be considered experimental.

There are probably better ways to do that, but I have always used them for basic layout in a page!

I struck it with the table example, the forum overrides background colour, and a couple other odd things weren’t supported. Would it be better to take it out of the tutorial?

Up to you. It may be a bit niche compared with the more basic tags. If you do leave it, just make sure any unsupported parameters are omitted from the example, and maybe list brief definitions for the tr, th, and td tags.

Two things:

Yes, tables are not the way to design web pages, but they are your only option to layout stuff in posts on the iNat site (the forum may differ).

When laying out more complicated stuff like tables on iNat, make sure you’ve chosen the correct formatting option, which you find at the bottom of the box in which you write your post. It must be set to None not Simple. BUT, this means you then need to add all html tags including <p> (paragraph) tags etc. Gets complicated and advanced very quickly!

Also, be aware that coding and formatting options on the forum are different to those on the iNat site itself. The forum has more clickable options, whereas iNat does not (currently) and you need to have good html coding skills to make things look nice (or even just an approximation of what you were aiming for). You have to code properly on iNat because your styles will fight with the native styles, and the native styles will always win unless your code is 100% correct.

6 Likes

it’s probably worth noting that the app also processes html differently. For example, here’s an image I recently posted displaying correctly on the website, and as a cyan box in the Android app.

Screenshot_20190905-094210~2-540x301

1 Like

To get an idea of how much coding is required for tables, have a look at this key I did. Right-click on the page and choose “View page source”. The table coding starts on line 283, so you need to scroll down a lot :wink:

2 Likes

I successfully rendered an image in a Journal Post - but can’t do it again! Looking at the successful one,
<img src=“https://static.inaturalist.org/photos/50495409/large.jpeg?1567766075"width="500px”>
There are two long numbers in the image address. Where did i get the second long number from??? I have been clicking all over the image Info page…maybe it doesn’t work from a tablet, which i am presently using?

1 Like

Can you copy to here the image tag that you are trying to get to work? Copy and paste, and then highlight it and select the </> symbol in the forum editor, that way we can see your full tag without the system trying to make something of it.

[edit: both numbers are part of the image address in iNat, so that is normal]

1 Like

<img src="https://static.inaturalist.org/photos/50495409/large.jpeg?1567766075" width="500px">

produces

There needed to be a space before the width parameter, and the double-quotes around the URL and the “500px” were some weird special double-quote characters. I just re-typed them from the keyboard.

And by the way, that second number in the URL doesn’t seem to be needed. I get the same results with or without it.

EDIT: actually, those weird double-quotes were probably coming from the Forum re-formatting your post above (where I initially copied your code from), not from your original code. But definitely double-check them.

I didn’t check that one! Jenny said it worked fine, so I’m curious to see the tag for the one that didn’t