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

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

Передумови: Базове знання комп'ютера, встановлене основне програмне забезпечення, базове розуміння роботи з файлами.
Мета: Отримати базове розуміння мови HTML і попрактикуватися в написанні кількох HTML-елементів.

Що таке HTML?

HTML (Hypertext Markup Language — мова гіпертекстової розмітки) не є мовою програмування. Це мова розмітки, яка каже браузеру, як відобразити сторінку, яку ви відвідуєте. HTML може бути простим чи складним, залежно від бажання його розробника. HTML складається з серії елементів, які ви використовуєте для того, щоб вкласти, загорнути чи розмітити частини сторінки, щоб вони виглядали певним чином. Теги можуть перетворити частину тексту на посилання на іншу сторінку, виділити її курсивом тощо. Наприклад, візьміть такий рядок тексту: 

My cat is very grumpy

Якщо ми хочемо, щоб цей рядок був сам по собі, ми можемо вказати, що це параграф (абзац), загорнувши його тегом елементу (<p>):

<p>My cat is very grumpy</p>

Анатомія елементу HTML

Погляньмо на елемент "параграф" детальніше. 

Основні частини елементу такі:

  1. Початковий тег: містить назву елементу (в даному випадку, p), загорнену в кутові дужки. Цей тег позначає початок елементу, або місце, де елемент починає діяти. У даному випадку — це місце, де починається параграф. 
  2. Кінцевий тег: такий самий тег, як і початковий, тільки тепер він містить скісну риску перед назвою елементу. Цей тег позначає місце закінчення елементу — у даному випадку, місце, де закінчується параграф. Одна з найпоширеніших помилок початківців — це забути поставити кінцевий тег, що може призвести до несподіваних результатів. 
  3. Вміст: вміст елементу, у даному випадку — просто текст. 
  4. Елемент: початковий тег плюс кінцевий тег плюс вміст між ними — дорівнює елемент.

Активне навчання: створення вашого першого HTML-елементу

Відредагуйте рядок нижче і полі Input,  загорнувши його тегами <em> та </em> (поставте <em> на початку, щоб відкрити елемент, та </em> в кінці, щоб закрити елемент) — це має виділити рядок курсивом! Ви маєте побачити зміни в полі Output.

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

Вкладені елементи

Ви можете вкладати одні елементи всередину інших. Це називаєте вкладенням. Якщо ми хочемо наголосити, що наш кіт дуже сумний, ми можемо загорнути слово "дуже" в елемент <strong>, який означає, що слово особливо сильно наголошене:

<p>My cat is <strong>very</strong> grumpy.</p>

Важливо пам'ятати правильне вкладення елементів: у прикладі вище ми спершу відкрили елемент <p>, а потім елемент <strong>, що означає, що першим ми маємо закрити внутрішній елемент <strong>, а потім зовнішній <p>. Приклад нижче неправильний:

<p>My cat is <strong>very grumpy.</p></strong>

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

Блокові та рядкові елементи

Існують дві важливі категорії елементів у HTML, про які вам слід знати — блокові та рядкові.

  • Блокові елементи утворюють блок на сторінці — вони розміщуються з нового рядка, незалежно від того, який елемент був перед ними, і кожен наступний після них елемент також буде розміщуватися на новому рядку. Блокові елементи найчастіше є структурними складовими сторінки, які представляють, наприклад, параграфи (абзаци), списки, меню навігації тощо. Блокові елементи не можуть вкладатися в рядковий елемент, але можуть вкладатися в інший блоковий елемент.
  • Рядкові елементи розміщують в блокових елементах і займають лише невеликі частини документу, не цілі параграфи чи інші блоки. Рядковому елементу не потрібно починатися з нового рядка, зазвичай вони розміщують всередині параграфів, наприклад, посилання <a> чи виділення <em> та <strong>.

Візьміть такий приклад:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

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

Примітка: HTML5 пропонує інший підхід до визначення категорій елементів (див. Element content categories). Хоча нові категорії є більш точними, ніж ті, про які йшлося вище, вони також є значно складнішими для розуміння, ніж "блокові" і "рядкові". Тому ми будемо вживати саме ці дві категорії. 

Примітка: ви можете знайти корисні посилання на перелік усіх блокових та рядкових елементів — див. Block-level elements та Inline elements.

Порожні елементи

Не всі елементи утворюються за шаблоном початковий тег, вміст, кінцевий тег. Деякі елементи мають лише один тег, який зазвичай вставляє щось на певне місце в документі. Це, наприклад, <img>, який вставляє зображення на те місце, куди він поставлений:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Так він виглядає на сторінці:

Атрибути

Елементи також можуть мати атрибути, які виглядають так: 

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

Атрибути містять додаткову інформацію про елемент, яка не відображається в самому контенті. У прикладі вище class це ім'я атрибута, а editor-note — це значення атрибута. Атрибут class дозволяє дати елементу певний ідентифікатор, який пізніше можна використати для того, щоб доступитися до цього елемента і змінити його стиль.

Атрибут завжди повинен мати:

  1. Пробіл між ім'ям атрибута і назвою елементу (або попереднім атрибутом, якщо такий є).
  2. Ім'я атрибута, за яким іде знак дорівнює.
  3. Значення атрибута, загорнене в прямі лапки.

Активне навчання: додавання атрибута до елемента

Поглянемо на інший елемент — <a> (від anchor — "якір"), який робить гіперпосиланням текст, загорнений в нього. Цей елемент може мати кілька атрибутів, наприклад: 

  • href: значення цього атрибута визначає веб-адресу, куди саме буде вести посилання. Наприклад, href="https://www.mozilla.org/".
  • title: цей атрибут містить додаткову інформацію про посилання, а саме назву сторінки, на яку веде посилання. Наприклад, title="The Mozilla homepage". Ця назва буде з'являтися у вигляді підказки при наведенні курсором на посилання. 
  • target: цей атрибут визначає контекст переглядання сторінки в браузері. Наприклад, target="_blank" відобразить посилання в новій вкладці. Якщо ви хочете відкривати посилання в тій самій вкладці, просто опустіть цей атрибут.

Відредагуйте рядок нижче в полі Input,так щоб він став посиланням на ваш улюблений сайт. Спочатку додайте елемент <a>, потім атрибуті href і title. Насамкінець вкажіть значення атрибута target, так щоб посилання відкривалося в новій вкладці. Ви побачите свої зміни в полі Output. Ви маєте побачити посилання, яке має відображати заголовок (title) при наведенні курсору, а при кліку — переходити за адресою, вказаною в атрибуті href element. Пам'ятайте ставити пробіли між іменем елемента та кожним атрибутом. 

Ви завжди можете скинути всі зміни кнопкою Reset. Також ви можете подивитися відповідь, натиснувши кнопку Show solution.

Булеві атрибути

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

<input type="text" disabled="disabled">

Скорочений запис цілком може виглядати так (ми також додали активне поле для кращого розуміння): 

<input type="text" disabled>

<input type="text">

Обидва записи дадуть такий результат: 

Опускання лапок навколо значень атрибутів

Іноді в мережі ви можете побачити багато різних прикладів дивної розмітки, наприклад значення атрибутів, записані без лапок. Хоча за деяких обставин такий запис є прийнятним, в інших випадках він може поламати розмітку. Наприклад, у нашому посиланні з прикладу вище ми можемо записати атрибут href так:

<a href=https://www.mozilla.org/>favourite website</a>

Однак, якщо ми додамо другий атрибут title, розмітка порушиться:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

Таку розмітку браузер розуміє неправильно, думаючи, що title — це насправді три атрибути: атрибут "title" зі значенням "The" і два інші атрибути булевого типу, Mozilla і homepage. Така поведінка не є очікуваною і може призвести до помилок, як показано в прикладі нижче. Спробуйте навести курсор на текст, щоб подивитися, який текст у заголовку. 

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

Лапки подвійні чи одинарні?

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

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

Однак, не можна змішувати лапки різного типу в одному записі. Наприклад, такий запис є неправильним:

<a href="http://www.example.com'>A link to my example.</a>

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

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Для вкладення лапок того самого типу потрібно користуватися спеціальними символами, про які піде мова нижче.

Анатомія HTML-документу

Все зазначене вище є основами HTML, але окремо взяті елементи самі по собі мало на що здатні. Тепер ми поглянемо на те, як окремі елементи формують цілу веб-сторінку:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Тут ми маємо:

  1. <!DOCTYPE html>: Доктайп (тип документу). В ті часи, коли HTML тільки зароджувався (близько 1991/2), доктайпы (doctypes) використовувалися як посилання на набір правил, яким HTML-сторінка повинна була слідувати, щоб вважатись написаною хорошим HTML-кодом, що може означати автоматичну перевірку помилок та інші корисні речі. Доктайп виглядав приблизно так:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Проте в наші дні ніхто справді не дбає про них, і вони насправді є лише історичним артефактом, який потрібно включити в документ, щоб той правильно працював<!DOCTYPE html> це найкоротший рядок символів, який вважається валідним доктайпом; це все, що вам дійсно потрібно знати.
  2. <html></html>: Елемент <html>. Цей елемент огортає весь зміст (контент) на всій сторінці, іноді його називають кореневим (root) елементом.
  3. <head></head>: Елемент <head>. Цей елемент діє як контейнер для всього матеріалу, який ви хочете включити в сторінку HTML, але який не є вмістом, що ви надаєте для перегляду відвідувачам вашої сторінки. Він включає в себе такі речі, як ключові слова та опис сторінки, які ви хочете відобразити в результатах пошуку, CSS, щоб стилізувати вміст сторінки, оголошення підтримуваного набору символів тощо. Ви дізнаєтеся більше про це в наступній статті даної серії.
  4. <meta charset="utf-8">: Цей елемент встановлює в якості символьного кодування для вашого документу UTF-8, що включає більшість символів з переважної більшості письмових мов людей. По суті, це дає змогу обробляти будь-який текстовий вміст, який ви можете додати до документу. Немає причин не встановлювати таке кодування, і це допоможе уникнути деяких проблем пізніше.
  5. <title></title>: Елемент <title>. Цей елемент встановлює назву вашої сторінки, що є заголовком, який відображається на вкладці веб-браузера, на якій завантажується сторінка, і використовується для опису сторінки під час додавання/уподобання її.
  6. <body></body>: Елемент <body>Цей елемент містить весь контент, який ви хочете показати веб-користувачам під час відвідування вашої сторінки, незалежно від того, є це текст, зображення, відео, ігри, відтворювані звукові доріжки тощо.

