2025年6月19日木曜日

HTML（エイチティーエムエル）とは？


HTML（エイチティーエムエル）とは？ Webページの「骨組み」を作る言語

HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。難しい名前ですが、要するに、Webページの「骨組み」や「内容」を定義するための言語です。

例えるなら、家を建てる際の「設計図」や「柱・壁などの構造」にあたります。ここに文章や画像を配置し、見出しをつけたり、リンクを設定したりします。

ポイント1：HTMLは「マークアップ言語」

HTMLは「プログラミング言語」ではありません。よく混同されますが、HTMLは「マークアップ言語」です。

  • プログラミング言語：コンピュータに「こういう処理をしてね」「こういう動きをしてね」と命令し、動的な処理を行うもの（例：JavaScript、Pythonなど）。
  • マークアップ言語：文章の構造や意味を「タグ」を使って「マークアップ（印をつける）」するもの。コンピュータに「これは見出しだよ」「これは段落だよ」と教えることで、ブラウザがその内容を適切に表示できるようにします。

ポイント2：「タグ」が基本中の基本

HTMLは「タグ」を使って記述します。タグは、< と > で囲まれたキーワードです。

ほとんどのタグは、「開始タグ」と「終了タグ」のセットで使います。

例：

HTML
<p>これは段落の文章です。</p>
  • <p>：開始タグ。「ここから段落が始まりますよ」という合図。
  • </p>：終了タグ。「ここで段落が終わりますよ」という合図。
  • <p>これは段落の文章です。</p>：この全体を「要素」と呼びます。

このタグで囲まれた部分（「これは段落の文章です。」）が、ブラウザに「段落」として表示されます。

タグの種類によって、その内容が持つ「意味」や「役割」が変わります。

ポイント3：HTMLの基本的な構造

どんなHTMLファイルでも、基本的なお決まりの構造があります。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私の初めてのホームページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p>これは私の最初のWebページです。</p>
</body>
</html>
  • <!DOCTYPE html>：これは「この文書はHTML5というバージョンのHTMLで書かれていますよ」という宣言です。一番最初に書きます。
  • <html lang="ja"> から </html>：Webページ全体の始まりと終わりを示します。「lang="ja"」は、このページの主要な言語が日本語であることを示します（検索エンジンなどに役立ちます）。
  • <head> から </head>：Webページの設定情報など、ブラウザには直接表示されない情報を書く場所です。
    • <meta charset="UTF-8">：文字化けを防ぐためのおまじない。基本的にこれを書いておけばOKです。
    • <meta name="viewport" ...>：スマートフォンなどの様々なデバイスで表示を最適化するための設定です。
    • <title>私の初めてのホームページ</title>：ブラウザのタブやウィンドウのタイトルバーに表示される名前です。
  • <body> から </body>：Webページに実際に表示される内容（テキスト、画像、リンクなど）をすべて書く場所です。

ポイント4：よく使う主要なタグ

まずはこれだけ覚えておけばOK！という基本的なタグをいくつか紹介します。

  • 見出し：<h1> から <h6>
    • <h1> が一番大きく、<h6> が一番小さい見出しです。ページの重要な見出しには<h1>を使います。
    • 例：<h1>サイトのタイトル</h1>
  • 段落：<p>
    • 文章の段落を作るタグです。
    • 例：<p>これはWebページの本文です。</p>
  • 画像：<img>
    • 画像を挿入するタグです。これは終了タグがありません（単独タグと呼ばれます）。
    • src（Source：ソース）属性で画像ファイルの場所を指定し、alt（Alternative text：代替テキスト）属性で画像が表示されなかったときの代替テキストを指定します。
    • 例：<img src="images/photo.jpg" alt="美しい風景写真">
  • リンク：<a>
    • 他のページやサイトに移動するためのリンクを作るタグです。
    • href（Hypertext REFerence：ハイパーテキスト参照）属性でリンク先のURLを指定します。
    • 例：<a href="https://www.google.com/">Googleのサイトへ</a>
  • リスト：
    • 順序なしリスト（箇条書き）：<ul>と<li>
      • <ul>でリスト全体を囲み、<li>で各項目を指定します。
      • 例：
        HTML
        <ul>
    <li>りんご</li>
    <li>バナナ</li>
    <li>みかん</li>
</ul>
    • 順序ありリスト（番号付き）：<ol>と<li>
      • <ul>の代わりに<ol>を使います。
      • 例：
        HTML
        <ol>
    <li>朝食を食べる</li>
    <li>仕事に行く</li>
    <li>帰宅する</li>
</ol>
  • 改行：<br>
    • 文章中で強制的に改行したい場合に使います。これも終了タグがありません。
    • 例：住所：東京都<br>〇〇区〇〇

ポイント5：「入れ子（ネスト）」構造

HTMLのタグは、まるでマトリョーシカ人形のように、タグの中に別のタグを入れることができます。これを「入れ子（ネスト）」構造と呼びます。

例：

HTML
<body>
    <h1>私の趣味</h1>
    <p>私の趣味は<strong>読書</strong>と<em>映画鑑賞</em>です。</p>
    <a href="https://example.com/blog/">私のブログはこちら</a>
</body>

この例では、<p>タグの中に<strong>（強調）や<em>（斜体）タグが入っていますね。

この入れ子構造を正しく書くことが、Webページをきちんと表示させるためにとても重要です。

ポイント6：実際に手を動かすことが一番の学習法！

HTMLは、コードを書いて保存し、ブラウザで開けばすぐに結果を確認できます。これがHTML学習の大きなメリットです。

  1. テキストエディタ（Windowsならメモ帳、Macならテキストエディット、より高機能なVS Codeなど）を開く。
  2. 上記の基本構造をコピー＆ペーストして、内容を少し変えてみる。
  3. .htmlという拡張子（例：index.html）でファイルを保存する。
  4. 保存したファイルをWebブラウザ（Chrome、Edgeなど）で開く。

これを繰り返すことで、自然とHTMLの書き方や表示の変化を体感でき、理解が深まります。

まずはこれらのポイントを押さえて、実際に簡単なHTMLファイルを作成してみてください。一つずつ理解を深めていきましょう！

-
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)