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 -
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!
<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.
- Page Updated -