И судя по тем рассуждениям, которые были в комментариях, мне бы хотелось прояснить один важный момент, который нужно понимать, прежде чем говорить о языке HTML и тегах, которые в нем используются.

Момент этот заключается в понимании такого важного понятия, как семантика кода . Давайте в этой заметке попытаемся разобраться с этим вопросом и зачем это все нужно.

Что такое семантика кода ?

Семантика (с лингвистической точки зрения) – это смысл, информационное содержание языка или отдельной его единицы.

Как мы знаем, структурными единицами языка HTML являются теги, они и являются теми самими отдельными единицами, которые несут смысл, информационное содержание.

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

Таким образом, когда мы создаем веб-страницу, с помощью языка HTML , мы объясняем компьютеру, какой элемент, какую роль должен играть на странице.

Мы должны понимать, что содержание каждого элемента веб-страницы должно быть заключено в теги, которые бы соответствовали их логическому и смысловому назначению.

Т.е. заголовки в тексте заключались бы в теги h 1-h 6, абзацы в теги p , списки в теги ul /ol (li ) и.т.д.

Код, который соответствует этим условиям, называют семантическим т.е. каждому элементу на веб-странице, соответствует правильное смысловое значение.

А теперь вопрос, можем ли мы заголовок на веб-странице, заключить в тег абзаца?
А почем нет? Конечно, можем. Многие скажут, но ведь при этом мы теряем оформление, которое имеют заголовки h 1-h 6. Но, на самом деле, оформление здесь никакой роли не играет. С помощью стилей CSS , мы можем присвоить любому абзацу точно такое же оформление, которое было у элемента h 1-h 6.

Вывод, который мы с вами должны сделать, исходя из этого, семантика кода и оформление это две разные вещи, которые не нужно путать между собой. Определенное оформление каждому тегу присваивается, но его можно легко изменить,а вот изменить семантическое значение этого тега уже нельзя.

Мы можем заключить заголовок в абзац, но при этом теряется семантичность кода и этот текст будет нести совершенно иной смысл.

Поэтому, прежде чем заключать элемент в какой-либо тег, желательно подумать, а какую функцию, смысл он несет на странице?

Возникает логичный вопрос, а зачем в таком случае вообще нужна семантика кода?

Зачем заголовки делать заголовками, абзацы делать абзацами, аббревиатуры делать аббревиатурами и.т.д.?

По моему мнению, есть несколько причин, которые помогут вам склониться в сторону семантического кода. Что нам дает семантическая разметка?

1) Информацию о том, как браузеру по умолчанию отображать тот или иной элемент на странице;

Например, мы знаем, что заголовок h 1, если не задавать ему никаких специальных стилей, отображается на странице размером 2em и жирным шрифтом. Но, по моему мнению это самая не существенная причина.

2) Семантический код лучше читается и воспринимается поисковыми системами;

Считается, что страница, которая имеет семантическую разметку, при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.

2) Код более понятный для человека;

Согласитесь, что разобраться с кодом, где все четко прописано, что эта часть текста является абзацем, эта аббревиатурой, и.т.д. намного легче, чем с кодом, где вся информация идет одной сплошной структурой и не понятно, что хотел сказать автор.

3) Проще получить доступ к элементу и как следствие большая гибкость.

Делая код семантическим, вы сможете намного проще обращаться к этим элементам с помощью специальных средств, которые работают с элементами на веб-страницах, например, языки CSS , Javascript и др.

Если вы заключите все аббревиатуры на вашей странице в тег abbr , то в CSS , для того, чтобы все аббревиатуры на вашей странице стали красными достаточно будет просто прописать.

abbr {color :red ;}

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

Это всего лишь один пример, которых можно привести массу.

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

Дело ваше!

Вы должны сами для себя принять это решение.

Семантика (фр. sémantique от др.-греч. σημαντικός - обозначающий) — наука о понимании определенных знаков, последовательностей символов и других условных обозначений. Эта наука используется во многих отраслях: лингвистика, проксемика, прагматика, этимология и т.д. Ума не приложу, что эти слова означают и чем все эти науки занимаются. Да и не важно, меня интересует вопрос применения семантики при верстке сайтов.

Заметка

Тут не буду затрагивать термин Семантический веб. На первый взгляд, может показаться, что темы Семантический веб и семантический HTML код — это почти одно и тоже. Но на самом деле Семантический веб понятие, довольно философское и с нынешней реальностью имеет не так много общего.

Семантическая верстка — что это?

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

HTML — это тоже язык, его "слова", именуемые тегами, тоже имеют определенный логический смысл и назначение. По этому в первую очередь семантический HTML код — это верстка с правильным использованием HTML тегов , использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов.

microformats.org — сообщество, которое работает над воплощением идеалистических идей Семантического веба в жизнь посредством приближения разметки страниц к тем самым семантическим идеалам.

Зачем и кому вообще нужна семантическая верстка?

Если у меня на сайте информация отображается так же как на дизайне, зачем себе еще ломать мозг и думать о какой-то семантике?! Это же дополнительная работа! Кому это нужно?! Кто это оценит кроме другого верстальщика?

Мне такие вопросы приходилось частенько слышать. Давай разберемся.

Семантический HTML для веб разработчиков

Семантический код для пользователей

Повышает доступность информации на сайте. В первую очередь это имеет значение для альтернативных агентов таких как:

  • семантический код напрямую влияет на объем HTML кода. Меньше кода —> легче страницы —> быстрей грузятся, меньше требуется оперативной памяти на стороне пользователя, меньше трафика, меньший объем баз данных. Сайт становиться быстрей и менее затратным .
  • голосовые браузеры для которых важны теги и их атрибуты, чтобы произнести правильно и с нужной интонацией содержимое, или наоборот не произнести лишнего.
  • мобильные устройства которые не на полную мощь поддерживают CSS и поэтому ориентируются в основном на HTML код, отображая его на экране согласно используемым тегам.
  • устройства печати даже без дополнительного CSS напечатают информацию качественней (ближе к дизайну), а создание идеальной версии для печати превратится в несколько легких манипуляций с CSS.
  • к тому же существуют устройства и плагины, которые позволяют быстро перемещаться по документу — например, по заголовкам у Opera .

Семантический HTML для машин

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

