=1. Main XHTML Structure=

An example list structure code:

<div id="menu">
<ul>
<li><a href="">Short</a></li>
<li><a href="">Looooooooooooooong</a></li>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>

Here's what it will look like: http://xhtmlvalid.com/tutorials/expandable-tabs/1

=2. Starting with CSS=

Now we need to change the list format, so the links will be displayed on a single line

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;background:#DED5D6;}
#menu ul li {float:left;}
#menu ul li a {float:left;}

You need to use the floats so the links will be displayed on a single line.
list-style-type:none removed the bullets for list items.
Make sure you add 0 margin and 0 padding, so it will clear the default list spacing.
You can customize the menu by adding a background, width, height and etc. In the example I used a 800 pixel width and #DED5D6 as the background color.

Here's what it will look like after completing step 2: http://xhtmlvalid.com/tutorials/expandable-tabs/2

=3. Slicing the Tabs=

Here's an example tab:

You will need to make a gradient with starting part. Make it as long as your longest link.

Example:

(Example file name: start.gif)

Next you will have to cut a small part from the end part.

Example:

(Example file name: end.gif)

=4. Adding the sliced images=

Now you will have to add the start.gif as the background in lists.

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;background:#DED5D6;}
#menu ul li {float:left;background:url('start.gif') no-repeat;}
#menu ul li a {float:left;}

Your output will look similar to http://xhtmlvalid.com/tutorials/expandable-tabs/3

Next you have to add end.gif in li a:

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;background:#DED5D6;}
#menu ul li {float:left;background:url('start.gif') no-repeat;}
#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;}

Make sure you add background-position: 100% 0%, so the image will be displayed on far right. Also don't forget no-repeat, so the background won't be repeated.

Here's what your tabs will look like after adding both backgrounds: http://xhtmlvalid.com/tutorials/expandable-tabs/4

=5. Link Spacing=

You now just finished the main structure.
As you can notice, all tabs touch each other and the links touch the edges of the background.
You will need to add padding to the link edges to add some space inside the tabs.

Example:

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;background:#DED5D6;}
#menu ul li {float:left;background:url('start.gif') no-repeat;}
#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;padding-left:10px;padding-right:10px;}

In the example, I added 10 pixel padding to the left and right of the links.

Your links will now have spacing on the edges.

Example: http://xhtmlvalid.com/tutorials/expandable-tabs/5

=6. Spacing between tabs and height=

If you don't want the tabs to touch each other, you can simple add right margins.

Example:

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;background:#DED5D6;}
#menu ul li {float:left;background:url('start.gif') no-repeat;margin-right:10px;}
#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;padding-left:10px;padding-right:10px;}

To change the tab height, simply add a line-height for links.

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;background:#DED5D6;}
#menu ul li {float:left;background:url('start.gif') no-repeat;margin-right:10px;}
#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;padding-left:10px;padding-right:10px;line-height:30px;}

Your tabs are no ready.

Example: http://xhtmlvalid.com/tutorials/expandable-tabs/6

=7. Changing fonts, hovers and other effects=

Now you can simply change the link font, add hovers and etc. To change the text related elements, add the code in "li a" section. To add hover effects, simply add a new line with "#menu ul li a:hover".

Example:

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;background:#DED5D6;}
#menu ul li {float:left;background:url('start.gif') no-repeat;margin-right:10px;}
#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;padding-left:10px;padding-right:10px;font:12px Arial;text-decoration:none;font-weight:bold;color:#FFFFFF;line-height:30px;}
#menu ul li a:hover {text-decoration:underline;}

Example: http://xhtmlvalid.com/tutorials/expandable-tabs/7

=8. Final Code=

XHTML:

<div id="menu">
<ul>
<li><a href="">Short</a></li>
<li><a href="">Looooooooooooooong</a></li>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>

CSS:

#menu ul {float:left;list-style-type:none;margin:0px;padding:0px;width:800px;background:#DED5D6;}
#menu ul li {float:left;background:url('start.gif') no-repeat;margin-right:10px;}
#menu ul li a {float:left;background:url('end.gif') no-repeat;background-position: 100% 0%;padding-left:10px;padding-right:10px;font:12px Arial;text-decoration:none;font-weight:bold;color:#FFFFFF;line-height:30px;}
#menu ul li a:hover {text-decoration:underline;}

Final Example

If you try to place the original entrecard code on your blog or website, you will get an invalid markup validation error.

Example (Original Entrecard code):
<script src="http://entrecard.s3.amazonaws.com/widget.js?user_id=5683&type=standard_200" type="text/javascript" id="ecard_widget"></script>

If you run a markup validation check at http://validator.w3.org/ - you will get 3 errors:

1. General entity "type" not defined and no default entity
2. Reference to entity "type" for which no system identifier could be generated
3. XML Parsing Error: EntityRef: expecting ';'

