XML (/ˌeks em ˈel/ англ. eXtensible Markup Language) — расширяемый язык разметки. Рекомендован Консорциумом Всемирной паутины (W3C). Спецификация XML описывает XML-документы и частично описывает поведение XML-процессоров (программ, читающих XML-документы и обеспечивающих доступ к их содержимому). XML разрабатывался как язык с простым формальным синтаксисом, удобный для создания и обработки документов программами и одновременно удобный для чтения и создания документов человеком, с подчёркиванием нацеленности на использование в Интернете. Язык называется расширяемым, поскольку он не фиксирует разметку, используемую в документах: разработчик волен создать разметку в соответствии с потребностями к конкретной области, будучи ограниченным лишь синтаксическими правилами языка. Расширение XML — это конкретная грамматика, созданная на базе XML и представленная словарём тегов и их атрибутов, а также набором правил, определяющих какие атрибуты и элементы могут входить в состав других элементов. Сочетание простого формального синтаксиса, удобства для человека, расширяемости, а также базирование на кодировках Юникод для представления содержания документов привело к широкому использованию как собственно XML, так и множества производных специализированных языков на базе XML в самых разнообразных программных средствах. XML является подмножеством SGML.

Почему важен DOCTYPE и как его правильно использовать

Решил проводить регулярные лекции и практические занятия со своими сотрудниками по программированию на PHP, MySQL, Javascript. А также другим технологиям необходимым для выпуска качественных сайтов. Начать решил с самого «верха», с HTML тэгов. Буду рад, любым комментариям :) Сразу оговорюсь, что бОльшая часть информации я нашел в интернете, внизу статьи будут приведены ссылки на источники. Часть информации была переведена совместно с google translate. Итак:

Почему так важен DOCTYPE

Вроде бы вы сделали все правильно, но ваш сайт почему-то не выглядит или не работает, как ожидалось, в последних версиях броузеров. Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в броузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE. Эта небольшая статья расскажет вам о заголовках DOCTYPE, которые работают, а также объяснит практическое и теоретическое значение этого, казалось бы отвлеченного от реальности, тега.

Что такое DOCTYPE?

Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором. Тег DOCTYPE также важен для правильного отображения и работы страницы в броузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win). Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает броузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта. Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, броузер перейдет в «загадочный» (quirk) режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т.е. так, как писали в конце 90-ых годов. В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что). Понятно, что для вас эти выкрутасы не желательны. Но именно это вы и получите, если будете пользоваться неполным или неправильным тегом DOCTYPE.

Проблема

Когда создавали NN4, IE4 выполняли правила CSS не совсем в соответствии со стандартом. Реализация Netscape была просто ужасной, IE4 подошел к реализации стандарта лучше, но тем не менее, реализовал его не до конца. Хотя IE 5 Windows исправил множество ошибок IE 4, но оставались другие сбои в CSS (в основном в модели окон (window model)). Поэтому, когда соответствие стандартам стало важным, W3C поставил производителей браузеров перед жестким выбором. Приблизится к спецификации W3C было одним из решений проблемы, но если бы производители браузеров просто изменили реализацию CSS, чтобы соответствовать стандартам полностью, многие веб-сайты, «поползли» бы в большей или меньшей степени или оказались полностью неработоспособными. Такое сближение с соблюдением стандарта повлекло бы за собой проблемы. С другой стороны, не приведение к соответствию стандартов могло бы внести вечную путаницу в эпоху войны браузеров.

Решение

Поэтому решением этой проблемы было позволить веб-разработчикам, которые знали о стандартах, выбирать какой режим использовать. продолжать показывать старые страницы по старым (совместимым) правилам. (quirks mode) Иными словами, всем браузерам необходимо было работать в двух режимах: режим совместимости для старых правил, и строгого режима для стандарта. IE Mac был первым браузером использовавшим оба режима, а Windows IE 6, Mozilla, Safari, Opera и последовали его примеру. IE 5 Windows, а также старые браузеры, как Netscape 4, постоянно заблокированы в режиме совместимости. Решение о выборе, какой режим отображения требуется вызвать, было найдено в использовании «DOCTYPE» переключения. Согласно стандартам, любой (X) HTML документ должен иметь DOCTYPE который рассказывает всему миру, какой тип (X) HTML документа он использует.

Она называется доктайп.

Это длинная история с черной магией, стоящая за доктайпом. Во время работы над Internet Explorer 5 под Mac его разработчики столкнулись с неожиданной проблемой. Новая версия этого браузера содержала столько улучшений по части стандартов, что старые страницы отображались некорректно. Вернее, отображались они надлежащим образом, по спецификации, но люди считали, что отображаются они неправильно. Авторы страниц при верстке ориентировались на доминирующие браузеры того времени — Netscape 4 и Internet Explorer 4. Браузер IE5/Mac был настолько передовым, что фактически разрушил Сеть. В Майкрософте пришли к оригинальному решению. Перед отображением страницы, IE5/Mac смотрит на доктайп, который, как правило, стоит в первой строке кода (еще до элемента ). Старые страницы, которые ориентировались на «причуды» старых браузеров, обычно не имеют доктайпа, поэтому IE5/Mac отображал их подобно этим браузерам. Для включения поддержки новых стандартов, авторы страниц должны были вставить перед . Эта идея распространилась как лесной пожар и вскоре все основные браузеры имели два режима: «режим совместимости» и «стандартный режим». Конечно, вскоре все это вышло из-под контроля. Когда Mozilla запустила версию 1.1 своего браузера, она обнаружила, что страницы, которые отображаются в «стандартном режиме» в действительности основываются на одной конкретной причуде под именем доктайп. Mozilla подправила свой браузерный движок для устранения этого недостатка и тысячи страниц рассыпались в один миг. Таким образом был создан, и я не выдумываю это, «почти стандартный режим». В своей основной работе Переключение режимов браузера через доктайп Хенри Сивонен выделил следующие режимы. Режим совместимости В режиме совместимости браузеры нарушают современные веб-спецификации и чтобы избежать «рассыпания» страниц отображают их в соответствии с практикой, распространенной в конце 90-х годов. Стандартный режим В стандартном режиме браузеры пытаются вывести документы в соответствии со спецификацией в той мере, насколько она реализована в браузере. В HTML5 называется «не режим совместимости». Почти стандартный режим Браузеры Firefox, Safari, Chrome, Opera (начиная с 7.5) и IE8 также поддерживают почти стандартный режим, в котором вертикальные размеры ячеек таблиц реализуются традиционно, а не в полном соответствии со спецификацией CSS2. В HTML5 называется «ограниченный режим совместимости». Вы должны прочитать остальные статьи Хенри, потому что я привел здесь всё упрощённо. Даже в IE5/Mac было несколько вариантов доктайпа. Со временем список особенностей браузеров вырос и вместе с ним увеличился список доктайпов, которые переключают в режим совместимости. В последний раз, когда я занимался подсчётом, было 5 доктайпов для переключения в «почти стандартный режим» и 73 для переключения в «режим совместимости». Вероятно, при этом я пропустил несколько и я ещё молчу про ту сумасшедшую фигню, что делает Internet Explorer 8 для переключения между четырьмя (четырьмя!) режимами отображения. Вот схема. Убейте ее! Убейте и сожгите!

Тег

head

предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера head находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Содержимое тега head не отображается напрямую на веб-странице, за исключением тега title устанавливающего заголовок окна веб-страницы. Внутри контейнера допускается размещать следующие элементы: base, basefont, bgsound, link, meta, script, style, title.

Описание Браузеры преобразовывают

значение атрибута http-equiv

, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера. Синтаксис HTML meta http-equiv XHTML meta http-equiv Значения Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv. Content-Type Тип кодировки документа. expires Устанавливает дату и время, после которой информация в документе будет считаться устаревшей. pragma Способ кэширования документа. refresh Загрузить другой документ в текущее окно браузера.

Определяет заголовок документа. Элемент title не является частью документа и не показывается напрямую на веб-странице. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера. Допускается использовать только один тег title на документ и размещать его в контейнере head.

iOS имеет концепцию "Веб-клипов" для веб-сайтов и приложений. На iOS-устройстве iOS есть две основные фронтальные части: значок главного экрана (или значок веб-клипа) и его загрузочный образ. Они представлены apple-touch-icon и apple-touch-startup-image соответственно. Основные отличия между традиционными значками и значками на главном экране: Значки на главном экране имеют более высокое разрешение. Даже самый маленький размер значка, 29x29, больше, чем традиционный размер значка, который составляет 16x16. Favicons в формате ICO могут иметь альтернативы hi-res, но они не очень хорошо поддерживались в то время, когда iOS вводила веб-клипы в любом случае. iOS до 7 применил бы эффект блеска к значкам по умолчанию, чтобы они выглядели дома на главном экране. Чтобы дать разработчикам возможность отключить этот эффект от Apple, предоставили другое возможное значение apple-touch-icon-precomposed. Конечно, в iOS 7 эти эффекты больше не применяются, но как раньше. Так как значки на главном экране настолько принципиально отличаются от значков, не имеет смысла пытаться использовать существующие схемы ярлыков значков для iOS. Следовательно, apple-touch-icon (и apple-touch-icon-precomposed). И, конечно же, после введения iPad и дисплея Retina (и их комбинации) значки на главном экране теперь бывают разных размеров. Теперь, когда у Apple есть собственный тип значка для работы с ним, он может просто ввести свой собственный атрибут sizes для доставки различных файлов значков для разных размеров.

В интерфейс браузера Firefox, начиная с версии 2.0 встроена строка поиска, позволяющая без захода на сайт вводить поисковые запросы к Гуглу, Яндексу и другим системам. Идея оказалась удачной и ее впоследствии подхватили разработчики других браузеров. Несмотря на то, что подобным поиском пользуются многие, включая и создателей сайтов, большинство из них не подозревают, насколько просто и легко сделать собственный поисковый плагин для сайта. Плюсов у такого плагина несколько: пользователи начинают активнее использовать поиск, возрастает количество посетителей, повышается результативность сайта, улучшается юзабилити. Главное, что затрат практически нет. Если на сайте используется поиск, «прикрутить» для него плагин раз плюнуть. В основе плагина лежит технология OpenSearch, которая представляет собой коллекцию небольших форматов для распространения результатов поиска. Эти данные могут использоваться браузером для перехода к нужной странице, вывода описания, картинок и других вещей. Поскольку я затрону лишь малую часть всех возможностей, отсылаю желающих к полному описанию спецификации по адресу http://opensearch.org. Перейдем от теории к практике. Итак, у вас на сайте уже есть поиск и при вводе запрашиваемой строки выводятся результаты по адресу http://mysite.ru/search/?q=бла-бла. Вместо «бла-бла» может быть любая строка, конечно же. Создаем файл с расширением xml, назовем его search.xml, и сохраняем на сервере. Первые две строки в примере являются стандартными. Остальные элементы описаны ниже.

ShortName

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

Description

— краткое описание поисковой системы. Не должно превышать 1024 символа и содержать HTML-теги. Это необязательный параметр и его можно опустить.

Image

— путь к иконке сайта в формате ICO, PNG или JPEG. Размер иконки обычно 16x16 пикселов. Элемент не обязателен и если иконки нет, удалите его из текста. Непременно должен быть указан тип файла через параметр type, для ICO — image/x-icon, PNG — image/png, JPG — image/jpeg.

Url

— путь к результатам поиска. В параметре method пишется метод отправки данных (обычно GET), а в template указывается полный адрес к поисковой странице. Вместо поискового запроса надо написать . Если для работы поиска требуются и другие параметры, их можно перечислить здесь же через амперсанд (?q=&lang=ru).

InputEncoding

— кодировка, в которой выводятся результаты поиска.

META - теги

META - теги: описание и правила создания Поделиться: МЕТА - тег используется в пределах заголовка страницы и предназначен для того, чтобы включить любую полезную информацию, не определенную другими HTML тегами. Такая информация может быть извлечена серверами / клиентами для использования в идентификации, индексации и создании каталогов Ваших страниц. МЕТА - тег не виден в браузере при просмотре страницы, но значительно увеличивает размер страницы. Если Вы хотите, чтобы Ваш сайт находился в числе первых, выдаваемых поисковыми машинами при запросах пользователей, то Вам нельзя игнорировать использование МЕТА - тега. Кроме того, необходимо правильно заполнять содержимое МЕТА - тегов. Дополнительно к изучению META-тегов стоит ознакомиться с программой, которая поможет оптимизировать некоторые из META-тегов страницы: поисковая оптимизация страниц и meta-тегов для каждой из страниц сайта. Составные части МЕТА-тега: HTTP-EQUIV, Name и CONTENT. HTTP - EQUIV. Этот атрибут определяет заголовок HTTP, которому принадлежит информация. Если семантика заголовка HTTP, названного этим атрибутом известна, то содержание может быть обработано на основании записанных здесь данных. Заголовки HTTP не чувствительны к регистру. NAME. МЕТА - информационное имя. Если признак NAME - отсутствует, то данный атрибут может получить значение, равное значению HTTP-EQUIV. CONTENT. МЕТА - информационное содержание, которое будет связано с данным именем и/или заголовком HTTP. МЕТA - теги размещаются в любом месте заголовка страницы, т.е. между тегами HEAD и /HEAD. Итоговая информация: Внимание! Длина содержимого МЕТА - тегов "desctiption" не должна превышать 200 символов, a "keywords" - 1000 символов. Такое условие надо выполнять, иначе Вашему сайту может быть отказано в индексации или не вся важная информация (которая представлена Вами для поисковых машин) будет проиндексирована. Это ограничение связано с особенностями работы поисковых серверов.

Ключевые мета-теги Open Graph

Протокол Open Graph состоит из мета-тегов, их интегрируют в html-код страницы между head и /head. Разберем основные теги: og:title – название материала; og:description – описание материала, заполнять не обязательно; og:image – ссылка на картинку, которая должна сопровождать материал; og:type – тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.; og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть.