HTML body: поняття, весь контент документа і область перегляду браузера

Документ HTML - це head і body. Перше містить описові теги, друге включає в себе розмітку, зміст і функціонал сторінки. Обидві складові мають істотне значення, а їх утримання визначає дизайн і логіку роботи сторінки, комфорт для відвідувача, навантаження на канали зв'язку і «інтерес» пошукових машин. Документ HTML являє собою текст, формалізований певним чином. HTML рідко працює як один файл. Зазвичай він доповнюється файлами CSS-правил, jаvascript-сценаріїв, малюнками, текстами та іншими ресурсами. При використанні популярної системи управління контентом (CMS) тіло документа формується автоматично: розробник може навіть не знати про те, як влаштований HTML/CSS, де і як саме застосовується jаvascript.

Браузер HTML-документ

Браузер - спеціальна програма, яка вміє відображати мова гіпертексту, застосовувати стилі CSS, виконувати код jаvascript і виконувати безліч інших функцій, що забезпечують роботу відвідувачів і програм в Інтернеті. Фактично браузер - це: вікно в простори Інтернету для відвідувача; движок для роботи з потоком HTML/CSS через JS і додатка (розширення); браузер - це область перегляду і введення інформації для розробника сайту. Браузерів розроблено велику кількість. Поява мобільних пристроїв значно ускладнило «життя» розробників веб-ресурсів. Область перегляду різних браузерів і їх версій відрізняється. Умови перегляду різні. Це створило безліч проблем і зробило актуальним завдання розробки адаптивних сайтів.


Рішення для відображення вмісту HTML тегом body в доступній області на будь-якому пристрої стали самі по собі затребуваним продуктом. Розвиток гіпертексту зробило необхідним використання тегу head для уточнення та додаткового опису, підлягає відображенню в області перегляду контенту.

Програма, «розуміюча» HTTP/HTTPS

Будь-яка програма, яка здатна розпізнавати стандарт гіпертексту, насамперед HTML і CSS, може виступати в якості браузера. Відображати вміст будь-якого файла HTML може звичайний текстовий редактор. Браузер або йому подібна програма будується на якому-небудь налагодженому движку, але це не обов'язкова умова. «Відкрити» тіло HTML-документа можна в звичайному notepad. Тут поняття body і text = HTML-текст, а не HTML-сторінка. В текстовому редакторі це буде просто текст. Інший ефект, який можна отримати: в текстовому процесорі MS Word; популярному браузері; професійному редакторі HTML/CSS/jаvascript/PHP; системи управління контентом, яка працює поза браузера. Якщо говорити про звичайну популярній системі управління контентом, то область перегляду/розробки веб-ресурсу може бути вже, ніж у браузера, але вона буде оснащена набагато більшою функціональністю. Програма, розуміюча протоколи інтернету, може зовсім нічого не відображати з HTML-файлу: head + body, але виконувати всі функції всіх тегів, які в них містяться. HTML-сторінка може орієнтуватися на управління, а не на відображення. Інтернет - це тільки в уявленнях розробників і відвідувачів сайтів віконце в простори Всесвітньої павутини. Насправді це сукупність протоколів передачі даних та ідей, як формалізувати інформацію для її використання.

HTML: опис і тіло + заголовок

Сторінка містить три складових: HTML = head + body + title. Браузер відображає все, що потрапило до нього за протоколом, але «серйозно і з інтересом» поставиться до потоку даних, який містить правильне утримання по кожній з цих трьох складових. Область перегляду браузера буде заповнена правильно, якщо теги опису будуть відповідати тегам тіла і будуть підключені всі необхідні зовнішні файли. Тег заголовка title не відображається, але він використовується як унікальне короткий опис сторінки браузером і пошуковими машинами. Всі три елементи важливі. Дуже важливо записувати все три елемента правильно. HTML-сторінка - це просто текст, але текст, оформлений строго певним чином. Зміст сторінки можна правити в будь-якому текстовому редакторі. Розробляти контент сайту можна в спеціалізованому редакторі, це значно практичніше, оскільки HTML - це все ж не просто текст, а контент, тобто графіка і текст, подані за правилами відображення у області перегляду браузера.

Правила хорошого тону

Інформації про те, що писати в тегах head, body і title будь-який HTML-сторінки, можна знайти достатньо на спеціалізованих сайтах в інтернеті. Важливо відрізняти завдання: управління процесом; відображення контенту. У першому випадку нічого зовсім не буде відображатися, але щось обов'язково буде зроблено. Наприклад, потрібно передати інформацію роботу, працює на конвеєрі, або беспилотнику для заходження на посадку з урахуванням свіжого прогнозу погоди. Тут нічого відображати й нема чого. Але в обох випадках HTML-інтерфейс з пункту управління може відсилати алгоритми управління по HTTP/HTTPS. Це сучасно.
У другому випадку над HTML-сторінкою може працювати не один загін дизайнерів, кілька поколінь програмістів і десяток топ-менеджерів. Якщо йдеться про створення сайту театру опери та балету, веб-ресурсу для віддаленого керування пасажирськими перевезеннями літаками "Аерофлоту" або електронним документообігом великій компанії Без продуманого контенту, без системи правил відображення інформації і логіки організації діалогу тут не обійтися. У будь-якому разі HTML body - це правильний контент, а HTML head - це правильне опис вмісту. Заголовок HTML-документа title вказує, що саме через сторінка потрапила в браузер і як саме її повинна індексувати пошукова машина.

Поєднання body+head і принцип "матрьошки"

Мова гіпертексту, по суті, два елемента: одиночний тег; парний тег. Є ще додаткові варіації та ідеї, але це основні види елементів контенту. HTML-Теги можуть мати атрибути, параметри, значення, правила опису і щось ще, але найголовніше, вони можуть бути: id; class. Це принципово. Ідентифікатор CSS (id) описує унікальний тег, але це не означає, що один id не може бути приписаний до сотні тегів. CSS-опис класу (class), навпаки, орієнтується на масове застосування. Класи можуть поєднуватися і дозволяють розробнику комбінувати опису вмісту.

Зовнішні файли стилів і скриптів - одна з важливих причин використання в HTML body описів і посилань з head. Аналогічно використовуються зовнішні файли зображень, текстів і інших ресурсів. Опис одиночного тега додаткових проблем не викликає, використання парного тега повинно бути строго за правилами. Парні теги вкладаються один в одного, як матрьошки. Не можна розбивати парні теги на складові. Будь тег - це завершена сутність, яка представлена у body як єдине ціле. Не можна написати: «a»p«зміст тега«/a»«/p» body HTML-сторінки. Можна написати тільки так: «p»«a»зміст тега«/a»«/p» Цікавий момент: коли була винайдена матрьошка, винахідник навіть не припускав, що створив об'єктивне правило для запису контенту в HTML body. Дивно, що розробники стандарту гіпертексту навіть не знали про те, що матрьошка була створена значно раніше, а її творець вже знав одне з непорушних правил запису правильного контенту HTML-сторінки.

Правильний HTML

Використання популярної CMS (системи управління контентом) знімає всі проблеми. Розробник може не бути програмістом і нічого не знати про HTML, body, head, title і ще сотні дві тегів і правил, які можуть бути записані в тілі документа, що становить сайт. При ручній розробці сайту потрібно об'єктивно і акуратно підійти до вивчення основних понять мови гіпертексту і навчитися їх використовувати правильно. Цього достатньо, щоб робити хороші, а через деякий час професійні сайти.