HTMLの属性

今回は属性について、みていきましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SLOT</title>

  </head>

  <body>
    <header>
      <h1>SLOT</h1>
    </header>

    <div class="wrapper">
      <p id="slot-number"></p>
    
      <p id="slot-number-two"></p>
    
      <p id="slot-number-three"></p>
    
      <button id='slot-start' onclick='startSlot()'>START</button>
      <button id='slot-stop' onclick='stopSlot()'>STOP</button>
    
      <button id='slot-start-two' onclick='startSlotTwo()'>START</button>
      <button id='slot-stop-two' onclick='stopSlotTwo()'>STOP</button>
      
      <button id='slot-start-three' onclick='startSlotThree()'>START</button>
      <button id='slot-stop-three' onclick='stopSlotThree()'>STOP</button>
    </div>
  </body>
</html>

属性とは、その要素になんらかの設定を付け加えるものです。書き方は下記の通り。

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

サンプルコードに使われている属性を見てみましょう。

charset …… 文書の文字エンコーディングを指定します。これを指定することで、文字化けを防ぐことができます。

コンピュータは、文字を数字で管理しています。この文字と数字の対応表が文字エンコーディングです。HTML5では、UTF-8が推奨されています。

class …… 要素に名前をつけます。同じ要素が複数ある場合、区別が容易になります。同じ文書内で同じclass名を何度も使うことができます。

id …… こちらも要素に名前をつけるための属性です。classとの違いは、同じ文書内で同じid名は一度しか使えない点です。CSSでは、classよりidでの設定が優先されます。

onclick …… 要素をクリックしたときに行う処理を指定できます。サンプルコードでは、JavaScriptの関数を呼び出しています。

他にも多くの属性があります。少しずつ覚えていきましょう。

CSSやJavaScriptについては、またの機会に。

コメント

タイトルとURLをコピーしました