HTML/XML、CSSの文脈で使われる「属性」と「プロパティ」は、似て非なる単語である。感覚で適当に使っていたら、先刻ChatGPTに訂正されて傷ついた。この機会に整理したい。
混乱した理由は、「属性」を意味する2種類の英単語（"attribute"と"property"）があり、「同じような文脈で使われる同じ名前の別のもの」を、それぞれ指している点にある。また、状態によって「同じような文脈で使われる違う名前の同じもの」になったりもする。
混乱しても仕様がないと思う。
"attribute"には、「それにもともと備わっている性質」。"property"には、「それが持っている性質」というニュアンスがある。"property"は、性質を「財産」のように所有しているイメージかと思う。
例えばHTMLでは、<img width="16" height="16px"/>のwidthやheightは属性（"attribute"）と呼ぶ。一方CSSでは、img{width:16px;height:16px;}のwidthやheightをプロパティ（"property"）と呼ぶ。
先の単語のイメージを踏まえると、なんとなく違いが理解できる。これらは、同じ名前の違うものである。タグに直接指定したwidthは「属性」で、CSSで指定したwidthは、厳密にはHTMLのstyle属性のプロパティに当たる（ちなみに両者を指定した場合、プロパティの方が優先される）。
タグに指定する「属性」は、そのタグにもともと備わっている性質と解釈できる。HTMLやXMLのマークアップだけでは、後から変更できない。静的な値である。そのためHTMLやXMLのタグに記述する属性は、すべて"attribute"と言える。
一方、CSSで指定する「プロパティ」は、対象の属性ではあるものの、タグそのものが備える性質ではない。また、外から変更する、いわば動的な値である。つまり"property"と言える。
後者のニュアンスは、プログラミング言語の文脈で用いられる「プロパティ」という語にも通じる。
例えばHTMLやXMLでマークアップした静的な属性は、DOMツリーが構築される過程でプロパティに変更され、プログラミング言語（主にJavaScript）で動的に変更できるようになる。
本日の学び
"attribute"は、HTMLやXMLのタグの中に直接指定する属性。"property"は、CSSやJavaScriptで任意に指定する（あるいは指定できる状態になった）属性。