HTMLとは、Webページを作成するためのマークアップ言語です。初めてHTMLに触れる方にとって、さまざまなタグの意味や使い方を覚えることは少し大変かもしれません。しかし、基本的なタグの使い方を理解すれば、簡単なWebページを自分で作れるようになります。この記事では、HTML初心者が最初に覚えておくべき基本的なタグとその使い方について詳しく解説します。HTMLの基礎知識を身につけて、Webサイト制作の第一歩を踏み出しましょう。
HTMLの基本構造と必須タグ
HTMLファイルを作成する際には、まず基本的な構造を理解することが重要です。HTMLの文書構造は、いくつかの必須タグで構成されています。これらのタグは、Webブラウザにコンテンツをどのように表示するかを指示する役割を持っています。
最初にHTML初心者が理解すべきは、HTMLファイルが「宣言」と「文書構造」で成り立っているという点です。基本的な構造を押さえておくことで、後々複雑なWebページを作る際にも混乱することなく進められます。
DOCTYPE宣言とhtml要素
HTMLファイルの最初に記述するのが「DOCTYPE宣言」です。これはブラウザに対して、このファイルがHTML5で書かれていることを伝えるためのものです。DOCTYPE宣言は必ずHTMLファイルの1行目に記述する必要があり、これがないとブラウザが正しく解釈できない場合があります。現在の標準であるHTML5では、以下のように簡潔に記述します。
DOCTYPE宣言の後には、html要素が続きます。html要素は、head要素とbody要素を含む、HTMLドキュメント全体を囲む要素です。lang属性を使って、文書の主言語を指定することも重要なポイントです。
- DOCTYPE宣言：
- html要素：～
これらの宣言と基本構造は、すべてのHTMLファイルに共通する骨組みとなります。初心者の方は、新しいHTMLファイルを作成するたびに、これらの基本構造を記述する習慣をつけるとよいでしょう。
head要素とbody要素
html要素の中には、「head要素」と「body要素」という2つの主要な部分があります。head要素はWebページの設定や外部リソースの読み込みを行う場所で、ページのタイトルやメタ情報、CSSやJavaScriptの読み込みなどを記述します。一方、body要素は実際にブラウザに表示される内容を記述する場所です。
head要素には、以下のような情報を記述します。これらはページの見た目には直接影響しませんが、SEOや表示方法に大きく関わる重要な要素です。
- title要素：ブラウザのタブに表示されるタイトル
- meta要素：文字コードや説明文などのメタ情報
- link要素：CSSファイルの読み込み
- script要素：JavaScriptの読み込みや記述
body要素には、Webページに実際に表示したいコンテンツをすべて記述します。テキスト、画像、リンク、表などあらゆる表示要素はここに配置します。HTML初心者が最初に学ぶタグの多くは、このbody要素内で使用するものです。
基本的なHTMLファイルの構造例
HTML初心者が理解しやすいように、基本的なHTMLファイルの構造例を示します。この基本構造をテンプレートとして使用することで、新しいHTMLファイルを作成する際の土台となります。まずはこの構造を覚え、そこからさまざまなタグを追加していくとよいでしょう。
以下は、最も基本的なHTMLファイルの構造例です。この骨組みをベースに、body要素内にさまざまなタグを追加していくことで、Webページが完成していきます。
| HTMLコード | 説明 |
|---|---|
| HTML5の宣言 | |
| <html lang=”ja”> | HTML文書の開始と言語指定 |
| <head>…</head> | メタ情報を含むヘッド部分 |
| <body>…</body> | 実際に表示される内容 |
| </html> | HTML文書の終了 |
この基本構造を理解したら、次はbody要素内に配置する基本的なタグについて学んでいきましょう。初心者の方は、まずこの基本構造を覚えることが、HTMLを学ぶ第一歩となります。
文章構造を作るための基本タグ
HTML初心者が最初に学ぶべきタグの中でも、文章構造を形作るためのタグは特に重要です。Webページのコンテンツは主にテキストで構成されるため、見出しや段落などの文章構造を適切に設定することが基本となります。
文章構造を正しく設定することで、読みやすさが向上するだけでなく、検索エンジンにとっても内容を理解しやすいページになります。SEO対策の基本としても、これらのタグの使い方を押さえておくことは非常に重要です。
見出しタグ（h1～h6）
見出しタグは、文書の階層構造を表現するための重要な要素です。h1からh6まで6段階あり、h1が最も重要度が高く、数字が大きくなるほど重要度は下がります。Webページでは通常、h1タグはページの主題を表すタイトルとして1ページに1つだけ使用します。
見出しタグの正しい使い方は、文書の論理的な構造に従うことです。例えば、h1の下にはh2、その下にはh3というように、順番に使用するのがベストプラクティスです。見出しタグを飛ばして使用すると（h1の次にh3を使うなど）、文書構造が不明確になり、読者や検索エンジンに混乱を与える可能性があります。
- h1：ページの主題となる大見出し
- h2：記事の主要セクションの見出し
- h3：h2セクション内の小見出し
- h4～h6：さらに細かいセクションの見出し
HTML初心者の方は、まずh1～h3タグの使い方をマスターすることをおすすめします。これだけでも十分に構造化された文書を作成することができます。
段落タグ（p）
pタグは、段落を表すための基本的なタグです。Webページ上のテキストコンテンツのほとんどはこのpタグで囲むことになり、HTML初心者が最も頻繁に使用するタグの一つです。pタグで囲まれたテキストは、前後に適切な余白が自動的に追加されます。
テキストをそのまま記述するのではなく、適切な長さで段落に区切り、pタグで囲むことで読みやすさが向上します。一般的には、内容のまとまりごとに段落を区切るとよいでしょう。
pタグの基本的な使い方は以下の通りです。必ず開始タグと終了タグのペアで使用します。
- 基本形：<p>テキスト内容</p>
HTML初心者の方は、文章を書く際には必ずpタグを使用する習慣をつけましょう。単にテキストを書くだけでなく、適切にpタグで囲むことで、プロフェッショナルなWebページの基礎が作られます。
リストタグ（ul, ol, li）
リストは情報を整理して表示するのに非常に便利な要素です。HTMLでは主に2種類のリスト（順序なしリストと順序ありリスト）があり、それぞれul要素とol要素で表現します。リストの各項目はli要素（リストアイテム）で記述します。
順序なしリスト（ul）は、項目の順番に特に意味がない場合に使用します。デフォルトでは黒い点（・）が各項目の前に表示されます。一方、順序ありリスト（ol）は、項目の順序に意味がある場合に使用し、デフォルトでは数字が自動的に振られます。
- 順序なしリスト：<ul><li>項目1</li><li>項目2</li></ul>
- 順序ありリスト：<ol><li>手順1</li><li>手順2</li></ol>
リストは入れ子にすることも可能で、複雑な階層構造を表現することができます。例えば、liタグの中に別のulタグやolタグを配置することで、サブリストを作ることができます。
div要素とspan要素
div要素とspan要素は、HTML初心者にとって少し抽象的に感じるかもしれませんが、Webページのレイアウトを作る上で非常に重要な役割を果たします。div要素はブロックレベル要素で、コンテンツをグループ化するための汎用的なコンテナとして機能します。一方、span要素はインライン要素で、テキストの一部に特別なスタイルを適用したい場合などに使用します。
div要素は、ページのセクションやレイアウトの区分けに使用されます。CSSと組み合わせることで、ページの特定の部分にスタイルを適用したり、レイアウトを調整したりすることができます。
- div要素：<div>コンテンツのブロック</div>
- span要素：テキストの中の<span>特定の部分</span>を装飾
HTML初心者の段階では、まずはこれらの要素の基本的な使い方を理解し、徐々にCSSと組み合わせた応用方法を学んでいくとよいでしょう。特にdiv要素は、レスポンシブデザインやレイアウト設計において非常に重要な役割を果たします。
リンクと画像の挿入方法
Webページの基本的な機能として、リンクと画像の挿入は非常に重要です。HTML初心者が最初に覚えるべき基本タグの中でも、特に使用頻度が高いのがこれらのタグです。リンクはWebページ間の接続を可能にし、画像はコンテンツを視覚的に豊かにします。
リンクと画像の適切な使い方を理解することで、情報量が豊富で魅力的なWebページを作成することができます。基本的な記述方法と属性の使い方をしっかりと押さえておきましょう。
アンカータグ（a）によるリンク作成
aタグ（アンカータグ）は、他のWebページや同一ページ内の別の場所へのリンクを作成するためのタグです。aタグで最も重要な属性はhref属性で、これによってリンク先のURLを指定します。リンクテキストは、aタグで囲まれたテキスト部分です。
aタグには他にも様々な属性があります。例えば、target属性を使用すると、リンクをクリックした際の挙動を制御できます。target=”_blank”を指定すると、リンク先が新しいタブで開かれます。
- 基本的なリンク：<a href=”https://example.com”>リンクテキスト</a>
- 新しいタブで開くリンク：<a href=”https://example.com” target=”_blank”>リンクテキスト</a>
- ページ内リンク：<a href=”#section-id”>セクションへ移動</a>
HTML初心者の方は、まずは外部リンクの基本的な作成方法をマスターし、その後ページ内リンクやメールリンクなどの応用的な使い方を学ぶとよいでしょう。リンクはWebの基本的な機能であり、ナビゲーションの重要な要素です。
画像タグ（img）の使い方
imgタグは、Webページに画像を表示するためのタグです。このタグは終了タグが不要な空要素（self-closing tag）の一つで、src属性で画像ファイルのパスを、alt属性で代替テキストを指定します。alt属性は、画像が表示できない場合や視覚障害者向けのスクリーンリーダーで読み上げられる重要な情報です。
画像のサイズは、width属性とheight属性で指定することができます。単位はピクセル数で、どちらか一方だけを指定すると、もう一方は元の画像の比率に合わせて自動調整されます。
- 基本的な画像タグ：<img src=”images/example.jpg” alt=”画像の説明”>
- サイズを指定した画像：<img src=”images/example.jpg” alt=”画像の説明” width=”300″ height=”200″>
HTML初心者が画像を扱う際には、適切なファイル形式（JPG、PNG、GIF、SVGなど）の選択や最適化も重要なポイントです。Webページの表示速度に影響するため、画像は適切なサイズと形式で保存することが推奨されます。
リンク付き画像の作成方法
Webデザインでよく使われる技法として、画像にリンクを設定する方法があります。これは単純にimgタグをaタグで囲むことで実現できます。このような組み合わせは、バナー広告やサムネイル画像を使ったナビゲーションなどで頻繁に使用されます。
リンク付き画像を作成する際には、画像の枠線（ボーダー）に注意が必要です。デフォルトでは、リンクされた画像には青い枠線が表示されることがありますが、これはCSSで制御することができます。
- リンク付き画像：<a href=”https://example.com”><img src=”banner.jpg” alt=”バナー画像”></a>
リンク付き画像を使用する際は、ユーザビリティの観点から、それがクリック可能であることを視覚的に明確にすることが重要です。また、アクセシビリティのためにalt属性を適切に設定することも忘れないようにしましょう。
パスの指定方法（相対パスと絶対パス）
リンクや画像のソースを指定する際には、ファイルの「パス」を正しく設定することが重要です。HTMLでは主に「相対パス」と「絶対パス」の2種類のパス指定方法があり、状況に応じて適切な方法を選択する必要があります。初心者にとっては少し混乱しやすい概念ですが、基本を理解すれば難しくありません。
相対パスは、現在のHTMLファイルからの相対的な位置を指定する方法です。同じサイト内のファイルを参照する場合に便利です。一方、絶対パスは、ファイルの完全なURLを指定する方法で、外部サイトのリソースを参照する場合などに使用します。
| パスの種類 | 記述例 | 説明 |
|---|---|---|
| 相対パス | images/photo.jpg | 現在のディレクトリの下の「images」フォルダ内のファイル |
| 相対パス（上位ディレクトリ） | ../images/photo.jpg | 一つ上のディレクトリの「images」フォルダ内のファイル |
| 絶対パス | https://example.com/images/photo.jpg | 完全なURLで指定したファイル |
| ルート相対パス | /images/photo.jpg | サイトのルートディレクトリからの相対パス |
HTML初心者は、まず基本的な相対パスの使い方を理解し、徐々に他の方法も学んでいくとよいでしょう。特にWebサイトの構造が複雑になると、適切なパス指定が重要になります。
フォームとテーブルの基本
Webページでユーザーからの入力を受け付けたり、データを整理して表示したりするためには、フォームとテーブルの理解が欠かせません。HTML初心者にとっては少し複雑に感じるかもしれませんが、基本的な使い方を押さえておくことで、インタラクティブで情報量の多いWebページを作成できるようになります。
フォームはユーザーからの情報収集に、テーブルはデータの整理された表示に役立ちます。どちらも多くのWebサイトで頻繁に使用される重要な要素です。基本的な構造と使い方をしっかり理解しておきましょう。
フォームの基本構造（form, input）
フォームは、ユーザーからの入力を受け付け、サーバーに送信するための機能です。フォームの基本構造はform要素で定義され、その中にさまざまな入力要素（inputタグなど）を配置します。form要素には、action属性（送信先URL）とmethod属性（送信方法）を指定します。
input要素は、type属性の値によって様々な入力フィールドを作成できます。テキスト入力、チェックボックス、ラジオボタン、送信ボタンなど、多様な入力方式に対応しています。
- 基本的なフォーム：<form action=”/submit” method=”post”>…</form>
- テキスト入力：<input type=”text” name=”username”>
- パスワード入力：<input type=”password” name=”password”>
- ラジオボタン：<input type=”radio” name=”gender” value=”male”> 男性
- チェックボックス：<input type=”checkbox” name=”agree”> 同意する
- 送信ボタン：<input type=”submit” value=”送信”>
HTML初心者は、まず基本的な入力フォームの作成方法を学び、徐々にバリデーション（入力検証）やスタイリングなどの応用技術に進むとよいでしょう。フォームはユーザーとのインタラクションの基本となる重要な要素です。
テーブルの作成方法（table, tr, th, td）
テーブルは、行と列で構成された表形式のデータを表示するための要素です。HTML初心者が覚えるべきテーブルの基本構造は、table要素（テーブル全体）、tr要素（行）、th要素（見出しセル）、td要素（データセル）で構成されています。これらを適切に組み合わせることで、様々な表を作成できます。
テーブルの基本的な構造は以下の通りです。thead要素とtbody要素を使用すると、テーブルの論理的な構造をより明確にすることができます。
- 基本的なテーブル構造：
<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</table>
テーブルには他にも、caption要素（テーブルのタイトル）、colspan属性（列の結合）、rowspan属性（行の結合）などがあり、より複雑な表を作成することも可能です。
基本的なフォーム要素の使い方
フォームには、input要素以外にも様々な要素があります。特にHTML初心者が覚えておくべき基本的なフォーム要素には、textarea（複数行テキスト入力）、select（ドロップダウンリスト）、button（ボタン）、label（ラベル）などがあります。これらを適切に組み合わせることで、使いやすいフォームを作成できます。
また、HTML5では新しいフォーム要素や属性が多数追加されました。例えば、email、url、dateなどの新しいinput typeや、required、placeholder、patternなどの属性があります。これらを活用することで、よりユーザーフレンドリーなフォームを作成できます。
- 複数行テキスト：<textarea name=”comment” rows=”4″ cols=”50″></textarea>
- ドロップダウンリスト：
<select name=”country”>
<option value=”jp”>日本</option>
<option value=”us”>アメリカ</option>
</select> - ラベル：<label for=”username”>ユーザー名：</label><input id=”username” name=”username”>
HTML初心者は、まずこれらの基本的なフォーム要素の使い方を理解し、実際にフォームを作成してみることをおすすめします。実践を通じて理解を深めていくことが重要です。
アクセシビリティを考慮したタグの使い方
フォームやテーブルを作成する際には、アクセシビリティ（すべてのユーザーが利用しやすいこと）を考慮することが重要です。HTML初心者も意識しておくべきアクセシビリティの基本には、適切なラベル付け、論理的な構造化、キーボード操作のサポートなどがあります。これらを実現するために、いくつかの重要なタグと属性を覚えておきましょう。
フォームのアクセシビリティを向上させるには、label要素を使用して各入力フィールドに適切なラベルを付けることが非常に重要です。また、fieldset要素とlegend要素を使用して、関連するフォーム要素をグループ化することも有効です。
- アクセシブルなフォームの例：
<form>
<fieldset>
<legend>個人情報</legend>
<label for=”name”>名前</label>
<input type=”text” id=”name” name=”name”>
</fieldset>
</form> - テーブルでのアクセシビリティ：
<table>
<caption>月間売上</caption>
<thead>…</thead>
<tbody>…</tbody>
</table>
HTML初心者の段階から、アクセシビリティを考慮したマークアップを心がけることで、より多くのユーザーが利用しやすいWebページを作成することができます。これは、Webデザインの基本的な倫理としても重要な考え方です。
まとめ
HTML初心者が最初に覚えるべきタグについて、基本的な使い方から実践的なテクニックまで解説しました。まずはHTMLの基本構造を理解し、文書構造を作るための見出しタグや段落タグの使い方をマスターすることが重要です。
続いて、リンクと画像の挿入方法を学び、Webページに情報と視覚的な要素を追加する技術を身につけることができます。さらに、フォームとテーブルの基本を理解することで、ユーザーとの対話や情報の整理された表示が可能になります。
HTMLの学習は段階的に進めることが大切です。この記事で紹介したタグと使い方をベースに、実際にコードを書いて試してみることで理解が深まります。HTML初心者から一歩進んで、自分だけのWebページを作成する楽しさを味わってください。