Note: Notice how text/content is indented inside 5, and then 5 is indented inside 9. This is called nesting. See how easy it is to tell what's a child of what? Show
Exceptions
0
Inline elementsYou never indent inline elements. Treat them like text/content. Examples: 1 2What about the basic structure of a webpage?Look at the following code. You'd think that 7 & 8 would be indented inside 9—after all, they're children of 7, so shouldn't they be indented? 3So why aren't 7 & 8 indented? A couple of reasons:
Your text editor should make it easy to indent your codeYou could press tab or the space bar every single time you want to indent your code, but you shouldn't have to do that. Fortunately, good text editors help you out when it comes to indenting. Auto-indentBBEdit, for instance, has a setting in its Preferences for "Auto-indent", which it defines as follows: "When this option is selected, pressing the Return key in new windows automatically inserts spaces or tabs to indent the new line to the same level as the previous line." Any good text editor should have a setting like this somewhere. The trick is finding it in the editor's Preferences or Options. Spaces or tabs? (Spaces!)Should you use spaces or tabs for indenting? A debate has raged on this topic for decades, with different developers insisting that theirs is the right choice. WebSanity uses spaces, for various reasons, so that is the right choice, clearly. Your text editor should let you choose what gets inserted when you press the TAB key: a tab or spaces. Different text editors call that setting different things. Here are a few examples:
Note: If anyone knows of any others that I should add, let me know. How many spaces?The next question is, how many spaces get inserted when you press TAB? Basically, people either choose 2, 4, or 8 spaces. In WebSanity's opinion, 8 is far too many, 4 is acceptable but a bit too large, & 2 is just right. With 2, you can see the indentation, but lots of nesting doesn't push your code out to ridiculous lengths, as you can see in the following: Your text editor should let you choose how many spaces get inserted when you press TAB. Different text editors set that in different ways. Here are some examples:
Note: Again, if anyone knows of any others that I should add, let me know. Indenting several lines at onceWhat if you want to indent more than one line of code? Like 5? Or 25? You could manually move the cursor to the start of each line and press TAB the requisite number of times, but that would quickly grow tedious. Fortunately, every good text editor lets you select all the lines you wish to indent and then indent them all as a group. This is a fantastic time saver! Should I indent 2 or 4 spaces?My preference as a software developer is to use 2-space indentation in front-end projects and 4-space indentation in backend projects. However, using 4-space indentation gives more margin than required. On the flip side, 2-space indentation makes for inadequate spacing and may reduce code readability in some cases.
How many spaces do I indent in HTML?Indent by two spaces per indentation level. Use all-lowercase for elements and attributes. Don't leave trailing spaces at the end of a line (except as needed for Markdown).
Do I indent 4 spaces?For example if you start off using four spaces for an indent, then you should always use four spaces. In the example below, four spaces have been used for the first indent, but only two for the second, and you can see that as a result the code doesn't “line up”.
Should I use 4 spaces or tab?So, at the end of the day, tabs versus spaces is truly a matter of preference, however the tab is still the character specifically designed for indentation, and using one tab character per indentation level instead of 2 or 4 spaces will use less disk space / memory / compiler resources and the like.
|