Настраиваем http-заголовки веб-сервера

Введение

Очень часто требуется просмотреть HTTP-заголовок, отдаваемый отдельной страницей интересующего сайта.

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

Если в результатах присутствует строка, подобная

HTTP/1.1 200 OK

значит все в порядке, а если вроде

HTTP/1.1 404 OK,

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

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

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

1.1. Назначение протокола HTTP

(С использованием материалов )

HyperText Transfer Protocol (HTTP) — это протокол высокого уровня, уровня приложений (дословно — протокол передачи гипертекста), обеспечивающий необходимую скорость передачи данных, требующуюся для распределенных информационных систем гипермедиа. HTTP используется проектом World Wide Web с 1990 года.

Практические информационные системы требуют большего, чем примитивный поиск, модификация и аннотация данных. HTTP/1.0 предоставляет открытое множество методов, которые могут быть использованы для указания целей запроса. Они построены на дисциплине ссылок, где для указания ресурса, к которому должен быть применен данный метод, используется Универсальный Идентификатор Ресурсов (Universal Resource Identifier — URI), в виде местонахождения (Uniform Resource Locator — URL) или имени (Uniform Resource Name — URN). Формат сообщений сходен с форматом Internet Mail или Multipurpose Internet Mail Extensions (MIME — Многоцелевое Расширение Почты Internet).

HTTP/1.0 используется также для коммуникаций между различными пользовательскими просмоторщиками и шлюзами, дающими гипермедиа доступ к существующим Internet протоколам, таким как SMTP, NNTP, FTP, Gopher и WAIS. HTTP/1.0 разработан, чтобы позволять таким шлюзам через proxy серверы, без какой-либо потери передавать данные с помощью упомянутых протоколов более ранних версий.

Что такое HTTP заголовки

HTTP протокол используется при открытии сайтов и скачивании файлов из Интернета. HTTP протокол работает по принципу запрос-ответ — от клиента приходит запрос и сервер отправляет ответ. Каждый запрос и каждый ответ состоит из элементов:

• Стартовая строка
• Заголовки
• Тело сообщения

Тело сообщения — это то, ради чего делается запрос — страница сайта или файл.

Заголовки — это метаинформация, которую мы обычно не видим.

В заголовках запроса могут быть такие данные как:

• предпочитаемые языки
• характеристика программы, которая делает запрос
• содержимое кукиз
• информация для сервера — для какого хоста предназначен запрос и прочее

В заголовках ответа могут быть такие данные как:

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

Эта статья расскажет, как посмотреть HTTP заголовки.

Применяемые в заголовках структуры

Дата и время

Только дата указывается в заголовках Date, Expires, Last-Modified, If-Modified-Since, If-Unmodified-Since. Дата может присутствовать в заголовках If-Range и Warning.

В HTTP используется три формата:

• Fri Jul 4 08:42:36 2008 — результат функции asctime() языка ANSI C.

Время всегда указывается для часового пояса GMT (UTC+0). Год записывается четырьмя цифрами. День, час, минута и секунда дополняются нулями до двух символов. Для названий месяца и дня недели применяются трёхбуквенные стандартные сокращения на английском языке.

Дни недели начиная с понедельника: Mon, Tue, Wed, Thu, Fri, Sat, Sun.

Месяцы с января по декабрь: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec.

В PHP для преобразования местного времени во время по Гринвичу используется функция gmdate(). Примеры формирования дат для заголовков HTTP:

 // Текущая дата формирования документа:
 header("Date: ".gmdate(DateTime::RFC850));

 // Дата модификации указанного файла:
 $fp = 'data/my-foo.txt'; // путь к файлу
 header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($fp))." GMT");

 // Документ предположительно изменится через час:
 header("Expires: ".gmdate("D, d M Y H:i:s", time() + 3600)." GMT");
 // 3600 - количество секунд относительно текущего момента.

Байтовые диапазоны

При работе с фрагментами содержимого в специальных заголовках используются байтовые диапазоны (англ. byte ranges). В них можно указать как один фрагмент, так и несколько разделяя их запятыми «,». Диапазоны применяются в заголовках Range и Content-Range. В заголовке Accept-Ranges перечисляются только единицы измерения.

В байтовых диапазонах обязательно в начале указываются название единиц измерения за которым следует символ «=». В настоящий момент кроме единиц bytes никакие другие не применяются. За символом «=» располагаются сами диапазоны. Каждый из них является разделённой дефисом «-» парой натуральных чисел или нуля и натурального числа. Первый элемент указывает начальный байт, а второй — конечный. Нумерация в диапазонах начинается с нуля.

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

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

Блок байтовых диапазонов считается выполнимым если в нём содержится хотя бы один доступный диапазон. Если же все диапазоны некорректны или выходят за пределы объёма ресурса, то серверу следует вернуть сообщение со статусом 416 (Requested range not satisfiable).

Примеры (весь объём ресурса — 5000 байт):

• bytes=0-255 — фрагмент от 0-го до 255-го байта включительно.
• bytes=42-42 — запрос одного 42-го байта.
• bytes=4000-7499,1000-2999 — два фрагмента. Так как первый выходит за пределы, то он интерпретируется как «4000-4999».
• bytes=3000-,6000-8055 — первый интерпретируется как «3000-4999», а второй игнорируется.
• bytes=-400,-9000 — последние 400 байт (от 4600 до 4999), а второй подгоняется под рамки содержимого (от 0 до 4999) обозначая как фрагмент весь объём.
• bytes=500-799,600-1023,800-849 — при пересечениях диапазоны могут объединяться в один (от 500 до 1023).

Становление артистки и сольная карьера

В 1976 году Пугачева стала лауреатом «Песни года» и приняла участие в новогоднем телеконцерте «Голубой огонек», а в следующем году дала большой сольный концерт в «Лужниках» и получила почетную «красную строку» от Москонцерта. Теперь Алла свободно могла гастролировать по миру — у нее было на это официальное разрешение государства.

Кстати, в тот же период артистка получила и свою первую главную роль в кино — в фильме «Женщина, которая поет», за нее Алле впоследствии дали награду «Лучшая актриса года».

В 1978-м Пугачева записала свой дебютный альбом «Зеркало души», который был издан на нескольких языках и принес артистке мировой успех. Следующие три пластинки Пугачевой — «Арлекино и другие» (1979), «Поднимись над суетой» (1979) и «То ли еще будет» (1980) — только укрепили ее популярность.

С 1982 по 1994 годы певица много гастролировала по всему миру и выпустила еще восемь альбомов: «Как тревожен этот путь» (1982), «Ах, как хочется жить» (1985), «Watch Out» (1985), «… Счастья в личной жизни» (1986), «Пришла и говорю» (1987), «Алла» (1990), «Рождественские встречи I» (1991) и «Рождественские встречи II» (1992).

Все они пользовались неизменным успехом у слушателей, а за песни с них Пугачева получала многочисленные награды. Особо хочется отметить такие композиции того десятилетия, как «Маэстро», «Делу время», «Миллион алых роз», «Айсберг», «Паромщик», «Расскажите, птицы», «Две звезды», «Эй, вы, там, наверху».

Определение и применение

CSS свойство justify-content определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси строки grid-контейнера.

Для того, чтобы определить как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально), или производит выравнивание всего макета сетки по оси столбца grid-контейнера, вы можете воспользоваться свойством align-content.

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

Это свойство может использоваться в тех случаях, когда для флекс элементов явно указана ширина, и если ширина всех элементов внутри контейнера не вызывает переполнение контейнера, иначе свойство justify-content не окажет на такой элемент никакого эффекта.

Более подробную информацию о работе с флекс элементами вы можете получить в статье учебника CSS «Верстка по Flexbox (работа с контейнерами)».

Схематичное отображение работы свойства justify-content отображено на следующем изображении:

* — для элементов сетки макета (grid-элементы) допускается использование сокращенных значений start и end, для флекс элементов необходимо использовать полные значения flex-start и flex-end.

Interactive (интерактивный) контент

Interactive контент (интерактивный контент) — это контент, специально предназначенный для взаимодействия с пользователем. В модели контента часть области категории interactive пересекается с областями категорий embedded и phrasing. Это означает то, что некоторые HTML-элементы могут относится сразу к нескольким этим категориям.

HTML-элементы, принадлежащие к interactive контенту: a, audio (если присутствует атрибут controls), button, embed, iframe, img (если присутствует атрибут usemap), input (если значение атрибут type не hidden), keygen, label, object (если присутствует атрибут usemap), select, textarea, video (если присутствует атрибут controls).

Flow контент

Контент типа flow включает в себя большинство элементов HTML 5. В этой категории представлены элементы с которыми обычно приходиться сталкиваться при создании HTML-документа.

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

