Смислова розмітка CSS

Більшість людей не думають про фундамент будинку, в якому вони живуть. Однак без міцного фундаменту не може існувати жодна будова. Для будь-якого документу, фундаментом є його структура. Застосовувати сучасні методики CSS було б неможливо (або важко) без добре структурованого документа (X)HTML.

У перші роки свого існування мережа WWW була не більше ніж простим набором пов'язаних документів, форматованих та структурованих за допомогою HTML. По мірі збільшення популярності WWW, мову HTML все більше використовували в презентаційних цілях. Замість заголовних елементів розробники стали застосовувати атрибути і напівжирні шрифти для створення бажаних візуальних ефектів. Таблиці HTML були призначені для виведення табличних даних, однак вони відразу ж почали застосовуватися для верстки сторінок, а дескриптори цитат почали частіше застосовуватися не за своїм прямим призначенням, а для створення пробілів. Досить швидко засоби HTML втрачали своє первинне значення і код став малозрозумілим нагромадженням дескрипторів.

Спочатку мова HTML була задумана як проста та легка для розуміння мова розмітки. Однак у міру того, як Web-сторінки ставали все більш презентабельними, зрозуміти їх код було все важче. Щоб хоч якось впоратися з цим нагромадженням дескрипторів, були розроблені інструменти WYSIWYG (від What You See Is What You Get - що бачиш, те й отримуєш). На жаль, замість того, щоб спростити ситуацію, WYSIWYG інструменти тільки посилили її: вони додатково додали в код HTML величезну кількість дескрипторів, зрозуміти які стало ще важче. На стику тисячоліть типова Web-сторінка була настільки складною, що редагувати її вручну було практично неможливо через ризику зруйнувати код WYSIWYG. Ситуація стала нестерпною, і потрібно було щось зробити.

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

У структуру документа повернулася логіка, тобто відповідність типу елементів їх призначенню. З'явилася можливість перевизначити стилі браузерів за замовчуванням, дизайнер тепер може візуально виділяти заголовки, не роблячи їх великими і жирними. Списки тепер не обов'язково позначати круглими точками, а цитати можна виділяти будь-якими стилями, не обов'язково встановленими в браузері. Дизайнери стали застосовується елементи (X)HTML, базуючись не на їх зовнішньому вигляді, а на тому, які функції вони виконують.

Розмітка вважається "смисловою" (інша назва - "семантична"), якщо призначення елементів на сторінці не суперечить їх призначенню в специфікаціях (X)HTML. Смислова розмітка надає розробнику кілька важливих переваг. З нею набагато легше працювати, ніж з презентаційною розміткою. Наприклад, якщо що на сторінці потрібно змінити цитати і вони помічені коректно, то, щоб знайти їх, досить просканувати код, задавши в якості критерію пошуку елемент блокової цитати. Якщо ж дескриптори блокових цитат використовуються для абзаців, знайти цитати буде набагато важче.

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

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

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

Статистика: