Open original
Info
Demo 1.4

Typography

Most of a website is text, so most of HTML is elements for text.

Headings

<h1> through <h6>, biggest to smallest. They aren’t just sizes ~ they’re an outline of your page. Screen readers use them to jump around, and search engines use them to work out what a page is about. Don’t pick a heading level because you like how big it looks; pick it because it’s the right level, then change the size with CSS.

Paragraphs and emphasis

<p> for a paragraph, <strong> for bold, <em> for italic. You can nest them.

There’s also <b> and <i>, which look identical. The difference is meaning: <strong> and <em> say “this matters”, while <b> and <i> just say “make it bold” or “make it slanted”. I use <strong> and <em> almost always.

Lists

<ul> for bullets, <ol> for numbers, and <li> for each item inside either one. The <li> elements have to go directly inside the list, with nothing in between.

Next demoHyperlinks
Keyboard Shortcuts
⌘ Z / ⌘ ⇧ ZCtrl Z / Ctrl ⇧ Z Undo / redo
Tab / ⇧ TabTab / ⇧ Tab Indent / unindent selection
⌘ ] / ⌘ [Ctrl ] / Ctrl [ Indent / unindent lines
⌘ ACtrl A Select all
⌘ DCtrl D Select next occurrence of selection
⌘ /Ctrl / Comment / uncomment lines
Ctrl SpaceCtrl Space Autocomplete
Ctrl EnterCtrl Enter Reset layout
⌘ ⌥ [ / ⌘ ⌥ ]Ctrl ⇧ [ / Ctrl ⇧ ] Fold / unfold block
Code
The editor didn't load — try refreshing the page. Navigation, shortcuts and the info panel still work in the meantime.
Preview
Dimensions0 × 0
Delay
Console