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.
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.
Settings
View
Font size
14
Code
Preview
Delay
Zoom
Share
Reset
Preview
Currently previewing:
Dimensions0 × 0
Delay
Preview paused
Click to resume
Click to resume
The preview is disabled for this demo.
Use the console below.
Use the console below.
Console
›