In this post:
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
--> 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.
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
Most tables are made up of these elements:
<table>– element containing all information about the table
<tr>– ‘table row’ element that defines a row
<th>– ‘table heading’ element that defines a heading cell
<td>– ‘table data’ element that defines a normal cell.
<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 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.
<tr> defines a row in the table, with 2 ‘child’ elements in each row. The child elements (
<td>) each define their own columns.
<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.
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:
border– defines the width in pixels of the border around the table
cellpadding– defines the space in pixels between the cell content and the cell
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 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.
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 quick digression: Mac users can enter many special characters by using the
Alt+Shift keys in combination with other characters on the keyboard. This graphic shows the options available:
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
The safest approach is to write any special characters in HTML using what are known as ‘entities’.
In HTML, an entity is a short sequence of code that represents a particular character.
All entities start with
&(ampersand) and end with
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’ve sent us the black & white version – oh dear.</p>
And this screenshot shows what can happen when special characters aren’t handled properly:
The commonest special characters have ‘named’ entities (e.g.
’ 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:
|Lowercase acute e||é||
|Left single quote||‘||
|Right single quote||’||
|Left double quote||“||
|Right double quote||”||
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.
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
- Series index – an overview of each part
- Part 1 – building blocks of HTML
- Part 2 – headings, images, links and lists
- Part 3 – comments, tables and special characters
- Part 4 – quoting and citing
- Part 5 – the head element, CSS and metadata
- HTML lists – ordered and unordered lists
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