This is the first part of the Roll20 Sheet Author Guide. See the Site Introduction for the overall plan.
This chapter is a reference guide to using HTML in character sheet design. Covering the entirety of HTML is way too big of a task – there are whole websites devoted to that. Instead, this guide gives you the specific information you need to do the HTML part of a Roll20 character sheet.
This section of the Guide could be huge, so it is broken up into several posts:
- Headings and Line Breaks: these most basic HTML elements are great for showing what HTML elements look like.
- Attributes and Inputs: In Roll20, attributes are the most important things on a character sheet, and the most common way to create them is with the Input element.
- Displaying Text: You need to create decorative text all over the sheet – stat labels, tab headings, and so on. You’ll often need to use the span and textarea elements.
- Containers and DIVs: Being able to group related elements together is handy – you might want to create a stat block, a bio section, an encumbrance section and so on. You’ll learn about the div, section, and details elements.
- Choosing from a List: It’s very handy to be able to choose things from a list – what race are you, which spell are you using, and so on. If the list is entirely predefined, use the select element, but if players can add to the list, use datalists.
- Conditional Inputs: Sometimes its handy to be able to tick whether something is on or off, or define a setting from a small group. You’ll learn about checkboxes and radio buttons, and the labels for them.
- Buttons For Making Rolls: If you want to build rolls into the sheet, you’ll need to learn about roll buttons. These use Roll20’s dice macro system, and so are unique to Roll20 and general HTML sites will be no help in figuring out how they work.
- HTML Images: You will often want to decorate your sheet with images. You’ll learn better ways to do this in the next chapter of the guide, on CSS, but HTML has a way to do this and we’ll cover this here.
- HTML Fundamentals: This post describes other things about using HTML, like good practices and how to add comments.
- Character Sheet – HTML Example: Here’s a simple sheet you can test out yourself, and see some of the HTML elements described here in use. There’s a HTML file for you to download and try yourself.
Together these posts make up everything you need to make a functional sheet. It won’t be pretty – for that, you’ll need Chapter 3: CSS.
Other HTML Posts
While HTML is pretty self-contained, I may add extra posts relating to HTML in the future. You’ll find them here (or through the navigation bar at the top of every page).
- Buttons that Create Other ButtonsHow to create attack rolls that include a damage button, and similar buttons.
More About HTML
Character Sheet Enhancement
If you are not using the Character Sheet Enhancement (added to Roll20 in 2021), then datalist and details won’t work. Everything else should work fine.
Missing Elements
The eagle-eyed reader already familiar with HTML might notice one element absent from the list. TABLE is a very seductive element for people new to HTML because of how easy it is to use to create layouts. Resist that temptation!
There is no gentle way to say this: do not use TABLE for sheet layouts.
Aside from good coding practices, the most important reason for you and me is that Roll20 summarily rejects all sheets using TABLE for layout.
So there is no good reason to ever use it. As it happens, there are simpler ways to lay out a sheet, so you don’t need it.
There’s another missing element: lists. I’ve never actually used lists in a character sheet, and this series is about essential items. But there are some clever things you can do with lists, so I’ll add a post covering them at some point. And there may be more posts about different ways of using the existing elements.
Summary
The chapters of this guide will teach you about all the HTML Elements you need on Roll20, like div, input, and span, and how many have attributes, like name, value, and type.
You’ll learn how many elements can be used as containers, most often divs and labels. And how some elements – like inputs, selects, and textareas – are often used to store values, and how the name of such elements must begin with attr_.
You can create and launch your own macros which use roll buttons, which must have type=”roll” and a name that starts with roll_.
With these simple elements, you can construct the basics of a character sheet. It won’t look very attractive (that’s what next month’s chapter on CSS is for), but it handles the function of the sheet.
Finally, there is an example character sheet: Castle Falkenstein Design – 1 HTML, which shows a worked example of a simple character sheet where you can see all many of these elements put into practice.
