Більшість людей не думають про фундамент будинку, в якому вони живуть. Однак без міцного фундаменту не може існувати жодна будова. Для будь-якого документу, фундаментом є його структура. Застосовувати сучасні методики 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" і при привласнювати їм більш високий пріоритет, чим іншим елементам сторінки. Пристрої читання з екрану можуть використовувати заголовки як додатковий засіб навігації по сторінці.

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