KCL • CCH • Minor programme • AV1000 • Electronic communications and publishing

AV1000
Fundamentals of the digital humanities
Structured HTML layout

When writing HTML code by hand (as required in this course), using “structured layout” techniques will help you considerably—the more so the longer and more complex the page you are writing. Structured layout consists in using spaces to indent lines and blank lines to separate groups of items. Neither these spaces nor the blank lines will affect the appearance of the page in whatever browser is used, but both will help you, as author of a page, quickly grasp the structure of the whole. The following snapshot of an HTML page will demonstrate the technique quite adequately.

<ol type="I">

  <li><a href="#links">Links</a>
    <ol type="A">

      <li><a href="#structure">Using links to express structure</a></li>

      <li><a href="#Loc-specific">Location-specific references</a>
        <ol type="1">

          <li><a href="#internal">Internal references</a></li>

          <li><a href="#external">External references</a></li>

        </ol>

      </li>

      <li><a href="#Windows">Additional browser windows</a></li>

    </ol>

  </li>

  <li><a href="#frames">Frames</a>
    <ol type="A">

      <li><a href="#basics">Basics by example</a></li>

      <li><a href="#more">More help with frames</a></li>

    </ol>

  </li>

</ol>

Note how the structures stand out immediately. Each nested group is indented 2 spaces to the right further than the group that contains it. Blank lines are used to isolate what the author has considered a significant unit. Compare the above image with another in which the structural spacing has been removed:

<ol type="I">
<li><a href="#links">Links</a>
<ol type="A">
<li><a href="#structure">Using links to express structure</a></li>
<li><a href="#Loc-specific">Location-specific references</a>
<ol type="1">
<li><a href="#internal">Internal references</a></li>
<li><a href="#external">External references</a></li>
</ol>
</li>
<li><a href="#Windows">Additional browser windows</a></li>
</ol>
</li>
<li><a href="#frames">Frames</a>
<ol type="A">
<li><a href="#basics">Basics by example</a></li>
<li><a href="#more">More help with frames</a></li>
</ol>
</li>
</ol>

revised October 2007