Календар
«    Квітень 2025    »
ПнВтСрЧтПтСбНд
 123456
78910111213
14151617181920
21222324252627
282930 
img
Хмарина тегів
a Absolute align-items autoplay color container css description display div flex flex-direction Flexbox footer form Google Maps h1 head header height href html id iframe img justify-content li maxlength minlength p pattern placeholder required section src table title ul width пз
Показати всі теґи
Опитування
Оцініть роботу двигуна
Понеділок
жов 28

Урок 12: Структура сторінки — семантичні теги (header, footer, section, article, aside)

admin
admin

Адміністратор

 Уроки HTML  17  0

План уроку: Структура сторінки — семантичні теги (header, footer, section, article, aside) (25-30 хвилин)


1. Вступ: Про що цей урок (2-3 хвилини)

  • З цього уроку ви дізнаєтесь, як правильно структурувати сторінку за допомогою семантичних тегів. Ви навчитесь використовувати теги, які допомагають розділити контент на логічні блоки, такі як заголовок сторінки, основна частина, статті та бокові панелі.


2. Що таке семантичні теги (5 хвилин)

  • Ціль: Ознайомити учнів із концепцією семантичних тегів і пояснити, чому вони важливі.

  • Важливість семантичних тегів:

    • Семантичні теги в HTML не тільки створюють структуру, але й надають змістовне значення різним частинам сторінки.
    • Пошукові системи та допоміжні технології (на кшталт екранних читачів) використовують ці теги для кращого розуміння контенту на сторінці.
    • Такі теги як <div> теж використовуються для розмітки, але вони не дають ніякої інформації про зміст частини сторінки. Натомість семантичні теги пояснюють, що саме знаходиться в цій частині.

  • Аналогія: Уявіть, що сторінка — це книжка. Семантичні теги — це розділи книжки, які допомагають читачу зрозуміти, що де знаходиться: заголовок, підзаголовок, текст і додаткова інформація.


3. Основні семантичні теги (15 хвилин)

  • Ціль: Навчити учнів використовувати основні семантичні теги для структурування сторінки.


Тег <header>

  • Використовується для визначення заголовка сторінки або окремих розділів на сторінці.

  • Зазвичай містить логотип, меню навігації або інші важливі елементи заголовку.

  • Приклад:

    <header>
  <h1>Моя дивовижна сторінка</h1>
  <nav>
    <ul>
      <li><a href="#">Головна</a></li>
      <li><a href="#">Про нас</a></li>
      <li><a href="#">Контакти</a></li>
    </ul>
  </nav>
</header>


Тег <footer>

  • Використовується для визначення нижньої частини сторінки. Містить інформацію про авторські права, контактні дані, або посилання на соціальні мережі.

  • Приклад:

    <footer>
  <p>&copy; 2024 Моя дивовижна сторінка. Всі права захищені.</p>
</footer>


Тег <section>

  • Використовується для розділення контенту на логічні секції або частини. Може містити заголовки і абзаци тексту, або інші блоки інформації.

  • Приклад:

    <section>
  <h2>Наші послуги</h2>
  <p>Ми пропонуємо широкий спектр послуг для вашого бізнесу.</p>
</section>


Тег <article>

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

  • Приклад:

    <article>
  <h2>Чому важливо пити воду?</h2>
  <p>Вода є ключовим елементом здорового способу життя. Вона підтримує баланс рідини в організмі та сприяє кращій роботі мозку.</p>
</article>


Тег <aside>

  • Використовується для контенту, який не є частиною основного контенту, але пов'язаний із ним. Зазвичай це бокова панель з додатковою інформацією, наприклад, рекламою, посиланнями чи навігаційними елементами.

  • Приклад:

    <aside>
  <h3>Реклама</h3>
  <p>Купуйте нашу продукцію зі знижкою 20%!</p>
</aside>


4. Практика (10 хвилин)

  • Ціль: Учні використовують семантичні теги для побудови базової структури сторінки.

  • Завдання:

    • Створити вебсторінку, використовуючи теги <header>, <footer>, <section>, <article>, <aside>.
    • Розділити сторінку на логічні частини, вставивши контент у відповідні теги.

  • Приклад завдання:

    Показати / Приховати текст

  • Обговорення:

    • Запропонувати учням додати інші елементи до сторінки, використовуючи семантичні теги, і перевірити, як сторінка виглядає в браузері.


5. Підсумок і запитання (5 хвилин)

  • Ціль: Закріпити знання про використання семантичних тегів для структурування сторінки.

  • Що повторити:

    • Що робить кожен із семантичних тегів (<header>, <footer>, <section>, <article>, <aside>).
    • Чому важливо використовувати семантичні теги для структурування вебсторінок.

  • Запитання:

    • Для чого використовується тег <header>?
    • Яка різниця між <section> і <article>?
    • Чому важливо використовувати семантичні теги замість простих <div>?


Домашнє завдання

  • Створити сторінку з використанням семантичних тегів, додавши заголовок, розділи контенту, статті та бокову панель. В кінці сторінки додати футер із контактною інформацією.

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



html div header footer section article aside






Дивіться також:
{title
Ласкаво просимо
16-09-2024, 20:56
{title
Урок 3. Робота з кольорами: Hex, RGB, RGBA, і CSS-змінні для кольорів
30-10-2024, 14:06
{title
Урок 16. Практичне завдання: Створення простого односторінкового сайту
28-10-2024, 16:25
{title
Урок 3. Форматування тексту — теги для виділення тексту (b, i, strong, em), блокові та інлайн елементи
28-10-2024, 13:48
{title
Урок 1. Вступ до CSS: Що таке CSS, підключення CSS до HTML
29-10-2024, 11:54
{title
Урок 1. Вступ до HTML
28-10-2024, 13:45
Коментарі (0)