September 16, 2003 | View Comments (0) | Design
If you are a web designer/developer you are well aware of the fact that HTML/XHTML has tags that associate what different elements are within a HTML document. The p tag represents a paragraph and a h1 tag represents a header. However, with the advent of web standards and making compliant sites these definitions somehow got lost and people started to use div's when they could have used p's or h1's.
Any document, be it written or XML or HTML, has elements within it that help define parts of the content. A page title is simply a page title and nothing else. A header of a section should only be depicted as a header of a section. When writing a paper we do not stick headers in the middle of paragraphs to place emphasis on text. That is not what headers are for. Headers are used to separate major sections of content within a text. The same should be applied to web documents. If you wish to emphasize some text in a paragraph then do so with a span class because that is the purpose they serve. Leave headers to just being headers.
Looking at my Google example you can see that there are no div's because none were needed and the document does not really contain sections. However, each piece of content is surrounded by a tag that appropriately describes what it is within the document. Lists use either ol or ul. The logo is the header of the document so I was able to define it with a h1 tag. That is one of the beauties of the FIR because it allows documents to remain semantic while adding some flavor. Even though the site is not 100% semantically correct (or maybe it is) it is pretty close.
Until we have more control with CSS over how elements work and have browsers that all behave the same then no website will be purely semantic. However, a major step would be to use the appropriate elements to describe the content in your document. You might have to surround a ul with a div, but there should be no need to use a div in place of the ul when describing a list because that is not semantically correct.
div's should control sections of the content and not the content itself. div's help to separate the header from the body and the body from the footer. They should not define a group of sentences because that is what the p tag is for. Many designer seem to forget that you can apply styles to html elements by stick a class or id within their tags.
If you plan out an XTHML document it is possible to come up with a fairly decent page without using div's at all. If you do have to use div's then do so appropriately. I believe the greatest accomplishment behind the CSS ZenGarden is that all the sites are using the same XTHML document. This shows that a well designed document can help in future redesigns. Their is no need to fear a redesign when all you are changing is the CSS file.
When advocating standards compliant sites, you must realize that it is possible to create a table-based layout that is 100% compliant. However, table-based layouts do not work semantically because they use tables to define the layout of the content. As many designers know that is not the purpose of tables within the HTML specification and therefore such sites lack semantic value.
If we begin advocating semantics then standards will follow more readily because when you force a document to follow the semantics of the XHTML/HTML specs then their is a better chance that it will already be XHTML compliant. Again we are going back to the days of the beginning of the Internet when HTML documents were just documents meant for reading and not viewing pleasure. We now need to create these types of documents again, but now with CSS it is possible to add style without corrupting the structure. The difficulty in this is that it takes another mindset to start creating semantically structured documents. This is equivalent to the shift in thinking that it took to replace table-based design with CSS-based design.
A well structured, semantically accurate XHTML document helps browsers, search engines, and designers. The benefit of semantic documents is that they follow standards not the other way around. It takes time and energy to develop correct documents, but this time and energy is well spent in the long run. Semantically structured XHTML documents are just another type of XML document and therefore the abilities to manipulate the content that the document holds are limitless.
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies