# a r t u r #

Роман Бережнов к примеру есть форма обратной связи, определенно точно второй такой формы быть не может, почему бы в этом случае не использовать id?

А если есть кнопка и class состоит из нескольких элементов, что-то вроде
class="ui small red icon button"

- предлагаете добавить в конец еще один button-click для обработчика? Или вовсе не добавлять и ссылаться на button? При этом если на странице еще есть кнопки с этим классом, то они тоже будут закреплены за обработчиком...

id и class нужно использовать и то и другое по необходимости, стараясь id использовать чаще!

Суть этого примера в том, что нельзя нажать на кнопку(и) несколько раз пока последняя запрашиваемая страница не откроется, вероятно это будет полезно...

Также я реализовал возможность открыть страницы в текущем окне или в новом, за это отвечает содержимое
атрибута data-target="" :

<button class="progress-button" data-uri="https://toster.ru/q/311167?e=3769167#comment_1058109" data-target="_blank">Как сделать задержку на открытие ссылки?</button>

<button class="progress-button" data-uri="http://yandex.ru" data-target="_self">Еще одна кнопка...</button>

$(document).ready(function() {

$(function() {
var flag = new Boolean(true); // Защитит от частого нажатия на кнопку

  // Клик
  $('.progress-button').click(function(e) {
    openUrl($(this));
    e.preventDefault();
  })

/**
 * Открывает ссылку с задержкой
 * 
 * @param {object} button - Нажатая кнопка
 * @return {boolean}
 */
  function openUrl(button) {
    var delay = 2000, // Задержка 2 секунды
      text = button.text(), // Текст который будет задан кнопке после окончания загрузки
      uri = button.attr('data-uri'); // URL
  
     // Проверяем не начата ли загрузка какой-либо ссылки
      if (flag == true) {
        flag = false;
      
      // Показываем загрузку
      button.text('загружаю...');
      
        // С задержкой открываем URL, возвращая штатный текст кнопке, разрешаем открывать новые ссылки
        setTimeout(function() {
          flag = true;
          button.text(text);
          
          // Проверяем открыть ссылку в новом окне или в текущем
          if (button.attr('data-target') === '_blank') {
          window.open(uri);
          return;
          }
          
          window.location = uri;
          return;
          
        }, delay);
      }
    
    return;
  }
  
});

});

В некоторых "массивных" фреимворках я встречал такие конструкции, но редактор кода сразу выделяем как ошибку и не видит, что тег H1-5 закрыт, но на практике все отлично работает:

<h2 class="ui icon header">
  <i class="settings icon"></i>
  <div class="content">
    Настройки аккаунта
    <div class="sub header">Описание раздела</div>
  </div>
</h2>

Я думаю, что если ваши теги H1-5 содержат поисковые ключи и используются больше для продвижения, то лучше не вкладывать в них DIV-ы, но если это какая-нибудь закрытая часть сайта, то почему бы и нет.

.header {
background-color: #000;
color: #FFF;
}
.description {
font-size: 24px;
padding-top: 5px;
}

<h1 class="header title">Большой заголовок</h1>
<div class="header description">Маленький заголовок</div>

Что-то вроде того, но нужно поиграть и довести до подходящего вида