Can I use tabs for my indentation rather than two spaces?

Question

Can I use tabs for my indentation rather than two spaces?

Answer

There is no official standard on how many spaces or tabs to indent by within our HTML documents. So long as you are consistent, you may use tabs rather than spaces if you prefer. That having been said, 2 space indentation is very common and adheres to Google’s HTML style guide.

34 Likes

Many IDEs will translate a tab into a given number of spaces instead of inputting the normal
tab invisible character. There is an ongoing debate in programming regarding the use of tabs vs. spaces. I think spaces is at least a little more common in general.

23 Likes

absolutely true, soft tabs vs hard tabs. Soft tabs (the tab key insert spaces) seems favorable, which make sense given it works better when different developers on the same project use there own preferred editor.

14 Likes

tabs are easier

15 Likes

perdon por la pregunta pero alguien me podria brindar el codigo para insertar una pestaña?
o me lo copia y pega aqui

1 Like

press the tab key on your keyboard?

1 Like

is an 1 tab equal to 2 spaces?

7 Likes

that depends on your editor settings, you can configure/tweak that.

8 Likes

I’m having a real hard time here. WHERE exactly am I supposed to be indenting? Inbetween each word or??? I caved and had it solve it itself but I still have no grasp whatsoever on what I’m supposed to be doing to indent.

3 Likes

when an element is nested inside another element. To make it easier to read, so that when you’re looking at the elements, you can get a rough idea of how far the element is in the parent > child hierarchy.

Incorrect

<body>
<p>

Correct

<body> 
  <p>
5 Likes

An additional question from a 1st week user, please forgive my ignorance. When using a text editor/IDE (hopefully I am using the correct terminology) I’ve found if I want to indent multiple lines of code by highlighting, I can only successfully accomplish this by pressing the tab key. When I do so, all of the highlighted lines of code will be indented by one tab value. When I try to indent via the space bar (2 spaces), the highlighted text is deleted. If the better practice for indentation is 2 spaces rather than the tab key, how does one indent multiple lines of code while adhering to said practice? Thank you in advance.

5 Likes

selecting text and started typing (space or any letter) will replace the selection. That is pretty standard. Same behavior as here on the forum or in a word document.

so we can indent using tab. But there are two kind of tabs: soft tab and hard tab.

soft tabs means the tab key insert spaces. While hard tabs insert a special tab character. Most text-editors/IDE’s should have a setting for soft tab. Just make sure soft tab is enabled, and you can use the tab key to insert spaces

soft tab might also be the default, just verify it in the settings in that case

shift + tab is also useful, you can un-indent your code.

12 Likes

Thank you. Much appreciated

One thing to say is that text editors are NOT IDE’s. Search on Google the differences between these two. While modern text editors can have integrated IDE’s in or IDE’s can contain text editor’s, they are different things.

3 Likes

Well I do use the tab bc is easier for me and I see it in some way more objective than two spaces as I usually use spaces to delimeter the words in my code (human text). I still think that 1 tab is equal to 2 spaces so I don’t see the problem there. I’m going to stick with the tabs unless someone convinces me not to do so.

I do understand the point of so much of discussion about the tab and space.

Why cannot the tab just be standardized to three spaces everywhere?

A que te refieres? Para ver si te puedo ayudar

it helps if know the parent-child relationships

Do you do this within html tags as well?
like:

<html>
  <body>
    <h1>Header</h1>
  <body>
</html>

Or would body be in line with html?
Thanks

Question: In the Lesson One, part 4 we are given this as only an example:

<body>
  <div>
    <h1>Sibling to p, but also grandchild of body</h1>
    <p>Sibling to h1, but also grandchild of body</p>
  </div>
</body>

Then in the practice I formatted it accordingly which came out fine, but really does not resemble the example above, bc the < h1 > is the first child and not the < div > which seems to change the hierarchy. Then < p > and < div > became subsequent siblings and not children. I have to say that’s a bit confusing because the first < h1 > isn’t nested under a < div >.

<body>
  <h1>Hello World</h1>
  <p>This paragraph is a child of the body element</p>
  <div>
    <p>This paragraph is a child of the div element and a grandchild of the body element</p>
  </div> 
</body> 

Then in this last exercise about whitespace - https://www.codecademy.com/courses/learn-html/lessons/html-document-standards/exercises/indentation-html - we are asked to do this again where < h1 > and < div > are again just siblings, however, now this < p > is child of < div >, while none under < h1 > this time:

<body>
  <h1>Whitespace</h1>    
  <div>
    <p>Whitespace and indentation make html documents easier to read.</p>
  </div>  
</body>

… which really hung me up for a few minutes. Happy to say I haven’t been hung up too many times, but this was perplexing to me at first. So, I went back to the earlier exercises to discover why it was this was bothering me.

This is what the beginning of my Brown Bear page looks like:

<body>
  <h1>The Brown Bear</h1>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>The brown bear 

So, what I am noticing, and assuming, is that < div > must always be a “child” of < body > regardless of where < h1 > is, however if < h1 > is ABOVE < div >, then < div > is a sibling to < h1 >, not a “child”, but indeed remains a child of body; whereas if < h1 > is below the < div > then < h1 > becomes its child. Then below the < h1 > any subsequent < p > will remain “siblings”, however, anything that is nested under the almighty < div > is demoted to child regardless, (?) lol, fmp. < highly confusing, lol. So, < p > is always only a sibling to < h1,2,3 etc >, but then always a child to < div >? If someone wouldn’t mind commenting, that would be appreciated! Beyond that, fortunately I’m pretty clear, but I suppose I need to get a few things clarified. Otherwise, havin’ fun! :wink:

Thank you so much to Codecademy and everyone here, students and mentors alike. It really is a joy to read these forums, and learn with such knowledgeable and inquisitive folks.

2 Likes