HTML

Problems with attributes not working in IE and Opera?August 30th, 2010

So, what did I do with my bank holiday weekend? I was intrigued by some odd Opera and IE behaviour — that’s what

I was presented with a site whose styling wasn’t working for certain tags. It was an odd one. I thought it might be an absolute positioning bug, but testing was bringing up nothing – why on earth would simple CSS styling, nothing special, fail completely in Opera?

Then I took a closer look at the source — and something caught my eye. There was some malformed HTML:
<h1 title="test""style="background-color: #ccc">Test</h1>

Gotcha! Removing that innocent looking multiple quote fixed the problem. But I still wasn’t happy. Browsers should recognise and fix badly formed HTML, no? It’s not like a closing tag was completely missing. So I made a basic HTML template with little more than the h1 tag you see above, and just enough HTML5 to make it validate.

Then I played around with it. What happens if I add a space?
<h1 title="test"" style="background-color: #ccc">Test</h1>

That fixed it. Hm. Why on earth would the lack of space break things? Lacking a space is completely fine in both HTML and XHTML. Let’s remove the space again, and test some more. What if I replace the rogue ” with another character – say $?
<h1 title="test"$style="background-color: #ccc">Test</h1>

Wait — that’s a turnout for the books — it now breaks in Chrome. Then it dawned on me. If I replace that dollar sign with a normal alphanumeric character — the character ‘a’:
<h1 title="test"astyle="background-color: #ccc">Test</h1>

That’s it! Without the space between attributes, Opera and Internet Explorer are treating “style as the attribute, with Webkit and Gecko being smart and removing the extra quote. Add the space, and Webkit does the same. Obvious when you think about it, isn’t it?

So that’s what I did with my bank holiday weekend. What did you do?

Tags: , ,
Posted in Code, Web design | No Comments »
Permalink

The Accessible Web #3: Prose and contentFebruary 13th, 2009

An ongoing series of articles about web accessibility issues, tips, tricks, and standards.

The content of a site is something that most website owners neglect to give much thought to, but in my opinion it is something that is just as important as the design of the site itself. Good prose not only makes the site more pleasurable to read (making people come back), but it also helps people with ADHD, those reading from a mobile device, and those who are merely tired.

Use a structure

If there’s a structure to your writing, this allows the reader to skim through the page first to decide whether or not the article is worth reading. So of course, if the reader can’t skim the article easily they might just move on.

Use bullet points and headings

Something else to help skimming the article is using bullet points and headings. This helps the reader get the general gist of the article without having to carefully read the entire page. For example in this article, headings are used which means the reader only needs to read the introduction and the headings to get the general idea.

Get to the point

There’s nothing more dull than somebody going off on a tangent; especially if it’s a boring one. Try and stick to the point as much as you can (unless, of course, the point of your writing is to be a free-for-all rant), that way you’re less likely to lose your readers.

Use simple language (WCAG2 3.1.5)

People shouldn’t need to have a dictionary to hand whenever they visit your site. Try not to use over-complicated language, using simple words rather than obscure ones. This helps those with learning disabilities and younger readers, who may not know what the words mean.

Provide definitions (WCAG2 3.1.3 — 3.1.4)

Whenever using acronyms, abbreviations1 and technical language, you should always provide a definition for those who do not know what the word or abbreviation means. Thankfully, HTML makes it easy to do this without disrupting your copy with three tags:

Acronyms

Using <acronym title="British Broadcasting Corporation">BBC</acronym>'s iPlayer you are able to watch a previously aired program at any time

Using BBC‘s iPlayer you are able to watch a previously aired program at any time

Abbreviations

<abbr title="Adobe Creative Suite 4">CS4</abbr> is the latest version of the software suite, with many improvements from the previous version

CS4 is the latest version of the software suite, with many improvements from the previous version

Definitions

There are a number of <dfn title="An audio file that can be downloaded to your iPod or other MP3 player">podcasts</dfn> available on the iTunes store that you can download for free

There are a number of podcasts available on the iTunes store that you can download for free

Use good typography

This will be covered in a later article, but using good typography (such as word and line spacing, font selection, and text alignment) will also make your writing easier and quicker to read, with subtle changes making huge improvements.

External links

  1. The difference between the two is up to you to debate! [↩]

Tags: , , ,
Posted in Tech Usability | 2 Comments »
Permalink

6 common HTML errorsJanuary 9th, 2009

A recent study by Opera has found that only 4.13% of websites are valid. Although admittedly sometimes writing invalid HTML can’t be helped, there are many errors that can be easily avoided. These are:

Using outdated tags and attributes

Over the years, W3C have depreciated a number of HTML tags (such as <center> and <u>) and tag attributes; stuff that can be better done with CSS. However, many people forget to update their HTML (or a WYSIWYG editor uses these depreciated tags), and so they end up in websites anyway. Sometimes using CSS doesn’t quite cut it, and the author has no choice but to use depreciated tags and attributes.

Using the incorrect tag

This won’t throw up an error in the validator, but is certainly incorrect HTML. It seems loads of people don’t realise how much HTML and CSS is actually out there: there’s definition lists (for question/answer type lists), css for better form and page layout (rather than tables), more table tags than the usual column/cell tags, and six different header tags (which shouldn’t be used for their typography!). If you use the correct semantic HTML, it will vastly improve site accessibility and SEO.

Not using HTML entities

Certain characters, such as &, <, >, and £ need to be converted to their entities. Again, this is usually down to poor WYSIWYG editors, or people who are unaware of this requirement editing sites. Not using entities isn’t usually the end of the world, especially if it’s a common character (such as the ampersand), but it may cause problems with foreign characters.

Using invalid HTML/XHTML syntax

In XHTML all tags need to be closed, even if it’s a self closing tag such as <br />. In HTML, not all tags need to be closed but a good number still do. There are other changes such as only allowing lowercase tags and requiring quotes in attributes. Often when converting from HTML to XHTML, these are missed, and sometimes can cause problems with the website not displaying as intended.

Also, sometimes you may forget to close your tag pairs. A good HTML editor will warn you about this!

Putting tags in the wrong place

Sometimes if you put a tag somewhere where the validator isn’t expecting it, an error will show. This includes not surrounding inline elements (such as <span> or <a>) with block elements, or putting other tags inside lists.

Not using the ‘alt’ attribute

I cannot stress how important the alt attribute is! It’s important not only for accessibility but also for SEO. If your image is purely decorative, still use the alt attribute but leave it empty (alt=”"), or better yet use CSS.

And there we have it, six HTML errors that I see a lot, although there are many more. It’s always good practice to run your site through the validator to catch any mistakes you make, to make everybody’s life easier!

Tags: , ,
Posted in Web design | 4 Comments »
Permalink

Categories