Атрибуты тегов 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>
Из чего состоит тег ?
Видеоурок на эту тему