50代主婦ゆきんこのチャレンジブログ: HTMLの基本パーツを詳しく解説！

HTMLの基本パーツを詳しく解説！

🏠HTMLページの基本構造

<!DOCTYPE html>
<html>
  <head>
    <!-- ページの設定や情報を書く部分 -->
  </head>
  <body>
    <!-- 実際に画面に表示される内容を書く部分 -->
  </body>
</html>

🧠<head> タグとは？

<head> は、ウェブページの「頭」のようなもの。目に見えない設定や情報を書く特別な場所です。

head タグでできること

ページのタイトルを決める
文字の種類を設定する
CSSを読み込む
ページの説明を書く

例：

<head>
  <!-- ブラウザのタブに表示されるタイトル -->
  <title>私のウェブサイト</title>
  
  <!-- 日本語を正しく表示するための設定 -->
  <meta charset="UTF-8">
  
  <!-- ページの説明 -->
  <meta name="description" content="楽しいウェブページです">
</head>

👀<body> タグとは？

<body> は、画面に実際に表示される内容をすべて入れる場所。人間で言えば、体の中身のようなものです。

bodyに入れるもの

文章
見出し
画像
リンク
その他すべての表示したいもの

🔗<a> タグ（リンクタグ）の使い方

リンクを作るためのタグです。別のページに飛べるボタンや文字を作れます。

<!-- 別のウェブサイトへのリンク -->
<a href="https://www.google.com">Googleへ行く</a>

<!-- 同じウェブサイト内の別のページへのリンク -->
<a href="profile.html">プロフィールページ</a>

href は、リンク先のアドレスを指定する属性
タグで囲んだ文字や画像がクリックできるようになります

🖼️<img> タグ（画像タグ）の使い方

画像を表示するためのタグです。

<!-- インターネット上の画像 -->
<img src="https://example.com/picture.jpg" alt="風景の写真">

<!-- 自分のウェブサイトの画像 -->
<img src="my-photo.jpg" alt="私の写真">

重要な属性：

src: 画像のアドレス（どの画像を表示するか）
alt: 画像の説明（目の不自由な人や、画像が読み込めない時に使用）

🏷️クラスとは？

クラスは、HTMLの「タグにつける名札」のようなもの。同じ名札（クラス）をつけた要素に、同じデザインを適用できます。

<!-- クラスをつける -->
<p class="blue-text">青い文字になります</p>
<div class="blue-text">これも青い文字になります</div>

<!-- CSSで装飾 -->
<style>
  .blue-text {
    color: blue;
  }
</style>

🧩要素（エレメント）とは？

要素は、開始タグと終了タグで囲まれた部分全体のこと。

<!-- <p>が開始タグ、</p>が終了タグ。この全体が「段落要素」 -->
<p>これは段落の要素です</p>

<!-- imgタグは特別で、終了タグがない「空要素」 -->
<img src="photo.jpg">

🌈実際の使用例

<!DOCTYPE html>
<html>
  <head>
    <title>私の趣味ページ</title>
    <meta charset="UTF-8">
    <style>
      .hobby-title { color: green; }
    </style>
  </head>
  <body>
    <h1>私の好きなこと</h1>
    
    <p class="hobby-title">好きな場所</p>
    <img src="favorite-place.jpg" alt="好きな場所の写真">
    
    <p>詳しく知りたい人は、<a href="details.html">こちら</a>をクリック！</p>
  </body>
</html>