Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Language/Coding Margins

Hi. I have searched online and could never find this answer, so I will ask here, since I am learning coding. When coding, I always see.. example... I will just use & signs

  &&&&&&&&&&
     &&&&&&&&&&&&&&&
               &&&&&&&&&&&&&&&&&&&&&&&&&
                              &&&&&&&&&&&&&&&&&&&&&&&&&&&
                                      &&&&&&&&&&&&&&&&&
                              &&&&&&&&&&&&&&&&
               &&&&&&&&&&&&&&&&&&
      &&&&&&&&&&&
  &&&&&&&&&

Ok. Let's pretend all those & signs are code. My question... Why does the code or code go in away from the margin and then gradually back to the margin. My thinking is to make the code more easy to read when errors need fixed and so on. If that is true.. is there any rule that some part of the code ends and starts going back in, towards the margin, or can the coder decide? I hope that is understandable :) Thanks

2 Answers

It all has to do with legibility. I like to think of it as a set of nested boxes. You have the giant box that holds everything in it, that will be the tags closest to the margin. Each tab away from the margin is a new box. The tags that go back toward the margin show how much is enclosed in each box. The top and bottom tags should correspond with each other in placement. This will also make sure you have all of your tags accounted for.

It's a matter of preference to layout your code the way in which you have described but you are correct in thinking it would not affect your code.

I find the following example easier as it represents a clear image in my mind as to how each element relates to another (i.e the ul tag element would be the parent and the li tag would be the child).

<html>
          <head>

          </head>
          <body>
                     <h1> Good layout example</h1>
                     <ul>
                           <li>
                                 <p> List example</p>
                           </li>
                     </ul>
         </body>
</html>

However this example is much more confusing and does not make it easy to spot potential errors/element relationships.

<html>
<head></head>
<body>
<h1> Good layout example</h1>
<ul> 
<li>
<p> List example</p>
</li>
</ul>
</body>
</html>