HTML Fundamentals

There’s a lot I could talk about HTML – what the acronym stands for, what is the difference between a tag and an element, and so on. But there are entire websites devoted to that. This series is focused on what you need to know to make a character sheet in Roll20, and there’s a lot you could know that you don’t need to know to make a sheet.

In this (current!) final post in the series, I’ll describe some general things you do need to know. This is kind of a grab bag of things that don’t fit in the earlier posts.

Writing the Sheet

White Space and Making Your Code Readable

The term white space covers everything that isn’t a word, number or symbol – for example, the spaces between words and line breaks. For HTML and most programming languages, white space is ignored. Your code could be written like this:

<div>
    <h4>Name</h4>
    <h4>Score</h4>
    <h4>Modifier</h4>
    <h4>Roll</h4>
</div>Code language: HTML, XML (xml)

The following code is exactly the same:

<div><h4>Name</h4><h4>Score</h4><h4>Modifier</h4><h4>Roll</h4></div>Code language: HTML, XML (xml)

All the spaces and line breaks have been removed, to make much more compact code. To your browser, those are identical, but to a human reader, the first code is a lot more readable.

You’ll sometimes see sheets written like that because it reduces file size and bandwidth a tiny bit – all those empty spaces take up file size. But you shouldn’t do that with roll20 sheets – it makes them very hard to read, especially when the sheet is hundreds of lines long. The first version takes up more space but is much better.

Everything Is Printed except…

Any text you include in your HTML is displayed on the character sheet. So if you do this:

This is a character sheet
<h2>Stats</h2>
Some stats go hereCode language: HTML, XML (xml)

That will be printed like so:

Anything inside <> brackets is not printed. If it doesn’t contain a recognised tag, like you had a typo, the part inside the <> is ignored, but everything else is printed. So if you had a typo in the heading tag like this:

This is a character sheet
<j2>Stats</j2>
Some stats go hereCode language: HTML, XML (xml)

You would get this:

The tag has been ignored, but the text contained by the element is still printed as if the element didn’t exist.

Comments

You will from time to time want to write comments to yourself – reminders on your plans, explanatory comments to the next maintainer of the sheet and so on. You can do that like this:

This is a character sheet
<!-- I want to change this first line to a proper bio section -->
<h2>Stats</h2>
Some stats go here
<!--
  I'll include a proper set of stats here
-->Code language: HTML, XML (xml)

You can include a comment after an <!– and end the comment with –>.

A comment can spread over several lines. Anything inside a comment will be ignored by the browser, just as the incorrect <j2> tag was earlier, and won’t be printed.

Quotes and a Note for Later

You’ll find many HTML elements need quotes. You can use apostrophes (‘) or quotation marks (“), but make sure you start and end with the same style. Don’t do this:

"this is an invalid quotation'Code language: HTML, XML (xml)

Make sure you start and end with the same type. A useful trick though is to nest comments inside each other- and when you want to do that, use different quotes.

"A nested quote: 'this works fine'."
'A nested quote: "this works fine".'Code language: HTML, XML (xml)

Both of these work fine – one set of quotes is completely enclosed in the other.

There’s a third type of quote you’ll see sometimes. The backtick: `. These are only valid in JavaScript. Don’t try to use them in HTML.

Missing Closures

One of the most common mistakes when writing a sheet is to forget to include the closing tag (that </h4>). We’ve all done this. So if your layout isn’t working right, this is the first thing to look for. Tracking down your missing closing tags can be a pain – it’s one of the best reasons to use a Syntax-Aware Code Editor.

When to use />

You’ll find conflicting examples. What’s the difference between these two elements?

<br>
<br/>Code language: HTML, XML (xml)

And these two:

<input type="text" name="attr_example" >
<input type="text" name="attr_example" />Code language: HTML, XML (xml)

In fact. there’s no practical difference. You don’t need the / at the end, and code is more “proper” if you drop it, but HTML is very permissive and will accept a lot of incorrect code. I believe that used to be correct, but it isn’t anymore, so you may as well drop it.

For container elements with a separate closing tag, like <h2>Text</h2> the / is necessary for HTML to recognise the closing tag, so you always need to use it there. But you never need to use it at the end of an element.

Disabled=”true”

Here’s another, similar, syntax issue. What’s the difference between these two:

<input type="number" name="attr_example" value="6+4" disabled >
<input type="number" name="attr_example" value="6+4" disabled="true" >Code language: HTML, XML (xml)

In fact, they both work, but counterintuitively, so do these:

<input type="number" name="attr_example" value="6+4" disabled="false" >
<input type="number" name="attr_example" value="6+4" disabled="anything" >
<input type="number" name="attr_example" value="6+4" disabled="0" >
<input type="number" name="attr_example" value="6+4" disabled="" >Code language: HTML, XML (xml)

HTML will accept anything at all as being equivalent to disabled=”true”, so you might as well just drop everything after the disabled.

Special Roll20 Attributes

The Character Name

@{character_name} is a special attribute that all sheets have – it refers to the character sheet name. It is a very common, and very useful, technique to put it an input, like this:

<input type="text" name="attr_character_name">Code language: HTML, XML (xml)

It automatically takes the name assigned to the Journal, and players can change it to whatever they want very easily.

Character and Token Images

You set up the characters Avatar and Token without using the character sheet. But you can now also display them on the character sheet itself, using these special attributes:

<img name="attr_character_avatar" width="150">
<img name="attr_character_token" width="100">Code language: HTML, XML (xml)

You can include the width and alt attributes as usual, as described on the HTML Images page.

A Note On Gender

Roll20 requires that Gender be a text input. It cannot be a select or anything which gives a limited number of options. This is part of Roll20’s Code of Conduct – players should always be free to enter something other than the usual binary options.

So if you are going to include a gender option in your character sheet, make it a text input something like this:

<input type="text" name="attr_gender" value="" title="@{gender}">Code language: HTML, XML (xml)

Good Practice For Coding

When creating a roll20 character sheet, and sharing it with the community, you aren’t creating it just for yourself. You might give up maintaining it someday, and someone else can come in and take over and improve the sheet, or update it to handle changes in the roll20 system.

So it’s important for the community, and for users of your sheet, to leave it in good form. That way anyone who takes over after you have moved on can read the sheet and understand it. That includes making good descriptive comments and making sure your sheet is laid out well and readable.

That said, don’t sweat it on your first sheet – it’s likely to be a bit of a mess. The Roll20 community is very accepting – if your sheet is usable, it’s good, especially when it’s making a game system available that doesn’t already have a sheet.

A Note on Terminology

Sometimes the word tag and element are used, and it’s confusing which you should use. It doesn’t really matter for personal use, but if it comes up in conversation (!): HTML tags are the names of HTML elements, while HTML Elements are the full thing.

So for instance, this is an HTML Element:

<button type="roll" name="roll_example" value="1d20">Roll 1d20</button>Code language: HTML, XML (xml)

And this is a tag: button.

Series Navigation