Стаття про div

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

«Ти б ще статтю про div написав!» — такий коментар потрапив якось мені на очі під одним із дописів тут, на форумі DOU. Між іншим, доволі непоганим дописом про щось просте й базове, але написано було цікаво й читабельно. Не беруся судити, яку мету переслідував автор коментаря, — хай розсудять його боги, — але для мене особисто це прозвучало як виклик. Що-о-о?! Написати статтю про div?! Не дражніть мене улюбленою справою!

divовижний світ веброзробки

Ви, швидше за все, вважаєте, що div існував ще за часів стародавніх богів, жорстоких воєначальників та царів. Однак насправді це зовсім не так, і пришестя цього тегу сталося «лише» 1997 року. А до того світом веброзробки правили таблиці, форми та параграфи зі списками. Немов величні динозаври, вони неспішно крокували густими лісами молодого інтернету, аж поки астероїд HTML 3.2 не зруйнував цю тендітну екосистему, принісши із собою підтримку CSS, JS та, що найважливіше, новий тег div.

І, подібно до того, як колись наші прапрапращури — перші ссавці — захопили планету, так і цей тег з блискавичною швидкістю рознісся інтернетом, задаючи новий напрям і швидкість розвитку вебу. Саме тому й може здаватися, що він був завжди, адже він присутній просто скрізь, а деякі сторінки складаються з нього настільки, наскільки це максимально можливо.

Момент пришестя div. Масло, хліб, AI. 1997 рік

Специфікація для div надзвичайно чітка й проста — це блоковий елемент без особливої мети в житті. Тобто він не має жоднісінького семантичного значення і, по суті, відрізняється від того ж span лише тим, що він блоковий. Хоча ні, певне призначення усе ж можна сформулювати — він покликаний групувати, відділяти певний вміст від іншого вмісту на сторінці. Тобто він може виступати як контейнер для чогось іншого, а може й не виступати, виконуючи у такому випадку роль просто «чогось», на що не знайшлося інших елементів.

Взагалі, назва div і походить від слова division — розділення, відокремлення. Якщо ж придивитися до інших аспектів, то його специфікація є, по факту, базовою, від якої вже розширюються більш специфічні блокові елементи.

А згаданий вище span, до речі, є побратимом div, але зі сторони нареченого інлайнових елементів. Бо він також є супербазовим, але уже для текстів. Разом вони формують Лігу Нецікавих Елементів, або ж «теги останньої надії», що є більш поширеним терміном. Він означає, що це теги, до яких варто вдаватися лише у тому випадку, коли ви вичерпали усі можливості сучасного семантичного HTML, і жоден інший тег ну просто ніяк не підходить.

Або ж ви розробляєте щось під IE6 чи останній Safari, і вам необхідно забезпечити сумісність вашої сторінки з цими браузерами.

Тягар слави

Простота, невибагливість та повсюдна підтримка div призвели до його шаленої популярности, а вона, як відомо, завжди несе із собою неприємні наслідки. І одним із таких наслідків стало виникнення такого явища, як div-soup, що описує надмірне використання цього тегу. І коли я кажу «надмірне», я саме це і маю на увазі:

...
<div class="sidebar">
  <div class="sidebar-item">
    <div class="sidebar-title">
      <div>
        <h2>Recent Posts</h2>
      </div>
    </div>
    <div class="sidebar-content">
      <div>
        <div class="post">
          <div class="post-title">
            <div>
              <a href="#">Post 1</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Очевидно, що це не те, що погіршує читабельність коду, а просто знищує її. Про семантичність та доступність такої сторінки годі й говорити, а те саме SEO хоч і працюватиме, але без задоволення.

Очевидно, що div-soup суттєво вплинув на веброзробку як таку, зважаючи на усі його наслідки. І саме тому, хай навіть опосередковано, ми маємо завдячувати цьому явищу і самому тегу div появою семантичного HTML як такого. А може й не дуже опосередковано.

І не в останню чергу через те, що явище div-soup настільки турбувало та бентежило розробників, що й досі на тому ж StackOverflow або Reddit можна знайти питання в дусі «чи існує обмеження на кількість div на одній сторінці?».

Факт лишається фактом — епоха безладу, хаосу та безвідповідальности часів абсолютної влади div дійшла кінця з виходом HTML5, що приніс із собою мир, спокій, щебіт пташок та безхмарне небо. Ну, принаймні на папері. І досягти цієї ідилії знову допоміг наш старий друзяка div, у дуже цікавий спосіб.

div ходив, щоб section міг літати

Річ у тім, що коли перед відповідальними людьми постала задача запровадити нові елементи, вони стикнулися зі старою як сам світ проблемою, а саме — вигадуванням назв для цих елементів. І до рішення цієї проблеми вони підійшли дуже й дуже креативно, ну за мірками програмістів то точно. Бо замість просто тупити в екран, роздумуючи над назвою змінної, вони вирішили проаналізувати величезний обсяг сайтів, і визначити, які найпоширеніші імена класів використовуються для позначення тієї чи іншої частини сторінки. Саме внаслідок такого дослідження у нас і зʼявилися section, header, article та інші.

А до чого ж тут div, запитаєте ви? Все досить очевидно — ці ж класи мали бути призначені до якихось елементів, вірно? А часи були такі, буремні, і, як я вже зазначав, більшість сторінок ледь не повністю складалася з дівів. Тобто саме завдяки тому, що div від divтреба було якось вирізняти, а саме призначати різні класи, що описували їхню роль, ми й маємо саме ті імена семантичних елементів, які маємо.

Сьогодні головною порадою з використання div є «не використовуйте div». А точніше — «використовуйте div лише за нагальної на те потреби, і то, лише тоді, коли у вас не лишилося іншого виходу». Нагадаю, що недарма його тепер кличуть тегом останньої надії. Звичайно, для цього потрібно розібратися із семантикою HTML5, але повірте, друзі, воно того варте.

Просто порівняйте:

// Смачненький суп
<body>
  <div class="header"></div>
  <div class="navbar"></div>
  <div class="content">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
  </div>
  <div class="footer"></div>
</body>

// Строга й красива семантика
<body>
  <header></header>
  <nav></nav>
  <main>
    <article></article>
    <article></article>
    <article></article>
  </main>
  <footer></footer>
</body>

То чи може div дивитися в завтрашній день?

Проте списувати div з рахунків не варто. Він надійно прописався у стандарті HTML, і його роль доволі чітка та визначена, хоч і не вписується в загальну картину інших елементів на кшталт section чи main. Тому відмовитися від нього не вийде, натомість варто навчитися використовувати його саме тоді, коли це доречно. Що не так уже й просто, насправді, бо рученята так і тягнуться, так і чешуться написати черговий <div class="list-item"></div>. Але ми, справжні фронтенд-розробники, цього собі не дозволяємо, правда ж? Правда?

Дякую за увагу, друзі! А ви ще застали часи div-soup, чи вже верстали усе за догмами семантики? Чи, може, вважаєте, що то все псяча маячня, і досі div це ваш універсальний інструмент? Поділіться в коментарях!

«Сергій Бабіч та Дивовижний світ веброзробки»