HTML: Tabs

Last update: 25 Jul 00:49

Tabs are a common way of data representation on web pages. They are used as a substitute for the usual lists, when you need to store a large amount of information. It's not always possible to do it "neatly" using the standard elements. Therefore, you can use tabs, whose appearance and functionality can vary greatly from site to site.

In this challenge, you'll design tabs that work on mouse hover or on the occurrence of a keyboard focus event.

Pure CSS tabs

Pure CSS tabs on hover


Tabs are implemented through links. To ensure that clicking doesn't take you to another page, use the # char as the value of the href attribute.

Use the custom attribute data-tab to define the name of each link.

  • For the HTML tab, the value of html
  • For the CSS tab, the value of css
  • For the JavaScript tab, the value of js

Each link has a .tab-name class.


Tabs are placed inside the .tabs-content container. Use the custom attribute data-tab-content to define a name for each tab.

  • For the HTML tab, the value of html
  • For the CSS tab, the value of css
  • For the JavaScript tab, the value of js

Each tab has a .tabs-content-item class. The tab content has three parts:

  1. Image. Use proper images from assets/img directory
  2. Second-level heading
  3. text

Text in HTML tab

HTML (HyperText Markup Language) is a set of rules by which the browser distinguishes headings from lists, tables from pictures, and so on. HTML appeared in 1993 and was intended to standardize the rules for displaying text within web pages.

Take a good look at the page you're on now. All of it, regardless of how it looks, is defined using HTML. This shows well that no matter how complex the page is, the whole point has remained the same for more than 20 years.

The word "language" in HTML should be taken as a rule. HTML by itself only marks up the data, but it doesn't interact with it in any way and doesn't visually modify it. All the work of displaying textual data and markup is done by the browser.

Text in CSS tab

CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document (web page) written with a markup language (usually HTML or XHTML). It can also be applied to any XML document, such as SVG or XUL.

Text in JavaScript tab

JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard. It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles.

The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O.

JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js.

"JavaScript" is a trademark of Oracle Corporation in the United States.


Link the Raleway font, which is in assets/fonts directory. For body, use this font with the following properties:

  • Font size: 20px
  • Line height: 1.5
  • Font family: sans-serif


The elements inside the container with the class .tabs are arranged in three columns. Note that there should be no gaps inside the links. There should be no space between links.

The .tabs-content' stretches over all available columns. Each element within.tabs-content` is also a container which splits the content into three columns. The space between columns is 30 pixels.

  • Paddings: 20px
  • The text is centered.
  • There is no underline. Use the text-decoration property
  • Background color: #00adb5
  • A solid 3-pixels border and a color of #5ffbf1 is added on hovering and/or focusing on the link

Wrapper tabs-content

  • Background color: #393e46

Elements tabs-content-item

  • By default, all elements are hidden. Use the display property with the value none
  • When hovering or focusing on a link, the corresponding tab should appear. Use the display property with the value block
  • Paddings: 20 pixels each side

For full access to the challenge you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory