Теги для створення каркаса сайту, його структури

Що таке каркас

Під каркасом (скелетом) розуміються найосновніші блоки, які поділяють вміст один від одного. Найпростіший приклад: шапка - блок зліва - блок праворуч і підвал (футер). У цих блоках в свою чергу може бути дуже багато інших, вкладених елементів, але вони вже є додатковою розміткою, яка додається на другому етапі.

Як його створити

Отже, ми розглянемо всі теги, які вам можуть для цього знадобитися. Почнемо з самих базових.

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

- важливий контейнер для зберігання інформації, яка не буде виведена на сторінку, але відіграє велику роль в її формуванні.

- сюди поміщають все тіло сторінки, тобто її вміст, тому його наявність в коді обов'язково.

Важливі настройки, які обов'язково повинні бути визначені

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

Всі інші настройки вказуються в блоці head. Це кодування, підключення таблиць стилів, скриптів (хоча їх можна підключати і в кінці body), завдання тайтла (Title), інших мета-тегів і багато іншого.

Створення каркаса старим способом на HTML4

Зовсім до недавніх пір це був найпопулярніший спосіб, навіть сьогодні, я думаю, деякі продовжують його використовувати. Він полягає в тому, що всі елементи створюються однаково - за допомогою тега div, який позначає порожній блоковий контейнер. Залежно від розташування і ролі, кожен такий блок отримував свій ідентифікатор, щоб до нього можна було звернутися пізніше через стилі.

Таким чином, розмітка виглядала приблизно так:

Розробники орієнтувалися за назвами ідентифікатором, саме вони дозволяли визначити, що являє собою елемент. Таким чином, використовувався лише один тег для створення структури сайту - div, тільки з різними id (або стильовими класами).

Як створити розмітку сторінки за новим на HTML5

Нова версія мови розмітки сильно змінила цей процес. Починалося все з того, що веб-розробники почали усвідомлювати необхідність створення нових тегів. Шапку так часто називали div id = "header», що розумно було створити спеціальний елемент header, який був би призначений саме для цього елемента на сайті.

Власне, саме це і сталося, тільки крім header з'явилася ще маса інших. Давайте я покажу приклад каркаса на HTML5, а потім вже його поясню:

Як бачите, ідентифікатори і раніше прописуються елементів, але тепер у нас в самих назвах тегів закладена роль елементів. Так, nav створений для вкладання в нього важливих посилань, а по суті, створення головного меню сайту. Section - це окрема секція на сайті, зі своїм заголовком і головною думкою.

Aside - щось на зразок другорядної інформації, тому деякі в цей елемент вкладають бічну колонку. Хоча для цієї мети годиться і section, адже сайдбар - по суті, окрема секція на веб-сторінці.

Ну і, нарешті, новий тег footer створений для виведення підвалу. Ідентифікатори в цьому випадку перестали виконувати роль єдиних інформаторів на сторінці, хоча їх імена підібрані так, щоб вказувати на роль блоків. Зауважте, що шапка отримала назву main-header і це неспроста. Справа в тому, що на веб-сторінці може бути кілька «шапок». Це може бути шапка статті або бічної колонки.

Меню теж отримало відповідний ідентифікатор, тому що крім нього на сайті може бути і інша навігація, але менша за своєю важливістю.

Отже, ми з вами розібрали найпростіший приклад створення скелета, якщо ви хочете отримати більше інформації по використанню html5, запрошую вас подивитися наші уроки за цією технологією.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі