EasyCode365EasyCode365

10 типових помилок початківців у HTML

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

Помилки - це не провал, а нормальна частина навчання. Браузери інколи дуже поблажливі, але іноді одна маленька помилка може "зламати" всю сторінку.

Щоб тобі було легше знаходити проблеми, ось 10 найпоширеніших HTML-помилок новачків і способи швидко їх виправити.

1. Незакриті теги

Більшість HTML-тегів мають пару: відкривальний і закривальний. Закривальний тег обов'язково містить слеш (/). Якщо його забути, браузер вважає, що елемент триває без кінця, і це може зіпсувати розмітку всієї сторінки.

Поганий код:

Лише читання
<p>Ласкаво просимо на мій сайт!<p>

Хороший код:

Лише читання
<p>Ласкаво просимо на мій сайт!</p>

2. Неправильне вкладення

Коли ти розміщуєш один тег усередині іншого, це називається "вкладенням". Золоте правило вкладення: "першим відкрив - останнім закрив." Уяви набір коробок одна в одній. Спочатку треба закрити внутрішню коробку, а вже потім зовнішню. Якщо теги "перехрещуються", браузер плутається.

Поганий код:

Лише читання
<p>Цей текст <strong>дуже жирний.</p></strong>

Хороший код:

Лише читання
<p>Цей текст <strong>дуже жирний.</strong></p>

3. Відсутній атрибут alt

Коли додаєш зображення через тег <img>, потрібно вказати атрибут alt (альтернативний текст). Якщо зображення не завантажиться, браузер покаже цей текст. Ще важливіше: скрінрідери використовують alt, щоб описати зображення людям із порушеннями зору. Без нього сайт не є доступним.

Поганий код:

Лише читання
<img src="milyi-pesyk.jpg">

Хороший код:

Лише читання
<img src="milyi-pesyk.jpg" alt="Пухнасте цуценя золотистого ретривера сидить на траві">

4. Відсутні лапки в атрибутах

Атрибути додають тегам додаткову інформацію (наприклад, куди веде посилання). Значення атрибутів завжди варто брати в лапки. Якщо цього не зробити, пробіл у URL може повністю зламати посилання.

Поганий код:

Лише читання
<a href=https://www.example.com>Натисни тут</a>

Хороший код:

Лише читання
<a href="https://www.example.com">Натисни тут</a>

5. Використання заголовків лише для стилю

Заголовки (<h1> до <h6>) потрібні для логічної структури документа, як розділи в книжці. Новачки часто ставлять <h1> просто тому, що хочуть великий жирний текст. Це шкодить структурі сторінки. Якщо хочеш зробити текст більшим, використовуй CSS.

Поганий код:

Лише читання
<h2>Натисни кнопку нижче, щоб продовжити.</h2>

Хороший код:

Лише читання
<p class="big-text">Натисни кнопку нижче, щоб продовжити.</p>

6. Пропуск рівнів заголовків

Заголовки мають іти в чіткій послідовності. Не варто стрибати з <h1> одразу на <h4>. Це плутає і пошукові системи, і скрінрідери, які намагаються зрозуміти структуру сторінки.

Поганий код:

Лише читання
<h1>Головний заголовок</h1>
<h4>Підзаголовок</h4>

Хороший код:

Лише читання
<h1>Головний заголовок</h1>
<h2>Підзаголовок</h2>

7. Видимий контент у <head>

Твій HTML-документ має дві основні частини: <head> (мозок) і <body> (видиме тіло). <head> призначений лише для службових налаштувань, наприклад назви вкладки. Будь-який текст, зображення або посилання, які має бачити людина, повинні бути в <body>.

Поганий код:

Лише читання
<head>
  <h1>Мій крутий сайт</h1>
</head>

Хороший код:

Лише читання
<body>
  <h1>Мій крутий сайт</h1>
</body>

8. Теги у верхньому регістрі

У старих версіях HTML не було різниці між <P> та <p>. Хоч сучасні браузери все ще розуміють великі літери, стандартна практика в індустрії - писати теги малими літерами. Так код виглядає чисто, сучасно й читабельно.

Поганий код:

Лише читання
<DIV>
  <P>Привіт, світе!</P>
</DIV>

Хороший код:

Лише читання
<div>
  <p>Привіт, світе!</p>
</div>

9. Забута базова структура (boilerplate)

Не можна просто створити файл, написати <p>Привіт</p> і на цьому завершити. Кожна вебсторінка потребує базового каркаса, який називають "boilerplate". Без doctype, html, head і body браузер змушений здогадуватись, як читати сторінку.

Поганий код:

Лише читання
<h1>Моя сторінка</h1>
<p>Тут бракує базового каркаса.</p>

Хороший код:

Лише читання
<!DOCTYPE html>
<html>
  <head>
    <title>Моя сторінка</title>
  </head>
  <body>
    <h1>Моя сторінка</h1>
    <p>Тут є правильний базовий каркас.</p>
  </body>
</html>

10. Пробіли в назвах файлів

Коли зберігаєш HTML-файли або зображення на комп'ютері, не використовуй пробіли в назві файлу. Інтернет "не любить" пробіли. Браузер часто замінює пробіл на символи на кшталт %20, і через це ламаються посилання та картинки. Краще використовуй дефіси (-) або підкреслення (_).

Поганий код:

Лише читання
<a href="pro mene.html">Про мене</a>

Хороший код:

Лише читання
<a href="pro-mene.html">Про мене</a>

Підсумок

Програмування - це шлях спроб і помилок. Наступного разу, коли не завантажується картинка або сторінка виглядає зламаною, перевір цей список. Чи закрив ти теги? Чи не забув лапки? Чи правильно вкладені теги?

Уміння помічати такі дрібні помилки формує твоє "око розробника". Практикуйся далі, і скоро уникати цих помилок стане для тебе природно.