HTML <var> Tag

• w3schools
• w3c
• whatwg

---

定義及用法 Definition and Usage

當文字是屬於variable，則可使用<var>，瀏覽器會呈現其預設的樣式。像是寫一些數學表達式(mathematical expression)、程式(programming context)，在網頁上要清楚呈現哪些是變數的話，就可以加上<var>。另外像常數的ID、功能參數…等也可以使用，讓瀏覽者更容易識別。

---

技巧及備註 Tips and Notes

像這類著重在以文字樣式區別字義的HTML標籤，叫 phrase tags ，除了<var>以外，還有<em><strong><dfn><code><samp><kbd>。HTML的瀏覽器為這些標籤都預先設定了簡單的樣式，當然如果要更有效果的話，還是透過CSS再加以設定。

---

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

---

範例 Examples

範例 1 example：

<p> 
若假設5元硬幣為 X 枚，1元為 甲 枚，則：<br /> 
有5元與1元的硬幣共18枚，可列得二元一次方程式： <var>X</var> ＋ <var>甲</var> ＝18。 
</p>        

Demo結果如下

若假設5元硬幣為 X 枚，1元為 甲 枚，則：
有5元與1元的硬幣共18枚，可列得二元一次方程式： X ＋ 甲 ＝18。

範例 1 ，X和甲是變數，所以在列式時，加上了<var>，加上後的樣式其實就是在CSS裡用Tag Selection把有<var>標籤的字體給設定成斜體 (font-style: italic)，在辨識上是有一些些的效果。

不過，若是我們在網頁上是要呈現大量的程式碼，要針對一個個的變數來設定<var>標籤太不明智了，通常使用量大的話，我們會使用高亮程式碼(SyntaxHighlighter)，數學方程式也是一樣的，若是要在HTML上顯示大量的數學方程式，那麼最好的做法還是使用數學置標語言（Mathematical Markup Language，MathML），以下舉例說明。

範例 2 example：

<figure> 
  <math>
     <mi>a</mi>
     <mo>=</mo>
 	<msqrt>
       <msup>
         <mi>b</mi>
         <mn>2</mn>
       </msup>
         <mi>+</mi>
       <msup>
         <mi>c</mi>
         <mn>2</mn>
       </msup>
      </msqrt>
   </math>
   <figcaption>
     Using Pythagoras' theorem to solve for the hypotenuse _
     <var>a</var> of a triangle with sides <var>b</var> _
     and <var>c</var> 
   </figcaption>
</figure>

Demo結果如下

$a=\sqrt{b^2+c^2}$

Using Pythagoras' theorem to solve for the hypotenuse a of a triangle with sides b and c

範例中，畢式定理的方程式，裡頭雖然用了變數，但是並沒有加上<var>，若是刻意加上，那麼程式碼上面反而更加紊亂的。而在方程式說明的地方(<figcaption>標籤內)，才加上了<var>來突顯變數的地位。