Что значит header. Что такое в HTML header? Как и где использовать

int header (string string [, bool replace])

header() используется для отправки необработанных HTTP-шапок. См. в спецификации HTTP/1.1 информацию о HTTP headers.

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

Примечание: строка шапки HTTP-статуса всегда будет отправляться первой клиенту, независимо от того, идёт вызов header() первым или нет. Этот статус может быть переопределён вызовом header() с новой строкой статуса в любое время, если только HTTP headers уже не отправлены.

Примечание: в PHP 3 это работает только в том случае. если PHP скомпилирован как Apache-модуль. Вы может добиться того же эффекта, используя шапку Status .

Примечание: HTTP/1.1 требует абсолютного URI в качестве аргумента для Location: включая схему, имя хоста и абсолютный путь, но некоторые клиенты принимают относительные URI. Как правило вы можете сами использовать $_SERVER["HTTP_HOST"] , $_SERVER["PHP_SELF"] и dirname() для создания абсолютного URI из относительного:

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

// нарушение: обратите внимание на пустую строчку вверху

Примечание: в PHP 4 вы можете использовать буферизацию вывода для решения этой проблемы, передавая браузеру весь ваш вывод, буферизуемый на сервере до отправки. Вы можете сделать это вызовом ob_start() и ob_end_flush() в вашем скрипте, или установив директиву конфигурации output_buffering в файле php.ini или файлах конфигурации сервера.

Если вы хотите, чтобы пользователю задавался вопрос о сохранении данных, высылаемых вами, таких как сгенерированный PDF-файл, вы можете использовать шапку Content-Disposition для предоставления рекомендуемого файла и форсировать отображение браузером диалога save.

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач - это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню - справа. Можно использовать float и position:absolute, а для выравнивания по вертикали - добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

Высота шапки фиксированная, добавляем text-align: justify , для дочерних элементов:

Header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; }

Добавляем display: inline-block для всех элементов nav , чтобы можно было расположить их друг за другом:

Header h1, header nav { display: inline-block; }

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block , автор Jelmer de Maat:

Header::after { content: ""; display: inline-block; width: 100%; }

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute . Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока - шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown , упомянутый Michał Czernow:

Header h1 { height: 100%; } header h1::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
В результате получается то, что нужно:

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

Используем трюк с псевдоэлементом на header :

CSS-код

header { text-align: justify; height: 15em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header nav, header div h1 { display: inline-block; vertical-align: middle; } header > div { width: 50%; height: 100%; text-align: left; } header > div::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }

Выглядит намного лучше:

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

CSS-код

header { text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header h1, header nav { display: inline-block; vertical-align: middle; } header h1 { width: 50%; text-align: left; padding-top: 0.5em; } header nav { padding-top: 1em; }

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

@media screen and (max-width: 820px){ header { height: auto; } header > div, header >

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

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

Финальный CSS-код

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * { padding: 0; margin: 0; } body { background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;} header { text-align: justify; height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; } header::after { content: ""; display: inline-block; width: 100%; } header > div, header > div::before, header nav, header > div h1 { display: inline-block; vertical-align: middle; text-align: left; } header > div { height: 100%; } header > div::before { content: ""; height: 100%; } header > div h1 { font-size: 3em; font-style: italic; } header nav a { padding: 0 0.6em; white-space: nowrap; } header nav a:last-child { padding-right: 0; } @media screen and (max-width: 720px){ header { height: auto; } header > div, header > div h1, header nav { height: auto; width: auto; display: block; text-align: center; } }

При работе с сайтом первый из тегов, с которым сталкивается программист в HTML, -