HTML text fundamentals

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

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

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

У 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 натиснуто, щоб перейти до наступного рядка).

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

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

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

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

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

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

<h2>Прямий вихід</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Код, що можна редагувати</h2>
<p class="a11y-label">Натисніть Esc, щоб перемістити фокус в сторону від області кодування (вкладка вставляє символ табуляції).</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">Моя коротка історія. Я поліцейський, і мене звуть Тріш.

Мої ноги зроблені з картону, і я одружений на рибі.</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// клавіша зупинки табуляції в текстовій області
// замість цього напишіть tab в позиції каретки

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Оновлюйте збережений код користувача кожного разу, коли користувач оновлює код текстової області
textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

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

У подібному дусі, ми повинні переконатися, що ми використовуємо правильні елементи, надаючи нашому змісту правильний сенс, функцію або зовнішній вигляд. У цьому контексті елемент <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-невпорядкований список.

<h2>Прямий вихід</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Код, що можна редагувати</h2>
<p class="a11y-label">Натисніть Esc для переміщення фокусу з області коду (Tab вставляє символ табуляції).</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
молоко
яйця
хліб
гумус
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

//Оновлюйте збережений код користувача кожного разу, коли користувач оновлює код текстової області
textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

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

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

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

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

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

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

<h2>Прямий вихід</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Код, що можна редагувати</h2>
<p class="a11y-label">Натисніть Esc для переміщення фокусу з області коду (Tab вставляє символ табуляції).</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">Drive to the end of the road
Поверніть праворуч
Пройдіть прямо по перших двох роз'їздів
На третьому кільці поверніть ліворуч
Школа знаходиться справа від вас, 300 метрів вперед по дорозі</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '<ol>\n<li>Проїдьте до кінця дороги</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

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

<h2>Прямий вихід</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Код, що можна редагувати</h2>
<p class="a11y-label">Натисніть Esc для переміщення фокусу з області коду (Tab вставляє символ табуляції).</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%">Швидкий рецепт гумусу

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

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

Інгредієнти
  1 банку (400 г) гороху (квасолі)
  175g тахіні
  6 сушених помідорів
  Половина червоного перцю
  Щіпка кайенского перцю
  1 зубчик часнику
  Трохи оливкової олії

  Інструкції

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

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

  Зберігання

  Завантажте готовий хумус в герметичний контейнер. Ви маєте можливість використовувати його протягом тижня після того, як ви його зробили. Якщо він починає шипувати, то обов'язково викиньте його.

  Гумус підходить для заморожування; Ви повинні заморозити його і використовувати протягом декількох місяців.</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Якщо ви застрягли, ви завжди можете натиснути кнопку Показувати рішення або перевірити наш 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>

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

<h2>Прямий вихід</h2>

<div class="output" style="min-height: 50px;">
</div>

<h2>Код, що можна редагувати</h2>
<p class="a11y-label">Натисніть Esc щоб перемістити фокус з області коду (Tab вставить символ табуляції).</p>

<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Important notice</h1>
<p>У неділю 9 січня 2010 року була банда готів
   плямистий крадіжка декількох садових гномів з
   торговий центр в центрі міста Мілуокі. Вони були
   все носять зелені комбінезони і дурні капелюхи, і
   здавалося, мав кит часу. Якщо хто
    будь-яка інформація про цей інцидент, будь ласка
     зараз звертайтеся до поліції.</p></textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset">
  <input id="solution" type="button" value="Show solution">
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

reset.addEventListener('click', function() {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Show solution';
  updateCode();
});

solution.addEventListener('click', function() {
  if(solution.value === 'Show solution') {
    textarea.value = solutionEntry;
    solution.value = 'Hide solution';
  } else {
    textarea.value = userEntry;
    solution.value = 'Show solution';
  }
  updateCode();
});

var htmlSolution = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>';
var solutionEntry = htmlSolution;

textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = function(e){
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret('\t');
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value).substring(0, caretPos);
  var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
  textarea.value = front + text + back;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = function(){
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if(solution.value === 'Show solution') {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

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

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

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

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

<!-- наукові назви -->
<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.

• Початок роботи з HTML
• Що в head? Метадані в HTML
• Основи тексту HTML
• Створення гіперпосилань
• Розширене форматування тексту
• Структура документа та веб-сайту
• Налагодження HTML
• Розмітка літери
• вмісту