プログラミング

HTMLの基本と活用法

最終更新： 04/03/2025
1分未満

HTMLの完全かつ包括的な記事を書きます。

HTMLの基本

HTML（HyperText Markup Language）は、ウェブページを作成するための標準的なマークアップ言語です。HTMLはウェブの骨組みを形成し、ページ内のテキスト、画像、リンク、フォーム、テーブルなどを構造的に配置するために使用されます。

関連記事

HTMLのファイルは通常「.html」または「.htm」という拡張子を持ち、ウェブブラウザによって読み込まれて表示されます。HTMLのコードは、タグと呼ばれる構文を用いて記述されます。

1. 基本的なHTML構造

基本的なHTMLドキュメントの構造は以下の通りです：

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLの基本title>
head>
<body>
    <h1>HTMLの基本的な構造h1>
    <p>これがHTML文書の基本的な構造です。p>
body>
html>

この構造にはいくつかの重要な要素があります：

  • : HTML5の文書であることを宣言します。
  • : HTML文書の開始を示します。
  • : メタ情報（文字エンコーディング、タイトルなど）が含まれます。
  • : ウェブページに表示されるコンテンツが含まれます。

2. テキストのフォーマット

HTMLでは、テキストをさまざまな方法でフォーマットできます。以下は、一般的なテキストのタグです：


  • ～

    : 見出しを表します。

    が最も重要な見出しで、

    が最も小さい見出しとなります。

  • : 段落を定義します。

  • : 太字を表します。
  • : 斜体を表します。
  • : 強調を表し、通常は太字で表示されます。
  • : 強調を表し、通常は斜体で表示されます。

例：

html
<h1>これは大見出しですh1>
<p>これは通常の段落です。p>
<p><strong>強調されたテキストstrong>と、<em>斜体のテキストem>があります。p>

3. リスト

HTMLでは、順序付きリストと順序なしリストの両方を作成できます。

  • 順序なしリストは
      タグを使用し、リスト項目は

    • タグで定義します。
    • 順序付きリストは
        タグを使用し、リスト項目は同様に

      1. タグで定義します。

    例：

    html
    <h2>順序なしリストh2>
<ul>
    <li>項目1li>
    <li>項目2li>
    <li>項目3li>
ul>

<h2>順序付きリストh2>
<ol>
    <li>最初の項目li>
    <li>2番目の項目li>
    <li>3番目の項目li>
ol>

    4. 画像とリンク

    画像を表示するには、タグを使用します。リンクを作成するには、タグを使用します。

    例：

    html
    <h2>画像の例h2>
<img src="image.jpg" alt="サンプル画像">

<h2>リンクの例h2>
<a href="https://www.example.com">Exampleリンクa>

    5. フォーム

    フォームは、ユーザーからデータを入力してもらうために使用されます。フォームには、テキストボックスやラジオボタン、チェックボックスなどのさまざまな入力要素があります。フォームを作成するには

    タグを使用します。

    例：

    html
    <h2>フォームの例h2>
<form action="/submit_form" method="POST">
    <label for="name">名前:label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">メールアドレス:label>
    <input type="email" id="email" name="email">
    <br>
    <input type="submit" value="送信">
form>

    6. テーブル

    HTMLでテーブルを作成するには、

    ,

    ,

    ,

    		タグを使用します。


    • : テーブル全体を囲むタグ

      • : テーブルの行
      • : テーブルのセル（データ）
      		• : テーブルの見出しセル

      例：

      html
      <h2>テーブルの例h2>
<table border="1">
    <tr>
        <th>名前th>
        <th>年齢th>
    tr>
    <tr>
        <td>山田太郎td>
        <td>30td>
    tr>
    <tr>
        <td>佐藤花子td>
        <td>25td>
    tr>
table>

      7. CSSとの組み合わせ

      HTMLは通常、CSS（Cascading Style Sheets）と組み合わせて使われます。CSSを使用することで、HTML要素にスタイルを適用することができます。CSSは、