Вы можете быть удивлены, почему you’ повторное чтение о старых добрых семантики на Smashing Magazine.

Почему doesn’ т этой статье сделки с HTML5 или иной новые модные язык: ничего, кроме простой, ясный, усталые старые семантики.Вы можете даже найти предмет скучным, будучи преданным переднего конца разработчиком.Вы don’ т необходимо лекции по семантике.You’ ве проделали хорошую работу в ногу с веб-эти последние 10 лет, и вы знаете почти все, что нужно know.

I’ пишу о семантике HTML, потому что I’ ве заметил, что семантических значений часто обрабатываются sloppily и иногда пренебрегают, даже сегодня.Огромная пустота остается в семантической последовательности и ясности, умоляя быть заполнены.Нам нужно лучше и более последовательным именования и умнее способы построения шаблонов HTML, чтобы дать нам более последовательным, четким и читаемым HTML код.Если это doesn’ T звук как в раю, я don’ знаю, что does.

Насущных потребностей Semantics

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

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

В поисках отзывов, Вы don’ хотите, чтобы в конечном итоге на странице с серыми links.

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

(Очень простые) Basics

Абсолютно ничего сложного о семантике, и основы были проповедовал в течение длительного времени.Повторение минимума won’ T никого обидеть, хотя, так что здесьэто goes.

Язык HTML имеет ряд тегов с семантическим значением.Если ни один из имеющихся костюмов теги ваши потребности, то две общие тэги (span и div) являются HTML эквиваленты слова “ вещь, ” которые могут быть использованы в комбинации с одним или несколькими классами добавить (не обязательно стандартизированным) семантическое значение для вашего элементов.It’ с микроформаты идеи без фактического микроформатов.Некоторые основные примеры:

• Главная навигация: nav.main (HTML5) или div.navMain;
• Статья: article (HTML5) или div.article;
• Статья заголовком: article>header (HTML5) или div.article>div.header

That’ и все, что с ним на самом деле.Добавление семантическое значение заключается в выборе правильного тега (ы) и / или применяя правильные метки (ы) с элементом.Это действительно заставляет вас задаться вопросом, почему применение этой простой концепции последовательно профессионально разработанных веб-сайтов оказалось так трудно, даже today.

Для тех из вас, кто don’ т, как идеология микроформаты, вы также можете пройти весь HTML5 и посмотреть на HTML5 микроданных proposition.То, что следует в этой статье отражает как методологии одинаково, поэтому выбор зависит только от you.

Отбор проб Web

Чтобы проиллюстрировать мою точку зрения, я сделал несколько быстрых образцов из некоторых today’ ведущих веб-сайтов.Ни в коем случае эти образцы занимать какую-либо научную обоснованность, ни это целенаправленная Баш веб-сайтов I’ ве выделили.Они просто выбрали, потому что я считаю, что они наилучшим образом представляют их вида.Я надеюсь, что данные говорят сами за себя либо way.

Чтобы понять семантической целостности в пределах одного сайта, я пытался найти некоторые общие типы контента.Типы контента легко распознать, и еще легче этикетке.Прежде чем добраться до данных, хотя, let’ посмотрим на одну сторону, мы могли бы назвать продукты в интернет-магазине:

• Деталь продукта: div.product;
• Продукты добавлена ​​в вашу корзину: .basket li.product,
• Промо продукта в списке: .categoryList .product.promo,
• Etc.

Продукты везде в интернет-магазине, поэтому вполне логично, что продукт класса будет появляться на страницах для каждого экземпляра продукта на сайте.В конце концов, является ли продукт находится в “ теме items” список, добавляется в корзину или показан в полном doesn’? Т действительно изменить его семантической природе, так зачем менять его структуру или имя класса

Все эти продукты, появляющиеся в вариантах или в различных contexts.

Для моего примера, я выбрал пять типов контента (история, продукция, видео, лицо, блога) и взял четыре веб-сайтов для представления каждого типа контента.Для проверки семантической целостности, я посмотрел на этикетки на список (перечень случаев, типа контента) и содержание type’ S подробнее.В следующей таблице приведены мои выводы:

Наряду с last.fm, ни один из сайтов я проверил получил это право, хотя типы контента я выбрал было очень легко этикетке.Яблоко и New York Times, при …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров