Open original
Info
Demo 1.10

Document Structure

Every HTML file has the same skeleton. Once you’ve typed it a few times you’ll stop thinking about it, but it’s worth knowing what each part is for.

<head> vs <body>

The <head> holds information about the page: its title, its character set, links to CSS files. None of it is visible.

The <body> holds everything you can actually see.

The lines that are always there

  • <!DOCTYPE html> ~ first line, always. It says “this is modern HTML”.
  • <html lang="en"> ~ tells assistive tech what language the page is in.
  • <meta charset="UTF-8"> ~ makes emoji, accents and other alphabets render properly instead of turning into garbage.
  • <meta name="viewport" ...> ~ without it, phones pretend to be a desktop and shrink your page to nothing.
  • <title> ~ the browser tab, and the headline in search results.

Sectioning elements

<header>, <nav>, <main> and <footer> behave exactly like <div>, but they say what part of the page they are. That’s not decoration ~ it’s what lets someone using a screen reader skip your navigation and go straight to the content.

You don’t have to memorise this. In the DEMOLAND editor, or in VS Code, typing ! and pressing Tab drops the whole skeleton in for you.

Next chapterCSS
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
›