Важно отметить ещё то, что если контент представлен как flow, то это ни каким образом не влияет на отображение элемента в браузере (пользовательском агенте)

HTML-элементы, принадлежащие к flow контенту: a, abbr, address, area (если он является потомком элемента map), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, text.

Flow контент является основным, в некотором смысле родительским контентом, который может содержать более специализированное содержание.

Модели контента до HTML 5

HTML-элементы до 5 версия языка HTML делились только на block-level elements (блочные элементы) и inline-level elements (строчные элементы). Блочные элементы (div, p, h1, h2 и др.) — это элементы, которые имеют своё собственное пространство в документе (прямоугольную область). Их основное назначение заключается в разметке веб-страницы на уровне блоков. Строчные элементы (inline-level elements) как правило находятся внутри блочных элементов. Они рассматриваются как текстовые элементы, и следовательно, отображаются как обычный поток текста. Назначение строчных элементов — это разметка веб-страницы на уровне строк.

Использование произвольных методов HTTP запроса

Мы уже рассмотрели (здесь) методы GET, PUT, HEAD, OPTIONS и другие. На самом деле, в качестве метода можно указать что угодно. Метод указывается после опции -X

Не все серверы одинаково реагируют на произвольные методы, например, команда:

curl -X 'HACK' -A 'Chrome' https://hackware.ru

вызовет ошибку «403 Forbidden».

Команда

curl -X 'HACK' -A 'Chrome' 87.236.16.208

вызовет ошибку «501 Not Implemented».

Команда на этот же сервер, но на 443 порт вместо 80:

curl -X 'HACK' -A 'Chrome' https://87.236.16.208 -k

вызовет ошибку веб-сервера «502 Bad Gateway».

Но современные веб-серверы Apache 2.4 с настройками по умолчанию просто обрабатывают незнакомые методы как если бы это был GET.

Проверим на нашем локальном сервере:

curl -v -H 'Hackware: Hello! How are you?' -X 'MIAL' localhost/headers.php

Как можно убедиться, несмотря на то, что строка запроса стала такой:

MIAL /headers.php HTTP/1.1

Веб-сервер и скрипт корректно обработали этот запрос и прислали ожидаемые данные.

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

http

Продемонстрируем это скриншотами.

Поиск по фильтру «http» после выполнения команды с запросом методом GET:

curl -H 'Hackware: Hello! How are you?' localhost/headers.php

Всё как положено: HTTP запрос и ответ присутствуют.

Поиск по фильтру «http» после выполнения команды с запросом методом MIAL:

curl -H 'Hackware: Hello! How are you?' -X 'MIAL' localhost/headers.php

То есть ответ найден (потому что он обычный), а запрос уже нет.

Должна соблюдаться правильная вложенность тегов

XHTML критично относится к ошибкам следующего типа: некорректная вложенность
одного тега в другой и расположение тега в несоответствующем контейнере.

Правильная вложенность тегов

Каждый тег должен располагаться внутри другого тега, при этом недопустимо
их «пересечение», как это показано в примере 3.7.

Пример 3.7. Ошибка с положением тегов

XHTML 1.0IECrOpSaFx

В данном примере закрывающий тег </b> предшествует тегу </i>,
хотя должно быть наоборот, что и приводит к ошибке. Стоит поменять теги местами,
как код становится корректным.

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

Иерархия тегов

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

Необходимо знать систему подчиненности тегов и следовать ей при написании
кода XHTML. В примере 3.8 показана базовая структура документа.

Пример 3.8. Структура документа

XHTML 1.0IECrOpSaFx

В данном примере вначале приводится тег <html>, внутри которого располагаются
теги <head> и <body>. Внутри раздела <head> хранится заголовок
документа (<title>) и кодировка страницы (<meta>).

Phrasing (текстовый) контент

Phraising контент — это текст документа, а также элементы, которые используются для разметки этого текста. Во многих отношениях phraising контент является тем же элементом inline из спецификации HTML4.

HTML-элементы, принадлежащие к категории phrasing: a, abbr, area (если он является потомком элемента map), audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, text.

Phrasing контент является частью контента flow. Большинство элементов из этой категории могут содержать в качестве своего контента только элементы из своей собственной категории. Т.е. в содержимое этих элементов нельзя включать любой элемент из контента flow.

Что такое код ответа сервера?

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

1xx — информационные:

