【HTML入門】初心者向けに基本構造と主要タグの使い方を解説！

この記事では、HTMLの基本構造と主要な要素について詳しく学ぶことができます。

HTMLドキュメントの骨格から、テキスト、リスト、リンク、画像、テーブル、フォームなどの要素の使い方まで、ウェブページ作成に必要な基礎知識を網羅的に解説しています。

また、セマンティック要素や属性の重要性についても理解を深めることができます。

HTML入門
CSS入門
JavaScript入門

HTMLとは？

HTMLの定義と役割

HTMLは「HyperText Markup Language」の略で、ウェブページの構造を定義するマークアップ言語です。その主な役割は:

ウェブページの基本構造を作成する
テキストに意味を持たせる
ページ内の要素を構造化する

HTMLの基本構造

HTMLは「タグ」を使用して文書の構造を定義します:

タグは<>で囲まれた要素名で表される
多くのタグは開始タグと終了タグのペアで使用される
タグによってテキストや要素に意味が付与される

例:

<h1>見出し</h1>
<p>段落のテキスト</p>

主要なHTMLタグ

よく使用されるHTMLタグには以下のようなものがあります:

<h1> 〜 <h6>: 見出し
<p>: 段落
<a>: リンク
<img>: 画像
<div>: コンテンツのグループ化
<strong>: 強調（太字）

HTMLとCSSの関係

HTMLが文書の構造を定義するのに対し、CSSはその見た目やレイアウトを制御します。両者を組み合わせることで、機能的で視覚的に魅力的なウェブページを作成できます。

HTMLの学習と活用

HTMLは比較的シンプルな言語であり、ウェブ開発の基礎として広く使用されています。初心者でも学びやすく、ウェブサイト制作やコンテンツ管理の基本スキルとして重要です。

HTML基本構文

HTMLの基礎構文について、学ぶべき主要な項目を解説をします。

HTML文書の基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ページタイトル</title>
</head>
<body>
    <!-- ページの内容 -->
</body>
</html>

<!DOCTYPE html>: HTML5文書であることを宣言します。
<html lang="ja">: HTML文書の開始を示し、言語を日本語に設定します。
<head>: ページのメタデータを含む部分です。
<body>: ページの実際の内容を含む部分です。

HTML文書は、必ずこの基本構造を持つ必要があります。これにより、ブラウザはこの文書がHTML5であることを理解し、適切に解釈することができます。

head要素

表示画面

<head>
    <title>ページタイトル</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ページの説明">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

<title>: ブラウザのタブに表示されるページタイトルを設定します。
<meta charset="utf-8">: 文字エンコーディングをUTF-8に指定します。
<meta name="viewport">: モバイルデバイスでの表示を最適化します。
<meta name="description">: 検索エンジンに表示される説明文を設定します。
<link>: 外部CSSファイルを読み込みます。
<script>: 外部JavaScriptファイルを読み込みます。

head要素は、ページの設定や外部リソースの読み込みを行う重要な部分です。SEOやレスポンシブデザインにも影響を与えます。

body要素

見出し

表示画面

<h1>最も重要な見出し</h1>
<h2>次に重要な見出し</h2>
<h3>3番目に重要な見出し</h3>

<h1> から <h6> まで、重要度に応じて使い分けます。
一つのページには通常、一つの <h1> のみを使用します。
見出しの階層構造は、ページの構造を示すために重要です。

見出しは、ページの構造を明確にし、ユーザーと検索エンジンの両方にとって重要な要素です。適切に使用することで、ページの可読性とSEOが向上します。

テキスト

表示画面

<p>これは段落です。</p>
<p>これは<strong>強調</strong>された文字です。</p>
<p>この文章には<br>改行が含まれています。</p>

<p>: 段落を表します。
<strong>: テキストをさらに強く強調します（通常太字で表示）。
<br>: 改行を挿入します。

テキスト要素は、ウェブページの主要なコンテンツを構成します。適切に構造化することで、読みやすさと意味の伝達が向上します。

<ul>
    <li>順序なしリストの項目1</li>
    <li>順序なしリストの項目2</li>
</ul>

<ol>
    <li>順序付きリストの項目1</li>
    <li>順序付きリストの項目2</li>
</ol>

<dl>
    <dt>用語1</dt>
    <dd>用語1の説明</dd>
    <dt>用語2</dt>
    <dd>用語2の説明</dd>
</dl>

<ul>: 順序なしリスト（箇条書き）を作成します。
<ol>: 順序付きリスト（番号付きリスト）を作成します。
<li>: リストの各項目を表します。
<dl>, <dt>, <dd>: 定義リストを作成します。用語とその説明を組み合わせるのに適しています。

リストは情報を整理して表示するのに適しており、ユーザーが内容を素早く把握するのに役立ちます。

リンク

表示画面

<a href="https://www.example.com">外部リンク</a>
<a href="page.html">内部リンク</a>

<a>: アンカー要素を作成し、他のページやリソースへのリンクを設定します。
href 属性: リンク先のURLを指定します。

リンクは、ウェブの基本的な機能の一つで、ページ間の移動や外部リソースへのアクセスを可能にします。

画像

<img src="image.jpg" alt="画像の説明">

<img>: 画像を挿入します。
src 属性: 画像ファイルのパスやURLを指定します。
alt 属性: 画像の代替テキストを指定します。画像が表示できない場合や、スクリーンリーダーで読み上げる際に使用されます。

画像は視覚的な情報を提供し、ページの魅力を高めます。適切な alt テキストを設定することで、アクセシビリティも向上します。

テーブル

表示画面

<table>
    <tr>
        <th>見出し1</th>
        <th>見出し2</th>
    </tr>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
    </tr>
</table>

<table>: テーブル全体を定義します。
<tr>: テーブルの行を定義します。
<th>: テーブルのヘッダーセルを定義します。
<td>: テーブルのデータセルを定義します。

テーブルは、データを行と列で整理して表示するのに適しています。複雑なデータ構造を視覚的に分かりやすく提示できます。

フォーム

表示画面

<form action="/submit" method="post">
    <input type="text" name="username">
    <textarea name="message"></textarea>
    <select name="option">
        <option value="1">選択肢1</option>
        <option value="2">選択肢2</option>
    </select>
    <button type="submit">送信</button>
</form>

<form>: フォーム全体を定義します。
<input>: テキスト入力フィールドなど、様々な入力要素を作成します。
<textarea>: 複数行のテキスト入力領域を作成します。
<select> と <option>: ドロップダウンリストを作成します。
<button>: クリック可能なボタンを作成します。

フォームは、ユーザーからの入力を受け取るための重要な要素です。適切に構造化することで、ユーザビリティとアクセシビリティが向上します。

セマンティック要素

表示画面

<header>
    <nav>
        <ul>
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">概要</a></li>
        </ul>
    </nav>
</header>
<main>
    <article>
        <h1>記事タイトル</h1>
        <p>記事の内容</p>
    </article>
    <aside>
        <h2>関連情報</h2>
        <p>サイドバーの内容</p>
    </aside>
</main>
<footer>
    <p>© 2024 サイト名</p>
</footer>

<header>: ページまたはセクションのヘッダー部分を定義します。
<nav>: ナビゲーションリンクのセクションを定義します。
<main>: ページの主要なコンテンツを含むセクションを定義します。
<article>: 独立して配布可能なコンテンツを定義します。
<aside>: メインコンテンツに関連するが、分離可能な内容を定義します。
<footer>: ページまたはセクションのフッター部分を定義します。

セマンティック要素は、ページの構造に意味を持たせ、検索エンジンやスクリーンリーダーなどがコンテンツを正しく解釈するのに役立ちます。

属性

<div class="container">
    <p id="unique-paragraph" style="color: blue;">スタイル付きの段落</p>
</div>

class 属性: 要素にクラスを割り当て、CSSでスタイルを適用したり、JavaScriptで操作したりするのに使用します。
id 属性: 要素に一意の識別子を割り当てます。ページ内で一度しか使用できません。
style 属性: インラインでCSSスタイルを適用します。

属性は要素に追加情報を提供し、スタイリングや動作の制御に使用されます。適切に使用することで、柔軟なデザインと機能が実現できます。

<!-- これはコメントです。ブラウザには表示されません。 -->

HTMLコメントは、コード内に注釈を追加するために使用されます。
ブラウザには表示されませんが、ソースコードを見ると確認できます。
開発者間でのコミュニケーションや、コードの説明に役立ちます。

コメントは、コードの可読性を高め、他の開発者（または将来の自分）がコードを理解する助けになります。ただし機密情報はコメント内には含めないよう注意が必要です。

これらの要素と属性を適切に組み合わせることで、構造化された意味あるHTML文書が作成できます。実際にコードを書いて練習し、各要素의意味と使い方를深く理解することが効果的なウェブ開発의基礎となります。

まとめ

HTMLは、ウェブページの構造を定義するマークアップ言語です。
基本構造は<!DOCTYPE html>、<html>、<head>、<body>要素で構成されます。
主要な要素には見出し、段落、リスト、リンク、画像、テーブル、フォームなどがあります。
セマンティック要素を使用することで、ページの構造に意味を持たせることができます。
属性を適切に使用することで、要素にスタイルや機能を追加できます。

HTMLは、ウェブ開発の基礎となる重要な言語です。適切に構造化されたHTMLは、ユーザビリティ、アクセシビリティ、SEOの向上につながります。

この記事で学んだ基本的な要素と構造を理解し、実践することで、効果的なウェブページを作成するスキルを身につけることができます。

HTMLの基礎を固めることは、CSSやJavaScriptなどの他のウェブ技術を学ぶ上でも重要な第一歩となります。継続的な学習と実践を通じて、ウェブ開発のスキルを磨いていくことが大切です。

HTML入門
CSS入門
JavaScript入門