HTML

Text/Visual Mode Editor

If you only use the visual editor, you don't need to worry all that much about HTML. However, please read through this section anyway, as it'll contain things you still need to know (for example, how and when to use tables)

  • Even if you work in “Text” mode in the editor, always switch back to “Visual” before saving – this will clean up the HTML and fix any tags that are not closed properly.

Widths

Do not use widths on elements. Not on tables. Not on columns. Not on cells. Not ever.

Inline Styles

e.g. style=””

If you find yourself needing to use inline styles, put in a request for a CSS class for that site – this will reduce overall bandwidth used by the sites, and make maintaining them easier. It'll also avoid some heartache when our bot automatically deletes the style attribute from your work.

Tables

  • Do not use tables for page layout, only for actual tabular data. Using a table to break something into columns will look terrible on narrow screen devices such as phones and some portrait-mode tablets. To get columns for formatting, use a flexbox
  • Do not set widths on tables, or on individual columns. Let the user’s web browser figure it out along with the CSS hints provided by the site.
  • Similarly, do not set alignment on cells. We've set up CSS to align things where we want them. If for some reason that isn't working, let us know.
  • Note that we run Javascript code against tables in an attempt to make them side-scrollable on mobile devices.