Краткое руководство
по созданию вкладок
с помощью HTML. Часть 1

Вкладки веб-сайта — это элементы навигации в веб-дизайне, которые помогают отображать большие объемы информации более понятно и организованно. 

С помощью вкладок ваши пользователи смогут быстрее ориентироваться на сайте и самостоятельно искать информацию. В этой статье мы расскажем вам, как создавать вкладки с помощью  HTML. 

Что такое вкладки сайта?

Вкладки веб-сайта — это элементы навигации, которые помогают отобразить фрагменты контента по запросу с помощью нажатия одной кнопки. С помощью вкладок вы можете уместить большой блок информации на одной веб-странице. 

При использовании вкладок сайт загружает весь контент сразу со всех страниц, а затем просто скрывает или отображает определенную информацию в зависимости от того, какую вкладку выбирает пользователь. 

В этом руководстве мы расскажем вам о том, как создать вкладку с помощью HTML, а также кратко коснемся CSS и JavaScript. 

Вкладки HTML в действии

Давайте посмотрим, как работает концепт вкладок в действии на примере ниже:

Gmail использует концепцию вкладок, чтобы собрать весь объем информации в одном месте на одной странице — это дает Gmail огромные преимущества для пользовательского опыта.

Вместо того, чтобы каждая часть папки во «Входящих» загружалась на отдельной веб-странице, Gmail создают вкладки, которые мгновенно загружаются на одной странице. Это экономит время пользователей при загрузки данных, а также помогает ориентироваться на сайте. 

Как создавать вкладки с помощью HTML

Давайте ниже более подробно рассмотрим процесс создания вкладок с помощью HTML, CSS и JS:

1. Создайте папку

Для начала создайте папку, в которой будут храниться файлы вашего сайта. Затем создайте внутри пустые файлы .html, .css и .js.

Имена файлов могут быть любыми, но важно оставить расширения файлов (.html, .css, .js) такими же, как в примере выше.

2. Настройте HTML

Настройка HTML на самом деле довольно проста. Нам необходимо настроить элемент div, чтобы он содержал наши кликабельные кнопки. Затем нужно добавить элемент div для каждой «страницы», которую мы загружаем. Каждый из этих соответствующих элементов div будет содержать контент.

Ниже пример того, как может выглядеть HTML-файл:

Давайте более подробно рассмотрим значения строк:

• Строки 4 и 32 необходимы, чтобы связать файлы .css, .js и .html вместе. Это нужно для того, чтобы веб-страница имела основное содержимое без какого-либо форматирования.
• Мы рекомендуем размещать элемент, который связывает файл .js в конце документа, поэтому в нашем примере он находится в строке 32, а не в строке 5. В противном случае вы рискуете загрузить скрипт раньше HTML-элементов, что может нарушить функциональность вашего сайта.
• Строки 6 и 13 — это комментарии для разработчика, которые нужны, чтобы рассказать о том, для чего нужен каждый раздел кода.
• Строки 7-11 содержат кнопки, по которым пользователи  будут нажимать, чтобы отобразить контент на странице. На этом этапе нам не нужны атрибуты tablinks и onclick. Когда мы перейдем к разделу руководства, посвященному CSS и JavaScript, мы вернемся к ним.
• Строки 14–17, 19–25 и 27–30 — это вкладки или страницы контента, которые содержатся в элементе div.

В этом примере использовался текст, но вы также можете добавить изображения или видео. В следующей части нашей статьи мы перейдем к CSS, который важен для форматирования и стилизации нашего HTML.

 ^{Источник: hubspot.com}