Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Атрибути | Теги та Атрибути
Знайомство з HTML
course content

Зміст курсу

Знайомство з HTML

Знайомство з HTML

1. Веб Розробка
3. Структура Документа
4. Медіа та Таблиці
5. Форми

bookАтрибути

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

Базовий синтаксис

Атрибути вказуються лише у трикутних дужках відкриваючого тегу елемента. Синтаксис для визначення атрибуту наступний:

Ключові моменти

  • Атрибути можуть бути необов'язковими або обов'язковими: Залежно від елемента, певні атрибути можуть бути обов'язковими для коректної роботи, тоді як інші є необов'язковими і надають додаткові можливості кастомізації;
  • Атрибути беруться в лапки: Значення атрибутів беруться в подвійні лапки ("...") або одинарні лапки ('...'). Це допомагає відрізнити їх від імені елемента і полегшує читання;
  • Кожен тег має власний набір атрибутів: Різні елементи HTML підтримують різні атрибути. Розуміння специфічних атрибутів, що застосовуються до кожного елемента, є важливим для їх ефективного використання;
  • Можна використовувати декілька атрибутів: В одному елементі можна використовувати декілька атрибутів, розділяючи їх пробілами. Це дає змогу ширше кастомізувати та контролювати поведінку елемента.

Приклади використання

Розглянемо кілька прикладів використання елементів HTML з атрибутами, щоб зрозуміти, як вони впливають на поведінку елементів:

html

index

css

index

js

index

copy

Пояснення коду по рядках:

  1. Елемент input;
    • type="text" вказує на те, що поле вводу повинно приймати від користувача звичайний текст;
    • placeholder="name" надає підказку або приклад очікуваного введення у полі введення. Ми очікуємо ім'я користувача.
  2. Елемент img;
    • alt="Forest" надає альтернативний текст для зображення. Якщо зображення не буде завантажено, користувач побачить текст "Forest";
    • src="..." вказує URL-адресу джерела зображення (Uniform Resource Locator). В інтернеті воно знаходиться за цим посиланням (https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/forest+example+img.png).
  3. Елемент a;
    • target="_blank" вказує, що коли користувач натискає на посилання, URL-адреса призначення повинна відкритися в новій вкладці браузера;
    • href="https://www.google.com/" посилання призначення.
  4. Елемент button.
    • type="reset" визначає поведінку кнопки, яка при натисканні скидає поля форми до початкових значень, якщо кнопка вказана в елементі form.

Примітка

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

Підсумок

Елемент HTML зазвичай складається з тега, атрибутів і вмісту.

  • Тег визначає тип елемента (наприклад, p, img тощо);
  • Атрибут надає додаткову інформацію про елемент (наприклад, src, alt тощо);
  • Вміст - це все, що знаходиться між відкриваючим та закриваючим тегами елемента.
Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 3
some-alt