Indentation

In the previous exercise, we explained nesting. Now let's look at a tool for writing more readable code: indentation.

Indentation does not affect how the page works, but that doesn't mean we can skip it. On the contrary, because it makes the code easier to read for us and for other developers, it is a powerful tool that every developer should master.

<html>
	<head>
	</head>
	<body>
		<p>Hello!</p>
	</body>
</html>

In the example above, the head and body elements are children of the html element, so they are indented by one level. The p element is a child of the body element, so it is indented by one more level. Each child is indented one level deeper than its parent.

How much is one level? In this editor, the Tab key inserts four spaces. You can indent with a tab character, two spaces or four spaces. All of them are fine, as long as the indentation is the same in the whole code.

Tip: select several lines and press Tab to indent them all at once. Shift+Tab moves them back.