View source for Tab (interface)

{{Short description|Interface component}}
{{redirect|New Tab|the novel|New Tab (novel)|5=Tab (disambiguation)}}
{{Use dmy dates|date=February 2020|cs1-dates=y}}
[[File:Language tabs on en wiktionary.gif|thumb|upright=1.35|Example of a tabbed interface with two sets of tabs: Horizontal tabs, at the top, allow navigation to different pages within the [[Wiktionary]] [[website]]. Vertical tabs, to the left, represent languages in which a given spelling occurs, where the selected tab shows the word ''jam'' ('already') in [[Esperanto]].]]

In interface design, a '''tab''' is a [[graphical user interface object]] that allows multiple [[documents]] or [[Panel (computer software)|panel]]s to be contained within a single [[window (computing)|window]], using tabs as a navigational widget for switching between sets of documents.<ref>{{Cite web |last=Khola |first=Vivek |date=2023-02-17 |title=Tab (interface) |url=https://www.blogger.com/blog/post/edit/6582574524271522717/8279353370664220742 |website=www.blogger.com }}</ref> It is an interface style most commonly associated with [[web browser]]s, [[web application]]s, [[text editor]]s, and preference panels, with [[window manager]]s and [[tiling window manager]]s.

Tabs are modeled after traditional card tabs inserted in paper files or card indexes (in keeping with the [[desktop metaphor]]). They are usually graphically displayed on webpages or apps as they look on paper.

Tabs may appear in a horizontal bar or as a vertical list. Horizontal tabs may have multiple rows. In some cases, tabs may be reordered or organized into multiple rows through [[drag and drop]] interactions. Implementations may support opening an existing tab in a separate window or [[Selection (user interface)#Range selection|range-selecting]] multiple tabs for moving, closing, or separating them.<ref>{{cite web |last1=Elliott |first1=Matt |title=How to manipulate multiple tabs in Chrome or Firefox |url=https://www.cnet.com/how-to/how-to-manipulate-multiple-tabs-in-chrome-or-firefox/ |website=CNET |access-date=29 October 2021 |language=en |date=2014-01-28}}</ref>

==History==
The WordVision [[DOS]] word processor<ref name="manes19840403"/> for the [[IBM PC]] in 1982<ref name="seymour19940315"/> was perhaps the first commercially available product with a tabbed interface.<ref name="seymour19940315"/>

[[Image:HyperTIESAuthoring.jpg|thumb|right|250px|[[HyperTIES]] browser and [[Gosling Emacs]] authoring tool with [[pie menu]]s on the [[NeWS]] window system]]
[[Don Hopkins]] developed and released several versions of tabbed window frames for the [[NeWS]] window system as free software, which the window manager applied to all NeWS applications, and enabled users to drag the tabs around to any edge of the window.<ref name="DonHopkinsPSIBER">{{cite web|url=http://www.donhopkins.com/drupal/node/97|title=The Shape of PSIBER Space: PostScript Interactive Bug Eradication Routines|author-first=Don|author-last=Hopkins|author-link=Don Hopkins|date=October 1989|work=Don Hopkins' Web Site|access-date=2010-03-01}}</ref>

The [[NeWS]] version of UniPress's [[Gosmacs|Gosling Emacs]] text editor was another early product with multiple tabbed windows in 1988.<ref>{{cite web|url=http://www.donhopkins.com/home/archive/emacs/to.jag.txt|title=Email from Don Hopkins to James Gosling, David S H Rosenthal, Owen Densmore, Jerry Farrell about Text selection in NeMACS.|author-first=Don|author-last=Hopkins|author-link=Don Hopkins|date=1988-08-17|work=Don Hopkins' Web Site}}</ref> It was used to develop an authoring tool for [[Ben Shneiderman]]'s [[hypermedia]] browser [[HyperTIES]] (the NeWS workstation version of The Interactive Encyclopedia System), in 1988 at the [[University of Maryland Human-Computer Interaction Lab]].<ref>{{cite web|url=http://www.donhopkins.com/drupal/node/101|title=HyperTIES Hypermedia Browser and Emacs Authoring Tool for NeWS|author-first=Don|author-last=Hopkins|author-link=Don Hopkins|date=2005-09-29|work=Don Hopkins' Web Site|access-date=2010-03-01}}</ref><ref>{{cite web|url=https://www.youtube.com/watch?v=hhmU2B79EDU|title= HCIL Demo - HyperTIES Authoring |author-first=Don|author-last=Hopkins|website= [[YouTube]] |author-link=Don Hopkins}}</ref> HyperTIES also supported [[pie menus]] for managing windows and browsing hypermedia documents with [[PostScript]] [[applet]]s.

While [[Boeing Calc]] already utilized tabbed sheets (as so-called ''word pads'') since at least 1987,<!-- Boeing Calc 3.0 August 1987, but possibly earlier, to be researched --><ref name="Malloy_1987"/><ref name="Corwyn"/> [[Borland]]'s [[Quattro Pro]] popularized tabs for spreadsheets in 1992. [[Microsoft Word]] in 1993 used them to simplify submenus.{{r|seymour19940315}} In 1994, [[BookLink|BookLink Technologies]] featured tabbed windows in its [[InternetWorks]] browser. That same year, the text editor [[UltraEdit]] also appeared with a modern multi-row tabbed interface.  The tabbed interface approach was then followed by the [[Internet Explorer shell]] [[NetCaptor]] in 1997. These were followed by several others like [[IBrowse]] in 1999, and [[Opera (web browser)|Opera]] in 2000 (with the release of version 4 - although an MDI interface was supported before then), MultiViews October 2000, which changed its name into MultiZilla on April 1st, 2001 (an [[Add-on (Mozilla)|extension]] for the [[Mozilla Application Suite]]<ref>{{cite web|url=http://multizilla.mozdev.org/history.html|title=Mozdev.org - multizilla: history|last=van Rantwijk|first=HJ|publisher=[[Mozilla]]|access-date=2010-03-01|archive-date=2008-12-07 |archive-url=https://web.archive.org/web/20081207023540/http://multizilla.mozdev.org/history.html|url-status=dead}}</ref>), [[Galeon]] in early 2001, [[Mozilla Foundation|Mozilla]] 0.9.5 in October 2001, Phoenix 0.1 (now [[Mozilla Firefox]]) in October 2002, [[Konqueror]] 3.1 in January 2003, and [[Safari (web browser)|Safari]] in 2003. With the release of [[Internet Explorer 7]] in 2006, all major web browsers featured a tabbed interface.

Users quickly adopted the use of tabs in web browsing and web search. A study of tabbed browsing behavior in June 2009 found that users switched tabs in 57% of tab sessions, and 36% of users used new tabs to open [[Search engine (computing)|search engine]] results at least once during that period.<ref>{{cite conference | author = Jeff Huang, Ryen W. White | year = 2010 | title = Parallel Browsing Behavior on the Web | book-title = Proceedings of the 21st ACM Conference on Hypertext and Hypermedia (HT '10) | url =http://jeffhuang.com/ParallelBrowsing_Final.pdf }}</ref>

Numerous additional browser tab capabilities have emerged since then. One example is visual tabbed browsing in [[OmniWeb]] version 5, which displays preview images of pages in a drawer to the left or right of the main browser window. Another feature is the ability to re-order tabs and to [[bookmark (web)|bookmark]] all of the webpages opened in tab panes in a given window in a group or bookmark folder (as well as the ability to reopen all of them at the same time). [[Internet Explorer|Microsoft Internet Explorer]] marks tab families with different colours.

==Development==
Tab behavior in an application is determined by the underlying [[widget toolkit]] (for example Firefox uses [[GTK]]) framework. Due to lack of standardization, behavior may vary from one application to the next, which can result in usability challenges.

==Tab hoarding==
[[File:Tab Hoarder Bar.png|thumb|The tab bar on Chromium of a browser tab hoarder.]]
''Tab hoarding'' is [[digital hoarding]] of web browser tabs. Users may accumulate tabs as reminders of tasks to research or complete<ref name="y641">{{cite web | last=Ramis | first=Ali Jaffe | title=Stop, Before You Close This Tab (or Any Others) … | website=The New York Times | date=October 24, 2023 | url=https://www.nytimes.com/2023/10/24/magazine/browser-tabs-forever.html | access-date=September 25, 2024}}</ref> (rather than using dedicated [[reminder software]]). They may use multiple browser windows to organize tabs or direct [[Attention|focus]];<ref name="y641" /> however, leaving multiple windows open can exacerbate tab clutter.<ref name="m342">{{cite conference | last=Ma | first=Rongjun | last2=Lassila | first2=Henrik | last3=Nurgalieva | first3=Leysan | last4=Lindqvist | first4=Janne | title=When Browsing Gets Cluttered: Exploring and Modeling Interactions of Browsing Clutter, Browsing Habits, and Coping | publisher=ACM | date=April 19, 2023 | isbn=978-1-4503-9421-5 | doi=10.1145/3544548.3580690 | page=1–29}}</ref>

Tab hoarding can lead to [[Psychological stress|stress]] and [[information overload]],<ref name="m342" /> [[distraction]], and reduced computer performance. It can develop into emotional attachment to the set of open tabs,<ref name="overcoming">{{cite news |title=Overcoming tab overload: Researchers develop tool to better manage browser tabs |url=https://techxplore.com/news/2021-05-tab-overload-tool-browser-tabs.html |access-date=14 June 2021 |work=techxplore.com |language=en}}</ref> including fear of losing them upon a [[Crash (computing)|crash]] or other [[reboot]],<ref name="y641" /> and conversely, [[Relief (emotion)|relief]] when tabs are properly restored.<ref name="n053">{{cite web | last=Ahmed | first=Zo | title=Zero regrets: Firefox power user kept 7,500 tabs open for two years | website=TechSpot | date=May 5, 2024 | url=https://www.techspot.com/news/102871-zero-regrets-firefox-power-user-kept-7500-tabs.html | access-date=September 25, 2024}}</ref> Tab hoarders have attributed the behavior to [[anxiety]],<ref name="o577">{{cite web | last=Koebler | first=Jason | title=I Live in a Digital Dumpster Fire | website=VICE | date=April 3, 2015 | url=https://www.vice.com/en/article/i-live-in-a-digital-dumpster-fire/ | access-date=September 25, 2024}}</ref> [[fear of missing out]],<ref name="j521">{{cite web | last=Cassella | first=Carly | title=We're Getting Buried in Browser Tabs And Scientists Want to Fix It | website=ScienceAlert | date=May 9, 2021 | url=https://www.sciencealert.com/tab-overload-is-a-common-problem-for-people-browsing-the-internet-survey-finds | access-date=September 25, 2024}}</ref> [[procrastination]],<ref name="h106">{{cite web | last=Kehayias | first=John | title=Death by 1,000 Tabs: Confessions of a Tab Hoarder | website=VICE | date=January 21, 2021 | url=https://www.vice.com/en/article/death-by-1000-tabs-confessions-of-a-tab-hoarder/ | access-date=September 25, 2024}}</ref> and poor [[personal information management]] practices.<ref name="m036">{{cite web | last=Samuel | first=Alexandra | title=Browser Tab Clutter Is The New Hoarding | website=JSTOR Daily | date=July 11, 2017 | url=https://daily.jstor.org/browser-tab-clutter-is-the-new-hoarding/ | access-date=September 25, 2024}}</ref><ref name="overcoming">{{cite news |title=Overcoming tab overload: Researchers develop tool to better manage browser tabs |url=https://techxplore.com/news/2021-05-tab-overload-tool-browser-tabs.html |access-date=14 June 2021 |work=techxplore.com |language=en}}</ref>

The prevalence of tab hoarding is acknowledged by browser vendors such as [[Mozilla]], and has inspired [[Memory management|memory]] and tab management features in browsers and [[Browser extension|extensions]].<ref name="n053" /> Such features include tab grouping, which allows related tabs to be visually organized<ref name="t503">{{cite web | last=Navigation | first=Social Links | title=Google is giving Chrome users a way out of tab overload hell | website=TechRadar | date=May 13, 2020 | url=https://www.techradar.com/news/google-is-giving-chrome-users-a-way-out-of-tab-overload-hell | access-date=September 25, 2024}}</ref> and collapsed; conversion of tabs into a list of [[hyperlink]]s;<ref name="m036" /> and alternative [[User interface|interface]] paradigms, such as framing high-level [[Task (project management)|tasks]] as first-class objects instead of tabs.<ref name="j998">{{cite conference | last=Kulkarni | first=Minchu | last2=Kapoor | first2=Kshitij | last3=Madala | first3=Deva Surya Vivek | last4=Bansal | first4=Sanchit | last5=Hangal | first5=Sudheendra | title=Compartmentalizing web browsing with Sailboat | publisher=ACM | date=2019 | isbn=978-1-4503-7716-4 | doi=10.1145/3364183.3364187 | page=1–8}}</ref><ref name="overcoming">{{cite news |title=Overcoming tab overload: Researchers develop tool to better manage browser tabs |url=https://techxplore.com/news/2021-05-tab-overload-tool-browser-tabs.html |access-date=14 June 2021 |work=techxplore.com |language=en}}</ref> A 2021 study developed [[User interface design|UI design]] considerations which could enable better tools and changes to the code of web browsers that allow [[knowledge worker]]s and other users to better manage and utilize their browser tabs.<ref name="overcoming" /><ref>{{cite book |last1=Chang |first1=Joseph Chee |title=Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems |last2=Hahn |first2=Nathan |last3=Kim |first3=Yongsung |last4=Coupland |first4=Julina |last5=Breneisen |first5=Bradley |last6=Kim |first6=Hannah S |last7=Hwong |first7=John |last8=Kittur |first8=Aniket |date=2021-05-06 |publisher=Association for Computing Machinery |isbn=9781450380966 |pages=1–15 |chapter=When the Tab Comes Due:Challenges in the Cost Structure of Browser Tab Usage |doi=10.1145/3411764.3445585 |doi-access=free |s2cid=233987809}} [[File:CC-BY_icon.svg|50x50px]] Available under [https://creativecommons.org/licenses/]</ref>{{explain|date=September 2024}}

==Implementations==
[[File:Screenshot of tabs in GNOME Text Editor.png|thumb|Tabs in [[GNOME Text Editor]]]]
[[File:Screenshot of tabs in GNOME Web.png|thumb|Tabs in [[GNOME Web]]]]
[[CSS framework]]s which have tabs include [[Bootstrap (front-end framework)|Bootstrap]],<ref>{{cite web |title=Navs and tabs |url=https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabs |website=getbootstrap.com |access-date=27 January 2025 |language=en}}</ref> [[Tailwind CSS]]<ref>{{cite web |title=Tailwind CSS Tabs - Official Tailwind UI Components |url=https://tailwindui.com/components/application-ui/navigation/tabs |website=www.tailwindui.com |access-date=27 January 2025 |language=en}}</ref> and [[Foundation (framework)|Foundation]].<ref>{{cite web |title=Tabs {{!}} Foundation for Sites 6 Docs |url=https://get.foundation/sites/docs/tabs.html |website=get.foundation |access-date=27 January 2025 |language=en}}</ref>

[[Widget toolkit]]s which have tabs include [[GTK]] using the {{Mono|Notebook}}<ref>{{cite web |title=Gtk.Notebook |url=https://docs.gtk.org/gtk4/class.Notebook.html |website=docs.gtk.org |access-date=27 January 2025 |language=en}}</ref> widget as well as the Adwaita library using the {{Mono|TabBar}}<ref>{{cite web |title=Adw.TabBar |url=https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/class.TabBar.html |website=gnome.pages.gitlab.gnome.org |access-date=27 January 2025 |language=en}}</ref> widget. [[Qt (software)|Qt]] using the {{Mono|QTabWidget}} widget.<ref>{{cite web |title=QTabWidget Class {{!}} Qt Widgets 6.8.1 |url=https://doc.qt.io/qt-6/qtabwidget.html |website=doc.qt.io |access-date=27 January 2025}}</ref>

==See also==
* [[Comparison of document interfaces]] 
* [[Internet Explorer|Microsoft Internet Explorer]] marks tab families with different colours
* [[Multiple document interface#IDE-style interface|IDE-style interface]]
* [[Ribbon (computing)]]

==References==
{{Reflist|refs=
<ref name="manes19840403">{{cite magazine |title=Taking A Gamble With Word Vision |author-last=Manes |author-first=Stephen |author-link=Stephen Manes |magazine=[[PC Magazine]] - The Independent Guide To IBM Personal Computers |publisher=[[PC Communications Corp.]] |issn=0745-2500 |date=1984-04-03 |volume=3 |number=6 |pages=211–221 |url=https://books.google.com/books?id=e-gI2W-3JwkC&pg=PA211 |access-date=2015-02-15 |url-status=live |archive-url=https://web.archive.org/web/20150317045015/https://books.google.com/books?id=e-gI2W-3JwkC&lpg=PA212&pg=PA211 |archive-date=2015-03-17}}</ref>
<ref name="seymour19940315">{{cite magazine |title=Everything Old Is New Again |author-last=Seymour |author-first=Jim |magazine=[[PC Magazine]] |publisher=[[Ziff-Davis Publishing Company]] |issn=0888-8507 |date=1994-03-15 |volume=13 |number=5 |pages=99–100 |url=https://books.google.com/books?id=_7aEwukQQ0AC&pg=PA99 |access-date=2015-02-15 }}</ref>
<ref name="Corwyn">{{cite web |title=Boeing Calc - The first truly 3-D spreadsheet. |author=corwyn |url=http://www.boeingcalc.com/ |url-status=dead |archive-url=https://web.archive.org/web/20060219103549/http://www.boeingcalc.com/ |archive-date=2006-02-19}}</ref>
<ref name="Malloy_1987">{{cite web |title=Spreadsheets - This new crop of advanced programs offers multidimensionality and natural language |author-first=Rich |author-last=Malloy |series=Review |magazine=[[BYTE]] |date=June 1987 |edition=Sommer 1987 Bonus |volume=12 |number=7 |pages=69–75 |url=https://archive.org/details/198706ByteMagazineVol1207BonusEditionApplicationSoftwareToday/198706%20Byte%20Magazine%20Vol%2012-07%20Bonus%20Edition%20-%20%20Application%20Software%20Today |access-date=2020-02-12}} [https://archive.org/stream/198706ByteMagazineVol1207BonusEditionApplicationSoftwareToday/198706%20Byte%20Magazine%20Vol%2012-07%20Bonus%20Edition%20-%20%20Application%20Software%20Today_djvu.txt][https://archive.org/download/198706ByteMagazineVol1207BonusEditionApplicationSoftwareToday/198706%20Byte%20Magazine%20Vol%2012-07%20Bonus%20Edition%20-%20%20Application%20Software%20Today_text.pdf][http://www.aresluna.org/attached/computerhistory/articles/spreadsheets/newcrop]</ref>
}}

==External links==
{{Commons category|Tab (GUI)}}
* [https://tabpanelwidget.com/ TabPanel Widget]
* [http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx ASP.NET AJAX Control Toolkit]
* [https://wiki.github.com/madrobby/scriptaculous/tabs Scriptaculous AJAX tabs]
* [http://www.donhopkins.com/home/movies/TabWindowDemo.mov Tab Window Demo] deDevelopmentmo of the Pie Menu Tab Window Manager for The NeWS Toolkit 2.0 (1991).

{{Graphical control elements}}

[[Category:Graphical user interface elements]]
[[Category:Document interface]]
[[Category:Graphical control elements]]