032.2 Урок 1
Сертифікат: |
Основи веброзробки |
---|---|
Версія: |
1.0 |
Розділ: |
032 Розмітка HTML-документа |
Тема: |
032.2 Семантика HTML та ієрархія документів |
Урок: |
1 з 1 |
Вступ
На попередньому уроці ми дізналися, що HTML — це мова розмітки, яка може семантично описувати вміст вебсайту. Документ HTML містить так званий каркас (skeleton), який складається з елементів HTML <html>
, <head>
і <body>
. Тоді як елемент <head>
описує блок мета-інформації для HTML-документа, який буде невидимим для відвідувача вебсайту, елемент <body>
може містити багато інших елементів для визначення структури та вмісту HTML-документа.
У цьому уроці ми розглянемо форматування тексту, основні семантичні елементи HTML та їх призначення, а також як структурувати HTML-документ. Ми будемо використовувати список покупок в якості прикладу.
Note
|
Усі наступні приклади коду містяться в елементі |
Текст
У HTML жоден блок тексту не повинен бути відкритим, тобто стояти поза елементом. Навіть короткий абзац слід загорнути в теги HTML <p>
, що є короткою назвою для paragraph.
<p>Short text element spanning only one line.</p>
<p>A text element containing much longer text that may span across multiple lines, depending on the size of the web browser window.</p>
Відкритий у браузері, цей HTML-код дає результат, показаний у Figure 1. .
За замовчуванням браузери додають пробіли перед і після елементів <p>
для покращення читання. Із цієї причини <p>
називається блоковим елементом.
Заголовки
HTML визначає шість рівнів заголовків для опису та структурування вмісту HTML-документа. Ці заголовки позначені тегами HTML <h1>
, <h2>
, <h3>
, <h4>
, <h5>
та <h6>
.
<h1>Heading level 1 to uniquely identify the page</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Браузер відображає цей HTML-код, як показано у Figure 2.
Якщо ви знайомі з текстовими процесорами, такими як-от LibreOffice або Microsoft Word, ви можете помітити деяку схожість у тому, як HTML-документ використовує різні рівні заголовків і як вони відображаються в браузері. За замовчуванням HTML використовує розмір, щоб зазначити ієрархію та важливість заголовків і додає пробіл до і після кожного заголовка, щоб візуально відокремити його від вмісту.
Заголовок із використанням елемента <h1>
знаходиться у верхній частині ієрархії і, таким чином, вважається найважливішим заголовком, який ідентифікує вміст сторінки. Його можна порівняти з елементом <title>
, про який йшлося в попередньому уроці, але в межах вмісту HTML-документа. Наступні елементи заголовків можна використовувати для подальшої структуризації вмісту. Не пропускайте рівні заголовків. Ієрархія документів повинна починатися з <h1>
, продовжуватися з <h2>
, потім <h3>
і так далі. Вам не потрібно використовувати кожен елемент заголовка аж до <h6>
, якщо вміст вашого документа цього не вимагає.
Note
|
Заголовки є важливими інструментами для структурування HTML-документа, як семантично, так і візуально. Однак заголовки ніколи не повинні використовуватися для збільшення розміру тексту, який не є важливим для структури документа. За тим же принципом не слід виділяти короткий абзац жирним або курсивом, щоб він виглядав як заголовок; використовуйте теги заголовків для позначення виключно заголовків. |
Давайте розпочнемо створення HTML-документа списку покупок з визначення його структури. Ми створимо елемент <h1>
, який міститиме заголовок сторінки, у нашому випадку Garden Party
, за яким буде розміщена коротка інформація, обернена в елемент <p>
. Крім того, ми використовуємо два елементи <h2>
, щоб представити два розділи вмісту Agenda` та Please bring
.
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<h2>Please bring</h2>
Цей HTML-код, відкритий у браузері, дає результат, показаний у Figure 3.
Розрив рядків-
Іноді може знадобитися зробити розрив рядка, не вставляючи інший елемент <p>
або будь-який подібний блочний елемент. У таких випадках можна використовувати самозакриваючий елемент <br>
. Зауважте, що його слід використовувати лише для вставки розривів рядків вмісту, як у випадку з віршами, текстами пісень або адресами. Якщо розділення вмісту виконується за значенням, то краще використовувати елемент <p>
.
Наприклад, ми могли б розділити текст в інформаційному абзаці нашого попереднього прикладу таким чином:
<p>
Invitation to John's garden party.<br>
Saturday, next week.
</p>
У браузері цей HTML-код дає результат, показаний у Figure 4.
Горизонтальні лінії
Елемент <hr>
визначає горизонтальну лінію, яку також називають горизонтальним розділювачем. За замовчуванням він займає всю ширину свого батьківського елемента. Елемент <hr>
може допомогти вам визначити тематичну зміну вмісту або відокремити розділи документа. Елемент самозакриваючий і тому не має закриваючого тега.
Для нашого прикладу ми могли б відокремити два заголовки:
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<hr>
<h2>Please bring</h2>
Figure 5 показує результат цього коду.
HTML-списки
У HTML можна визначити три типи списків:
- Впорядковані списки
-
у яких порядок елементів списку має значення
- Невпорядковані списки
-
у яких порядок елементів списку не є особливо важливим
- Списки описів
-
для більш детального опису деяких термінів
Кожен містить будь-яку кількість елементів списку. Опишемо кожен тип списку.
Впорядковані списки
Впорядкований список у HTML, позначається за допомогою елемента HTML <ol>
, є набором будь-якої кількості елементів списку. Особливість цього елемента полягає в тому, що порядок його елементів списку є відповідним. Щоб підкреслити це, браузери за замовчуванням відображають цифри перед дочірніми елементами списку.
Note
|
Елементи |
Для нашого прикладу ми можемо заповнити план проведення вечірки в саду, таким кодом з використанням елементу <ol>
:
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
У браузері цей HTML-код дає результат, показаний у Figure 6.
Параметри
Як видно в цьому прикладі, елементи списку за замовчуванням нумеруються десятковими цифрами, які починаються з 1. Однак ви можете змінити цю поведінку списка, вказавши атрибут type
у тегу <ol>
. Дійсними значеннями для цього атрибута є 1
для десяткових цифр, A
для великих літер, a
для малих літер, I
для римських цифр у верхньому регістрі та i
для римських малих цифр.
За бажанням, ви також можете визначити початкове значення за допомогою атрибута start
тегу <ol>
. Атрибут start
завжди приймає десяткове числове значення, навіть якщо атрибут type
встановлює інший тип нумерації.
Наприклад, ми могли б налаштувати впорядкований список з попереднього прикладу так, щоб елементи списку мали префікс з великих літер, починаючи з літери C, як показано в прикладі нижче:
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
У браузері цей HTML-код відображається як у Figure 7.
Порядок елементів списку також можна змінити за допомогою атрибута reversed
без значення.
Note
|
У впорядкованому списку ви також можете встановити початкове значення певного елемента списку за допомогою атрибута |
Невпорядковані списки
Невпорядкований список містить ряд елементів списку, які, на відміну від впорядкованого списку, не мають конкретного порядку чи послідовності. Елементом HTML для цього списку є <ul>
. Знову ж таки, <li>
є HTML-елементом для позначення елементів такого списку.
Note
|
Елементи |
Для нашого прикладу вебсайту ми можемо використовувати невпорядкований список для переліку продуктів, які гості можуть принести на вечірку. Ми можемо досягти такого результату за допомогою наступного HTML-коду:
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
У браузері цей HTML-код дає результат, показаний у Figure 8.
За замовчуванням кожен елемент списку починається з маркера у вигляді диску. Ви можете змінити його зовнішній вигляд за допомогою CSS, який буде розглянуто в наступних уроках.
Вкладені списки
Списки можуть бути вкладені до інших списків, наприклад, впорядковані списки до невпорядкованих списків і навпаки. Щоб досягти цього, вкладений список має бути частиною елемента списку <li>
, оскільки <li>
є єдиним дійсним дочірнім елементом невпорядкованих та впорядкованих списків. Під час вкладення будьте обережні, щоб теги HTML не перекривались.
Для нашого прикладу ми могли б додати деяку інформацію про план проведення вечірки, який ми створили раніше, як показано у прикладі нижче:
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>
Barbecue
<ul>
<li>Vegetables</li>
<li>Meat</li>
<li>Burgers, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>
Браузер відображає код як показано у Figure 9.
Ви можете піти ще далі й виконати вкладення на кілька рівнів углиб. Теоретично немає обмежень на кількість списків, які ви можете вкладати. Однак, роблячи це, подбайте про читабельність для відвідувачів сайту.
Списки описів
Список описів визначається за допомогою елемента <dl>
і являє собою словник ключів та значень. Ключ – це термін або ім’я, яке ви хочете описати, а значення – це його опис. Списки описів можуть варіюватися від простих пар ключ-значення до розширених визначень.
Ключ (або термін) визначається за допомогою елемента <dt>
, тоді як його опис визначається за допомогою елемента <dd>
.
Прикладом такого списку описів може бути список екзотичних фруктів, у якому пояснюється, як вони виглядають.
<h3>Exotic Fruits</h3>
<dl>
<dt>Banana</dt>
<dd>
A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
may also have a soft green color when underripe and get brown spots when
overripe.
</dd>
<dt>Kiwi</dt>
<dd>
A small, oval fruit with green flesh, black seeds, and a brown, hairy
skin.
</dd>
<dt>Mango</dt>
<dd>
A fruit larger than a fist, with a green skin, orange flesh, and one big
seed. The skin may have spots ranging from green to yellow or red.
</dd>
</dl>
У браузері цей код дає результат, показаний у Figure 10.
Note
|
На відміну від впорядкованих і невпорядкованих списків, у списку описів будь-який елемент HTML є дійсним як прямий дочірній. Це дає змогу групувати елементи та стилізувати їх в інших місцях за допомогою CSS. |
Вбудоване форматування тексту
У HTML ви можете використовувати елементи форматування для зміни зовнішнього вигляду тексту. Ці елементи можна класифікувати як елементи представлення або елементи фрази.
Елементи представлення
Основні елементи представлення змінюють шрифт або вигляд тексту; це <b>
, <i>
, <u>
та <tt>
. Ці елементи були визначені ще до того, як CSS дозволив робити текст жирним, курсивом тощо. Зараз зазвичай є кращі способи змінити вигляд тексту, але ці елементи все ще трапляється іноді.
Жирний текст
Щоб зробити текст жирним, ви можете обернути його в елемент <b>
, як показано в наступному прикладі. Результат з’являється в Figure 11.
This <b>word</b> is bold.
<b>
використано, щоб зробити текст жирним.Відповідно до специфікації HTML5, елемент <b>
слід використовувати лише тоді, коли більше немає відповідних тегів. Елементом, який створює такий самий візуальний результат, але додатково додає семантичну важливість позначеному тексту, є <strong>
.
Текст курсивом
Щоб виділити текст курсивом, ви можете обернути його в елемент <i>
, як показано в наступному прикладі. Результат з’являється у Figure 12.
This <i>word</i> is in italics.
<i>
використано для написання тексту курсивом.Відповідно до специфікації HTML 5, елемент <i>
слід використовувати лише тоді, коли більше немає відповідних тегів.
Підкреслений текст
Щоб підкреслити текст, ви можете обернути його в елемент <u>
, як показано в наступному прикладі. Результат з’являється у Figure 13.
This <u>word</u> is underlined.
<u>
використовується для підкреслення тексту.Відповідно до специфікації HTML 5, елемент <u>
слід використовувати лише тоді, коли немає кращих способів підкреслення тексту. CSS надає сучасну альтернативу.
Шрифт фіксованої ширини або моноширинний шрифт
Щоб відобразити моноширинним (фіксованої ширини) шрифтом, який часто використовується для відображення комп’ютерного коду, можна використовувати елемент <tt>
, як показано в наступному прикладі. Результат з’являється у Figure 14.
This <tt>word</tt> is in fixed-width font.
<tt>
використовується для відображення тексту шрифтом фіксованої ширини.Тег <tt>
не підтримується в HTML5. Браузери все ще відображають його так, як очікувалося. Однак вам слід використовувати більш відповідні теги, до яких належать <code>
, <kbd>
, <var>
та <samp>
.
Елементи фраз
Елементи фраз не тільки змінюють зовнішній вигляд тексту, але й додають слову чи фразі семантичної важливості. Використовуючи їх, ви можете підкреслити слово або позначити його як важливе. Ці елементи, на відміну від елементів представлення, розпізнаються програмами-зчитувачами екрана, що робить текст більш доступним для відвідувачів із вадами зору та дозволяє пошуковим системам краще читати та оцінювати вміст сторінки. Елементи фраз, які ми використовуємо в цьому уроці, — це <em>
, <strong>
та <code>
.
Акцентований текст
Щоб акцентувати текст, ви можете обгорнути його в елемент <em>
, як показано в прикладі нижче:
This <em>word</em> is emphasized.
<em>
використовується для акцентування тексту.Як бачите, браузери відображають <em>
так само, як <i>
, але <em>
додає семантичної важливості, як елемент фрази, що покращує доступність для відвідувачів із вадами зору.
Значимий текст
Щоб позначити текст як важливий, ви можете обернути його в елемент <strong>
, як показано в прикладі нижче. Результат з’явиться у Figure 16.
This <strong>word</strong> is important.
<strong>
використовується, щоб позначити текст, як важливий.Як бачите, браузери <strong>
так само, як і <b>
, але <strong>
додає семантичної важливості як елемент фрази, що покращує доступність для відвідувачів із вадами зору.
Комп’ютерний код
Щоб вставити фрагмент комп’ютерного коду, ви можете загорнути його в елемент <code>
, як показано в прикладі нижче. Результат з’являється у Figure 17.
The Markdown code <code># Heading</code> creates a heading at the highest level in the hierarchy.
<code>
використовується для вставки фрагмента комп’ютерного коду.Виділений текст
Щоб виділити текст жовтим фоном, подібно до стилю маркера, ви можете використовувати елемент <mark>
, як показано в прикладі нижче. Результат з’явиться у Figure 18.
This <mark>word</mark> is highlighted.
<mark>
використовується для виділення тексту на жовтому фоні.Форматування тексту нашого HTML-списку покупок
Подібно до попередніх прикладів, давайте вставимо деякі елементи фрази, щоб змінити зовнішній вигляд тексту, а також додати семантичної важливості. Результат з’явиться у Figure 19.
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
У цьому прикладі HTML-документа найважливіша інформація про саму вечірку в саду позначена як важлива за допомогою елемента <strong>
. Продукти, доступні для барбекю, підкреслюються за допомогою елемента <em>
. Феєрверк просто виділяється за допомогою елемента <mark>
.
Як вправу, ви можете спробувати форматувати інші фрагменти тексту, використовуючи також інші елементи форматування.
Попередньо відформатований текст
У більшості елементів HTML пробіли зазвичай скорочуються до одного пробілу або навіть повністю ігноруються. Однак існує елемент HTML з назвою <pre>
, який дає змогу визначити так званий preformatted текст. Пробіли в контенті цього елемента, включно з пробілами та розривами рядків, зберігаються та відображаються в браузері. Крім того, текст відображається шрифтом фіксованої ширини, подібно до елемента <code>
.
<pre>
field() {
shift $1 ; echo $1
}
</pre>
<pre>
зберігає пробіл.Елементи групування
За домовленістю, елементи HTML поділяються на дві категорії:
- Елементи блочного рівня
-
Вони з’являються на новому рядку і займають всю доступну ширину. Прикладами елементів блочного рівня, які ми вже обговорювали, є
<p>
,<ol>
та<h2>
. - Елементи вбудованого рівня
-
Вони відображаються в тому ж рядку, що й інші елементи та текст, займаючи лише стільки місця, скільки вимагає їх вміст. Прикладами елементів вбудованого рівня є:
<strong>
,<em>
та<i>
.
Note
|
HTML5 представив більш акуратні й точні категорії елементів, намагаючись уникнути плутанини з CSS-блоками та вбудованими полями. Для простоти ми будемо дотримуватися загальноприйнятого поділу на блокові та вбудовані елементи. |
Основними елементами для групування кількох елементів є елементи <div>
та <span>
.
Елемент <div>
є контейнером блочного рівня для інших елементів HTML і само собою не додає семантичного значення. Ви можете використовувати цей елемент, щоб розділити HTML-документ на розділи та структурувати вміст, як для читабельності коду, так і для застосування CSS-стилів до групи елементів, як це зробити ви дізнаєтеся в наступному уроці.
За замовчуванням браузери завжди вставляють розрив рядка перед і після кожного елемента <div>
, щоб кожен відображався на окремому рядку.
На відміну від цього, елемент <span>
використовується як контейнер для тексту HTML і зазвичай використовується для групування інших вбудованих елементів, щоб застосувати стилі за допомогою CSS до меншої частини тексту.
Елемент <span>
поводить себе як звичайний текст і не призводить до початку з нового рядка. Тому це вбудований елемент.
У наведеному нижче прикладі порівнюються візуальне представлення семантичного елемента <p>
та елементів групування <div>
і <span>
:
<p>Text within a paragraph</p>
<p>Another paragraph of text</p>
<hr>
<div>Text wrapped within a <code>div</code> element</div>
<div>Another <code>div</code> element with more text</div>
<hr>
<span>Span content</span>
<span>and more span content</span>
Браузер відображає цей код, як показано у Figure 21.
Ми вже бачили, що за замовчуванням браузер додає пробіли до і після елементів <p>
. Таке додавання не застосовується до жодного з елементів групування <div>
та <span>
. Однак елементи <div>
форматуються як власні блоки, тоді як текст в елементах <span>
відображається в тому ж рядку.
Структура HTML-сторінки
Ми обговорили, як використовувати елементи HTML для семантичного опису вмісту вебсторінки, іншими словами, для передачі значення та контексту тексту. Інша група елементів призначена для опису семантичної структури вебсторінки, виразу чи його структури. Ці елементи є блоковими, тобто вони візуально поводяться так само, як і елемент <div>
. Їх мета — визначити семантичну структуру вебсторінки шляхом зазначення чітко визначених областей, таких як заголовки, колонтитули та основний вміст сторінки. Ці елементи дозволяють семантичне групування вмісту, щоб його також міг зрозуміти комп’ютер, включно з пошуковими системами та програмами зчитування з екрана.
Елемент <header>
Елемент <header>
містить вступну інформацію про навколишній семантичний елемент у HTML-документі. Заголовок часто містить елемент заголовка (<h1>
, … , <h6>
).
На практиці цей елемент найчастіше використовується для представлення заголовка сторінки, наприклад банера з логотипом. Його також можна використовувати для представлення вмісту для будь-якого з наступних елементів: <body>
, <section>
, <article>
, <nav>
, або <aside>
.
Документ може мати кілька елементів <header>
, але елемент <header>
не може бути вкладений до іншого елемента <header>
. Також не можна використовувати елемент <footer>
у <header>
.
Наприклад, щоб додати заголовок сторінки до нашого прикладу документа, ми можемо зробити наступне:
<header>
<h1>Garden Party</h1>
</header>
У документі HTML не буде видимих змін, оскільки <h1>
(як і всі інші елементи заголовка) є елементом рівня блоку без додаткових візуальних властивостей.
Елемент вмісту <main>
Елемент <main>
є контейнером для основного вмісту вебсторінки. У документі HTML має бути не більше одного елемента <main>
.
У нашому прикладі документа весь написаний нами HTML-код буде розміщено всередині елемента <main>
.
<main>
<header>
<h1>Garden Party</h1>
</header>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</main>
Як і елемент <header>
, елемент <main>
не викликає жодних візуальних змін у нашому прикладі.
Елемент <footer>
Елемент <footer>
містить виноски, наприклад, інформацію про авторство, контактну інформацію або пов’язані документи, для навколишнього семантичного елемента, наприклад: <section>
, <nav>
або <aside>
. Документ може мати кілька елементів <footer>
, які дають змогу краще описати семантичні елементи. Однак елемент <footer>
не може бути вкладений в інший елемент <footer>
, а також елемент <header>
не може використовуватися в <footer>
.
Для нашого прикладу ми можемо додати контактну інформацію про господаря (Євгена), як показано в прикладі нижче:
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
Елемент <nav>
Елемент <nav>
описує основний навігаційний блок, наприклад меню, що містить серію гіперпокликань.
Note
|
Не всі гіперпокликання мають бути обгорнуті в елемент |
Оскільки гіперпокликання ще не розглядались, елемент навігації не буде включений в приклад цього уроку.
Елемент <aside>
Елемент <aside>
є контейнером для вмісту, який не є обов’язковим для впорядкування вмісту головної сторінки, але зазвичай є опосередковано пов’язаним або додатковим. Цей елемент часто використовується для бічних панелей, які відображають додаткову інформацію, наприклад, глосарій.
До нашого прикладу ми можемо додати адресу та інформацію про паркування, які лише опосередковано пов’язані з рештою вмісту, використовуючи елемент <aside>
.
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
Елемент <section>
Елемент <section>
визначає логічну частину в документі, який є частиною навколишнього семантичного елемента, але не буде працювати як самостійний вміст, наприклад, розділ.
У нашому прикладі документа ми можемо обернути розділи вмісту для порядку проведення та додати секції списку, як показано в прикладі нижче:
<section>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</section>
<hr>
<section>
<header>
<h2>Please bring</h2>
</header>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
У цьому прикладі також додаються елементи <header>
всередині секцій, щоб кожна секція була у своєму власному елементі <header>
.
Елемент <article>
Елемент <article>
визначає незалежний і самостійний вміст, який безпосередньо має сенс без решти сторінки. Його вміст потенційно можна розповсюджувати або використовувати повторно в іншому контексті. Типовими прикладами або матеріалом, відповідним для елемента <article>
, є публікація у блозі, список продуктів для магазину та реклама продукту. Тоді реклама могла б існувати як окремо, так і у складі більшої сторінки.
У нашому прикладі ми можемо замінити перший <section>
, який обгортає порядок проведення елементом <article>
.
<article>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
Елемент <header>
, який ми додали в попередньому прикладі, також може зберігатися тут, оскільки елементи <article>
можуть мати власні елементи <header>
.
Фінальний приклад
Поєднуючи всі попередні приклади, фінальний HTML-документ для нашого запрошення має такий вигляд:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Garden Party</title>
</head>
<body>
<main>
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<article>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
<hr>
<section>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
</main>
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
</body>
</html>
У браузері вся сторінка відображається так, як показано у Figure 22.
Вправи до посібника
-
Для кожного з наступних тегів зазначте відповідний закриваючий тег:
<h5>
<br>
<ol>
<dd>
<hr>
<strong>
<tt>
<main>
-
Для кожного з наступних тегів укажіть, чи позначає він початок блоку чи вбудованого елемента:
<h3>
<span>
<b>
<div>
<em>
<dl>
<li>
<nav>
<code>
<pre>
-
Які списки можна створити в HTML? Які теги слід використовувати для кожного з них?
-
Які теги містять блокові елементи, що можна використовувати для структурування сторінки HTML?
Дослідницькі вправи
-
Створіть просту HTML-сторінку із заголовком «
Правила заповнення форми
». Ви використовуватимете цю HTML-сторінку для всіх дослідницьких вправ, кожна з яких базується на попередніх. Потім додайте заголовок рівня 1 із текстом «Як заповнити форму запиту
», абзац з текстом «Щоб отримати PDF-документ з повним HTML-курсом, необхідно заповнити наступні поля:
» і невпорядкований список з такими елементами: «Ім’я
», «Прізвище
», «Адреса електронної пошти
», «Національність
», «Країна
» і «Поштовий індекс
». -
Виділіть перші три поля («
Ім’я
», «Прізвище
», і «Адреса електронної пошти
») жирним шрифтом, а також додайте їм семантичної важливості. Потім додайте заголовок рівня 2 із текстом «Обов’язкові поля
» та абзац з текстом «Поля, виділені жирним шрифтом є обов’язковими.
» -
Додайте ще один заголовок рівня 2 з текстом «
Кроки, які слід виконати
», абзац із текстом «Є чотири кроки, які потрібно виконати:
» і впорядкований список з такими елементами: «Заповніть поля
», «Натисніть кнопку Надіслати
», «Перевірте свою адресу електронної пошти та підтвердьте свій запит, натиснувши на отримане покликання
», і «`Перевірте свою електронну пошту. Ви отримаєте повний HTML-курс за кілька хвилин `». -
Використовуючи
<div>
, створіть блок для кожного розділу, який починається із заголовка рівня 2. -
Використовуючи
<div>
, створіть ще один блок для розділу, який починається із заголовка рівня 1. Потім відділіть цей розділ від двох інших горизонтальною лінією. -
Додайте елемент заголовка з текстом «
Правила заповнення форми – 2021
» та елемент нижнього колонтитула з текстом «Авторські права захищені – 2021
». Нарешті, додайте основний елемент, який повинен містити три блоки<div>
.
Підсумки
На цьому уроці ви дізналися:
-
Як створити розмітку вмісту HTML-документа.
-
Ієрархічна структура HTML-тексту.
-
Різниця між блочними та вбудованими елементами HTML.
-
Як створити HTML-документи із семантичною структурою.
На цьому уроці обговорювалися такі терміни:
<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
-
Теги заголовків.
<p>
-
Тег абзацу.
<ol>
-
Тег впорядкованого списку.
<ul>
-
Тег невпорядкованого списку.
<li>
-
Тег елемента списку.
<dl>
-
Тег списку описів.
<dt>
,<dd>
-
Теги для кожного терміна та опису для списку описів.
<pre>
-
Тег попередньо відформатованого тексту.
<b>
,<i>
,<u>
,<tt>
,<em>
,<strong>
,<code>
,<mark>
-
Теги форматування.
<div>
,<span>
-
Теги групування.
<header>
,<main>
,<nav>
,<aside>
,<footer>
-
Теги, які використовуються для забезпечення простої структури та макета HTML-сторінки.
Відповіді до вправ посібника
-
Для кожного з наступних тегів зазначте відповідний закриваючий тег:
<h5>
</h5>
<br>
Не існує
<ol>
</ol>
<dd>
</dd>
<hr>
Не існує
<strong>
</strong>
<tt>
</tt>
<main>
</main>
-
Для кожного з наступних тегів укажіть, чи позначає він початок блоку чи вбудованого елемента:
<h3>
Елемент блоку
<span>
Вбудований елемент
<b>
Вбудований елемент
<div>
Елемент блоку
<em>
Вбудований елемент
<dl>
Елемент блоку
<li>
Елемент блоку
<nav>
Елемент блоку
<code>
Вбудований елемент
<pre>
Елемент блоку
-
Які списки можна створити в HTML? Які теги слід використовувати для кожного з них?
У HTML можна створити три типи списків: впорядковані списки, що складаються із серії нумерованих елементів списку, невпорядковані списки, що складаються із серії елементів списку, які не мають спеціального порядку чи послідовності, і списки описів, що представляють записи, як у словнику чи енциклопедії. Впорядкований список оформлюється між тегами
<ol>
і</ol>
, невпорядкований список оформлюється між тегами<ul>
і</ul>
, а список описів оформлюється між тегами<dl>
і</dl>
. Кожен елемент у впорядкованому або невпорядкованому списку розташовується між тегами<li>
та</li>
, а кожен термін у списку описів розташований між тегами<dt>
та</dt>
і його опис між тегами<dd>
та</dd>
. -
Які теги містять блокові елементи, що можна використовувати для структурування сторінки HTML?
Теги
<header>
і</header>
охоплюють заголовок сторінки, теги<main>
і</main>
охоплюють основний вміст HTML-сторінки, теги<nav>
і</nav>
охоплюють так звану панель навігації, теги<aside>
і</aside>
охоплюють бічну панель, і теги<footer>
і</footer>
охоплюють нижній колонтитул сторінки.
Відповіді до дослідницьких вправ
-
Створіть просту HTML-сторінку із заголовком «
Правила заповнення форми
». Ви використовуватимете цю HTML-сторінку для всіх дослідницьких вправ, кожна з яких базується на попередніх. Потім додайте заголовок рівня 1 із текстом «Як заповнити форму запиту
», абзац з текстом «Щоб отримати PDF-документ з повним HTML-курсом, необхідно заповнити наступні поля:
» і невпорядкований список з такими елементами: «Ім’я
», «Прізвище
», «Адреса електронної пошти
», «Національність
», «Країна
» і «Поштовий індекс
».<!DOCTYPE html> <html> <head> <title>Правила заповнення форми</title> </head> <body> <h1>Як заповнити форму запиту</h1> <p> Щоб отримати PDF-документ з повним HTML-курсом, необхідно заповнити наступні поля: </p> <ul> <li>Ім'я</li> <li>Прізвище</li> <li>Адреса електронної пошти</li> <li>Національність</li> <li>Країна</li> <li>Поштовий індекс</li> </ul> </body> </html>
-
Виділіть перші три поля («
Ім’я
», «Прізвище
», і «Адреса електронної пошти
») жирним шрифтом, а також додайте їм семантичної важливості. Потім додайте заголовок рівня 2 із текстом «Обов’язкові поля
» та абзац з текстом «Поля, виділені жирним шрифтом є обов’язковими.
»<!DOCTYPE html> <html> <head> <title>Правила заповнення форми</title> </head> <body> <h1>Як заповнити форму запиту</h1> <p> Щоб отримати PDF-документ з повним HTML-курсом, необхідно заповнити наступні поля: </p> <ul> <li><strong> Ім'я </strong></li> <li><strong> Прізвище </strong></li> <li><strong> Адреса електронної пошти </strong></li> <li>Національність</li> <li>Країна</li> <li>Поштовий індекс</li> </ul> <h2>Обов'язкові поля</h2> <p>Поля, виділені жирним шрифтом, є обов'язковими.</p> </body> </html>
-
Додайте ще один заголовок рівня 2 з текстом «
Кроки, які слід виконати
», абзац із текстом «Є чотири кроки, які потрібно виконати:
» і впорядкований список з такими елементами: «Заповніть поля
», «Натисніть кнопку Надіслати
», «Перевірте свою адресу електронної пошти та підтвердьте свій запит, натиснувши на отримане покликання
», і «`Перевірте свою електронну пошту. Ви отримаєте повний HTML-курс за кілька хвилин `».<!DOCTYPE html> <html> <head> <title>Правила заповнення форми</title> </head> <body> <h1>Як заповнити форму запиту</h1> <p> Щоб отримати PDF-документ з повним HTML-курсом, необхідно заповнити наступні поля: </p> <ul> <li><strong> Ім'я </strong></li> <li><strong> Прізвище </strong></li> <li><strong> Адреса електронної пошти </strong></li> <li>Національність</li> <li>Країна</li> <li>Поштовий індекс</li> </ul> <h2>Обов'язкові поля</h2> <p>Поля, виділені жирним шрифтом, є обов'язковими.</p> <h2>Кроки, які слід виконати</h2> <p>Є чотири кроки, які потрібно виконати:</p> <ol> <li>Заповніть поля</li> <li>Натисніть кнопку Надіслати</li> <li> Перевірте свою адресу електронної пошти та підтвердьте свій запит, натиснувши на отримане покликання </li> <li> Перевірте свою електронну пошту. Ви отримаєте повний HTML-курс за кілька хвилин. </li> </ol> </body> </html>
-
Використовуючи
<div>
, створіть блок для кожного розділу, який починається із заголовка рівня 2.<!DOCTYPE html> <html> <head> <title>Правила заповнення форми</title> </head> <body> <h1>Як заповнити форму запиту</h1> <p> Щоб отримати PDF-документ з повним HTML-курсом, необхідно заповнити наступні поля: </p> <ul> <li><strong> Ім'я </strong></li> <li><strong> Прізвище </strong></li> <li><strong> Адреса електронної пошти </strong></li> <li>Національність</li> <li>Країна</li> <li>Поштовий індекс</li> </ul> <div> <h2>Обов'язкові поля</h2> <p>Поля, виділені жирним шрифтом, є обов'язковими.</p> </div> <div> <h2>Кроки, які слід виконати</h2> <p>Є чотири кроки, які потрібно виконати:</p> <ol> <li>Заповніть поля</li> <li>Натисніть кнопку Надіслати</li> <li> Перевірте свою адресу електронної пошти та підтвердьте свій запит, натиснувши на отримане покликання </li> <li> Перевірте свою електронну пошту. Ви отримаєте повний HTML-курс за кілька хвилин. </li> </ol> </div> </body> </html>
-
Використовуючи
<div>
, створіть ще один блок для розділу, який починається із заголовка рівня 1. Потім відділіть цей розділ від двох інших горизонтальною лінією.<!DOCTYPE html> <html> <head> <title>Правила заповнення форми</title> </head> <body> <div> <h1>Як заповнити форму запиту</h1> <p> Щоб отримати PDF-документ з повним HTML-курсом, необхідно заповнити наступні поля: </p> <ul> <li><strong> Ім'я </strong></li> <li><strong> Прізвище </strong></li> <li><strong> Адреса електронної пошти </strong></li> <li>Національність</li> <li>Країна</li> <li>Поштовий індекс</li> </ul> </div> <hr> <div> <h2>Обов'язкові поля</h2> <p>Поля, виділені жирним шрифтом, є обов'язковими.</p> </div> <div> <h2>Кроки, які слід виконати</h2> <p>Є чотири кроки, які потрібно виконати:</p> <ol> <li>Заповніть поля</li> <li>Натисніть кнопку Надіслати</li> <li> Перевірте свою адресу електронної пошти та підтвердьте свій запит, натиснувши на отримане покликання. </li> <li> Перевірте свою електронну пошту. Ви отримаєте повний HTML-курс за кілька хвилин. </li> </ol> </div> </body> </html>
-
Додайте елемент заголовка з текстом «
Правила заповнення форми – 2021
» та елемент нижнього колонтитула з текстом «Авторські права захищені – 2021
». Нарешті, додайте основний елемент, який повинен містити три блоки<div>
.<!DOCTYPE html> <html> <head> <title>Правила заповнення форми</title> </head> <body> <header> <h1>Правила заповнення форми - 2021</h1> </header> <main> <div> <h1>Як заповнити форму запиту</h1> <p> Щоб отримати PDF-документ з повним HTML-курсом, необхідно заповнити наступні поля: </p> <ul> <li><strong> Ім'я </strong></li> <li><strong> Прізвище </strong></li> <li><strong> Адреса електронної пошти </strong></li> <li>Національність</li> <li>Країна</li> <li>Поштовий індекс</li> </ul> </div> <hr> <div> <h2>Обов'язкові поля</h2> <p>Поля, виділені жирним шрифтом, є обов'язковими.</p> </div> <div> <h2>Кроки, які слід виконати</h2> <p>Є чотири кроки, які потрібно виконати:</p> <ol> <li>Заповніть поля</li> <li>Натисніть кнопку Надіслати</li> <li> Перевірте свою адресу електронної пошти та підтвердьте свій запит, натиснувши на отримане покликання. </li> <li> Перевірте свою електронну пошту. Ви отримаєте повний HTML-курс за кілька хвилин. </li> </li> </ol> </div> </main> <footer> <p>Авторські права захищені – 2021</p> </footer> </body> </html>