Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by craig dodds
craig dodds
Courses Plus Student 243 Points

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

Melisa Hamilton
Melisa Hamilton
11,729 Points
Melisa Hamilton
Melisa Hamilton
11,729 Points

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.

Richard Chapman
Richard Chapman
25,836 Points
Richard Chapman
Richard Chapman
25,836 Points

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>