To make the code XHTML Valid, you will have to encode the & character.

To encode the & character, simply replace it with "&amp;"

Sample:
<script src="http://entrecard.s3.amazonaws.com/widget.js?user_id=5683&amp;type=standard_200" type="text/javascript" id="ecard_widget"></script>

Now you can re-run the validation check. Your Entrecard is now XHTML Valid!

CSS3 is the latest style sheet format, which is in a continuous developing stage. It is perfect for the evolving specifications of XHTML and has been continuously under modularization for the same. You find numerous areas where CSS3 has made its mark. It is amongst the most powerful and comfortable tool for any user. Let us discuss some important advantages of CSS3 that has led to its popularity.

Usage of style sheet
Before the inception of CSS3 or as a matter of fact any other versions of CSS, web designers were utilizing HTML markup for denoting border size, font colors and background styles. However with CSS concept, these features moved into an area of separate style sheets making users have an easy and comfortable time in HTML markup.

CSS3 allows changes and modifications to be made in individual modules. Again, testing of these modules is also carried out with it. This allows integration of the overall system and simplifies the maintenance procedure.

Isolation & Differentiation
CSS3 concept helps users in separating presentations from structures. Prior to this concept, web designers used HTML markup for depicting a heading to different formats in a page. The HTML structure was tough for managing, as markups required repetition for every heading while applying them. This made the presentation and maintenance more complex.

However with CSS3 concept, presentations got separated from the structure. In this case, style sheets defined presentational characteristics whereas the document structures were defined in separate heading. Separation of structure and presentation concept can help users for maintaining their web page in an easier, comfortable and efficient manner. Henceforth, it helps in developing the systems on each module basis. Thus, it provides a more flexible system.

Helps in achieving Multi-Column Layouts
Multi-Column Layouts are important features that are available only with CSS3 concept. It allows users in flowing content of different elements into different multiple columns. It provides users with a feature of auto-scrolling. Your texts are wrapped in such a manner that they become more user-friendly and simultaneously simpler for reading. All these text features are carried out without making shorter lines or words. Again, everything can be embedded in one page only. Henceforth, it makes an economical and comfortable stay for you on the web world.

Handling Flexibility
CSS3 concept also provides users with handling flexibility in web designing, as CSS3 styled information can be kept as separate documents. Again if the user desires, they can attach the information within HTML documents. These multiple formatted style sheets are easily imported anywhere too. Henceforth, it can be easily seen that CSS3 concept has changed the face of web designing with its introduction into the web world.

Why Table layouts were preferred?
Most of us know that prior to the arrival of style sheets, layout tables worked fine with everyone. Experts felt that Data tables were hard and most users preferred layout tables, as they were simple. Most people preferred tables for two reasons over DIVs. Firstly, they were around for a longer period with the web designers. Secondly, they offer a faster method for creating page layouts that are grid-based.

Simple layouts have been amongst the few reasons that have made some users have gripes against DIVs. Again, DIVs have sketchy supports for numerous browsers too. Experts used to feel that it will always be a difficult task of replacing tabular layouts with DIVs. Tabular layouts have mostly similar layouts in numerous ancient browsers (graphical).

Advantages of DIVs
However recently, some of the web designers have felt that DIVs have numerous advantages over tabular layouts. They have found out that DIVs are:

• Having page size much smaller than tables and are quicker in loading on most browsers
• The flexibility of future with further development is there with DIVs
• The source file is much easier for reading
• DIVs are friendlier in terms of different search engines

Reason for which you should shift from layout tables
Layout tables were formulated for providing structures to a data, meaning all the data had a particular variable and they were systematically stored. This was the intended use of the tables. Wide deployed subsets are included in HTML 3.2. Its standard says that tables could be utilized for tabular markup or for layouts.

However, languages in draft indicate that semantic or structural uses are preferred. This matter has even been settled with the continuously growing DIVs support. Experts feel that separating the structural data reduces the cost of maintaining them for the webmasters. Mixing the information leads to increase in ownership cost and less portability in between media and applications. With the use of tables, semantic meaning of the web page is lost. Text-only or speech browsers do not enjoy such layouts. DIVs switching allows the formation of a simple and accessible decipher web page.

How can DIVs give better performance?
Some web designers feel that DIVs can never be a replacement for such table-based layouts. Still, they feel that if browsers can work their act properly, the former can create simple layouts with little hassle. It provides you with an easy and simple environment for changing layouts. There is no requirement for modifying each page in DIVs, which is the case with tables. Again supplementing the data with extra sections are also considered simpler than their counterpart.

