MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

У цій статті ми пояснимо найбільш базові поняття 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">

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

Атрибути

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

<p class="editor-note">My cat is very grumpy</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>

Here we have:

  1. <!DOCTYPE html>: The doctype. In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. They used to look something like this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    However, these days no one really cares about them, and they are really just a historical artifact that needs to be included for everything to work right. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.
  2. <html></html>: The <html> element. This element wraps all the content on the entire page, and is sometimes known as the root element.
  3. <head></head>: The <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more. You'll learn more about this in the next article in the series.
  4. <meta charset="utf-8">: This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of human written languages. Essentially it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.
  5. <title></title>: The <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favourite it.
  6. <body></body>: The <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

Active learning: Adding some features to an HTML document

If you want to experiment with writing some HTML on your local computer, you can:

  1. Copy the HTML page example listed above.
  2. Create a new file in your text editor.
  3. Paste the code into the new text file.
  4. Save the file as index.html.

Note: You can also find this basic HTML template on the MDN Learning Area Github repo.

You can now open this file in a web browser to see what the rendered code looks like, and then edit the code and refresh the browser to see what the result is. Initially it will look like this:

A simple HTML page that says This is my pageSo in this exercise, you can edit the code locally on your computer, as outlined above, or you can edit it in the editable sample window below (the editable sample window represents just the contents of the <body> element, in this case.) We'd like you to have a go at implementing the following steps:

  • Just below the opening tag of the <body> element, add a main title for the document. This should be wrapped inside an <h1> opening tag and </h1> closing tag.
  • Edit the paragraph content to include some text about something you are interested in.
  • Make any important words stand out in bold by wrapping them inside a <strong> opening tag and </strong> closing tag
  • Add a link to your paragraph, as explained earlier in the article.
  • Add an image to your document, below the paragraph, as explained earlier in the article. You'll get bonus points if you manage to link to a different image (either locally on your computer, or somewhere else on the web.)

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Whitespace in HTML

In the above examples you may have noticed that a lot of whitespace is included in the code listings — this is not necessary at all; the two following code snippets are equivalent:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

No matter how much whitespace you use (which can include space characters, but also line breaks), the HTML parser reduces each one down to a single space when rendering the code. So why use so much whitespace? The answer is readability — it is so much easier to understand what is going on in your code if you have it nicely formatted, and not just bunched up together in a big mess. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you what style of formatting you use (how many spaces for each level of indentation, for example), but you should consider using some kind of formatting.

Entity references: including special characters in HTML

In HTML, the characters <, >,",' and & are special characters. They are parts of the HTML syntax itself, so how do you include one of these characters in your text, for example if you really want to use an ampersand or less than sign, and not have it interpreted as code as some browsers may do?

We have to use character references — special codes that represent characters, and can be used in these exact circumstances. Each character reference is started with an ampersand (&), and ended by a semi-colon (;).

Literal character Character reference equivalent
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

In the below example, you can see two paragraphs, which are talking about web technologies:

<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>

In the live output below, you can see that the first paragraph has gone wrong, because the browser thinks that the second instance of <p> is starting a new paragraph. The second paragraph looks fine, because we have replaced the angle brackets with character references.

Note: A chart of all the available HTML character entity references can be found on Wikipedia: List of XML and HTML character entity references.

HTML comments

In HTML, as with most programming languages, there is a mechanism available to write comments in the code — comments are ignored by the browser and invisible to the user, and their purpose is to allow you to include comments in the code to say how your code works, what the different parts of the code do, etc. This can be very useful if you return to a code base that you've not worked on for six months, and can't remember what you did — or if you hand your code over to someone else to work on.

To turn a section of content inside your HTML file into a comment, you need to wrap it in the special markers <!-- and -->, for example:

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

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

As you can see below, the first paragraph appears in the live output, but the second one doesn't.

Summary

You've reached the end of the article — we hope you enjoyed your tour of the very basics of HTML! At this point you should understand what the language looks like, how it works at a basic level, and be able to write a few elements and attributes. This is a perfect place to be right now, as in subsequent articles in the module we will go into some of the things you have already looked at in a lot more detail, and introduce some new features of the language. Stay tuned!

Note: At this point, as you start to learn more about HTML, you might also want to start to explore the basics of Cascading Style Sheets, or CSS. CSS is the language you use to style your web pages (whether e.g. changing the font or colors, or altering the page layout.) HTML and CSS go very well together, as you'll soon discover.

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

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