This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Erin Schroeder
over 8 years

HTML spacing rules

It doesn’t seem like the spacing really matters between lines of code, but in the examples there seems to be a method to spacing which isn’t really explained. (IE the title line is 6 spaces out farther than then head).

I had a coder boyfriend back in the day and I think I remember him saying this had to do with personal preference, is that true? I would like to do it the “right” way. Is there one? Even if there isn’t a “right” way, I don’t want to look like a “noob”.

Thanks for any input.

Answer 55c69de29376761beb00073c

1 vote

Permalink

HTML has no rules concerning white space, hard returns (line breaks), tabs, etc., in other words we are free to compose the document however we wish in any textual format.

<!--
  *******************************************
  *             We can do this!             *
  *******************************************
-->

Completely valid HTML comment that lets the developer document important sections. Now let’s consider a data table with nesting of child elements in the source listing:

<style>table { text-align: center; }</style>
<table>
  <caption>Two Operands</caption>
  <thead>
    <tr>
      <th colspan="3">AND and OR</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">A*B | A+B</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>AND</th>
      <th>0</th>
      <th>1</th>
    </tr>
    <tr>
      <th>&nbsp;0</th>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <th>&nbsp;1</th>
      <td>0</td>
      <td>1</td>
    </tr>
    <tr>
      <th>OR</th>
      <th>0</th>
      <th>1</th>
    </tr>
    <tr>
      <th>&nbsp;0</th>
      <td>0</td>
      <td>1</td>
    </tr>
    <tr>
      <th>&nbsp;1</th>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

This is still a pretty simple and basic data table. They can get a lot more complex. Consider that the above has two tables embedded that could (and maybe should) be marked up as tables with their own thead, tfoot and tbody.

One can easily imagine how much indenting would be involved. I’ve used two spaces. Many authors use four. All the same, it doesn’t matter to HTML. All the browser parses to the DOM tree is the element nodes, themselves, not the white space they may contain. Imagine trying to read this without the indentation? All the visual hints would be gone and so too would be half the meaning that can be had in a glance.

The only way to insert long strings of white space into the rendering is with <pre></pre> tags.

<div><pre>*     *     *     *     *</pre></div>

The spaces will render, but this is veering away from the question. Your friend was right for the most part about preferences. When it’s too early to say what will be your own, the best thing to do would be to look at lots of markup samples and make a note of the patterns and documentation styles, and find the similarities in various of these. You will soon have a pretty clear picture and be able to adopt and adapt to the common approaches.

There is no right or wrong way to write source code. That’s just a syntax concern. What’s important is the structure of the document itself in terms of outline and semantics. This is a subject that will take a good amount of reading.

points
Submitted by Roy
over 8 years

Answer 55dbdc5c51b887d8860000a6

0 votes

Permalink

Thanks for asking, Erin. I’m not sure why most courses I’ve come across don’t address this obvious question that will arise for us newbies. Why is it assumed that we should know that spacing doesn’t really matter?

points
Submitted by bleosz
over 8 years

1 comments

Roy over 8 years

It is never assumed. What is assumed is that learners will read up on these matters, and not quibble about them. Did you write the language? No. Do you want to learn the language? Then get to work.