Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

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

Передумови: Базове знайомство з HTML, як описано в Початок роботи з HTML.
Мета: Дізнайтеся, як позначити основну сторінку тексту, щоб надати йому структуру та зміст - включаючи абзаци, заголовки, списки, акцент та цитати.

Основа: заголовки та абзаци

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

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

Структурований вміст полегшує та покращує досвід читання.

У HTML кожен абзац повинен бути загорнутий у елемент <p>, так:

<p>Я абзац,о так, це я.</p>

Кожен заголовок має бути загорнутий у елемент заголовка:

<h1>Я назва цієї історії.</h1>

Є шість елементів заголовку — <h1>, <h2>, <h3>, <h4>, <h5>, та <h6>. Кожен елемент представляє інший рівень вмісту документа;<h1> являє собою основний заголовок, <h2> представляє підзаголовки, <h3> представляє наступні підзаголовки тощо.

Впровадження структурної ієрархії

Наприклад, у історії <h1> буде представляти назву історії, <h2> s представлятиме назву кожного розділу, а <h3> представлятиме підрозділи кожного розділу тощо.

<h1>Нищівна свердловина</h1>

<p>Кріс Міллс</p>

<h2>Розділ 1: Темна ніч</h2>

<p>Це була темна ніч. Десь, сова вигукувала. Дощ обрушився на ...</p>

<h2>Розділ 2: Вічна тиша</h2>

<p>Наш головний герой міг не стільки шепотом вийти з тіньової фігури ...</p>

<h3>Привид говорить</h3>

<p>Минуло ще кілька годин, коли раптово, побачивши привида, випрямився і вигукнув: «Будь ласка, помилуй мою душу!"</p>

Це дійсно залежить від вас, які саме елементи ви використовуєте, тоді ієрархія має сенс. Вам просто потрібно мати на увазі кілька найкращих практик, коли ви створюєте такі структури:

  • Бажано просто використовувати один<h1> на сторінці — це заголовок верхнього рівня, а всі інші знаходяться нижче нього в ієрархії.
  • Переконайтеся, що ви використовуєте заголовки в правильному порядку в ієрархії. Не використовуйте <h3> для представлення підзаголовків, за якими йде<h2> для представлення підзаголовка - це не має сенсу і призведе до дивних результатів.
  • З доступних шести заголовків вам слід прагнути використовувати не більше трьох  на сторінці, якщо ви відчуваєте, що це необхідно. Документи з багатьма рівнями (тобто глибока ієрархія заголовків) стають громіздкими і важкими для навігації. У таких випадках бажано поширювати вміст на кілька сторінок, якщо це можливо.

Чому нам потрібна структура?

Щоб відповісти на це запитання, давайте подивимося на text-start.html - початкову точку нашого запущеного прикладу для цієї статті (хороший рецепт хумусу). це потрібно для вправ пізніше. В даний час у цьому документі міститься кілька фрагментів вмісту - вони не позначені жодним чином, але розділені проривами рядків (Enter / Return натиснуто, щоб перейти до наступного рядка).

Однак, коли ви відкриваєте документ у вашому браузері, ви побачите, що текст з'являється суцільним шматком!

A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.

Це пояснюється тим, що немає елементів, які б давали структуру контенту, тому браузер не знає, що є заголовок а що є абзацом. Крім того:

  • Користувачі, які переглядають веб-сторінку, намагаються швидко сканувати, щоб знайти відповідний вміст, часто просто читаючи заголовки (звичайно витрачати дуже короткий час на веб-сторінці). Якщо вони не бачать нічого корисного протягом декількох секунд, вони, швидше за все, будуть розчаровані і підуть в інше місце.
  • Пошукові системи, які індексують вашу сторінку, розглядають вміст заголовків як важливі ключові слова для впливу на рейтинги пошуку на сторінці. Без заголовків ваша сторінка буде працювати слабко SEO (Search Engine Optimization).
  • Люди із серйозними порушеннями зору часто не читають веб-сторінки; вони слухають їх. Це робиться за допомогою програмного забезпечення, що називається  screen reader. Це програмне забезпечення надає способи отримати швидкий доступ до заданого текстового вмісту. Серед різних методів, які вони використовують, вони надають план документа, читаючи заголовки, дозволяючи користувачам швидко знайти потрібну інформацію. Якщо заголовки не доступні, вони будуть змушені слухати весь документ, прочитаний вголос.
  • Щоб відтворити вміст за допомогою CSS, або зробити з нею цікаві речіJavaScript, потрібно мати елементи, які відокремлюють відповідний вміст, тому CSS / JavaScript може бути ефективним рішенням.

Тому нам необхідно надати нашому контенту структурну розмітку.

Активне навчання: Надання нашої структури змісту

Давайте розглянемо живой приклад. У наведеному нижче прикладі додайте елементи до вихідного тексту у полі Введення так, щоб він з'являвся у вигляді заголовка та двох абзаців у полі Вивід.

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

Чому нам потрібна семантика?

Семантика  всюди навколо нас - ми покладаємося на попередній досвід, щоб розповісти вам, що таке функція повсякденних об'єктів; коли ми щось бачимо, ми знаємо, якою буде її функція. Так, наприклад, ми очікуємо, що червоний світлофор означає "зупинка", а зелений світлофор означає "іти". Речі можуть бути дуже складними дуже швидко, якщо застосовується неправильна семантика (чи будь-яка країна використовує червоний, щоб означати "йти"?

У подібному дусі, ми повинні переконатися, що ми використовуємо правильні елементи, надаючи нашому змісту правильний сенс, функцію або зовнішній вигляд. У цьому контексті елемент <h1> також є семантичним елементом, який надає тексту, який він обертає навколо ролі (або значення) "заголовка верхнього рівня на вашій сторінці".

<h1>Це заголовок верхнього рівня</h1>

За замовчуванням браузер надасть йому великий розмір шрифту для того, щоб він виглядав як заголовок (хоча ви могли б такий стиль текста, могли отримати, використовуючи CSS). Більш важливо, що його семантичне значення буде використовуватися кількома способами, наприклад, пошуковими системами та програмами для читання з екрана (як згадано вище).

З іншого боку, ви можете зробити будь-який елемент схожим на елемент верхнього рівня. Розгляньте наступне:

<span style="font-size: 32px; margin: 21px 0;">Це заголовок верхнього рівня?</span>

Це елемент <span>. Вона не має семантики. Ви використовуєте його, щоб загорнути вміст, коли ви хочете застосувати до нього CSS (або зробити щось із цим за допомогою JavaScript), не надаючи йому жодного додаткового сенсу (про це пізніше ви знайдете в курсі.) Ми застосували деякі CSS, щоб він виглядав як заголовок верхнього рівня, але оскільки він не має семантичного значення, він не отримає жодної з додаткових переваг, описаних вище. Це гарна ідея використовувати відповідний елемент HTML для завдання.

Списки

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

Невпорядкований

Невпорядковані списки використовуються для позначення списків пунктів, для яких не має значення порядок позицій - візьмемо, наприклад, список покупок.

молоко
яйця
хліб
гумус

Кожен невпорядкований список починається з елемента <ul>, який обертається навколо всіх елементів списку:

<ul>
молоко
яйцчя
хліб
гумус
</ul>

Останнім кроком є перенесення кожного елемента списку в елемент <li> (елемент списку):

<ul>
  <li>молоко</li>
  <li>яйцчя</li>
  <li>хліб</li>
  <li>гумус</li>
</ul>

Активне навчання: розмітка невпорядкованого списку

Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-невпорядкований список.

Замовлено

Упорядковані списки - це списки, в яких має значення порядок елементів - приведемо приклад набору напрямків:

Проїдьте до кінця дороги
Поверніть праворуч
Ідіть прямо по перших двох роз'їздів
На третьому кільці поверніть ліворуч
Школа знаходиться справа від вас, 300 метрів вперед по дорозі

Структура розмітки така ж, як і для невпорядкованих списків, за винятком того, що ви повинні обернути елементи списку в елемент <ol>, а не <ul>:

<ol>
  <li>Проїдьте до кінця дороги</li>
  <li>Поверніть праворуч</li>
  <li>Ідіть прямо по перших двох роз'їздів</li>
  <li>На третьому кільці поверніть ліворуч</li>
  <li>Школа знаходиться справа від вас, 300 метрів вперед по дорозі</li>
</ol>

Активне навчання: розмітка впорядкованого списку

Спробуйте відредагувати живий зразок нижче, щоб створити свій власний HTML-список.

Активне навчання: Розмітка сторінки рецепта

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

Якщо ви застрягли, ви завжди можете натиснути кнопку Показувати рішення або перевірити наш text-complete.html приклад на нашому github репозиторії.

Вкладені списки

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

<ol>
  <li>Видаліть шкіру з часнику і грубо наріжте.</li>
  <li>Видаліть все насіння і стебло з перцю і грубо наріжте.</li>
  <li>Додайте всі інгредієнти в кухонний комбайн.</li>
  <li>Переробіть всі інгредієнти в пасту.</li>
  <li>Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.</li>
  <li>Якщо ви хочете гладкий гумус, переробляйте його довше.</li>
</ol>

Оскільки останні дві кулі дуже тісно пов'язані з тією, що була перед ними (вони читаються, як під-інструкції або варіанти, які підходять нижче цієї кулі), може мати сенс вкладати їх у свій власний невпорядкований список і розміщувати цей список всередині четверта куля. Це виглядатиме так:

<ol>
  <li>Видаліть шкіру з часнику і грубо наріжте.</li>
  <li>Видаліть все насіння і стебло з перцю і грубо наріжте.</li>
  <li>Додайте всі інгредієнти в кухонний комбайн.</li>
  <li>Переробіть всі інгредієнти в пасту.
    <ul>
      <li>Якщо ви хочете грубий "кремезний" гумус, переробляйте його короткий час.</li>
      <li>Якщо ви хочете гладкий гумус, переробляйте його довше.</li>
    </ul>
  </li>
</ol>

Спробуйте повернутися до попереднього активного прикладу навчання та оновити другий список, подібний до цього.late

Акцент і важливість

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

Акцент

Коли ми хочемо додати акцент у розмовній мові, ми підкреслюємо певні слова, тонко змінюючи сенс того, що ми говоримо. Аналогічно, у письмовій мові ми схильні підкреслювати слова, виділяючи їх курсивом. Наприклад, наступні два речення мають різне значення.

Я радий, що ви не запізнилися.

Я радий, що ви не запізнилися.

Перше речення звуки справді полегшено, що людина не запізнився. Навпаки, другий звучить саркастично або пасивно-агресивно, висловлюючи досаду, що людина прибула трохи пізно.

У HTML ми використовуємо елемент <em> (вираз) для позначення таких екземплярів. Окрім того, що документ є цікавішим для читання, вони розпізнаються читачами екрану та висловлюються іншим тоном голосу. Браузери за замовчуванням створюють цей стиль як курсив, але ви не повинні використовувати цей тег, щоб отримати стиль курсиву. Для цього потрібно використовувати елемент <span> і деякий CSS, або, можливо, елемент <i> (див. Нижче).

<p>Я <em>радий</em>, що ви не <em>запізнилися</em>.</p>

Велике значення

Щоб підкреслити важливі слова, ми прагнемо підкреслити їх у розмовній мові і сміливо їх писати. Наприклад:

Ця рідина дуже токсична.

Я розраховую на вас. Не запізнюйтеся!

У HTML ми використовуємо <strong> (strong важливий) елемент для позначення таких випадків. Окрім того, що документ стане більш корисним, вони знову розпізнаються читачами екрану та говорять різним тоном голосу. За умовчанням у браузерах цей текст виділено напівжирним шрифтом, але ви не повинні використовувати цей тег лише для отримання жирного стилю. Для цього потрібно використати <span> елемент і деякі CSS, або, можливо,елемент<b> (дивись нижче.)

<p>Ця рідина є <strong>дуже токсичною</strong>.</p>

<p>Я розраховую на вас. <strong>Не </strong> запізнюйтесь!</p>

За бажанням можна вмонтовувати strong і акцентувати всередині один одного:

<p>Ця рідина є <strong>дуже токсичною</strong> —
якщо ви її вип'єте, <strong>Ви можете <em>померти</em></strong>.</p>

Активне навчання: Давайте будемо уважними!

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

Курсив, жирний, підкреслений ...

Елементи, які ми обговорювали до цих пір, мають чітко виражену семантику. Ситуація з <b>, <i>, та <u> дещо складніше. Вони прийшли так, щоб люди могли писати напівжирний, курсив або підкреслений текст в епоху, коли CSS все ще підтримувався погано або зовсім не підтримувався. Такі елементи, які впливають лише на презентацію, а не на семантику, відомі як елементи презентації і більше не повинні використовуватися, оскільки, як ми бачили раніше, семантика настільки важлива для доступності, SEO та ін.

HTML5 перевизначено <b>, <i> та <u> з новими, дещо заплутаними, семантичними ролями.

Ось найкраще правило: скоріше за все доцільно використовувати <b>, <i> або <u>, щоб передати значення, яке традиційно передається жирним шрифтом, курсивом або підкресленням, за умови, що немає більш відповідного елемента. Тим не менш, завжди залишається критично важливим збереження мислення доступності. Концепція курсиву не дуже корисна людям, які використовують читання з екрану, або людям, які використовують систему письма, окрім латинського алфавіту.

  • <i> використовується для передачі значення, яке традиційно передається курсивом: іноземні слова, таксономічне позначення, технічні терміни, думка ...
  • <b> використовується для передачі значення, яке традиційно передається жирним шрифтом: Ключові слова, назви продуктів, головне речення ...<b> використовується для передачі значення, яке традиційно передається жирним шрифтом: Ключові слова, назви продуктів, головне речення ...

Попередження про підкреслення: люди пов'язують підкреслення з гіперпосиланнями. Тому в Інтернеті краще підкреслити лише посилання. Використовуйте елемент <u>, якщо він семантично доречний, але розгляньте можливість використання CSS для зміни підкресленого підкреслення на щось більш доречне в Інтернеті. Наведений нижче приклад ілюструє, як це можна зробити.

<!-- наукові назви -->
<p>
  Рубінова колібрі (<i> Archilochus colubris </i>)
   є найбільш поширеним колібром у Східній Північній Америці.
</p>

<!-- іноземні слова -->
<p>
  Меню було морем екзотичних слів <i lang="uk-latn">ватрушка</i>,
  <i lang="id">nasi goreng</i> та <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- відоме неправильне написання -->
<p>
  Коли-небудь я дізнаюся, як це зробити <u>spel</u> better.
</p>

<!-- Виділіть ключові слова в наборі інструкцій -->
<ol>
  <li>
    <b>Фрагмент</b> два шматки хліба з буханки.
  </li>
  <li>
    <b>Вставити</b> шматочок томата і лист салату між шматочками хліба.
  </li>
</ol>

Підсумок

Ось це зараз! Ця стаття повинна була дати вам гарне уявлення про те, як почати розмітку тексту в HTML, і познайомили вас з деякими з найважливіших елементів у цій області. Існує набагато більше семантичних елементів для висвітлення в цій області, і ми розглянемо набагато більше в нашій статті "Більше семантичних елементів", що пізніше буде в курсі. У наступній статті ми детально розглянемо, як створювати гіперпосилання , можливо, найважливіший елемент на Web.

У цьому модулі

Мітки документа й учасники

Зробили внесок у цю сторінку: Sergiy_Luckys, mdnwebdocs-bot, websunsey
Востаннє оновлена: Sergiy_Luckys,