基礎から学ぶPython入門 90日コース | Web・API － Day 51：HTML基礎

Day 51：HTML基礎 ― Webデータを「構造」として見る目を育てる
HTMLとは：Webページの「骨組み」を表す言語
1. 見た目ではなく「構造」を決める役割
タグとは：HTMLの「部品」を表す記号
1. 開始タグと終了タグで囲む
2. よく使うタグのイメージ
属性とは：タグに「追加情報」を付けるもの
1. hrefやclassなどの「ラベル」
DOMとは：HTMLを「木構造」として見る考え方
1. 親子関係でページ全体を捉える
PythonでHTMLをちょっとだけ触ってみる
1. 例：HTML文字列をそのまま扱う
DOMを意識した「読み方」の練習
1. 練習：このHTMLから「リード文」と「本文」を見つける
Day 51ミニテンプレート：HTML構造をコメント付きで眺める
Day 51のまとめ

Day 51：HTML基礎 ― Webデータを「構造」として見る目を育てる

Day 51では、PythonでWebデータを扱うための土台として、 HTML・タグ・属性・DOM をコンパクトに押さえていきます。

「Webページをきれいに表示する技術」というよりも、 「データの構造を表す記法」 としてHTMLを見るのが今日のテーマです。

HTMLとは：Webページの「骨組み」を表す言語

見た目ではなく「構造」を決める役割

HTMLは、Webページの 骨組み（構造） を表現するための言語です。

ここがタイトル
ここが本文
ここがリンク
ここが画像

といった「意味のある区切り」を、タグを使って表現していきます。

PythonでWebスクレイピングやWebデータ取得をするときは、この「骨組み」を理解しておくことで、

「欲しいデータがページのどこにあるか」

を機械的に見つけられるようになります。

タグとは：HTMLの「部品」を表す記号

開始タグと終了タグで囲む

HTMLの基本単位はタグです。

代表的なタグをいくつか見てみましょう。

<h1>これは見出しです</h1>
<p>これは段落（本文）です。</p>
<a href="https://example.com">これはリンクです</a>

タグは、基本的に次の形をしています。

開始タグ：<タグ名>
終了タグ：</タグ名>
中身（コンテンツ）：テキストや他のタグ

例えば <p>...</p> は「段落」を表すタグで、その中に本文テキストが入ります。

よく使うタグのイメージ

h1〜h6：見出し（数字が小さいほど大きな見出し）
p：段落（本文）
a：リンク（アンカー）
img：画像（自己完結タグで終了タグがないことが多い）
div：区切り（ブロック要素）
span：小さな区切り（インライン要素）

PythonでHTMLを解析するときは、

「このページのタイトルは h1 にある」「商品名は span の特定クラスにある」

といったルールを見つけていくことになります。

属性とは：タグに「追加情報」を付けるもの

hrefやclassなどの「ラベル」

タグには、属性を付けることができます。

<a href="https://example.com" target="_blank">リンク</a>
<img src="image.png" alt="サンプル画像">
<p class="lead">これはリード文です。</p>

属性は、次のような役割を持ちます。

href：リンク先のURL
src：画像ファイルのパス
alt：画像の代替テキスト
class：CSSやJavaScriptで扱うための「ラベル」
id：ページ内で一意な識別子

PythonでHTMLを解析するときは、この属性がとても重要です。

「classが product-name のタグを探す」「idが main-content の要素を取得する」

といった形で、欲しい要素をピンポイントで指定できるようになります。

DOMとは：HTMLを「木構造」として見る考え方

親子関係でページ全体を捉える

DOM（Document Object Model）は、 HTMLを 木構造（ツリー） として表現する考え方です。

ざっくり言うと、

ページ全体：html
その中に head と body
body の中に div や h1 や p など
それぞれの中にさらにタグやテキストが入っていく

という「入れ子構造」になっています。

簡単な例を見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ページタイトル</h1>
    <p class="lead">これはリード文です。</p>
    <div id="content">
      <p>本文の1行目です。</p>
      <p>本文の2行目です。</p>
    </div>
  </body>
</html>

これをDOMとして見ると、

html
- head
  - title
- body
  - h1
  - p（class=”lead”）
  - div（id=”content”）
    - p
    - p

という「木構造」になります。

PythonでHTMLを扱うライブラリ（BeautifulSoupなど）は、このDOM構造をたどりながら、

「特定のタグ・属性を持つ要素を探す」「親要素・子要素をたどる」

といった操作を行います。

PythonでHTMLをちょっとだけ触ってみる

ここでは、HTMLそのものの深掘りではなく、「PythonからHTMLをどう見るか」の入り口だけ触れておきます。

例：HTML文字列をそのまま扱う

まずは、Pythonの文字列としてHTMLを持っておきます。

# day51_html_basic.py

html = """
<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ページタイトル</h1>
    <p class="lead">これはリード文です。</p>
    <div id="content">
      <p>本文の1行目です。</p>
      <p>本文の2行目です。</p>
    </div>
  </body>
</html>
"""

print(html)

# day51_html_basic.py

html = """
<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ページタイトル</h1>
    <p class="lead">これはリード文です。</p>
    <div id="content">
      <p>本文の1行目です。</p>
      <p>本文の2行目です。</p>
    </div>
  </body>
</html>
"""

print(html)

Python

この段階では、まだ「ただの文字列」です。次のステップで、この文字列を「DOMとして扱う」方向に進んでいきます。

DOMを意識した「読み方」の練習

HTMLを解析するライブラリを使う前に、目でDOM構造を追う練習をしておくと、後が楽になります。

練習：このHTMLから「リード文」と「本文」を見つける

先ほどのHTMLをもう一度見てみます。

<h1>ページタイトル</h1>
<p class="lead">これはリード文です。</p>
<div id="content">
  <p>本文の1行目です。</p>
  <p>本文の2行目です。</p>
</div>

ここから、

リード文 → p タグで class="lead" の要素
本文 → div タグで id="content" の中にある p タグたち

というルールが見えてきます。

Pythonでスクレイピングするときは、こうした「タグ＋属性＋DOM構造」の組み合わせで、

「どこに何があるか」

を機械的に指定していくことになります。

Day 51ミニテンプレート：HTML構造をコメント付きで眺める

最後に、HTMLの構造を意識しやすいように、コメント付きのサンプルを載せておきます。

<!DOCTYPE html>
<html>
  <head>
    <!-- head はページの設定やタイトルなどを入れる場所です -->
    <title>サンプルページ</title>
  </head>
  <body>
    <!-- body が実際に画面に表示される部分です -->

    <!-- h1 は一番大きな見出しです -->
    <h1>ページタイトル</h1>

    <!-- class="lead" は「リード文」というラベルのイメージです -->
    <p class="lead">これはリード文です。</p>

    <!-- id="content" は、このブロックを一意に識別するためのラベルです -->
    <div id="content">
      <!-- ここから本文の段落が続きます -->
      <p>本文の1行目です。</p>
      <p>本文の2行目です。</p>
    </div>
  </body>
</html>

このように、