• 100 — сервер принял первую часть запроса, можно подрожать передачу;
• 101 — нужно изменить протокол работы на более подходящий;
• 102 — на обработку запроса уйдет много времени, используется чтобы браузер не разрывал соединение раньше времени;

2хх — операция успешна:

• 200 — запрос выполнен успешно, отправляется для большинства запрашиваемых страниц;
• 201 — после выполнения запроса был создан ресурс;
• 202 — запрос принят, но еще не обработан;
• 203 — запрос выполнен успешно, но информация для ответа взята из прокси;
• 204 — запрос обработан, но контента для отображения нет;
• 205 — попросить пользователя ввести необходимые данные;
• 206 — запрос обработан, но передана только часть контента;

3xx — перенаправления:

• 300 — есть несколько страниц для этого запроса, например, на нескольких языках;
• 301 — страница навсегда перемещена по новому адресу;
• 302 — документ был временно перемещен;
• 303 — документ необходимо загрузить по указанному адресу с помощью протокола GET;
• 304 — документ не изменился с последнего запроса;
• 305 — нужно использовать прокси;
• 307 — ресурс временно перемещен на новый адрес.

4хх — ошибка в запросе:

• 400 — неверный запрос;
• 401 — необходимо аутентифицироваться;
• 403 — запрос принят, но у вас нет доступа;
• 404 — страница не найдена на сервере;
• 405 — используемый метод нельзя применять на сервере;
• 408 — время ожидания передачи запроса истекло;
• 410 — ресурс полностью удален;
• 411 — нужно указать длину запроса;
• 413 — запрос слишком длинный;
• 414 — URI запроса слишком длинная.

5хх — ошибка сервера:

• 500 — внутренняя ошибка сервера;
• 501 — нужная функция не поддерживается;
• 502 — прокси не может соединиться со шлюзом;
• 503 — сервер не может обрабатывать запросы по техническим причинам;
• 504 — прокси не дождался ответа от сервера;
• 505 — версия протокола HTTP не поддерживается.

Контент metadata (метаданных)

Metadata (метаданные) представляют из себя контент, который определяет внешний вид или поведение остального контента на веб-странице, а также используется для установления связи с другими документами. Элементы из этой категории в основном используются в элементе head документа

Обратите внимание на то, что область контента metadata частично перекрывает область контента flow. Это указывает на то, что определённый контент, например, script может быть использован как в секции metadata, так и в секции flow документа

HTML-элементы, принадлежащие к этой категории: base, link, meta, noscript, script, style, template, title.

HTTP заголовки в Wireshark (только для протокола HTTP, без HTTPS)

До сих пор мы программа, которая показывает HTTP заголовки и которая отправляет запросы и принимает ответы совпадали, поэтому даже при использовании протокола HTTPS мы видели расшифрованные данные. Но программа Wireshark не может расшифровывать протокол HTTPS, поэтому в ней можно просмотреть только заголовки для незашифрованного трафика.

Для поиска HTTP сообщений используйте фильтр

http

Заголовки запросов и ответов смотрите в «Hypertext Transfer Protocol»:

Преимущества Wireshark в том, что кроме просмотра HTTP заголовков, вы можете использовать гибкую и мощную систему фильтров для поиска по полям заголовка. Подробности смотрите в справочной статье «Фильтры Wireshark».

Зачем передавать данные в HTTP заголовках

Обычно в HTTP заголовках передаётся предсказуемая техническая информация, поэтому не все программы для ведения журналов и анализа трафика имеют функцию сохранения содержимого HTTP заголовков. Например, Apache обычно (это зависит от настройки формата логов) сохраняет такие поля HTTP заголовка как Referer и User-Agent. При желании, можно настроить Apache сохранять данные, переданные методом POST, но обычно это не делается, т. к. журналы начинают занимать слишком много места.

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

Поэтому определённые резоны использовать HTTP заголовки для передачи данных есть, поскольку GET запросы сохраняются практически всегда, POST запросы сохраняются редко, а HTTP заголовки не сохраняются практически никогда.

Из популярных приложений, которые используют поле HTTP заголовка для передачи данных, на вскидку можно вспомнить PhpSploit — «скрытный фреймворк для последующей эксплуатации», если коротко, то троян, бэкдор на PHP для веб-серверов.

Property Values

