Beast-Blog.com
Building Basic Block Links

With block links you can create large and distinctive links

Mark-up, specifically HTML and XHTML, is found in two basic forms (display types): In-line mark-up and block level mark-up. In-line mark-up consists of things like links, spans, emphasis elements, etc. Block level mark-up, on the other hand, consists of paragraphs, headings, blockquotes, lists, etc. As you may or may not know, some of these elements can be styled opposite to their natural, default state. For example, lists, which are normally block level and render vertically by default, can be styled with your CSS to render horizontally or in-line. And to exemplify the opposite, certain in-line mark-up, like links, for example, can be styled with your CSS to render as block level elements.

To perform this bit of magic, all one has to do is apply the desired display type to the element in the CSS¹ (or in-line² applied directly to the element). Examples (use “a” anchor or link as the element, with the display property, and block attribute):

Linked CSS - Example 1:

a {
display : block;
}


Inline CSS - Example 2:

<a style="display:block" href="http://www.site.com">Site Link</a>


Simple right? It is just that easy to create this interoperable effect. One CSS entry is all it takes. But why bother? What are the advantages to block links? And what else can we do to take this knowledge to the next level?

First consideration is simply style. With block links you can create large and distinctive links — great for your main navigation if you want to set it apart from other less important links on your pages. Moreover you can more effectively apply background images and do all sorts of cool things. (Just be sure to make the images large enough to allow some text re-sizing.)

The second thing — even though this could easily qualify as the first thing — is that block links provide a much greater level of accessibility. Block links are predominant as mentioned in a round-about sort of way above, and they are, quite simply, easier to activate as the clickable area is larger.

The disadvantages are few: The only thing that comes to mind is that as soon as you create a block link, it can no longer be used inline without more mark-up (like an in-line or horizontal list) making it possible. Is this really a disadvantage, though? Not really.

I have created an entire page of examples and the CSS that makes them work. This is probably Part 1. I plan to tell you more at some point, some advanced techniques. For now, though, this will get you started with creating your own basic block links. From these basics you can experiment and discover some of your own advanced techniques. Use this block link to check out the examples page.

Examples Page » Building Basic Block Links

Filed under Access Counts, Do It CSS Style —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

Accessible Form Results »

Accessible SeaBeast Theme for WordPress »

GreenBeast’s PHP Contact Form »