HTMLの構造 ― タグ・属性・入れ子

導入

スクレイピングの相手は HTML です。情報を取り出すには、まず HTML が「どういう形をしているか」を知る必要があります。

説明

HTML は タグ で囲まれた入れ子構造です。次の小さな例を見てみましょう。

<div class="product">
  <h2 class="name">りんご</h2>
  <span class="price" data-currency="JPY">120</span>
  <a href="/items/apple">詳細</a>
</div>

• <h2>...</h2> … 開始タグと終了タグで中身を囲みます。h2 がタグ名。
• class="name" … タグに付いた属性。class や id は要素を見分ける目印になり、スクレイピングで最重要です。
• href="/items/apple" … リンク先を表す属性。リンクURLを集めるときに使います。
• <div> の中に <h2> や <span> が入っているように、要素は入れ子になります。この親子関係をたどって目的地まで進みます。

スクレイピングのコツは、「取りたい情報が、どのタグの・どの属性を目印にすれば見つかるか」を先に観察することです。ブラウザの開発者ツール（多くのブラウザで F12、要素を右クリック→「検証」）を使うと、実際のページの HTML 構造を確認できます。

やってみよう

普段見ているサイトで、価格や見出しを右クリックして「検証」を選んでみましょう。その要素がどんなタグ（span・div など）で、どんな class を持っているかを観察するのが、スクレイピングの第一歩です。