Building Basic Block Links

Posted December 15th, 2005 by Mike Cherim

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 CSS1 (or in-line2 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.


4 Responses to: “Building Basic Block Links”

  1. Jonathan Fenocchi responds:
    Posted: December 15th, 2005 at 9:41 pm

    Great beginner’s CSS article, Mike, and great examples!

  2. Anthony Brewitt responds:
    Posted: December 19th, 2005 at 9:35 am

    I have just been googling for the block g technique. I am really interested in css image rollovers because I want a menu that consists of a photo with block g’s type of transparency affect on rollover!

    Thankyou Mike, and have you preloaded the images in Jscript? / How?

  3. Anthony Brewitt responds:
    Posted: December 20th, 2005 at 4:46 am

    Thanks Mike, its really great for accessibility!

Sorry. Comments are closed.




Note: This is the end of the usable page. The image(s) below are preloaded for performance only.