{"id":39721,"date":"2026-01-23T18:40:15","date_gmt":"2026-01-24T02:40:15","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=39721"},"modified":"2026-01-23T18:40:16","modified_gmt":"2026-01-24T02:40:16","slug":"how-are-html-tabs-created-for-switching-between-content-sections","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/questions\/how-are-html-tabs-created-for-switching-between-content-sections\/","title":{"rendered":"How are HTML tabs created for switching between content sections?"},"content":{"rendered":"\n

Building clean, accessible tabbed interfaces is a common front-end task. Whether you are creating a docs layout, product detail views, or a settings page, tabs help users switch context without page reloads.<\/p>\n\n\n\n

Question:<\/h2>\n\n\n\n

Hi folks,<\/em>
I\u2019m building a small component library and need a reliable tabs pattern. How are HTML tabs created for switching between content sections? I\u2019d like both a no-JS fallback and an accessible JS version with proper keyboard navigation. Guidance on performance with heavy images or videos inside tabs would also help. Thanks!<\/em><\/p>\n\n\n\n

Answer:<\/h2>\n\n\n\n

Tabs can be implemented in a few ways depending on your constraints. Here are two practical approaches you can mix and match: a pure CSS version and a fully accessible JavaScript version.<\/p>\n\n\n\n

Approach 1: CSS-only tabs with radio inputs<\/h3>\n\n\n\n

This approach works without JavaScript, is easy to style, and keeps state within the page. It is not as accessible as a proper ARIA tabs pattern, but it provides a reasonable baseline.<\/p>\n\n\n

<div<\/span> class<\/span>=\"tabs\"<\/span>><\/span>\n\u00a0 <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"tabs\"<\/span> id<\/span>=\"tab1\"<\/span> checked<\/span>><\/span>\n\u00a0 <label<\/span> for<\/span>=\"tab1\"<\/span>><\/span>Overview<\/label<\/span>><\/span>\n\n\u00a0 <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"tabs\"<\/span> id<\/span>=\"tab2\"<\/span>><\/span>\n\u00a0 <label<\/span> for<\/span>=\"tab2\"<\/span>><\/span>Code<\/label<\/span>><\/span>\n\n\u00a0 <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"tabs\"<\/span> id<\/span>=\"tab3\"<\/span>><\/span>\n\u00a0 <label<\/span> for<\/span>=\"tab3\"<\/span>><\/span>FAQ<\/label<\/span>><\/span>\n\n\u00a0 <div<\/span> class<\/span>=\"panel\"<\/span> id<\/span>=\"panel1\"<\/span>><\/span>Overview content<\/div<\/span>><\/span>\n\u00a0 <div<\/span> class<\/span>=\"panel\"<\/span> id<\/span>=\"panel2\"<\/span>><\/span>Code content<\/div<\/span>><\/span>\n\u00a0 <div<\/span> class<\/span>=\"panel\"<\/span> id<\/span>=\"panel3\"<\/span>><\/span>FAQ content<\/div<\/span>><\/span>\n<\/div<\/span>><\/span>\n\n<style<\/span>><\/span>\n.tabs<\/span> { display<\/span>: grid; grid-template-columns<\/span>: auto auto auto; grid-auto-rows<\/span>: min-content; gap<\/span>: .5rem<\/span>; }\n.tabs<\/span> > input<\/span> { position<\/span>: absolute; left<\/span>: -9999px<\/span>; } \/* hide *\/<\/span>\n.tabs<\/span> > label<\/span> { padding<\/span>: .5rem<\/span> 1rem<\/span>; cursor<\/span>: pointer; border-bottom<\/span>: 2px<\/span> solid transparent; }\n#tab1<\/span>:checked<\/span> + label<\/span> { border-color<\/span>: #4a90e2<\/span>; }\n#tab2<\/span>:checked<\/span> + label<\/span> ~ input<\/span> + label<\/span> { border-color<\/span>: #4a90e2<\/span>; }\n#tab3<\/span>:checked<\/span> + label<\/span> ~ .panel<\/span> { display<\/span>: none; } \/* ensures later rules win *\/<\/span>\n\n.panel<\/span> { grid-column<\/span>: 1<\/span> \/ -1<\/span>; display<\/span>: none; padding<\/span>: 1rem<\/span>; border<\/span>: 1px<\/span> solid #ddd<\/span>; }\n#tab1<\/span>:checked<\/span> ~ #panel1<\/span> { display<\/span>: block; }\n#tab2<\/span>:checked<\/span> ~ #panel2<\/span> { display<\/span>: block; }\n#tab3<\/span>:checked<\/span> ~ #panel3<\/span> { display<\/span>: block; }\n<\/span><\/style<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Alternative: a :target-based approach uses anchor links and hash navigation. It\u2019s SEO and share-link friendly but requires more CSS specificity to show the targeted panel and hide others.<\/p>\n\n\n\n
Approach 2: Accessible tabs with ARIA and JS<\/h3>\n\n\n\n
For production UI, implement the WAI-ARIA tabs pattern with proper roles, states, and keyboard interaction. This ensures screen readers and keyboard users can use your tabs.<\/p>\n\n\n
<div<\/span> role<\/span>=\"tablist\"<\/span> aria-label<\/span>=\"Sample tabs\"<\/span> class<\/span>=\"tablist\"<\/span>><\/span>\n\u00a0 <button<\/span> role<\/span>=\"tab\"<\/span> id<\/span>=\"t1\"<\/span> aria-controls<\/span>=\"p1\"<\/span> aria-selected<\/span>=\"true\"<\/span> tabindex<\/span>=\"0\"<\/span>><\/span>Overview<\/button<\/span>><\/span>\n\u00a0 <button<\/span> role<\/span>=\"tab\"<\/span> id<\/span>=\"t2\"<\/span> aria-controls<\/span>=\"p2\"<\/span> aria-selected<\/span>=\"false\"<\/span> tabindex<\/span>=\"-1\"<\/span>><\/span>Code<\/button<\/span>><\/span>\n\u00a0 <button<\/span> role<\/span>=\"tab\"<\/span> id<\/span>=\"t3\"<\/span> aria-controls<\/span>=\"p3\"<\/span> aria-selected<\/span>=\"false\"<\/span> tabindex<\/span>=\"-1\"<\/span>><\/span>FAQ<\/button<\/span>><\/span>\n<\/div<\/span>><\/span>\n\n<div<\/span> id<\/span>=\"p1\"<\/span> role<\/span>=\"tabpanel\"<\/span> aria-labelledby<\/span>=\"t1\"<\/span> tabindex<\/span>=\"0\"<\/span>><\/span>Overview content<\/div<\/span>><\/span>\n<div<\/span> id<\/span>=\"p2\"<\/span> role<\/span>=\"tabpanel\"<\/span> aria-labelledby<\/span>=\"t2\"<\/span> hidden<\/span> tabindex<\/span>=\"0\"<\/span>><\/span>Code content<\/div<\/span>><\/span>\n<div<\/span> id<\/span>=\"p3\"<\/span> role<\/span>=\"tabpanel\"<\/span> aria-labelledby<\/span>=\"t3\"<\/span> hidden<\/span> tabindex<\/span>=\"0\"<\/span>><\/span>FAQ content<\/div<\/span>><\/span>\n\n<script<\/span>><\/span>\nconst<\/span> tabs = Array<\/span>.from(document<\/span>.querySelectorAll('[role=\"tab\"]'<\/span>));\nconst<\/span> panels = Array<\/span>.from(document<\/span>.querySelectorAll('[role=\"tabpanel\"]'<\/span>));\n\nfunction<\/span> activateTab<\/span>(tab<\/span>) <\/span>{\n\u00a0 tabs.forEach(t<\/span> =><\/span> {\n\u00a0 \u00a0 const<\/span> selected = t === tab;\n\u00a0 \u00a0 t.setAttribute('aria-selected'<\/span>, selected);\n\u00a0 \u00a0 t.tabIndex = selected ? 0<\/span> : -1<\/span>;\n\u00a0 });\n\u00a0 panels.forEach(p<\/span> =><\/span> {\n\u00a0 \u00a0 p.hidden = p.id !== tab.getAttribute('aria-controls'<\/span>);\n\u00a0 });\n\u00a0 tab.focus();\n}\n\ndocument<\/span>.querySelector('.tablist'<\/span>).addEventListener('click'<\/span>, e => {\n\u00a0 if<\/span> (e.target.getAttribute('role'<\/span>) === 'tab'<\/span>) activateTab(e.target);\n});\n\ndocument<\/span>.querySelector('.tablist'<\/span>).addEventListener('keydown'<\/span>, e => {\n\u00a0 const<\/span> idx = tabs.indexOf(document<\/span>.activeElement);\n\u00a0 if<\/span> (idx < 0<\/span>) return<\/span>;\n\u00a0 if<\/span> (e.key === 'ArrowRight'<\/span>) activateTab(tabs[(idx + 1<\/span>) % tabs.length]);\n\u00a0 if<\/span> (e.key === 'ArrowLeft'<\/span>) activateTab(tabs[(idx - 1<\/span> + tabs.length) % tabs.length]);\n\u00a0 if<\/span> (e.key === 'Home'<\/span>) activateTab(tabs[0<\/span>]);\n\u00a0 if<\/span> (e.key === 'End'<\/span>) activateTab(tabs[tabs.length - 1<\/span>]);\n});\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Accessibility checklist<\/h3>\n\n\n\n