Basic HTML for Links, Headings & Lists

HTML is one method of telling browsers what to display when a visitor lands on a page. It’s not the only way, by any means, but I think it’s safe to say it’s the markup language that’s been around the longest since the birth of the Internet.

There’s no reason to be intimidated by HTML… granted, it’s not always as clear to us as English… but browsers, and more importantly, search engines, understand it perfectly. Since we make our livings online, it’s worth the effort to learn how to use it.

There are a number of ways that simple HTML can be used in marking up our clients’ orders. Links, headers, lists, images, citations… they can all be formatted using HTML.

Links

Links, more properly called hyperlinks, are clickable attributes that direct a browser to another destination. That destination may be on the same page, another page on the same website or to another website altogether.

Hyperlinks consist of two basic elements: the specific destination address and the displayed clickable text or image that contains the link. The entire hyperlink is contained between the HTML anchor tags, <a> and </a>.

The attribute most commonly used will be href. For instance, let’s look at

Link1

The anchor tag is opened with the <a then the href attribute identifies what follows as a clickable hyperlink. The destination URL is contained in quotation marks and the > signals the end of the destination URL. What follows is the anchor text, which is then followed by the closing </a>.

On the page, that link would appear as our website.

With images

The anchor text could also be replaced with an image, by replacing the anchor text with the location of an image which should be displayed, as in:

Link2
Some of the information contained there isn’t relevant yet. For now, we’re only interested in the fact that rather than anchor text, there’s an image being called in its place. On the page, that link would appear as
TSClogo

We can include more information in the HTML anchor, as well, such as how the image should be displayed or how the link should be treated. We can set the image to align left, center, right or none; we can also change the size of the displayed image. For instance, changing alignnone to aligncenter and halving both the width and height, would create this:
small TSC logo
In addition, we can direct how the link should be handled. We can let the browser simply go to the destination or we can direct it to open the link in a new tab or window. That is accomplished by simply adding target=”_blank” after the destination URL, but before the > that follows the destination URL.

We can also direct the search engines to disassociate us with the destination URL, by adding target=”nofollow” before the > following the destination URL. Such directives should be separated by a space, such as … elfcopy.com” target=”_blank” target=”nofollow”>.

[Questions]

Headings

There are six classes of headings that we’ll often need to use: H1 through H6, in descending order of significance. The H1 is the title of the page and should normally only be used once on a page, as it is the search engines’ primary determinant of the page’s main topic.
The H2 through H6 headings should always follow a strict hierarchy. For instance, if a page is discussing common considerations in managing a business, it might look something like this:

H1 – title of the page: 5 Common Considerations of Managing a Business

H2 – Financial

H3 – Accounts Payable

H4 – Overhead

H4 – Suppliers

H4 – Taxes

H3 – Accounts Receivable

H3 – Payroll

H2 – Production

H3 – Scheduling

and so on.

Notice that it resembles a topical outline – Accounts Payable, Accounts Receivable and Payroll are all sub-headings of Financial. Scheduling is a sub-heading of Production, but has nothing to do with Financial. Following a hierarchy is critical in order to not confuse either users or the search engines.

Implementation of headings is extremely simple… they are merely contained between an opening and closing tag of the desired heading classification. For instance:
<H1>5 Common Considerations of Managing a Business</H1>
<H2>Financial</H2>
<H3>Accounts Payable</H3> etc.

This would appear on the page as:

5 Common Considerations of Managing a Business

Financial

Accounts Payable

If you use Microsoft Word, you can simply highlight the text you want to assign a heading class to and select the appropriate heading class in your toolbar.

[Questions]

Lists

Lists are a great way of presenting a number of related items. The list can be either ordered or bulleted. These are typically referred to as ordered or unordered lists.
Ordered lists can be listed with numerical or alphabetical items. An ordered list will begin with the <ol> tag and end with the </ol> tag, while an unordered list will use ul, rather than ol. In both cases, each listed item will be enclosed between the <li> and </li> tags/.

An ordered list is coded like this:

ordered-list

and will appear as

  1. Coffee
  2. Milk

By default, ordered lists will use numbers. But by specifying a style attribute, you can opt to use upper- or lowercase letters or roman numerals, as well. Simply replace the <ol> with <ol type=”A”>, for instance, to use uppercase letters. Type “a” is lowercase letters, type “I” is uppercase roman numerals and type “i” is lowercase roman numerals. Numbers, the automatic default, is type “1”.

An unordered list will be coded such:

unordered-list

and will appear as

  • Coffee
  • Tea
  • Milk

By default, unordered lists use bullets (type:disc). Other options are circles (type:circle), square (type:square) and none (listed items are not marked).

Interesting point:

Although it’s not as important today as it once was, inserting partially similar keyword phrases can be accomplished, using lists, without slapping the reader repeatedly with the terms.

For instance, suppose your client wants you to use the terms electrical wiring, electrical circuit breakers, electrical panels and electrical switches. Reading that article could get monotonous, very quickly. But using a list will relieve that issue, while still showing the search engines all four terms, thus:

…. progress has been made in producing much more affordable electrical:
• wiring
• circuit breakers
• panels
• switches

The search engines will still see all four complete terms, each preceded with “electrical“, but the user won’t be bored to tears.

[Questions]

Leave a Reply

Your email address will not be published. Required fields are marked *