Атрибуты тегов HTML⁠⁠

Одна из важных концепций HTML это атрибуты и их значения.

<img src="./images/html-syntax.png" alt="HTML Syntax">

В примере выше мы используем тег одиночный тег <img>, для того чтобы добавить изображение на нашу страницу.

Для того чтобы сказать браузеру, какое именно изображение мы хотим показать на странице мы используем атрибут src и в качестве его значения указываем путь к файлу изображения. Таким образом браузер поймет что именно мы хотим показать на странице.

<p>
<a href="https://github.com" target="_blank" title="Popup info" id="link" class="link">
Github
</a>
</p>

В примере выше мы можем видеть большое количество атрибутов, в этом нет ничего страшного, теги могут принимать неограниченное количество атрибутов.

Но не стоит увлекаться, большое количество атрибутов делает код более сложным и сильнее нагружает браузер, который интерпретирует HTML.

<section>
<p class="paragraph" title="some additional info">
Lorem ipsum dolor sit amet.
</p>
<a href="https://github.com" target="_blank" class="link" title="title info">
Link to github
</a>
</section>

Существует 3 типа атрибутов, универсальные, уникальные и атрибуты событий.

Универсальные - атрибуты которые можно установить любому существующему тегу из пример выше можно понять что атрибуты class и title являются универсальными атрибутами. Так как мы можем их добавить любому тегу.

Уникальные - атрибуты, которые есть у определенных тегов или у определенного набора тегов. Одним из таких атрибутов является атрибут href тега <a>, а также атрибут target тега <a> тоже является уникальным.

Атрибуты событий - нужны для того связывания обработчиков событий с элементами на которых они должны срабатывать. Обработчики событий это JavaScript функции которые срабатывают при срабатывании события на элементе, например события клика по элементу.

Пример атрибута события

<p onclick="alert('Hello world!')" >
<mark>Lorem ipsum dolor sit amet.</mark>
</p>

Из чего состоит тег ?

Видеоурок на эту тему