Від автора: все у світі з чого складається. А який склад сайту? Він складається з html-тегів, які і формують його структуру і його вміст. У цій статті я хотів би обговорити теги для сайту, які можуть вам знадобиться більше всього.
Глобальні теги
Це ті контейнери, без яких немислимо створення веб-сторінки. Я думаю, ви вже здогадалися – це head і body. У перший поміщається інформація, яка не має прямого відношення до вмісту сторінки. Наприклад, мета-опис, кодування і т. д. Також тут підключаються різні зовнішні файли – таблиці стилів, скрипти, іконка.
Теги контейнера head
Як я вже говорив, ці теги не відображаються на сторінці, але їх наявність дуже важливо для працездатності та оптимізації сайту.
Title – в цей контейнер записується головний заголовок сторінки (Title), який буде відображатися при знаходженні цієї сторінки в пошуковій видачі. Його наявність і правильне складання дуже важливо для пошукової оптимізації.
Meta – це дуже функціональний елемент, з його допомогою можна задавати кодування, ключові слова сторінки та опис. Мета теги для сайту теж пишуться з його допомогою. Приклад:
Цей текст буде виведений, коли люди побачать вашу сторінку в пошуку.
Link – одинарний тег, який використовується для підключення зовнішніх файлів. Найчастіше таким чином підключаються таблиці стилів. Точно також на сайт додають favicon.
Script – в цілому, тег виконує абсолютно ті ж функції, що і попередній, але його роль більш специфічна – він підключає зовнішні файли-скрипти, тобто javascript бібліотеки та файли.
Теги контейнера body
Ми не будемо розглядати всі, щоб це зробити, потрібно, мабуть, писати нову книгу. Я розповім вам про найбільш поширених, про тих, що використовуються практично на всіх веб-сторінках.
Абзац(
) – це парний контейнер поміщають текстовий вміст, яке відокремлюється від іншого тексту невеликими відступами зверху і знизу. Тобто поводиться як абзац. А оскільки текстів в інтернеті багато, то параграфів, їх формують, ще більше.
Посилання () – теж парний елемент. Між відкриваючою і закриваючою частиною розташовується текст, який стане анкором посилання. Після кліка по цьому тексту відбудеться перехід за адресою, що вказана в атрибуті href. Це єдиний обов’язковий атрибут. Вірніше, його можна не писати, але тільки посилання просто нікуди не буде вести і втратить свій сенс.
Блок(
Раніше (в HTML4) на цих блоках будувалися всі сітки сайтів. Наприклад, верстальщику за завданням потрібно було зверстати шаблон, що складається з шапки, двох колонок і підвалу. Він створював чотири блоки div, давав кожному з них свій унікальний ідентифікатор і наповнював потрібної інформація. Подальша робота виконується через CSS.
Рис.1. В html4 всі ці структурні частини створювали з допомогою HTML4, навіть зараз деякі так роблять
З появою нових семантичних елементів підходить до створення каркаса сторінки трохи змінився, але все одно простий div використовується і буде використовуватися для створення різних елементів.
Заголовки(H1-H6). Також найважливіші елементи, які дозволяють структурувати текст на сторінці. Ви б читали текст, довжиною кілька сторінок, якщо там не було б жодного підзаголовку? Можливо, якщо він дуже цікавий, то читали б, але все одно візуально він сприймається набагато гірше.
H1 – це найбільший, самий важливий заголовок. Він обов’язково повинен бути одним на сторінці і в нього має бути укладено назву новини, статті, записи (або що там у вас). Всі інші теги створені для менш важливих заголовків. Наприклад, всі підзаголовки у статті слід визначити як h2, а якщо в цьому уривку тексту потрібно ще раз розділити інформацію, використовуйте вже h3. Як правило, для простих статей цього достатньо. У будь-якому випадку, шести різних за важливістю видів підзаголовків вам вистачить з головою.
Списки, таблиці, зображення
Розглянутих нами можливостей все ще дуже мало, бо на веб-сторінки потрібно вставляти зображення, ще на них іноді відображаються таблиці, перерахування якихось товарів і т. д.
Списки. Маркований — Ul, нумерований – ol. Спеціально для списків в html придумали ці контейнери. Вони створюють саме область для виведення списку, а самі пункти полягають в теги li. Відповідно, маркований список з двох пунктів формується так:
- Рослини
- Тварини
За допомогою css можна по-різному оформляти списки, робити їх більш привабливими, але це вже інша розмова.
Таблиці. Створюються, по суті, з допомогою трьох тегів – table, tr і td. Перший виступає в якості глобального контейнера для вмісту, другий – формує один ряд, а третій – одну клітинку ряду. Таким ось чином можна створювати таблиці, хоча це далеко не всі теги, які можуть використовуватися у ній. Більш докладно про роботу з ними ви зможете дізнатися з наших уроків з основ html.
Зображення. Одиночний тег img створений для вставки зображень і його єдиним обов’язковим атрибутом src, то є шлях до самої картинці. Ось вам простий приклад:
Відбудеться пошук картинки pic.jpg в папці images, яка лежить в тій же директорії, що і html-файл, якщо зображення успішно знайдено, воно буде вставлено на сторінку в тому місці, де буде цей код.
Теги html5
Власне, я вам перерахував основні теги, які використовуються найчастіше. Але останнім часом з’явилися нові специфікації HTML5. Таким чином, підхід до створення того ж каркаса, наприклад, серйозно змінився.
Я не буду в цій статті докладно писати про цих нових елементах, так як про це вже написані статті на нашому блозі. Також можете почерпнути інформацію про них з нашого курсу з основ цієї технології.
Ось такий от вийшов список тегів для сайту, про всіх розповісти за один раз неможливо, але основне уявлення ви отримали, я сподіваюся. Підписуйтесь на наш блог, якщо вам сподобався цей матеріал.