Value	Description	Example
normal	Default value. Sets the content, if specified, to normal, which default is «none» (which is nothing)	Try it »
none	Sets the content, if specified, to nothing	Try it »
counter	Sets the content as a counter	Try it »
attr(attribute)	Sets the content as one of the selector’s attribute	Try it »
string	Sets the content to the text you specify	Try it »
open-quote	Sets the content to be an opening quote	Try it »
close-quote	Sets the content to be a closing quote	Try it »
no-open-quote	Removes the opening quote from the content, if specified	Try it »
no-close-quote	Removes the closing quote from the content, if specified	Try it »
url(url)	Sets the content to be some kind of media (an image, a sound, a video, etc.)	Try it »
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit	Try it »

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<meta name = "description" content = "Бесплатные уроки по созданию сайтов" > <!-- мета элемент, который описывает содержимое документа -->
		<meta name = "keywords" content = "HTML, CSS, JavaScript, jQuery"> <!-- мета элемент, который описывает ключевые слова в документе -->
		<meta name = "author" content = "Denis Bolshakov"> <!-- мета элемент, который указывает имя автора документа -->
		<title>Пример использования атрибута content тега <meta></title>
	</head>
	<body>
		<h2> Это заголовок.</h2>
		<p>Это параграф. </p>
	</body>
</html>

В данном примере мы использовали три элемента <meta>:

