HTMLの要素（body,div,p,span,a,img等）に対して属性を付与することができます。
属性とは、その要素に対しての設定だと思ってください。
そして属性値とは、その設定の内容になります。

属性といってもかなり複数あるので、以下が簡単な例になります。

/*要素divに対してid属性（属性値=main）とclass属性（属性値=red）*/
<div id="main" class="red">メインエリア</div>

/*要素aに対してhref属性（属性値=yahoo.jp）とtarget属性（属性値=_blank）*/
<a href="yahoo.jp" target="_blank">ヤフーへのリンク</a>

/*要素imgに対してid属性（属性値=image.jpg）とalt属性（属性値=メイン画像）*/
<img src="image.jpg" alt="メイン画像">

例を見てわかるとおり、書き方に決まりがあります。

<要素名 属性="属性値">

• 要素名の後ろには半角スペース
• 属性の後ろには=
• 属性値は“属性値”で囲む

属性の種類に関しては、以下のページを参考にしましょう。
【HTML入門】HTMLの属性ってなに？属性の役割と書き方 | Qlio（キュリオ）
HTMLの要素！属性、属性値とは！？class名を複数設定するHTMLの書き方付 | ビバ★りずむ

共通の性質

• 主にCSSやJavaScriptに対して利用する
• 半角英数字とハイフン（-）、アンダーバー（_）が使用できる
• 先頭の文字に数字は使えない

id属性

最も留意すべきは1ページのHTMLコード中に同じid属性値は使えないということです。
慣れが必要ですが、大きい枠に対する目印として、id属性を付与することが主です。

class属性

こちらで留意すべきは半角スペースで区切る事で複数のclass名を指定可能ということです。

<p class="animal dog">柴犬</p>

理解してみれば、共通点の多い2属性。
最初は恐れずどんどん属性を追加していきましょう。
間違えることもあると思いますが、その分理解が早まります。

他にも、奇麗なデザインのWEBページのソースコードが参考になります。
自分では思いつかないような便利な使い方を見つけることができるでしょう。