Хороший контент плюс качественная семантическая верстка — это уже серьезная заявка на хорошие позиции в выдачах поисковиков .

  • 10. Позиционные чередования гласных фонем. Количественная и качественная редукция гласных фонем.
  • 11. Позиционные чередования согласных фонем. Ассимиляция и диссимиляция по глухости/звонкости и по твердости/мягкости.
  • 12. Исторические чередования фонем.
  • 13. Падение редуцированных гласных фонем и последствия этого явления.
  • 14. Чередования, связанные с историей носовых звуков в древнерусском языке.
  • 15. Палатализация заднеязычных.
  • 17. Фонетическая транскрипция. Фонематическая транскрипция
  • 18. Слог. Слогораздел. Типы слогов.
  • 19. Фонетическое слово. Ударение
  • 20. Речевой такт. Интонация
  • 21. Ударение. Интонационные конструкции
  • 21. Фраза. Интонация
  • 22. Понятие об орфоэпии
  • 23. Основные правила русского литературного произношения.
  • 24. Произношение гласных под ударением. Произношение безударных гласных.
  • 25. Произношение отдельных согласных звуков.
  • 26. Произношение групп согласных.
  • 27. Произношение некоторых грамматических форм.
  • 28. Произношение некоторых аббревиатур. Особенности произношения иноязычных слов.
  • 29. Трудные случаи усвоения ударения в русском языке.
  • 30. Развитие русского литературного произношения.
  • 31. Грамматическое кодирование
  • 32. Семантическое кодирование. Двухаргументные (временные признаки): причинность.
  • 33. Семантическое кодирование. Двухаргументные (временные признаки): следствие, результат, цель.
  • 34. Семантическое кодирование. Двухаргументные (временные признаки): превращение, изменение
  • 35. Семантическое кодирование. Двухаргументные (временные признаки): взаимодействие, группировка, общность, объединение
  • 36. Семантическое кодирование. Двухаргументные (временные признаки): разделение, влияние, условие, вхождение.
  • 37. Семантическое кодирование. Двухаргументные (временные признаки): соответствие, управление, подчинение, зависимость.
  • 38. Семантическое кодирование. Одноаргументные (постоянные признаки):свойство, необходимость, возможность, вероятность, есть, нет.
  • 39. Семантическое кодирование. Одноаргументные (постоянные признаки): истинность, ложность.
  • Семантический код. Его цели. Предназначение. Принцип построения. Возможности.
  • Предназначение семантического кода. Термин «смысл».
  • Предназначение семантического кода. Текст. Информация. Гипертекст в освоении информации.
  • 43. Грамматический и семантический анализ при семантическом кодировании.
  • 44. Русский семантический словарь сочетаемости и ассоциативный словарь при семантическом кодировании.
  • Предназначение семантического кода. Системный изоморфизм.
  • Предназначение семантического кода. Принцип необходимого и достаточного.
  • Предназначение семантического кода. Связность классов и подклассов
  • 48. Предназначение семантического кода. Принцип иерархичности/ неиерархичности.
  • 49. Предназначение семантического кода. Системная метафоричность.
  • 50. Ситуативный (ситуационный) семантический код.
  • 51. Семантическое кодирование. Выравнивающе-толковательный код. Матрешный код.
  • 52. Основные задачи и ключевые понятия речевого интерфейса.
  • 53. Исторический обзор проблемы распознавания и синтеза речи.
  • 54. Системы автоматического синтеза речи. Практические приложения речевого интерфейса.
  • 55. Системы автоматического распознавания речи. Практические приложения речевого интерфейса.
  • 56. Лингвистические основы речевого интерфейса. Использование лингвистики в реализации речевых систем.
  • 57. Структура речевого сигнала. Анализ и синтез. Спектрально-временные характеристики речевого сигнала.
  • 58. Информационная и модуляционная структура речевого сигнала.
  • 59. Методы синтеза речевого сигнала. Обобщенные математические модели описания речевых сигналов.
  • 60. Методы синтеза речевого сигнала. Геометрическая модель речевого тракта.
  • 61. Методы синтеза речевого сигнала. Формантная модель.
  • 62. Компиляционные методы синтеза речевого сигнала.
  • 63. Методы анализа речевого сигнала.
  • 64. Метод цифровой фильтрации речевого сигнала. Спектральный анализ с использованием алгоритмов бпф. Метод цифровой фильтрации
  • Спектральный анализ с использованием алгоритмов бпф
  • 65. Спектральный анализ на основе линейного предсказания. Формантно-параметрическое описание речевого сигнала. Спектральный анализ на основе линейного предсказания
  • Формантно-параметрическое описание речевого сигнала
  • 66. Метод кепстральных коэффициентов. Особенности восприятия речи. Свойства рецептивного восприятия речи человеком. Метод кепстральных коэффициентов
  • 67. Свойства рецептивного восприятия речевых сигналов. Природа слуховых (фонетических) признаков речевого сигнала. Свойства рецептивного восприятия речевых сигналов
  • Природа слуховых (фонетических) признаков речевого сигнала
  • 68. Свойства восприятия минимальных смыслоразличительных элементов речи
  • 69. Синтез речи по тексту. Структура синтезатора речи по тексту.
  • Структура синтезатора речи по тексту Ключевые понятия:
  • 70. Лингвистический процессор. Предварительная обработка текста. Пофразовая обработка текста.
  • Предварительная обработка текста
  • Пофразовая обработка текста
  • 71. Пословная обработка теста. Пример работы лингвистического процессора. Пословная обработка текста
  • Пример работы лингвистического процессора
  • 72. Просодический процессор
  • 73.Фонетический процессор. Артикуляторно-фонетический процессор. Формантный фонетический процессор.
  • 74. Аллофонный фонетический процессор. Акустический процессор.
  • 75. Аппроксимация геометрии речевого такта. Акустический процессор, основанный на компиляционных методах синтеза речи.
  • 76. Классификация систем автоматического распознавания речи. Методы автоматического распознавания речи.
  • 77. Классификация методов распознавания речи.
  • 78. Метод динамического программирования.
  • 79. Метод скрытых марковских моделей.
  • 80. Структурно-экспертные методы распознавания речи. Экспертный подход к фонемному распознаванию речи.
  • 81. Проблемы обучения в распознавании речи и методы создания эталонных слов. Метод создания многокластерных эталонов речи.
  • 82.Проблема плотных упаковок. Формульное представление знаний как вариант плотных упаковок.
    1. Семантический код. Его цели. Предназначение. Принцип построения. Возможности.

    Целью дан разр явл:

      Сформировать наиб общ принц созд сем кода

      Показ в общем виде на примерах его возможности

      Обнаруж пути возм. Статья 100 000-го словаря

      Созд пробн сист. Мы оперир словарем в объеме около 400 слов и выр-ний. И наз отвеч на вопр к тексту обземом в страницу не представл сложности.

    Подобн система мб постр лингвистически за 2-3 месяца, за 2 мес отлажена в прогр виде. При этом можно искл тот же самый текст, как на РЯ, так и на АЯ

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

    Принципы хранятся в двух основных моментах:

      Прежде всего целостн картины мира … на отдельные части множ-вом. Пр0-й. Именно поэтому ученье часто ив о «мозаичном» знании. Так, в моногр фр иссл-я А. Моля целый раздел посвящен мозаичной культуре и ср-вам масс коммуникации, созд именно мозаичн картины мира

    Чаще всего эти Пр0-и несвяз др с другом и в силу отсуств общ сист термин-ии. Эта разобщ мешает формализ даже именому знание о мире. Это происходит из-за того, что в рамках Пр0 вновь сталк с делен на подобл знания.

        При разг о зания и попытки их форм-ть не учит-ся сама изм приращ знаний за счет их можериз-я. Знания приобр-ся лишь за счет напол нав игф, а не за счет лог вывода новых знаний на базе старых. Между тем ребенок, освоив мир, моделирует и модернизирует.

    Причины создания такой научн сист-м соверш разнопл. Одна из них - это отсуствие мат аппарата и эмпиризм и диктат практики. Само отсутсв мат аппарата мб и неведения что этот апп нах-ся в твоих руках, но ты его не видишь.

    1. Предназначение семантического кода. Термин «смысл».

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

    Онтология смысла приобретает особую значимость в связи с теми изменениями в понимании объекта, предмета и задач лингвистики, которые уже произошли и продолжают происходить в настоящее время. Если в период, когда доминировала абсолютизация языка как самодостаточной автономной сущности, смысл часто выступал лишь как некоторое факультативное явление, находящееся на периферии интересов исследователей, то при обращении к речи, тексту, дискурсу смысл начинает фигурировать как одна из наиболее фундаментальных категорий.

    С.А.Васильев различает предметный смысл и текстовый. Предметный смысл связывается им с механизмом вычленения, осознания предметов реальной действительности. В связи с этим основу смысла, по мнению автора, составляет способность устанавливать тождество и различие."Вещи неразличимы, если имеют для человека равный смысл, как неразличимы штампованные экземпляры одной и той же детали" (Васильев 1988, 96).

    С.А.Васильев выделяет несколько составляющих смысла. Одной из таких составляющих является предметная объективация человеческого опыта в виде знания о данном предмете. Но оно, по мнению автора, образует лишь наиболее общую составляющую смысла, интерсубъектную по своему источнику, имеющую общечеловеческую ценность. Помимо этого смысл содержит и такие компоненты, которые выражают жизненные установки ее носителей, их особые отношения к предметному миру. Эти две составляющие смысла лежат в основе межиндивидуального общения, а потому откладываются в их сознании и фиксируются как устойчивые, повторяющиеся компоненты, постоянно воспроизводимые в речи.

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

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

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

    Характеризуя "смысл-сообщение", С.А.Васильев обращает внимание на одну очень существенную его особенность. Он задается вопросом: за счет чего смысл целого высказывания оказывается всегда больше суммы значений, образующих его слов? В связи с этим он анализирует фрагмент романа М.Ю.Лермонтова "Герой нашего времени", в частности, слова Максимыча, характеризующие поведение Печорина:"...ставни стукнут, он вздрогнет и побледнеет; а при мне на кабана ходил один на один..." Автор отмечает, что приведенные слова сами по себе не воссоздают смысл поведения героя. Он считает, что здесь "говорит" само поведение, сам поступок: пугливость, храбрость... Как бы мы эти слова не сочетали, мы никак не получим значения пугливости, храбрости. Союз "а" здесь противопоставляет смысл не двух частей фразы, а двух способов поведения, которое мы понимаем на основе нашего индивидуального и усвоенного коллективного опыта. В результате автор делает чрезвычайно важный для понимания природы смысла вывод: "Здесь происходит использование невербальных средств в вербальном тексте"(Васильев 1988, 98). Это во-первых, свидетельствует об экстралингвистическом характере смысла, во-вторых, о том, что он является внешним по отношению к тексту, поскольку связан с актуализацией прошлого опыта, знания, оценочно-эмоциональных компонентов сознания личности. Кроме того, отсюда можно сделать вывод и о том, что смысл не содержится непосредственно в тексте, а является производным от процесса понимания, в котором он собственно и возникает как некоторая субстанция. Этот вывод возникает как объективное следствие, вытекающее из рассуждений автора, хотя оно и вступает в противоречие с некоторыми другими его положениями.

    Семантика кода HTML всегда является горячим вопросом. Некоторые разработчики стараются всегда писать семантический код. Другие критикуют догматичных приверженцев. А некоторые даже понятия не имеют о том, что это такое и зачем оно нужно. Семантика определяется в HTML в тегах, классах, ID, и атрибутах, которые описывают назначение, но не задают точно содержание, которое в них заключено. То есть речь идет о разделении содержания и его формата.

    Начнем с очевидного примера.

    Плохая семантика кода

    Заголовок статьи
    А автор
    Инко Гнито.

    Хорошая семантика кода

    Заголовок статьи

    Текст статьи, который кем-то написан. Инко Гнито - ее автор.

    Вне зависимости от того, считаете ли вы, что HTML5 готов к использованию или нет, наверняка использование тега

    в данном случаем будет более привлекательным, чем обычный
    с указанием класса. Название статьи становится заголовком, содержание становится параграфом, а выделенный жирным шрифтом текст становится тегом .

    Но не все так четко представляется тегами HTML5. Давайте рассмотрим набор имен классов и разберемся с тем, отвечают ли они требованиям семантики.

    Не семантический код. Это классический пример. Каждая рабочая среда CSS для модульной сетки использует такого типа имена классов для определения элементов сетки. Будет ли это "yui-b", "grid-4", или "spanHalf" - такие имена ближе к заданию разметки, чем к описанию содержания. Однако их использование в большинстве случаев неизбежно при работе с шаблонами модульных сеток.

    Семантический код. Нижний колонтитул (footer ) приобрел устойчивое значение в веб дизайне. Это нижняя часть страницы, которая содержит такие элементы как повторяющаяся навигация, права использования, информацию об авторе и так далее. Данный класс определяет группу для всех этих элементов без их описания.

    Если вы перешли к использованию HTML5, то лучше применять элемент

    в таких случаях. Замечание касается и всех остальных частей веб страницы (верхний колонтитул должен быть
    , боковая панель -