Когда открываешь исходный код почти любой страницы в интернете, первым делом видишь одну и ту же конструкцию: строчку с доктайпом, затем тег html, внутри него head и body. Это не случайность и не привычка старых разработчиков — так браузер понимает, с чем имеет дело и как это показывать пользователю.
Доктайп в начале файла сообщает браузеру, что перед ним современный HTML, а не что-то из девяностых с рамками и тегом font. Без него браузер иногда переключается в так называемый режим совместимости, и тогда вёрстка может вести себя странно — блоки съезжают, отступы считаются иначе. Поэтому первая строчка документа почти всегда одна и та же.
Head — это служебная часть страницы, которую пользователь напрямую не видит. Там живут заголовок вкладки, подключение стилей, метатеги для соцсетей и поисковиков, ссылки на шрифты. Всё, что определяет, как страница будет вести себя и выглядеть, но не является видимым контентом.
Body — это уже сама страница: тексты, картинки, кнопки, формы, всё, с чем взаимодействует посетитель. Именно сюда добавляются семантические блоки вроде header, main, footer, о которых стоит поговорить отдельно.
На первый взгляд кажется, что это просто формальность, но именно правильная структура документа делает страницу предсказуемой и для браузера, и для поисковых систем, и для человека, который потом будет редактировать этот код через полгода. Официальное описание структуры документа можно посмотреть в справочнике MDN по HTML — там же есть примеры минимального рабочего шаблона.
Отдельно стоит упомянуть тег meta с атрибутом charset — он определяет кодировку страницы, и если поставить его не первой строкой внутри head, а где-то ниже, браузер иногда успевает начать разбор документа в неправильной кодировке, и тогда вместо русских букв на странице появляются нечитаемые символы. Мелочь, но именно такие мелочи чаще всего и ищут новички часами, не понимая, что пошло не так.
