HTML – The Building Blocks

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.

The HTML Guide

This section of the Guide could be huge, so it is broken up into several posts:

    Together these posts make up everything you need to make a functional sheet. It won’t be pretty – for that, you’ll need 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).


    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.

    Series Navigation

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.