Верстка: переход к семантической разметке — главная цель HTML

    Первоначально технология HTML (hypertex markup language) была предназначена для описания смысловой структуры веб-документа, то есть для определения частей текста, в которых находятся различные по типу и содержанию части страницы как например заголовки, абзацы, сноски, иллюстрации, гиперссылки и так далее. Говоря академическим языком, HTML создан для семантической разметки документа.

    Напомню, что семантика — это раздел языкознания изучающий отношения и способы выделения смысловых структур в речи. К примеру определение членов предолжения (подлежащее, сказуемое, дополнение, определение), изучение отношений и заложенного в них смысла (что является субъектом/объектом действия, а что уточняет их описание и т.д.).

    До HTML задача семантической разметки документов решалась с помощью:
    • TeX (технологии 1978го года) для макетирования академических публикаций
    • SGML (технологии 1968го года) для более широкого спектра задач. SGML очень похож на своего потомка XML за исключением ряда правил, которые в некоторых случаях заметно усложняют чтение разметки, как например разрешение не ставить угловые скобки в тэгах.

    Другими словами, если TeX был адаптирован строго под нужды макетирования университетских докладов, научных работ и тому подобного, SGML позволял создавать структуры информации подобные Реляционным Базам Данных, то есть реализоваывать ER-модели (entity-relationship).
    пример ER-модели
    (пример ER-модели)
    пример ER-отношения
    (пример ER-отношений)

    ER-модель — способ определения сущностей в базе данных и отношений между ними. Примеры ER-отношений: один к одному, один ко многим, многие ко многим, отношения ассоциации (связь сущностей), аггрегации (обощения и включения одной сущности в другую) и так далее.

    Тим Бернерс Лии создавая Web в конце 80ых, взяв за основу SGML, упростил синтаксис, создал перечень предопределенных тэгов для макетирования веб-страницы, правила использования которых задал с помощью DTD (технология из семейства SGML которая регламентирует порядок использования тэгов — то есть перечень разрешенных атрибутов, вложенных тэгов, разрешение на текстовый контент и так далее) и мы получили HTML 1.0

    Таким образом HTML основанный на SGML первоначально был призван для описания структуры документа в контексте ER-отношений ее частей, то есть определения структуры и содержания документа в терминах сходных к базам данных.

    Теперь представьте ситуацию, когда в прикладной программе для того чтоб подвинуть GUI-кнопку на несколько пикселей в какую-либо сторону Вам приходится редактировать структуру базы данных. Парадоксально, но в соверменном вебе это в порядке вещей — очень часто для того чтоб визуально подвинуть какой-либо элемент (GUI-кнопку) приходится изменять HTML-структуру (базу данных)!

    Развитию такой ситуации послужила очень острая конкуренция браузеров начавшаяся еще в 90ых, во время которой HTML расширился большим количеством тэгов предназначенных для создания исключительно визуальных эффектов, а не для выделения семантических единиц в структуре веб-документа. Объединение разметки смысловых частей документа и их внешнего оформления в одном месте послужило тому, что современный Интернет оказался совершенно не предназначеным для пользователей с ограниченными возможностями, для которых визуальное оформление веб-сайтов создает существенные препятствия для чтения информации. Более того отображение веб-страниц на устройствах с нестандартными размерами экрана (смартфоны) вместо переключения таблицы стилей требует вдобавок переработки всей структуры веб-документа, что очень неудобно.

    К счастью, новые веб-стандарты двигают HTML5 в сторону грамотного отделения структуры веб-сайта от способа его визуальной стилизации, но для верного использования таких методов необходимо изменить само восприятие верстки веб-страниц. Ведь если раньше верстальщик в первую очередь ориентировался на присланный макет от дизайнера, то теперь важно в первую очередь опираться на информационную структуру страницы, ее семантические части и их отношения. И только после, в качестве второго шага, смотреть как можно привязать к уже созданной структуре веб-страницы визуальные элементы и динамический функционал.

    Резюмируя — заданная HTML'ом DOM-модель веб-страницы должна восприниматься в качестве базы данных с содрежанием и структурой веб-документа и ни в коем случае не должна меняться в зависимости от изменения стилистических элементов на странице.
    • +4
    • 22,7k
    • 9
    Поделиться публикацией
    Комментарии 9
      –1
      Спасибо за статью. Вероятно, для многих этот материал не нов, но в моей личной голове кое-что встало на свои места.
        0
        Не очень понимаю, за что минусуют (и статью, и мой комментарий). В статье отражён интересный взгляд. Не единственно верный и, как мне кажется, не претендующий на это, однако зерно истины в нём есть.
        +3
        Я не соглашусь с вашим резюме, дом — это модель, а не база данных/знаний. Есть визуализация, интерфейс, а есть содержание, данные. И есть семантические описания: RDFa, microdata. Вы их можете использовать для своих данных, такие как вы видите в Entity Relations. Отождествлять view и data — не всегда верное решение, хотя порой может таким являться.
          0
          Да, модель интереснее выглядит. Сразу вспоминается MVC, в применении к вебу можно провести аналогию: html — модель, css — представление, JS — контроллер.
          0
          Интересная аналогия с базой данных.
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              Разметка текста согласно его структуре, а не визуального представления. HEAD, BODY, P, H* — это структура, B, I — это представление.
              • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  А HTML и не должен размечать рукописи.

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое