HTML з нуля: спецсимволи в HTML. Урок №4


Привіт, друзі! 
Сьогодні я розповім про спецсимволи в HTML — важливу частину будь-якого веб-документа. Ви дізнаєтесь:

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

Готові? Тоді почнемо! 

Для чого потрібні спецсимволи в HTML

Спецсимволи — це унікальні символи, яких немає на клавіатурі або які браузери інтерпретують неправильно, якщо їх використовувати безпосередньо. Наприклад:

  • Як написати символ ©? Просто ввести його в код не вийде.
  • Як зробити кілька пробілів поспіль? HTML проігнорує їх, залишивши лише один.
  • Як показати код із HTML-тегами? Якщо просто вставити < і >, браузер вирішить, що це команда, а не текст.

Саме тут нам стають у пригоді спецсимволи. Розберімося на прикладах.

Приклад: Як показати HTML-теги





Якщо ви спробуєте вставити наступний код:

<html>  
  <head>  
    <title>Приклад</title>  
  </head>  
  <body>  
  </body>  
</html>    

то браузер сприйме його як частину сторінки, а не текст. Щоб це виправити, потрібно замінити < і > на спецсимволи &lt; і &gt;. Ось як це виглядатиме:

&lt;html&gt;  
  &lt;head&gt;  
    &lt;title&gt;Приклад&lt;/title&gt;  
  &lt;/head&gt;  
  &lt;body&gt;  
  &lt;/body&gt;  
&lt;/html&gt;  

Результат:

<html>
<head>
<title>Приклад</title>
</head>
<body>
</body>
</html>

Зручно, правда?

Як додати пробіли

Звичайні пробіли в HTML можуть бути хитрими. Якщо ви хочете зробити кілька пробілів, використовуйте &nbsp;. Наприклад:

слово1&nbsp;&nbsp;&nbsp;слово2  

Результат:

слово1   слово2

Як виводити спецсимволи в HTML

Щоб вставити спецсимвол, використовуйте його код. Наприклад, знак копірайту (©):

Усі права захищені &copy; 2024.  

Результат:
Усі права захищені © 2024.

Таблиця популярних спецсимволів HTML

Символ Код Опис Приклад відображення
& &amp; Амперсанд &
< &lt; Менше <
> &gt; Більше >
&quot; Подвійні лапки
&apos; Апостроф
© &copy; Знак авторського права ©
® &reg; Знак зареєстрованої торгової марки ®
&trade; Знак торгової марки
&euro; Євро
£ &pound; Фунт £
¥ &yen; Єна ¥
° &deg; Градус °
± &plusmn; Плюс-мінус ±
× &times; Множення ×
÷ &divide; Ділення ÷
&mdash; Довге тире
&ndash; Коротке тире
  &nbsp; Нерозривний пробіл (немає відображення)

Спробуйте самі! Напишіть кілька рядків коду з використанням спецсимволів і перевірте, як вони працюють.

До зустрічі в наступному уроці! 😊

Залиште коментар(2)

  • Чудова статья.
    Це так легко. Я гадав, як так зробити
    “Усі права захищені © 2025.”
    Дякую

    Відповісти
    Розміщено: 04.02.2025
    • Будь ласка. Я дуже рад, що моя праця Вам довподоби

      Розміщено: 04.02.2025

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *