Сегодня нам предстоит узнать структуру построения документа HTML, хотя мы с ней уже встречались в статье "Документ HTML. Вписываем текст в страничку HTML". Вспомним теги прописанные в ней: <html></html>, <head></head>, <title></title>, <body></body>.
Все эти теги парные, закрывающиеся контейнера, которые создают конструкцию HTML документа. Именно они составляют основу html кода. Ещё их называют «Обязательные теги», но не потому что, если их не вписать, получится ошибка в коде. Нет. Ничего не случится. Код документа будет работать. Но, обязательные теги нужны для того, чтобы видеть саму структуру html страницы, чтобы понимать, что где находится и что куда вставлять. Для наглядности рассмотрим приведенный ниже рисунок, Screen 1. С правой
Screen 1.
стороны изображен человечек с надписями названий тег. Такое отображение предлагается, для более простого понимания схемы строения кода html. С левой стороны показан этот же прожект, но более схематично. Обратим внимание на тег <html></html> - расположен по краям рисунка, выделен красным цветом. HTML-тег является началом и концом HTML-документа. Он открывает его (верхняя часть) и закрывает (нижняя часть). В документе данный тег не обязателен, но хороший стиль диктует непременное их использование. Тег <html> должен всегда стоять в документе первым и последним. Смотрим на картинке, человечек полностью помещен в этот тег. Весь код html-странички пишется внутри тега-<html>:
<html>Весь код html-странички</html>
Тег <head></head> - не обязательный закрывающийся, это значит, что вторую его часть (закрывающую) можно не прописывать, ошибкой это не будет. Однако это будет не корректный код. Переводится с англ. как «голова» и на сленге веб-программистов называется «голова». Размещается внутри верхней части тега-<html>. Внутри контейнера тега <head> размещаются мета теги, которые предназначены для хранения информации браузера и поисковых систем, а также управленческих функций. Поэтому и «голова».
Внутри «головы», обязательно между тегами <head></head> расположен мета-тег <title></title>, который определяет заголовок документа и отображается в заголовке и вкладке браузера. Смотрим Screen 2,
Screen 2.
где показан заголовок статьи на примере браузера Mozilla Firefox. Обязательный закрывающийся тег, не имеет атрибутов. Синтаксис расположения тега <title></title> виден на Screen 3. Как правильно оптимизировать мета тег title, можно узнать перейдя по ссылке.
Screen 3.
Тег <body></body> - не обязательный открывающий и закрывающий тег. Тело документа. Сюда вставляется всё, что должно отображаться в окне браузера. Весь контент документа-HTML: текст, изображения, теги, скрипты JavaScript и т.д., располагается внутри контейнера <body>.
Внимание! Еще раз повторяем! Обязательные теги на web-странице, сами по себе, не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа, чтобы было понятно, где находится «голова», а где «тело».