Все мы знаем, что есть несколько типовых стандартов верстки: "Иксовая"(xHTML), "Попсовая"(HTML) и "Трендовая"(HTML5). Назрел у меня такой пост на тему значимости делать сайты валидными от и до, в что бы то ни стало.

Я уже давно и часто имею дело с гипертекстовыми языками. В последнее время в число требований все чаще входят такие понятия, как семантичность, валидность и адекватность разметки. Если вы помните, то некоторе время назад я запустил эксперимент, направленный на выявление значимости грамотной вёрстки для SEO. И, так, результаты весьма интересные, смотрите под катом.

В прошлый раз мы создали простенький tooltip на canvas средствами JavaScript, jQuery и CSS. Сегодня мы сделаем так, что наша подсказка будет выдавать реальную информацию о ссылке. Для этой задачи я использовал метод jQuery $.getJSON и небольшой PHP скрипт для парсинга данных Open Graph.

Для реализации такой canvas tooltip мы будем использовать отдельный обработчик на PHP.

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

Итак. Что же такое семантические технологии и откуда вообще такое слово взялось? Немного углублюсь в историю и попробую провести тонкую нить от абстрактного определения к информационным технологиям.

На основе модуля для экспорта яндекс новостей сделал модуль для построения семантичной карты сайта на основе XML и RDF. Модуль очень примитивный и еще остались идеи как его улучшить в будущем.

На данный момент модуль умеет подцеплять в head ссылку на meta - канал, а в самом канале выводит заданное в админке количество нод.

Структура RDF тоже на данный момент довольно примитивна. Она включает в себя основное описание ресурса и краткие описания нод.

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

В определённый момент наступает необходимость обновлять сайт. Будь это смена дизайна или редактирование каких то старых страниц есть важные моменты, о которых нужно знать.

Ссылка — анкор тег, конструкция из парных тегов <a></a>, обосабливающих участок текста или какой-то элемент страницы, связывает документы или их части.

Пример традиционной ссылки: <a href="http://www.shift-web.ru/semantika-i-logika-verstki">Семантичная вёрстка</a>, здесь атрибут href указывает url на который ведет ссылка.

Суть эксперимента - выяснить лояльность Google к тегу Yandex <noindex>. Длительность эксперимента полгода.

Как уже отмечалось ранее, применение заголовков h1-h6 является не только хорошим тоном, но и несёт определённую пользу для SEO, помогает поделить содержимое документа на смысловые составляющие.

Если с точки зрения вёрстки опора контента — блоки и таблицы, то с точки зрения контента опора — заголовки и параграфы. Именно по этому важно понимать и планировать структуру заголовков ресурса.

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

Кстати, о дизайне. Довольно часто встречаются страшные конструкции из таблиц, блоков, <center>, <font> и прочей нечисти с инлайн стилизацией. Естественно, в таком случае ни о какой логичности и семантичности в таком случае и речи быть не может.

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

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

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