Активне навчання: додавання деяких функцій у документ HTML

Якщо ви хочете поекспериментувати з написанням HTML-коду на вашому локальному комп'ютері, ви можете зробити наступне:

  1. Скопіюйте наведений вище приклад HTML сторінки.
  2. Створіть новий файл у текстовому редакторі.
  3. Вставте код у новий текстовий файл.
  4. Збережіть файл як index.html.

Примітка: Ви також можете знайти цей основний HTML шаблон на MDN Learning Area Github repo.

Тепер ви можете відкрити цей файл у веб-браузері, щоб побачити, як виглядає відображення вірного коду, а потім відредагувати код та оновити веб-браузер, щоб побачити результат. Спочатку це виглядатиме так:

A simple HTML page that says This is my page В цій вправі ви можете редагувати код локально на своєму комп'ютері, як зазначено вище, або можете редагувати його в запропонованому редакторі нижче (у вікні редактора в даному прикладі показано лише зміст елемента <body>) Спробуйте зробити наступне:

  • За відкритим тегом елемента <body> додайте головний заголовок для документу. Він повинен бути загорнутий поміж відкриваючого тега <h1> і закриваючого тега </h1>.
  • Відредагуйте вміст параграфу (абзацу) та додайте текст про те, що вас цікавить.
  • Зробіть важливі слова виділеними жирним шрифтом, обернувши їх у відкриваючий тег <strong> і закриваючий тег </strong>.
  • Додайте посилання до свого абзацу, як це було описано раніше в статті.
  • Додайте зображення в свій документ перед абзацем, як це було описано раніше в статті. Ви можете вважати себе крутим хакером, якщо зможете використати іншу картинку (з власного комп'ютера або з Інтернету).

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

Пробіли в HTML

У наведених вище прикладах, мабуть, ви помітили, що багато пробілів зроблено в коді - це взагалі не обов'язково; два наступні фрагменти коду є еквівалентними:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

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

Посилання на об'єкт: включаючи спеціальні символи в HTML

В HTML символи <, >,",' та & є спеціальними символами. Вони є частинами самого синтаксису HTML, тому як вводити один з цих символів у ваш текст, наприклад, якщо ви дійсно хочете використати амперсанд або знак менше, і не трактувати його як код, як це можуть зробити деякі веб-браузери?

В такому випадку ми повинні використовувати символьні посилання - спеціальні коди, що представляють символи, і можуть використовуватися в конкретних обставинах. Кожне посилання символів починається з амперсанда (&), а закінчується двокрапкою (;).

Буквений символ Еквівалентне написання символів
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

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

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

Нижче наводиться приклад, в якому ви можете побачити, що перший абзац вийшов не так, тому що браузер вважає, що другий елемент <p> починає новий абзац. Другий абзац виглядає чудово, тому що ми замінили кутові дужки на символьні посилання.

Примітка: У графіку всіх доступних посилань на об'єкти HTML можна знайти у Вікіпедії: List of XML and HTML character entity references.

Коментарі HTML

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

Щоб перетворити розділ вмісту всередині вашого HTML-файлу в коментар, вам необхідно обгорнути його спеціальними маркерами <!-- та -->, наприклад:

<p>I'm not inside a comment</p>

<!-- <p>I am!</p> -->

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

Підсумок

Ви досягли кінця статті - ми сподіваємося, що вам сподобалась ваша мандрівка по основах HTML! На цьому етапі ви повинні розуміти, як виглядає мова, як вона працює на базовому рівні, і вміти писати кілька елементів і атрибутів. Це ідеальне місце, щоб розпочати навчання прямо зараз і продовжити вивчати далі наступні статті модуля. Ви розглянете деякі речі, з якими ви вже ознайомлені, але більш докладно, і дізнаєтесь про деякі нові можливості мови HTML. Залишайтеся на зв'язку!

Примітка: На цьому етапі, коли ви почнете більше дізнаватися про HTML, ви також можете почати вивчати основи каскадних таблиць стилів або CSS. CSS - це мова, яку ви використовуєте для стилізації веб-сторінок (наприклад, зміна шрифту або кольорів, або зміна макета сторінки). HTML та CSS дуже добре співпрацюють, в чому ви незабаром переконаєтесь.

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

Зробили внесок у цю сторінку: Orlann, websunsey, mdymytrova
Востаннє оновлена: Orlann,