• первый мета элемент описывает содержимое документа (значением атрибута name мы указали, что это описание страницы (description), а текстовое содержимое указали в атрибуте content. Это описание могут использовать поисковые машины для отображения результатов поиска.
• второй мета элемент описывает ключевые слова в документе (значением атрибута name мы указали, что это ключевые слова (keywords), а текстовое содержимое указали в атрибуте content. Ключевые слова могут использоваться некотрыми поисковыми машинами.
• третий мета элемент описывает имя автора документа (значением атрибута name мы указали, что это автор документа (author), а имя автора указали в атрибуте content.

<!DOCTYPE html>
<html>
	<head>
		<meta  http-equiv  = "refresh" content = "15, URL='http://basicweb.ru'" > <!-- мета элемент, который указывает, что страница будет перезагружена через 15 секунд и перейдет по указанному URL -->
		<meta  http-equiv  = "content-security-policy" content = "default-src https:" > <!-- мета элемент, который разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https -->
		<meta  http-equiv  = "default-style" content = "default style" > <!-- мета элемент, который указывает имя предпочитаемых css стилей документа -->
		<title>Пример использования атрибута http-equiv тега <meta></title>
		<link href = "default.css" rel = "stylesheet" type = "text/css" title = "default style">
	</head>
	<body>
		<h2> Это заголовок.</h2>
		<p>Это параграф. </p>
	</body>
</html>

В данном примере мы использовали три элемента <meta> для которых были указаны различные значения атрибута http-equiv:

первый мета элемент, указывает, что страница будет перезагружена (значение refresh) через 15 секунд и перейдет по указанному URL (значения, указанные в атрибуте content). Если адрес URL не указан, то страница просто будет перезагружена.

второй мета элемент разрешает загрузку ресурсов (изображения, шрифты, скрипты и так далее) только с использованием https. Это стало доступным благодаря использованию значения content-security-policy, которое позволяет с использованием атрибута content определить правила (политику) для обслуживаемых ресурсов.

третий мета элемент, указывает имя предпочитаемых css стилей документа

Обратите внимание, что значение атрибута content должно совпадать со значением глобального атрибута title HTML тега .

HTML тег <meta>

Проверка http заголовков с помощью Curl

Для проверки заголовков мы тоже можем использовать утилиту curl. Чтобы вывести заголовки страницы запустите ее с опцией -I:

Здесь отображается код ответа сервера, а также принятые http заголовки. Из них мы можем сделать такие выводы:

• Страница сгенерирована в nginx 1.10.2;
• Это обычная html страница (text/html);
• Размер страницы 102452 байт или 100 кб;
• Страница последний раз изменялась 18:13:12 (last_modified) это очень важный параметр для поисковых систем;
• Сервер будет выдавать разные версии страниц при изменении поля Accept-Encoding (Vary);
• Страница может храниться в любом кэше (public) на протяжении часа (expires);

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

Мы можем видеть, что картинка будет храниться в кэше намного дольше (max-age) чем html страница.

Осталось проверить работают ли такие заголовки, как If-Modified-Since и If-None-Match. Первый позволяет выполнять проверку актуальности кэша по дате модификации, второй — по контрольной сумме поля ETag. Кэш очень важен, чтобы снизить нагрузку на ваш сервер. Если страница не изменилась, то сервер лишь сообщает что она не изменилась, отправляя код ответа 304, вместо передачи полного файла.

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

Проверка If-Modified-Since

Сначала запрашиваем нашу страницу для просмотра заголовков http, а затем копируем поле Last-Modified:

Теперь запрашиваем ее еще раз, но уже с заголовком If-Modified-Since: и ваша дата:

В ответ вы должны получить не саму страницу, а только заголовок HTTP/1.1 304 Not Modified. Если так, значит проверка кода ответа сервера пройдена и все работает верно.

Проверка If-None-Match

Заголовок If-None-Match работает похожим образом, только здесь используется значение контрольной суммы кэша из поля ETag. Опять запросим нашу страницу и скопируем сумму:

Затем отправим полученную сумму с заголовком:

И снова мы должны получить ответ 304, страница не изменена.

Проверка сжатия

Сжатие позволяет уменьшить размер передаваемых данных, но в то же время создает дополнительную нагрузку на сервер. Чтобы проверить поддерживает ли сервер сжатие gzip нужно отправить в запросе заголовок Accept-Encoding с параметром gzip:

В ответе мы увидим поле Content-Encoding: gzip. Это будет означать, что сжатие используется.

Обновленная декларация doctype

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

Декларация сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.

Таблица 1. Doctype-декларации и их возможности

Doctype-декларация	Возможности	Пример
HTML 4.01 strict	Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены.	<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
HTML 4.01 transitional	Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены.	<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
HTML 4.01 frameset	Аналогична декларации HTML transitional, но разрешает использование элементов frameset.	<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
XHTML 1.0 strict	Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены.	<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
XHTML 1.0 transitional	Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены.	<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
XHTML 1.0 frameset	Аналогична декларации XHTML transitional, однако разрешает элементы frameset.	<DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>
XHTML 1.1	Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков.	<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

К счастью, в спецификации HTML5 декларация doctype существенно упрощена. И действительно, в HTML5 имеется лишь одна такая декларация. Чтобы ваш браузер осуществлял отображение с помощью спецификации HTML5, добавьте декларацию doctype, показанную в .

Итог

# curl -I https://itsoft.ru
HTTP/1.1 200 OK
Server: nginx/1.16.0
Date: Tue, 05 May 2020 05:57:34 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Keep-Alive: timeout=200
Cache-Control: max-age=604800, public
Last-Modified: Wed, 01 Apr 2020 18:49:15 GMT
Etag: a49f2da878be351c6c73a1ec0524d8ea
Set-Cookie: a=1961012078; expires=Wed, 06-May-2020 05:57:34 GMT; path=/; secure; HttpOnly
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block; report=/feedback/http-csp-report.php
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
Referrer-Policy: same-origin
Feature-Policy: autoplay 'none'; camera 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; payment 'none'; usb 'none'; vibrate 'none';
Content-Security-Policy-Report-Only: default-src 'self' data: *.googletagmanager.com *.google.com *.google-analytics.com  *.googleapis.com *.gstatic.com *.doubleclick.net mc.yandex.ru api-maps.yandex.ru yastatic.net webvisor.com *.calltouch.ru *.usedesk.ru *.youtube.com *.ytimg.com 'nonce-counters' 'report-sample'; img-src https: data: blob: ; report-uri /feedback/http-csp-report.php
X-Frame-Options: SAMEORIGIN

Заключение

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

Похожие темы

• Оригинал статьи: New HTML5 structural tags
• Новые элементы в HTML5(developerWorks, август 2007 г.). Дополнительные сведения по структурным элементам HTML5.
• WHATWG: Организация WHATWG — это сообщество, отвечающее за спецификацию HTML5.
• W3C: Организация W3C создала первую спецификацию HTML, а в настоящее время вместе с WHATWG работает над спецификацией HTML5.
• HTML5 (Wikipedia): Дополнительные сведения о HTML5.
• Различия между HTML5 и HTML4 (W3C). Рабочий проект, позволяющий глубже понять различия между HTML 4 и HTML5.
• Первое знакомство с HTML5 (lynda.com): Чем является HTML5 (и чем не является).

Итоговый вариант примера

В показан результат замены исходных тегов новыми структурными тегами HTML5.

Листинг 9. Итоговый вариант примера

<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header
      <nav>
        <a href='#'>Some Nav Link</a>
        <a href='#'>Some Other Nav Link</a>
        <a href='#'>A Third Nav Link</a>
      </nav>
    </header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

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