HTMLファイルを見てみよう

実際の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>

これは、私が以前作ったスロットアプリのHTML部分です。ブラウザに表示させるとこうなります。

今回は、このコードに使われているタグについて見ていきましょう。

<meta> …… その文書に関する情報(メタ情報)を指定します。

<title> …… 文書にタイトルをつけます。タイトルは、タブに表示されます。

<header> …… ヘッダーであることを示します。HTMLは文書ですので、読む人にわかりやすく書く必要があります。ヘッダータグで囲われていれば、そこがヘッダーであることがわかりやすくなります。

<h1> …… 「h」はheadingのことで、見出しを示します。h1〜h6まであり、重要度によって使い分けます。画像で大きく「SLOT」と表示されている部分です。

<div> …… ひとかたまりの範囲を定義します。大変便利なタグですが、なんでもかんでもこれで囲むと文書がわかりづらくなります。適切なタグがない場合のみ使うようにしましょう。

<p> …… Paragraphの略で、ひとつの段落であることを表します。テキストの本文はこのタグの中に書くことが多いでしょう。

<button> …… ボタンを作成します。画像にある「START」「STOP」と書かれたボタンは、このタグで生成されたものです。

他にも様々なタグがあります。MDNHTMLクイックリファレンスなどのサイトで調べてみてください。次回は、属性について取り上げます。

コメント

  1. […] HTMLファイルを見てみよう実際のHTMLファイルを見てみましょう。tsushima164blog.com2019.11.13 […]

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