Текстові елементи у вебсайтах

Це — вступна стаття до циклу «Анатомія вебсайтів». В ньому ми послідовно, крок за кроком, розберемо всі ключові елементи, які можуть траплятись в дизайні вебсайту. Попри те, що ми не плануємо докладно розбирати мову гіпертекстової розмітки HTML (далі — HTML), розглядаючи дизайн-елементи сайтів, ми будемо зазначати, який для них використовується тег.

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

Виглядають теги приблизно так:

Знання основних тегів є корисним і з точки зору взаємодії з фронтенд-розробниками, і для роботи в редакторах вебсайтів.

Почнемо ми з вивчення текстових елементів.

Текстові елементи

Абзаци

Першим текстовим елементом ми розглянемо абзац.

Абзац — це сукупність речень, що об’єднані спільним змістом.

У вебдизайні абзацу відповідає тег <p>. При цьому кожний окремий абзац загортається у власний тег.

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

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

Розміри текстів у вебі, як і в типографії, називають кеглями. Вимірювати їх можна в абсолютних величинах — пікселях (px), — та у відносних — em, rem, ex, відсотках та відносних назвах розмірів (наприклад, small, x-large, smaller, larger).

Оскільки простішими й зрозумілішими для розуміння новачків є саме пікселі, в курсі «Основи вебдизайну» ми будемо використовувати саме цю розмірність.

З точки зору ієрархії змісту, абзац відповідає основному тексту. Тобто, коли ми визначаємо розмір тексту в абзаці, то по суті визначаємо розмір основного тексту.

Конкретний кегль шрифту залежить від конструктивних особливостей шрифту, який ви обираєте для основного тексту. Як правило, цей розмір складає від 12 до 16 пікселів.

Загальні принципи вибору шрифтів для основного тексту ми описували в матеріалі «Вибір шрифтів для заголовків для основного тексту». Ці принципи є актуальними й для вебу.

Назва матеріалу, заголовки та підзаголовки

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

При цьому заголовок 1-го рівня повинен бути лише один. Відповідно до ієрархії змісту він є назвою документа. З точки зору семантики HTML використання двох заголовків 1-го рівня — це помилка.

Стосовно решти заголовків такого обмеження не буває, але слід розуміти, що кожен наступний заголовок — це підзаголовок попереднього рівня. Відповідно, якщо у вас є лише три рівні заголовків, то й використовують відповідно теги від <h1> до <h3>.

Заголовків нижче шостого рівня в вебі не буває.

При оформленні заголовків необхідно дотримуватись візуальної ієрархії — розміри кожного наступного рівня заголовків слід робити меншими за попередній.

Розміри заголовків не є стандартизованими, і вебдизайнери можуть їх змінювати відповідно до контексту проєкту. Але за замовчуванням лінійка розмірів така:

Заголовки 4-го рівня і нижче на практиці використовуються рідко. Для презентаційних сайтів та рекламних текстів чотири рівні ієрархії заголовків — це радше виключення. Тому часто заголовок третього рівня може бути лише на кілька пунктів (або пікселів) більшим ніж основний текст. Але якщо заголовок 4-го рівня все ж з’являється, розміри інших заголовків необхідно збільшувати.

Посилання

Окремим типом елементів на вебсайті є посилання (коректніше було б називати його «гіперпосиланням», але так ніхто не робить, навіть серед фахівців). Ми цього вже, певно, й не помічаємо, але і сьогодні всі подібні написи сприймаємо, як такі, на які можна натиснути.

Вони маркуються тегом <a href=”[url]”>, де href — це так званий атрибут, що означає гіперпосилання (від англ. hypertext reference), а [url] — це адреса сторінки, на яку ви посилаєтесь.

Коли сайти лише з’явились, посилання отримали своє традиційне оформлення, відмінними рисами якого були синій колір та підкреслення.

Як і численним іншим речам у вебі, синім кольором посилань ми зобов’язані серу Тіму Бернерсу-Лі, винахіднику павутини. І хоча навряд чи на той момент він вже замислювався над питанням доступності та інклюзивності сайтів, синій колір для виділення посилань був досить вдалим рішенням, адже, як відзначає Джо Кларк, автор книги «Доступність сайтів для людей з фізичними вадами», синій колір розрізняє значна кількість людей з дальтонізмом.

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

При цьому посилання — це інтерактивний текстовий елемент (тобто такий, з яким користувач може взаємодіяти).

Відтак, кожне посилання може мати кілька станів і, відповідно, способів оформлення:

  • Посилання, яке користувач раніше не відвідував. Це стан посилання за замовчуванням. Так оформлюються посилання на сторінки цього сайту або зовнішні ресурси, які користувач вже відвідував раніше.

  • Відвідане посилання. За замовчуванням такі посилання маркуються фіолетовим кольором. Вони відповідають посиланням на сторінки, які відвідувач уже відкривав бодай раз.
  • Активне посилання (посилання під час натискання). Відповідає поточній сторінці, або стану, коли ви натисли на посилання, але ще не відпустили кнопку миші чи не відвели палець. За замовчуванням такі посилання маркуються червоним.
  • Посилання під час наведення курсора. Цей стан з одного боку дозволяє ліпше показати інтерактивність, а ще можна за допомогою спеціального коду додати підказку, що спливатиме поруч. Для таких посилань характерною є зміна кольору, як правило, на світліший.
  • Ще одним станом посилання є стан фокусу. Це стан, ідентичний наведенню, але забезпечується він не шляхом наведення миші, а через натискання клавіші [tab]. Вона, до речі, дозволяє переходити від елемента до елемента в межах сторінки взагалі без використання миші.

