Technical writing services by Espirian

Anatomy of an HTML page – part 3

In this post:

Comments

As with other computer languages, HTML allows us to write comments in our code. Comments are useful for leaving notes about what certain bits of code do or why particular decisions were taken.

HTML comments aren’t displayed when the page appears in a web browser, but they can be viewed by anyone who looks at the page source (so don’t assume that comments are private).

Comments start and end with <!-- and --> tags. In the example below, the comment is shown in grey:

<h1>Welcome</h1>
<p>Here's an introductory paragraph.</p>

<!-- Remind John to write a better intro -->

<p>This paragraph has a lot more content. Or rather, it would if I could think of anything to write here. Perhaps it'll come to me if I sit here long enough.</p>

Remember: HTML comments are not private

Anyone who looks at your page source will be able to read your comments.

Tables

We use tables to display information that would normally be presented in tabular form. This seems self-evident but the common practice of using tables to control the visual design and layout of a page is an example of misuse of the <table> element.

Most tables are made up of these elements:

  1. <table> – element containing all information about the table
  2. <tr> – ‘table row’ element that defines a row
  3. <th> – ‘table heading’ element that defines a heading cell
  4. <td> – ‘table data’ element that defines a normal cell.

The <table> element should appear somewhere within the document’s <body> element. We can create as many tables as we wish.

Here’s an example table. I’ve added comments to clarify what’s going on:

<body>
<!-- Some other elements could appear here -->

<table>
    <tr>                                <!-- Beginning of the 1st row -->
        <th>Row 1, column 1</th>        <!-- 1st heading cell in this row -->
        <th>Row 1, column 2</th>        <!-- 2nd heading cell in this row -->
    </tr>                               <!-- End of the 1st row -->
    <tr>
        <td>Row 2, column 1</td>
        <td>Row 2, column 2</td>
    </tr>
    <tr>                                <!-- Beginning of the 3rd row -->
        <td>Row 3, column 1</td>        <!-- 1st data cell in this row -->
        <td>Row 3, column 2</td>        <!-- 2nd data cell in this row -->
    </tr>                               <!-- End of the 3rd row -->
    <tr>
        <td>Row 4, column 1</td>
        <td>Row 4, column 2</td>
    </tr>
</table>

<!-- Even more elements could appear here -->
</body>

Here’s a visual representation of the table’s structure:

The hierarchy of a simple <table> element

The output of the above code can be seen in the screenshot shown below. For the real HTML version, see example 1 on this page: table.html.

Table example 1

Each <tr> defines a row in the table, with 2 ‘child’ elements in each row. The child elements (<th> or <td>) each define their own columns.

The first <tr> element contains 2 <th> elements. These are the 2 heading columns of our table. By default, <th> elements are styled so as to stand out. In my sample table, the column headings have a bold style applied automatically by the browser. Each web browser has its own default styling rules, so, in your browser, the table.html page may look different from what’s shown in the example screenshot above.

The subsequent rows contain only <td> elements, which define normal table cells.

Table attributes

In part 2, we looked at some attributes of the <img> element. The <table> element supports its own set of attributes, with 3 of the commonest ones shown in this example:

<table border="1" cellpadding="5" cellspacing="10">
<!-- Rest of the code within the table unchanged -->
</table>

Here’s what these attributes do:

  1. border – defines the width in pixels of the border around the table
  2. cellpadding – defines the space in pixels between the cell content and the cell
  3. cellspacing – defines the space in pixels between cells.

The screenshot below shows the effect these attributes have on the table we created earlier. For the real HTML version, see example 2 on this page: table.html.

Table example 2

Table attributes are mentioned here only because they’re still quite common in HTML documents, and it’s therefore helpful to understand what they are. But the best way to format tables and other HTML elements is to use Cascading Style Sheets (CSS), which we’ll discuss in a future post.

Special characters

When writing content for the web, it’s common to use characters that aren’t labelled on most keyboards. Anyone familiar with Microsoft Word is likely to have seen the Symbols panel, which allows entry of these special characters. Here’s an example of the Symbols panel in the Mac version of Word:

A cut-down view of the Symbols panel in Word for Mac 2011

A quick digression: Mac users can enter many special characters by using the Alt or Alt+Shift keys in combination with other characters on the keyboard. This graphic shows the options available:

A view of the Mac keyboard with special characters shown

Placing such special characters directly into an HTML document could lead to those characters not being displayed correctly when the page is viewed in a web browser. (We’ll touch on a way of avoiding this when we discuss the <head> element.)

The safest approach is to write any special characters in HTML using what are known as ‘entities’.

Definition: entity

In HTML, an entity is a short sequence of code that represents a particular character.

All entities start with & (ampersand) and end with ; (semicolon).

Here’s an example, with the entities shown in red:

<!-- Without entities -->
<p>They’ve sent us the black & white version – oh dear.</p>

<!-- With entities (recommended) -->
<p>They&rsquo;ve sent us the black &amp; white version &ndash; oh dear.</p>

And this screenshot shows what can happen when special characters aren’t handled properly:

Which do you think looks better?

The commonest special characters have ‘named’ entities (e.g. &rsquo; stands for ‘right single quote’). There are so many characters available that it’s not practical for all entities to be named in this way, and so a numeric system is used to handle such characters.

The good news is that it’s quite easy to look up these name/number codes. To get you started, here are some common characters:

Character Entity Numeric
Ampersand & &amp; &#38;
Non-breaking space   &nbsp; &#160;
Pound £ &pound; &#163;
Copyright © &copy; &#169;
Registered trademark ® &reg; &#174;
Degrees ° &deg; &#176;
Lowercase acute e é &eacute; &#233;
En dash &ndash; &#8211;
Em dash &mdash; &#8212;
Left single quote &lsquo; &#8216;
Right single quote &rsquo; &#8217;
Left double quote &ldquo; &#8220;
Right double quote &rdquo; &#8221;
Ellipsis &hellip; &#8230;

When I don’t know the entity name or numeric code for a special character, I often find the quickest lookup tool to be Google: searching for the character name plus ‘HTML entity’ is usually sufficient. There’s a useful entities reference list here: Web Design Group.

The result

In previous posts, I’ve put together a hierarchical view of how all the elements fit together, starting with the root <html> element. You can probably tell that things would look rather complicated if I did this again here. Instead, I’ve placed the content discussed in this post, along with everything from the earlier posts, into this file: sample3.html.

Remember that you can view the source of the page to see the underlying code. The easiest way is to go to the page, right-click on a blank area and click View Page Source (or similar).

End of part 3

We’ve now got quite a few of the common elements of HTML under our belt. In part 4, we’ll look at some elements used to display quotations. I hope these will be of particular interest to the copy-editors in the audience.

As usual, I’m interested to know what you think of the content, so please leave a comment below or drop me a line on Twitter (@espirian). For other ways to get in touch, take a look at my Contact page.

Read the whole HTML series

Thanks for reading,

Subscribe for tips

Join 410 others on my free Espresso ☕️ email list to receive:

  • blog updates
  • free ebooks
  • discounts on consultancy
  • offers and secret stuff

🔒  No spam, I promise • privacy policy