> For the complete documentation index, see [llms.txt](https://vyspiansky.gitbook.io/introduction-to-web-development/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vyspiansky.gitbook.io/introduction-to-web-development/html/tags-and-attributes.md).

# Теги і атрибути

Давайте розберемо з вами, що собою являють HTML-теги. Ось як, наприклад, можна оформити параграф:

```markup
<p>Текст параграфу може бути тут...</p>
```

Огорнувши з обох боків текст тегом `p`, ми даємо браузеру зрозуміти, що перед нами параграф. Часто теги парні, тобто спочатку йде тег, що відкриває блок з контентом (англ. start tag), а в кінці йде закриваючий тег (англ. end tag). Також є непарні, одиничні теги, які не мають закриваючого тегу. Наприклад, тег, яким позначають картинку:

```markup
<img src="/path/to/logo.png" alt="Логотип">
```

Тег також може мати атрибути. У прикладі вище в тезі `img` такими атрибутами є `src` (повний шлях, за яким можна знайти зображення) та `alt` (текст-підказка, яка відобразиться в браузері, якщо картинку не вдасться показати). Атрибут дозволяє задати додаткову інформацію про тег.

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

```markup
<p class="note">Якийсь текст...</p>
```

Важливою частиною будь-якого HTML-документу є посилання. Вставити його можна наступним чином:

```markup
<a href="...">Текст посилання</a>
```

В атрибуті `href` слід вказати URL-адресу.

При бажанні ви можете стилізувати свої теги, використовуючи атрибут `style`:

```markup
<a href="..." style="color: red; font-size: 12px;">Текст посилання</a>
```

В коді вище ми задали для посилання червоний колір тексту і розмір шрифту 12 пікселів.

{% hint style="info" %}
В разі, якщо у вас виникла необхідність стилізувати HTML-елемент, куди ефективнішим і кращим рішенням буде використовувати можливості мови CSS, замість використання `style`.
{% endhint %}