Семантическая вёрстка








⚙️  HTML



  • HTML и HTML5

  • Динамический HTML

  • XHTML


  • XHTML Mobile Profile и CHTML

  • Document Object Model

  • Семейство шрифтов

  • Кодировки символов

  • Мнемоники в HTML

  • Редактор HTML

  • Элементы HTML

  • Семантическая вёрстка

  • Карта изображений

  • Цвета HTML

  • Формы HTML

  • Фреймы HTML


  • HTML5 audio и HTML5 video

  • Canvas

  • Скрипты в HTML

  • Unicode и HTML

  • Браузерный движок

  • Quirks mode

  • Каскадные таблицы стилей


  • W3C и WHATWG

  • Web Storage

  • WebGL

  • Сравнение

    • языков разметки документов

    • браузеров


    • браузерных движков для

      • HTML


      • HTML5

        • HTML5 Canvas

        • HTML5 Media




      • XHTML (1.1)








Семантическая вёрстка, или семантический HTML-код, — это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением)[1], а также предполагающий логичную и последовательную иерархию страницы[2][3]. Он противопоставляется подходу, при котором написание HTML-кода определяется внешним видом веб-страницы. Для оформления веб-страниц, написанных в соответствии с семантикой, используются каскадные таблицы стилей (CSS). Стандарт HTML с самого начала включал в себя ряд семантических тегов[4], но большую популярность семантическая вёрстка получила после начала работ над HTML5.


В качестве примера можно привести изменения в стандарте HTML, коснувшиеся, в частности, тега физического форматирования <i> (англ. italic, делающего текст курсивным) — вместо него теперь рекомендуется использовать тег логического форматирования <em> (от англ. emphasis, акцентирование). Затем с помощью CSS акцентирование можно визуально представить курсивом, полужирным начертанием, подчёркиванием; аудиально (при озвучивании текста на основе TTS-технологий) — замедлением темпа речи или более громким голосом и т. д. Эти изменения вызваны тем, что визуально курсивом оформляется не только акцентирование текста, но и, например, цитаты, для которых с HTML 4 появился тег <cite>. Другим применением курсива может быть обозначение иностранных фраз или слов; при этом веб-разработчики могут использовать встроенные в XHTML атрибуты указания языка или сделать свою разметку семантической, указав подходящий класс элемента с текстом через атрибут class (например, class="foreign"). Использование различной разметки для акцентов, цитат и иностранных слов позволяет машинным веб-агентам, таким как пауки поисковых систем, более точно определять значимость как отдельных элементов веб-страницы, так и всего текста в целом.



Литература |



  • Amerland D. Google Semantic Search. — Que Publishing, 2013. — 240 p. — ISBN 9780133434170.

  • Berners-Lee T. Weaving the Web: the original design and ultimate destiny of the World Wide Web by its inventor. — 1st ed. — San Francisco: HarperSanFrancisco, 1999. — 226 p. — ISBN 978-0062515872.



См. также |



  • HTML5

  • Элементы HTML

  • Разделение представления и содержания



Примечания |





  1. Рыжков Е. Семантический HTML код — рекомендация с большими выгодами (неопр.). xiper.net (18 февраля 2010). Проверено 12 октября 2014.


  2. Рябоконь С. Вёрстка: переход к семантической разметке — главная цель HTML (рус.). Хабрахабр (18 июня 2013).


  3. Marsman J. HTML5 Part 1: Semantic Markup and Page Layout (англ.). MSDN Blogs (1 August 2011). Проверено 12 октября 2014.


  4. Amerland, 2013, p. 166.











Popular posts from this blog

Усть-Каменогорск

Халкинская богословская школа

Where does the word Sparryheid come from and mean?