Tag Archives: tags

Good HTML etiquette – the accessible link

Still with me for Part Three? Huzzah. Hopefully, you have all had a little bit of a practice with everything we’ve talked about so far.

Part One – why HTML?
Part Two – the building blocks of HTML

With the basics hopefully making sense, it’s time to get a little bit more sophisticated. But not too sophisticated, so don’t worry. Some of what I am going to talk about relates to accessibility, some of it is because that is just the way computers work and it would take far too long to explain. Just accept that this is the way it should be done!

Firstly, accessibility and why you should worry about it:
Accessibility is about making your website (and content) accessible to all users, regardless of ability, and regardless of what browsing technology they’re using. You need to keep in mind that not everyone views the Web in the same way that you do. They might have a desktop with a huge screen, or an old one with a tiny monitor, a laptop, an iPad, a mobile device, a TV… They might be blind or partially sighted, or their mouse might be broken, or they are stuck on a dial-up (or dodgy mobile) signal that is sloooooooooooooooooow to load. They might even be a screen-reader, or a text-only browser such as Lynx.

By making your website accessible you are opening it up to a much wider potential audience. Making something accessible for humans also has the side effect of making it more accessible for search engines (SEO). Which is just good sense.

The first thing you can do to improve the accessibility of your content is making accessible links.

An “accessible link” is simply a link that imparts as much information to as many users as possible. It enables the reader to preview the link, making an informed decision about whether to follow it or not, and helps to differentiate between links that may share link text but refer to different targets.

A quick reminder what a link looks like:
<a href=”URL” title=”DESCRIPTION”>link text</a>

The “accessible” bit is the title=”” part, and is called the title attribute.

This title attribute enables the reader to preview the link. This in turn allows users to more accurately guess where the link will take them, and make a more informed decision about whether or not they should follow it. Roll your mouse over this example link and you will see what I mean. The text that appears by your mouse cursor is the preview.
Example link

To code it, I typed <a href="http://www.google.com" title="this is a link to Google">Example link</a>

The title attribute can be any text you want, though to make it as accessible as possible, follow these simple rules:

  1. It should say something about the destination of the link.
  2. It needs to be between 3 and 80 characters long. A single sentence is normally sufficient.

If you are using the handy code buttons in the WordPress editor, the title attribute is controlled by the Title box in the pop-up. Another note on the link editor in WordPress – be very cautious about ticking the “open in a new window” box… It is bad web etiquette. Like in Jurassic Park, just because you can clone a T-Rex, it doesn’t mean you should. To be serious, you are taking control of the browsing experience away from the user and that is frowned upon in polite circles.

Next time, it will be accessible images… Exciting!

1 Comment

Filed under Advice

The building blocks of HTML

So after reading part one we have decided to give this HTML thing a go. What next?

First, we need to learn a little bit of new terminology, and I am going back to complete basics here.

What is HTML? It stands for Hyper Text Markup Language, and is a language for describing web pages. It is the code that controls everything.

  • HTML is a markup language, because you “mark up” the content
  • A markup language is a set of markup tags
  • The tags describe document content
  • HTML documents (web pages) contain HTML tags and plain text

The most important thing to grasp here is the idea of a TAG.

  • HTML tags are keywords (tag names) surrounded by angle brackets like <strong>
  • HTML tags normally come in pairs like <strong> and </strong>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

This : <strong>bold text</strong> displays like this: bold text.

There are a gazillion different tags you can use, but the most important ones for a blogger are:

<strong> </strong> – makes things BOLD
<em> </em> – makes things ITALIC
<blockquote> </blockquote> – styles things into a quote
<ul> </ul> (used with <li>) – make a bullet pointed list
<ol> </ol> (used with <li>) – makes a numbered list
<li> </li> – is the LIST ITEM (used with <ul> or <ol>)
<a href=””> </a> – makes something a link
<img src=”” /> – adds an image
<p> – creates a paragraph (if you are using WordPress you won’t need to use this, as even when you using the text editor it automatically puts in new paragraphs for you).

(I’ll talk about why in Part Three, but don’t be tempted to use B for bold or I for italic. It’s very naughty).

Tags always come in pairs. The exceptions you need to know are the <img> tag and the <a href=””> tag, because what would life be like if it was ALL straight forward? I’ll illustrate how they are different in a little bit. (Technically it is because they have attributes, but that’s getting a bit too complex for me).

So you have some text you want to make look bold. What do you do?

  1. Make sure your editor is set to “TEXT” view. Mine looks a little like this, but yours will vary depending on browser, computer, the blogging software…
  2. Type your content. La la la la la…
  3. Decide what you want to make bold (I think the third “la” will do nicely)
  4. Put <strong> in front of the word you want bold
  5. Put </strong> after the word you want bold
    (It should look something like this: la la <strong>la</strong> la la…)
  6. Press preview or publish. Whatever floats your boat and fits in with your workflow
  7. Um, there is no step seven. Told you it was easy.

You do exactly the same for any other tag you want to use.

Making a link:
As I mentioned earlier, links are a little bit more complicated, but not much. They look like this:
<a href=”URL” title=”DESCRIPTION”>link text</a>
And they break down into several sections.

  1. the tag itself <a></a>
  2. the link address, or URL, controlled by the href=”” part
  3. a word description of the link, controlled by the title=”” part
  4. how you want the link to display in your content (link text)

If I wanted to link to Google, I would type:
<a href="http://www.google.com" title="google.com">this is a link to Google</a>
And it would display like: this is a link to Google

Inserting an image:
Image tags look like this
<img src=”URL” alt=”DESCRIPTION” />
Like a link, they also come in several parts, but this time it is just one tag, not a pair.

  1. the tag itself <img />
  2. the address of where the image is saved, controlled by the src=”” part
  3. a word description of the image, controlled by the alt=”” part
  4. note the / inside the tag, to close it as there is no separate closing tag

Now with images I will not be too upset if you use the built in image uploader as the WordPress one in particular is quite handy. But always check the code it gives you so you know it isn’t aligning oddly, or linking somewhere strange.

And to get really crazy? Try making a image into a hyperlink… It’s possible because you can NEST tags. This is the code you need – does it make sense?
<a href=”URL” title=”DESCRIPTION”> <img src=”URL” alt=”DESCRIPTION” /> </a>

The last bit I want to discuss in a bit more detail in this post is the List. I have used both bullet point lists and numbered lists in this post. They are great ways to, well, make lists. Put each list item between a <li></li> and top/tail the block of <li></li> with <ul> and </ul>, and there you have it.
<ul>
<li></li>
<li></li>
<li></li>
</ul>

Want to practice or learn some more? Go to the W3Schools course and work your way through. It is quick, easy, and has handy “try it yourself” sections.

Go. Play. And when I come back with Part three we will go through HTML etiquette and accessibility and oodles of other fun stuff. Promise*

* For a given value of “fun”.

2 Comments

Filed under Advice