HTML5 - Changes to Anchor Usage

HTML5 - New ways to use Hyperlinks

Block level Anchors for everyone

The Best not Less

Everyone wants it!

Click to get it now!

With the forthcoming implementation of HTML5 in 2014 and the draft standards now set in stone, its a good time to have a look at some basic changes to the way HTML4 currently operates.  The <a> tag commonly used as a Hyperlink and/or Anchor, has up until now been used as an inline element, e.g. My Link, or by using a thumbnail image as a link to a larger version.

HTML5 now makes it possible to use the <a> tag as a block element, and this allows the nesting of other elements within it.  All that is required to achieve this is to add to your CSS -
a {display:block}
and treat it the same way as you would a <div>.  This allows you to create buttons using the full range of CSS3 styles, including animation and transforms. The sky is the limit!

So on this page there are two block links with a yellow background and additional text, but in the case of IE8 and earlier IE browsers, the background has been replaced by a background-image.  Clicking anywhere on those block links will activate the hyperlink.  Hovering over the link causes a color change to the text and borders, and some text is changed with the use of CSS.  Additionally, the changed text transitions from red to blue (and vice versa) every second.  This feature has been implemented using the CSS3 "animation" property in modern browsers, but defaults to Javascript in older browsers, including Internet Explorer versions prior to IE10 and back to IE5.01.

Okay, this color transition looks very much like that delivered by the <blink> tag which had its short-lived day in the sun over fifteen years ago.  The tag, a Netscape creation attributed to Lou Montulli, still exists and until recently Firefox and Opera continued to render it, though the blink rate was faster in Firefox than in Opera.  In defence of the color transition used on this page; it doesn't qualify as a blink as the text is not being switched off and on, but rather the text color is being changed to another with similar saturation.  You may not agree!

Your hyperlinks may now use background images with text etc. superimposed, and most other elements can be nested within the block level <a> tag.  If you are using XHTML, you can use this block level hyperlink, but change your doctype to <!doctype html> to ensure the page validates.

Finally, the mark-up contains cross-browser means of implementing the equivalent of the pseudo class p:first-letter which in modern browsers can style the first letter of a paragraph, including providing an inset margin.  This has been done using a <span class="firstLetter"> tag to provide a 30px inset margin and text decoration of the first letter, or in the case of the second paragraph the whole of HTML5.  This works in all browsers except IE5.01, and as that browser displays the rest of the page correctly, an additional <s></s> tag has been added to provide the margin by creating 30px of width ahead of the first letter.  That <s> tag has been styled not to display except in IE5.01, which is addressed with the HTML class of ie5 created using IE Conditional Comments.  The reason for its use is that the <span> tag in IE5.01 provides for text-decoration only.

Barry Carlson - Page Updated -