Anatomy of an HTML page – part 3

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 tags. In the example below, the comment is shown in grey:


Welcome

Here's an introductory paragraph.

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.

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

element.

Most tables are made up of these elements:


– element containing all information about the table

  • – ‘table row’ element that defines a row
  • defines a row in the table, with 2 ‘child’ elements in each row. The child elements (

    element contains 2

    – ‘table heading’ element that defines a heading cell
  • – ‘table data’ element that defines a normal cell.

    The

    element should appear somewhere within the document’s 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:

    
    
    
    
    
    Row 1, column 1 Row 1, column 2
    Row 2, column 1 Row 2, column 2
    Row 3, column 1 Row 3, column 2
    Row 4, column 1 Row 4, column 2

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

    Table 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

    Table example 1

    Each

    or

    ) each define their own columns.

    The first

    elements. These are the 2 heading columns of our table. By default,

    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

    elements, which define normal table cells.

    Table attributes

    In part 2, we looked at some attributes of the element. The

    element supports its own set of attributes, with 3 of the commonest ones shown in this example:

    
    
    border="1" cellpadding="5" cellspacing="10">

    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 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:

    Special characters

    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:

    Mac keyboard

    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 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:

    
    
    

    They’ve sent us the black & white version – oh dear.

    Theyve sent us the black & white version oh dear.

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

    Special characters not handled well

    Which do you think looks better?

    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:

    Character Entity Numeric
    Ampersand & & &
    Non-breaking space      
    Pound £ £ £
    Copyright © © ©
    Registered trademark ® ® ®
    Degrees ° ° °
    Lowercase acute e é é é
    En dash
    Em dash
    Left single quote
    Right single quote
    Left double quote
    Right double quote
    Ellipsis

    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.

    View source

    The result

    In previous posts, I’ve put together a hierarchical view of how all the elements fit together, starting with the root 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

    Want relentlessly helpful emails? Join Espresso ☕️

    Get writing tips, web advice & goodies.

    💙 606 digital caffeine fans

    🍩 No spam or the doughnuts are on me • privacy

    Who wrote this?

    John Espirian freelance technical copywriter

    John Espirian – the relentlessly helpful technical copywriter

    I write B2B web content, blogs, user guides and case studies – all aimed at explaining how your products, services and processes work. I also offer LinkedIn profile critiquing and rewriting.

    I work from home in Newport, South Wales and support the (formerly) mighty Liverpool FC 🔴⚽️