HTML-теги html, head, body. Теги, которые есть в любой страничке интернета

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

Однако, различия между этими тегами все-таки есть. И хорошая идея заключается в том, что неплохо было бы о них знать, независимо от того, как долго вы пишите CSS. В этой статье мы рассмотрим данные различия и практические примеры, в которых применение стилей к одному элементу вместо другого может оказаться более правильным решением.

Как элементы HTML и body связаны друг с другом

Давайте рассмотрим стандартную структуру базового HTML документа:

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

Далее, прямо после тега html, идут только два элемента: head и body. Фактически, в спецификации body прямо противопоставлен элементу head, поскольку имеются всего лишь два элемента, которые требуется различать на данном уровне.
Итак, получается, что html – это корневой элемент документа, в котором содержится элемент body, являющийся его потомком. В CSS даже есть селектор:root. Следующие два селектора являются равнозначными:

:root { } html { }

: root { html {

За исключением того, что селектор:root обладает более высокой специфичностью: (0, 0, 1, 0) против (0, 0, 0, 1).

Поэтому нам следует всегда задавать глобальные стили для html, правильно?

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

Но на деле выходит не совсем так. На самом деле, следующие инлайн атрибуты были изначально присвоены в спецификации элементу body:

В настоящее время данные атрибуты считаются устаревшими, и рекомендуется использовать аналогичные им CSS свойства (слева — Инлайн Атрибут, справа — его аналог CSS Свойство):

background — background

bgcolor — background, background-color

marginbottom — margin-bottom

marginleft — margin-left

marginright — margin-right

margintop — margin-top

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

Поэтому нам следует всегда задавать глобальные стили для body, правильно?

Что ж, не совсем так. Есть ситуации, в которых было бы правильнее применять данные стилевые свойства к элементу html. Давайте рассмотрим пару таких ситуаций.

Работа с единицами измерения rem

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

Module { width: 40rem; }

Module { width : 40rem ;

Единица измерения rem, в данном случае, будет относительной по отношению к значению свойства font-size у элемента html, который и является корнем документа. Таким образом, элемент с классом.module будет масштабироваться в зависимости от того, какое значение задано у пользователя по умолчанию для корня документа.

У Джонатана Снука (Jonathan Snook) есть , которая замечательно демонстрируется, как установка значения свойства font-size для html в процентах может быть использована в качестве сброса стилей при работе с единицей измерения rem.

Причудливое свойство background-color

Есть одна странная вещь в CSS, когда заданный фоновый цвет (с помощью свойства background-color) для элемента body заполняет всю область просмотра, даже если размеры самого элемента при этом меньше. Так происходит до тех пор, пока свойство background-color не будет задано для элемента html.

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

Заключение

Я надеюсь, что это пролило немного света на ключевые различия между тегами html и body в CSS. Существуют также различия и в JavaScript. Например, вам не нужен селектор для данных элементов, чтобы найти их, т.к. в JavaScript html – это document.rootElement, а body – document.body.

Мы, конечно, можем описать более технические различия между этими двумя элементами, но цель этой статьи была в том, чтобы повысить наш уровень понимания сути этих элементов для принятия более осознанных решений при написании CSS.
Есть ли у вас примеры того, где стоит вместо одного элемента использовать другой? Или, возможно, у вас есть другие критерии выбора элемента для стилизации. Напишите об этом в комментариях!

Определяет границы тела документа. Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы.

HTML : 3.2 | 4 / XHTML : 1.0 | 1.1

Синтаксис

...

Атрибуты

alink	задает цвет активной ссылки (в момент нажатия).
background	задает URL фонового рисунка. Не рекомендуется в спецификации HTML 4.01!
bgcolor	задает цвет фона страницы
bgproperties	при установке bgproperties="fixed" фон фиксируется и не прокручивается вместе со страницей
bottommargin	определяет отступ от нижнего края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01!
class	определяет имя используемого класса
dir	задает направление ltr - направление слева направо (по умолчанию) rtl - направление справа налево
id	уникальный идентификатор
lang	определяет язык отображаемого документа
leftmargin	определяет отступ от левого края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01!
link	задает цвет ссылок. Не рекомендуется в спецификации HTML 4.01!
marginheight	задает высоту вехнего и нижнего полей документа Отсутствует в спецификации HTML 4.01!
marginwidth	задает ширину левого и правого полей документа Работает только в браузерах Netscape. Отсутствует в спецификации HTML 4.01!
onblur	потеря фокуса элементом. Отсутствует в спецификации HTML 4.01!
onclick	щелчок на элементе
ondblclick	двойной щелчок на элементе
onerror	ошибка сценария на странице. Отсутствует в спецификации HTML 4.01!
onfocus	получение фокуса элементом. Отсутствует в спецификации HTML 4.01!
onkeydown	нажатие клавиши, когда элемент имеет фокус
onkeypress	нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup	освобождение ранее нажатой клавиши, когда элемент имеет фокус
onload	окончание загрузки страницы
onmousedown	нажатие кнопки мыши, когда элемент имеет фокус
onmousemove	движение указателя мыши, когда элемент имеет фокус
onmouseout	смещение указателя мыши с элемента
onmouseover	помещение указателя мыши на элемент
onmouseup	освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
onresize	изменение пользователем размера окна. Отсутствует в спецификации HTML 4.01!
onunload	выгрузка браузером текущего документа из окна или фрейма
rightmargin	определяет отступ от правого края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01!
scroll	управляет отображением полос прокрутки yes — отображает полосы прокрутки (по умолчанию) no — запрещает показ полос прокрутки Работает только в IE! Отсутствует в спецификации HTML 4.01!
style	задает встроенную таблицу стилей
text	задает цвет текста. Значение по умолчанию #000000. Не рекомендуется в спецификации HTML 4.01!
title	добавляет всплывающую подсказку
topmargin	определяет отступ от верхнего края окна браузера. Не поддерживается Firefox! Отсутствует в спецификации HTML 4.01!
vlink	задает цвет посещенных ссылок. По умолчанию для IE и Opera #800080, для Firefox #551a8b. Не рекомендуется в спецификации HTML 4.01!

Пример

...


...
тело документа.
...

• по спецификациям XHTML открывающий () и закрывающий () тег обязателен
• включает в себя всю содержательную часть веб-страницы
• может содержать

Тег (парный ) предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

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

Часто тег используется для размещения обработчика событий, например, onLoad, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.

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

Синтаксис

...

Закрывающий тег
Обязателен.

Параметры
alink - устанавливает цвет активной ссылки.
background - задает фоновый рисунок на веб-странице.
bgcolor - цвет фона веб-страницы.
bgproperties - определяет, прокручивать фон совместно с текстом или нет.
bottommargin - отступ от нижнего края окна браузера до контента.
leftmargin - отступ по горизонтали от края окна браузера до контента.
link - цвет ссылок.
scroll - устанавливает, отображать полосы прокрутки или нет.
text - цвет текста в документе.
topmargin - отступ от верхнего края окна браузера до контента.
vlink - цвет посещенных ссылок.

Пример 1. Использование тега BODY

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Описание параметров тега BODY

Параметр ALINK

Описание
Устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный, когда на ссылку нажимают курсором мыши или выделяют ее с помощью клавиатуры.

Синтаксис
...

Аргументы
Значение цвета можно задавать двумя способами.

1. По его названию
Браузеры поддерживают некоторые цвета по их названию.

2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю.

Значение по умолчанию
Совпадает с цветом ссылки.

...

Параметр BACKGROUND

Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.

Синтаксис
...

Аргументы
Любой допустимый адрес изображения - можно использовать относительный или абсолютный путь.

Значение по умолчанию
Нет.

Пример 3. Установка фонового рисунка на веб-странице

...

Параметр BGCOLOR

Описание
Устанавливает цвет фона веб-страницы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку

Синтаксис
...

Аргументы
См. параметр ALINK.

Значение по умолчанию
Зависит от браузера и его версии, но обычно используется белый цвет фона.

Пример 4. Установка цвета фона веб-страницы

...

Параметр BGPROPERTIES

Описание
По умолчанию фоновый рисунок прокручивается совместно с содержанием веб-страницы. Используя параметр bgproperties можно зафиксировать фон на одном месте и, таким образом, заставить прокручиваться только контент. Подобное качество веб-страницы редко применяется для сайтов, поэтому для пользователей может показаться странным и непривычным.

Синтаксис
...

Аргументы
Существует только один параметр fixed, который фиксирует фон. Если требуется убрать эту возможность, удалите параметр bgproperties у тега BODY или установите у него пустое значение - "".

Значение по умолчанию
Нет.

Пример 5. Фиксирование фона

...

Примечание

• Не все браузеры поддерживают этот параметр, например, Netscape его игнорирует.
• Замечено, что при установке фонового рисунка на веб-странице через стили, параметр bgproperies перестает работать.

Параметр LEFTMARGIN

Описание
Определяет отступ от левого и правого края окна браузера до контента веб-страницы.

Синтаксис
...

Аргументы
Целое положительное число, которое устанавливает отступ в пикселях.

Значение по умолчанию
10 пикселов для Windows и 8 пикселов для Macintosh.

Пример 6. Изменение отступа слева

...

Примечание

• Браузер Netscape не понимает параметр leftmargin, для установки отступов в нем используются параметры marginwidth - отступы по горизонтали и marginheight - отступы по вертикали.
• Для задания отступов от правого, нижнего и верхнего края применяются, соответственно, параметры rightmargin, bottommargin и topmargin.

Параметр LINK

Описание
Устанавливает цвет не посещенных ссылок.

Синтаксис
...

Аргументы
См. параметр ALINK.

Значение по умолчанию
#0000FF

Пример 7. Установка цвета ссылок

...

Параметр SCROLL

Описание
Параметр scroll управляет присутствием полос прокрутки в окне браузера, когда содержание веб-страницы превышает размер текущего окна. Этот параметр работает только в браузере Internet Explorer.

Синтаксис
...

Аргументы
yes - отображает полосы прокрутки.
no - запрещает показ полос прокрутки в окне.

Значение по умолчанию
yes

Пример 8. Сокрытие полосы прокрутки

...

Параметр TEXT

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

Синтаксис
...

Аргументы
См. параметр ALINK.

Значение по умолчанию
#000000

Пример 9. Изменение цвета текста

...

Параметр VLINK

Описание
Определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал».

Синтаксис
...

Аргументы
См. параметр ALINK.

Значение по умолчанию
#551a8b (Navigator 4); #800080 (Internet Explorer Windows); #006010 (Internet Explorer Macintosh).

Пример 10. Установка цвета посещенных ссылок

...

Здравствуйте, ребята!

Сегодня решил затронуть тему, которая никогда не перестанет быть актуальной среди молодых создателей сайтов.

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

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

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

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

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

Теперь объясню все подробно в текстовом формате.

Файлы, отвечающие за вывод каждого типа страниц

Если вы читали много статей на других блогах о реализации каких-то функций с помощью кодов (скриптов), то уверен на все 100%, что видели фразы наподобие:

• Вставляете этот код в файл, отвечающий за вывод главной страницы;
• Вставляете этот код в файл, отвечающий за вывод записей и другие.

Файлов, в которые может потребоваться вставлять коды, много. Но, что это за файлы? Все очень просто.

1. Вывод главной страницы - index.php;
2. Вывод записей - файл single.php;
3. Вывод страниц - файл page.php;
4. Вывод архивов и рубрик - archive.php;
5. Вывод подвала - footer.php;
6. Вывод страницы поиска - search.php;
7. Вывод сайдбара - sidebar.php;
8. Файл стилей - style.css;
9. Файл вывода страницы 404 - 404.php.

Теперь, когда вам будут говорить, что нужно вставить код в такой-то файл, вы будете знать, куда необходимо смотреть.

Осталось лишь ответить на вопрос, как же определить нужное место в каждом из файлов?

Определяем место вставки кода

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

Первое место, идентичное для всех шаблонов - область в файле Header.php. Это открывающий и закрывающий теги .

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

Данные теги размещены в самом верху файла Header.php.

Содержимое, находящееся между ними, у всех будет отличаться, так как все зависит от шаблона.

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

Второе место, которое также идентично для всех шаблонов, находится в файле, отвечающем за вывод подвала - footer.php.

Скрипты можно подключать не только, вставив их между тегами в файле Header.php. Можно также их подгрузить через файл footer.php, тем самым ускорив загрузку страницы сайта.

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

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

Чтобы реализовать такой вариант, необходимо открыть файл footer.php и вставить скрипт перед закрывающимся тегом body. Находится он в конце содержимого файла, так как отвечает за окончание области страницы.

Как видим, все скрипты я вывел именно в данной области, перед закрывающим тегом (выделил синей рамкой). Кстати, вывел их я через загрузку из файлов, а не размещением самих скриптов в данной области. После этого я значительно ускорил работу блога. Как это сделать, будет отдельная статья. Ждите!

Надеюсь, что когда вам будут говорить вставить код в эти области, вы без проблем все сделаете.

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

• Вывод похожих записей;
• Вывод формы подписки;
• Вывод социальных кнопок и так далее.

Все эти вещи вставляются после основной части контента, то есть после окончания статьи. У каждого разный код шаблона и, поэтому, универсального ответа на вопрос "Где у меня заканчивается код вывода статьи?" просто нет.

Но можно запросто определить конец кода, после которого необходимо реализовать нужную вам функцию. Частично данный метод я уже показывал в статье про выбор WordPress шаблона (). Использовал я тогда стандартный функционал интернет браузера.

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

Покажу на примере браузера Google Chrome. В других браузерах данная функция также имеется, то может немного по другому называться.

• Google Chrome - просмотр кода элемента;
• Firefox - исследовать элемент;
• Opera - проинспектировать элемент.

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

Переходим в просмотр кода элемента (Google Chrome). Жмем правой кнопкой мыши по пустой области страницы.

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

Вот, как выглядит эта панель.

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

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

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

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