The final decision is in your hand
It is sometimes difficult to decide on table layouts and DIVs as both of them have striking advantages and disadvantages. Table poses hard work and extra cost to web owners, whereas DIVs might not be compatible with different browsers. In the end, the decision is in your hand to decide what will it be for your web page: An ancient table or a modern DIV or CSS.

XHTML is a more stable, sharpened and sophisticated version. This further introduced the concept of tagging into the websites. While going through modern version, most Word Press themes have been designed on XHTML rather then HTML. With the use of XHTML done in bulk across the web, it is imperative for users, who are designing, changing or preparing their themes, to know the difference between XHTML & HTML. These differences might even help in knowing the different validation errors, which usually arise from improper XHTML usage.

What is HTML & XHTML?
Hyper Text Markup Language or HTML is the means for describing the structure of text information in all web documents. It also helps in supplementing texts with embedded images, interactive forms and numerous objects. Extensible Hyper Text Markup Language or XHTML is similar in most features to HTML. It has been designed for being a HTML successor. Most experts say that the best way of referring XHTML is to call it a better HTML.

The Differences
With a basic knowledge about HTML, you are going to feel glad in knowing that major part of the HTML scripts is still applicable in XHTML. XHTML is nothing but a completion HTML codes.

All the tags should be closed
Tag closing is a compulsion in XHTML. In HTML, <p> tag can be used for opening it and not for closing. In HTML, there is a liberty to ignore validation of the code. However in XHTML, such concept is incorrect and the code would never validate.

XHTML closes the tags that were previously left open by HTML and hence completes it. These closing tags were always necessary. By using XHTML, you are just enforcing it.

Self-closing tags
XHTML now puts more emphasis on closing ALL the tags and it is not limited only to an open tag. Items including images or line breaks that are without HTML closing tags should have XHTML self-closing.

Alternative Text Images
All the XHTML image tags should be provided with alt attributes. None of the attributes are the region for editorial commentaries about any picture. Alt tags should always contain the image description. This allows them to meet requirements for accessibility along with different web standards.

Tagging in nested form
In XHTML, closing of the nested tags should be done in the same form in which opening was performed. Although nesting is also followed in HTML, yet it is not as strict as in XHTML.

Use of lowercase tags
In case of HTML, you can get away even if you are using tags in uppercase similar to <BR>. However with XHTML, all the tags should be in lowercase similar to <br/>.

It can be said that both these themes are almost similar. The only thing that differentiates both of them is that XHTML is stricter in rules than HTML.

Importance of XHTML Valid Themes
Most webmasters have a desire to provide their websites with an impressive appearance. Although there are numerous tools available, the best amongst them is the XHTML Valid Theme. It is even more popular in the blogging zones where it can automatically make a RSS feed. In fact it is considered the cheapest and the most user friendly tools for making your website popular in search engines. The latest innovation in the world of website design is XHTML Valid Theme in Wordpress.

XHTML themes are evolved from HTML and are designed for working with XML codes. Recent past has seen this theme serving in the designing application for numerous websites. The most important part in these themes is that it should be well planned and designed.

Viewed in almost all the browsers
While you are worrying about the appearance of the website, the first thing that you should always consider is your website appearance in regards to different browsers, which might be used for viewing your website. The designing of your XHTML theme should be such that it can at least be viewed on Firefox, Internet Explorer and Opera which are the commonest browsers used world wide. Most websites, which have used XHTML themes, are found to be easier to use in most browsers.

After content, the next best thing is XHTML theme
Content plays an imperative role in finalizing your position in most search engines. This is a tool that helps in bringing audience to your websites. However apart from content, the second thing that can compel your audience to stick to you is XHTML valid themes. It supplements your website with an appearance that is attractive to an eye of the visitor.

Establishes a user-friendly environment in a website
Again, all the viewers desire a user-friendly environment to visit in. XHTML themes are designed keeping that in mind. Especially for blogging, XHTML valid themes are considered amongst the most imperative tool to have. You will find numerous blogging website using XHTML themes in their websites.

Why validation works to your advantage?
Another advantage, which you get from XHTML valid themes, is that it is validated. Most webmasters do not consider this issue and in the process fail to gain the trust of their clients from the onset. With a valid theme, a proper relation is guaranteed with the users. Valid XHTML themes allow the user to have a relaxed mind, as they know that the webmasters are following the basic regulated standards.

Additional features that you get with XHTML valid themes
XHTML valid themes are simple to use and most experts have found it to have common features with other available themes in the market. However, things that have made them stand out amongst all of them include:

• For HTML Tags (select, form, text field and similar others), It provides you with a layout of a standard 2-column table.
• Left hand side positioning is given to the labels of each HTML Tags.
• It helps in reporting the validation error.
• It uses a complete Java Script on browsers for “Pure Java Script Client-Side Validation”.

With so many advantages available to you by the use of an XHTML Valid Theme, you can only be making a mistake for not using them while designing you website!