If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

As we all know, the table element shouldn’t be used for styling your document. The div element should be used instead, together with the id and class attribute to style it with CSS, just like the HTML 4.01 and XHTML 1.0 specs tells us to do. But aren’t we polluting our markup with these div elements, because we’re only using them for presentational purposes?

First, let’s take a look at an example. Here’s the HTML code of the top of previous layout:

<div id="logo">
 <h1>Programimi.com</h1>
 <hr>
</div>

As you see, I wrapped the site name and a hr element inside a div element. But the div element has absolutely no purpose in my document instead of having the id attribute and using CSS to style it. So by using divs, you don’t separate presentation from structure at all, nor does it have any semantic value, just like the font and center elements.

One might argue that the div element can be used to divide the document into sections. If this were true, the div would have a real purpose. Unfortunately, it isn’t. Just take a look at what the HTML 4.01 specification says about the element:

The div and span elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (span) or block-level (div) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute,etc., to tailor HTML to their own needs and tastes.

Ok, the spec does talk about adding structure, but that’s actually quite vague, don’t you think? What kind of structure do they mean!? Because the W3C didn’t give any real information on how the div element can give structure to a document that can also be understood by user agents, “adding structure” is actually not possible because no-one understands how it is structurized. The only possible way to do so is by using the id attrubute, but the value of this attribute can only be understood by humans, not user agents. Therefore, it’s still impossible to give structure to a document by using the div element so the only reason to use the element is to group certain elements together in order to style them (or give it a lang like the quoted piece from the HTML 4.01 spec says, but who uses the attribute anyway!?).

So should we just ditch the div element? I guess not. You should, but it would be impossible to make a decent layout at the moment. Which I, as a web designer, enjoy looking at. Another reason would be because we don’t have any alternatives. Well, not yet. Just take a look at the header element, introduced by HTML, or XHTML 2’s role attribute. By using either one of the methods instead of the div element from my previous example at the beginning of this article, that section will actually have a meaning. In other words, the document will become semantically richer.

• 0 Comments

If you have a website, it is most likely that your server is using Apache as its web server software. Apache has a nice feature that provides the ability to customize configuration directives defined in the main configuration file using a file called .htaccess. In this article I’d like to discuss how you can use the .htaccess file to pimp up your website.

Mod_rewrite

Lets start with my personal favorite: mod_rewrite. It’s an extension module that allows you to mask URIs. An example: I have the URI http://domain.com/contact to point to my contact form, but there’s no file called contact. The URI to my contact form points to an ugly WordPress generated URI with some PHP variables. This can be done with the following configuration:

RewriteEngine On

RewriteRule ^contact/?$ /wordpress/index.php?name=$1

Many also use mod_rewrite to redirect anyone who accesses their website with the www subdomain to the bare domain name, because the www subdomain is just pointless as described on no-www.org. Here’s the configuration for .htaccess to achieve this effect (this code can also be found at no-www.org):

RewriteEngine On

RewriteCond %{HTTP_HOST} ^www.domain.com$ [NC]

RewriteRule ^(.*)$ http://domain.com/$1 [R=301,L]

If you’d like to learn more about this module, do to Apache’s documentation about mod_rewrite.

gzip

Using this is absolutely a must. You can allow the server to compress the HTML using gzip and send it to the browser (if it supports gzip, unlike IE). The browser receives it, decompresses it and shows the page like it would normally do. This will definitely reduce your bandwidth. The front page of this website was around the 10KB before I used gzip to compress my pages, and now it is around 3,50KB. mozilla.org has a nice page for a more detailed description about gzip compression. Here???s the configuration to use gzip compression for your HTML files: (Yes, it’s just one line.)

php_value output_handler ob_gzhandler

The AddDefaultCharset directive

How does a user agent know which character encoding has been used? The server should provide this information. The most straightforward way for a server to inform the user agent about the character encoding of the document is to use the “charset” parameter of the “Content-Type” header field of the HTTP protocol ([RFC2616], sections 3.4 and 14.17).

That’s what the HTML 4.01 Specification tells us about defining the character encoding. Yet, many people still use the meta element for this purpose. The meta element also sends an HTTP header, but when the browser parses the document, it has to guess character encoding to parse the beginning of the document because the character encoding is only defined later on, in the head element. So it\ s much better to configure your server to send the HTTP header before the file is being parsed. You can use the .htaccess file for this as well, with the AddDefaultCharset directive. The configuration below configures the server to send all documents with the UTF-8 encoding:

AddDefaultCharset utf-8

Learn more about the AddDefaultCharset directive.

The ErrorDocument directive

I guess this is probably the most well known directive, but I’d like to put it in this article anyway. With this directive you can specify what file should be shown when a certain HTTP Status Code has been sent. So if a user agent tries to access a file on a server that does not exist, the server responds with the 404 Status Code. You can use the ErrorDocument directive to show a custom error page instead of Apache’s boring default page. Here’s an example configuration to define a custom error page for when a 404 error code has been sent:

ErrorDocument 404 /error-docs/404.html

Get more info about the ErrorDocument directive.

Those were the directives I currently use in my .htaccess file. But of course, there are a lot more. Most of them are explained at the page Apache Core Features. If you have any other .htaccess tricks that you find very useful, feel free to post them.

• 0 Comments