Способи вирівнювання

Тепер, коли ми з вами з’ясували деякі базові елементи тексту, торкнімося питання їх вирівнювання.

Всього у вебі передбачено чотири типи вирівнювань тексту:

  • По лівому краю (це вирівнювання за замовчуванням)
  • По центру
  • По правому краю
  • По обох краях

Давайте з кожним типом вирівнювання познайомимось ближче.

Вирівнювання по лівому краю

Це вирівнювання, яке використовується за замовчуванням. В цьому вирівнюванні початок кожного рядка прив’язаний до так званої лінії набору, а завершується рядок останнім цілим словом.

При такому вирівнюванні права частина рядків є нерівною. На жаргоні це ще іноді називають «гребінець». Через наявність цього гребінця деякі замовники просять змінити вирівнювання на інше — по обох краях. Ми не рекомендуємо цього робити, і в наступному блоці пояснимо, чому.

Вирівнювання по обох краях

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

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

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

Відтак це вирівнювання майже не використовується на практиці.

Вирівнювання по центру

При вирівнюванні по центру кожен рядок вирівнюється відносно осі вертикальної симетрії текстового блоку.

Вирівнювання по центру як правило використовують для заголовків матеріалу, цитат або списків у формі плитки (наприклад, на посадкових сторінках). Деякі дизайнери використовують його і для основного тексту, але в цьому контексті таке вирівнювання недоречне, адже читачу доводиться щоразу шукати початок рядка в новому місці.

До речі, саме через це найдоречнішим таке вирівнювання виглядає у випадках, коли в масиві тексту не більше 4-5 рядків. Тобто, для заголовків великого обсягу краще використовувати вирівнювання по лівому краю.

Вирівнювання по правому краю

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

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

Нащо ж тоді взагалі таке вирівнювання впровадили?

Кожного разу, коли ми в цьому матеріалі писали про те, що наступний рядок починається зліва, мова йшла про писемність західного типу. Ми з вами пишемо зліва направо, всі слов’яни так пишуть, так пишуть всіма мовами романо-германської групи (англійська, французька, німецька тощо). Але є низка писемностей, в яких рядок починається з правого краю. До них зокрема відносяться арабська мова, іврит, перська мова та урду.

Тож для всіх цих писемностей вся робота з текстами наче віддзеркалюється.

Таке вирівнювання для цих писемностей є органічним.

Способи оформлення текстів

Тепер, коли ми розібрались із базовими складовими текстів на сайтах і способами вирівнювання, з’ясуймо, які типові способи оформлення текстів існують.

Насичений нарис

Певно, одним з найпоширеніших способів виділення тексту є насичений нарис. Він чудово допомагає виділити з-поміж масиву тексту ключові слова або ж зробити смисловий акцент на певній частині фрази.

Для цього типу оформлення використовують два теги <b> та <strong>. Візуально вони призводять до однакової зміни тексту.

Але текст, виділений тегом <strong> набуває ще і смислового акценту. Це важливо з огляду на інклюзивність сайтів, і відмінність цього фрагменту відчують ті, хто не може бачити сайт і сприймає його на слух.

Похилений нарис

Ще одним поширеним способом виділення тексту є похилений нарис. Його часто використовують для оформлення прямої мови або ж для виділення термінів чи іншомовних слів.

Для цього типу оформлення використовують два теги — <i> та <em>. Як і у випадку з насиченим нарисом, візуальної відмінності між ними немає, але є змістовна. Слова, виділені тегом <em> інакше зчитують програми для читання текстів.

Зменшений кегль

Ще один спосіб виділення тексту — це зменшення його кеглю на одну одиницю. Для цього використовують тег <small>.

З самого початку тег <small> запровадили, щоб оформлювати ним коментарі до основного тексту (як, наприклад, у «Вікіпедії») або виноски про авторські права, які не стосуються основного тексту, але є важливими з огляду на юридичні вимоги.

В попередній версії HTML також був тег <big>, який збільшував кегль виділеного ним тексту на одиницю. Але з 5-ої версії HTML його прибрали, оскільки не знайшлось відповідних контекстів використання цього способу оформлення.

Закреслений текст

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

Для оформлення тексту закреслюючою лінією використовують тег <del>.

Підкреслений текст (доданий текст)

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

Звісно, у вебі є тег для підкреслення тексту — <ins>. Але не слід квапитись його використовувати. Ми вже відзначали в цьому матеріалі, що такий спосіб оформлення написів у вебдизайні асоціюється в першу чергу з посиланнями. Причому, коли посилання оформлюють не синім, а якимось іншим кольором (навіть чорним), підкреслений текст все одно сприймається як посилання.

Відтак підкреслення тексту, що не є посиланням, може збивати користувача з пантелику.

Текст нижнього та верхнього індексів

Іноді трапляються специфічні тексти, наприклад, присвячені темі хімії чи фізики. В них можуть зустрічатися написи, що мають відповідати верхньому або нижньому індексу (тобто, зміщеній вгору або вниз базовій лінії). 

Навіть і у звичайному тексті це може знадобитися, щоб вказати ступінь в описі квадратури квартири — 44 м2. Або ж зазначити хімічний склад напою: H2O. Для таких випадків і використовують форматування нижнього та верхнього індексу через теги <sub> (нижній індекс) та <sup> (верхній індекс).

На завершення

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

В подальших статтях модуля ми познайомимось з іншими типовими елементами вебсайтів.

·
13874
·
23
·
goodsuper 226
Наступна стаття
Списки і таблиці у вебсайтах
1537
Головна