Open original
Info
Demo 1.1

Elements

HTML is made of elements. An element is a piece of content plus a label saying what kind of content it is: a heading, a paragraph, an image, a list.

You write one as an opening tag, then the content, then a closing tag:

<p>This is a paragraph.</p>

The closing tag is the opening tag with a forward slash added. Forgetting it is the most common HTML mistake there is, and it’s the first thing I check when a page looks broken.

There are a lot of them

There are over 100 elements in HTML. You will never need most of them! I’ve been building websites for years and I use maybe twenty on a regular basis.

The rest of this chapter covers the ones that actually earn their place.

Next demoAttributes
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