20世纪80年代中期，GUI（图形用户界面）软件出现之后，但它还没有成为桌面软件的统治者之前，一个聪明的设计者有一个想法，即在屏幕中模仿标签页，让用户在同一屏幕中切换不同的页面信息。空间是谁首先这么做的不清楚，但是，无疑使用标签页面的第一个软件产品是苹果计算机公司的HyperCard，它的帮助堆栈中使用了标签页面。
标签面板是一种标签卡片的屏幕仿真形式，例如，处方盒子中的标签卡片、或者笔记本中的标签页。大多数计算机用户知道如何使用真实的标签卡片和标签页，屏幕标签面板使用了这个知识。
当用户点击一个标签时，对应的面板移动到堆栈的“前面”，显示它上面内容。标签面板可以将许多信息和控件集合在一个紧凑的空间里。
Web设计人员喜欢标签面板的原因与它们被用于桌面软件的原因相同。然而，标签面板与单行按钮、复选框和下拉菜单不同，它不是一种标准的HTML控件。Web设计人员必须“培养自己的”标签面板。因此他们这样做了，而且其中一些很成功。但是，Web上的经常使用的标签有些问题。
我直截了当地说：Web上的许多标签糟透了。仅仅因为一个设计人员创建了一个水平导航条，就称其为“标签”，而实际没有将其作成标签。为了使标签名副其实，它必须看起来和用起来都像标签。Web上许多东西都被叫做“标签”，但二者都不具备，因此无法利用先前用户有关标签如何使用的知识。结果至少造成用户的不确定和疑惑，有时甚至是混淆。
在Web上使用标签的三个常见缺点如下：
·带标注的标签相互不独立
·带标注的标签与相应的面板不连接
·没有显示哪一个是当前选中的标签
我们来看一看这些缺点在实际网站中的例子。
标签不分离
ITN.net网站中关于栏目标签面板中标签没有完全分开的例子。航班预订页面包含了类似标签的控件，用于三种不同预约表单之间的切换，每种表单适用于一种旅行。这些“标签面板”设计简单；也就是说，标签不分离。另一方面，这些标签的确指出了当前选中的标签，而且标签与面板完全相连。
这些标签的过分简单是难以理解的，因为在当前页面的顶部有另一组设计更好的标签。这组标签用于在总公司（美国快递）提供的各种服务之间进行切换，标签没有显露出Web标签面板中三种觉缺点中的任何一个。没有人员之间更多的协调可以改善ITN网站的劣质标签。

标签与面板不相连
在“漂亮的尝试但是没有雪茄（奖励）”分类中的标签视觉上相互分离，标记了当前选中的标签，但是选中的标签与对应的面板没有可视的连接。设计人员为了创建漂亮的标签非常努力，但是他们忽略了一个重要的细节：当一个标签被选中时，它应该移动到前面，而且真正地显示为与它的面板相连。如果一个标签没有做到这一点，那么或许是一个合理的切换控件，但是用户不会承认它是一个标签。
Fedex.com网站提供了一个明显的例子。这个网站的主要导航条位于页面顶部，显示为一组橙色的类似于标签的按钮。尽管是“类似于标签的”，但是这些不是标签，因为在选中的标签与显示相应内容的页面之间没有可视的连接。
WalMart.com网站说明Web设计人员有时的确在标签与对应内容面板之间创建了一个可视连接。当标签被选中时，它下面有一条与标签颜色相同的细条纹，对不起，这不够好，带颜色的条纹太细，无法给人留下标签与下面的面板相互连接的印象。

没有指出当前标签
我看到的最糟糕的标签可能在宏碁美国（AAC.Acer.com）网站中。主要导航条是每页内容区顶部的一组“标签”，这组“标签”包含了前面提到的两个缺点：标签不分离，而且选中的标签似乎没有与对应内容面板相连接。这些“标签”同时还有第三个缺点：没有标记当前选中标签。
有人可能会辩解，宏碁美国网站中没有标签——只有一个设计糟糕的水平导航条。但是，很明显，这个网站是为了配合宏碁主站点（Acer.com）而设计的。尽管Acer.com网站的导航条一开始看上去与宏碁美国的相似，但是当选中其中一项时，看起来就像标签了。

解决之道
Web上的标签面板应该看起来和运行起来都像标签，否则，它只能是一个水平导航条，而不是标签，它无法借鉴人们对于桌面软件标签面板和实际的标签卡片和页面的经验。

为Web设计标签
最后，HTML语言或者它的继承者应该提供一种标准标签面板组件，该项组件由浏览器负责解释和显示，就像表单控件一样，例如，单选按钮。到那个时候以前，Web设计人员还将继续“培养自己的”标签面板。
将前面描述的三个缺点简单地反过来，就可以得到如何设计用户腐朽的标签的原则：
·相互分离的标签 标签应该视觉上相互分离。
·将标签与面板连接 标签应该看上去与相应内容的面板接近或者相连。最好的方法是面板的背景色与标签相同，同时删除任何分离标签的面板的可视线段。
·标记当前标签 标签应该指出当前选中的标签。如果标签与面板连接很好，那么就可以了（与桌面软件中一样），否则，标记当前标签的附加方式不能省略，例如，增加尺寸，粗体显示标签或者改变标签的颜色。

最终目的：桌面GUI标签
桌面GUI软件中的标签被认为是最理想的。Web上的标签应该看起来和运行起来尽量与GUI中的标签相似。它们与GUI标签越不相似，Web用户也越不可能承认它们是标签。

优秀的Web标签
我在Web上看到的最好的标签在AskJeeves.com网站和ESPN.com网站中，这两个网站中的标签完全遵守了上述三个设计原则，而且看上去与计算机用户认识的桌面软件中的标签非常相似。

一个宽条纹比什么都没有要好
记住这个原则，即标签应该与各自的面板相连接。有时候，整个面板的背景色与标签的颜色相同是不可行的。模拟视觉连贯性的一种方法是将标签与一条颜色相同的条纹连接，上面带有一些数据和控件更好。为了使这种模拟效果起作用，条纹必须至少宽5mm（1/4英寸）。我们在WalMart.com网站中看到的例子，在标签下面的一条带颜色的细线在标签与面板之间无法建立有效的视觉连贯性。
在iFilm.com网站中可以发现一个关于模拟标签的相当成功的例子。