- カテゴリー： ホームページ作成
- 公開：
これだけは絶対覚えたい！基本のHTMLタグ
本記事では、ホームページ作成の第一歩として、HTMLの基本をしっかりと押さえるために、数多く存在するHTMLタグの中から「初心者が最初に必ず覚えておくべき」基本タグを厳選し、その役割や具体的な使い方をわかりやすく解説します。HTMLに初めて触れる方にとっては、専門用語が少し難しく感じられるかもしれませんが、専門知識がなくても理解できるように、丁寧かつ初心者目線で説明していきますので、どうぞ安心して読み進めてください。
この記事を読み終える頃には、ホームページの基本構造をしっかりと理解し、簡単なホームページを自分で作り始めるための基礎知識が身についているはずです。
▼目次
はじめに：ホームページの「骨組み」を作ろう
みなさんが普段見ているホームページ、例えば好きなアーティストの公式サイトや、よく使うSNS、調べ物をするサイトなど、これらはすべて HTML (HyperText Markup Language) という言語が基礎となって作られています。HTMLは、ホームページの「骨組み」を作るための言語です。文章に見出しをつけたり、段落を分けたり、画像を表示したり、他のページへのリンクを貼ったり、といったホームページに表示される様々な要素（コンテンツ）を「これは見出しだよ」「これは画像だよ」と意味付けし、構造を定義する役割を持っています。
HTMLだけでも簡単なホームページは作れますが、通常は他の技術と組み合わせて使われます。例えば、ホームページの見た目、つまり色や文字の大きさ、レイアウトなどを整えるのは CSS (Cascading Style Sheets) の役割です。そして、ホームページに動きをつけたり、もっと複雑な機能（例えば、ボタンを押したらメニューが開く、入力内容をチェックするなど）を実現するのが JavaScript というプログラミング言語です。
この3つを家に例えると、HTMLが家の骨組み（柱や壁の構造）、CSSが内装や外装（壁紙の色、家具の配置）、JavaScriptが電気や水道などの設備（スイッチで電気がつく、蛇口から水が出る）のようなイメージです。
HTML文書の「お約束」：基本構造を知ろう
HTMLでホームページを作り始める前に、まず知っておきたいのが「HTML文書の基本的な構造」です。どんなHTML文書も、いくつかの決まった要素が、決まった順番で並んでいます。これは、ホームページを作る上での「お約束」のようなものです。
<!DOCTYPE html>：HTML5ですという宣言
すべてのHTML文書は、必ずこの <!DOCTYPE html> という記述から始まります。これは、「この文書はHTML5という最新バージョンのルールに従って書かれていますよ」とブラウザ（ホームページを見るためのソフト、例えばChromeやSafariなど）に伝えるための宣言文です。大文字でも小文字でも大丈夫ですが、通常はこの形で書きます。これはHTMLタグではありませんが、文書を正しく表示させるために絶対に必要な記述です。まず最初にこれを書く、と覚えておきましょう。
<html>：ここからHTMLが始まる
<!DOCTYPE html>の次に来るのが <html> タグです。これは、HTML文書全体の「ルート（根っこ）」となる要素で、この <html> タグの中に、ホームページのすべての内容が書かれます。<html> タグは、必ず </html> という終了タグとペアで使います。
lang属性：ページの言語を指定しよう
<html> タグには、langという属性を付けて、そのページが主に何語で書かれているかを指定することが強く推奨されています。例えば、日本語のページなら <html lang=”ja”>、英語のページなら <html lang=”en”> のように書きます。これは、特に目の不自由な方が使うスクリーンリーダー（画面の情報を音声で読み上げるソフト）が、ページの内容を正しい言語で読み上げるためにとても重要です。また、Googleなどの検索エンジンがページの内容を理解するのにも役立ちます。
<head>：ページの設定情報（見えない部分）
<html> タグの中には、まず <head> タグが来ます。この <head> タグの中には、ホームページそのものには直接表示されない情報、例えばページのタイトル、文字コードの種類、CSSファイルへのリンクなど、文書に関する設定や情報（メタデータ）を記述します。ここは、いわばページの「裏方」設定をする場所です。
<head> の中に書く主なタグ
<title>：ページのタイトルを決めよう（必須）
これは、そのウェブページのタイトルを定義するタグで、必ず書かなければいけません。ここで指定したタイトルは、ブラウザのタブや、お気に入り（ブックマーク）に登録したときの名前、Googleなどの検索結果にも表示されます。ページの主題がわかるような、具体的で分かりやすいタイトルをつけましょう。
例： <title>〇〇中学校 公式ウェブサイト</title>
<meta charset=”UTF-8″>：文字化けを防ごう
<meta> タグは、ページに関する様々な情報を指定するためのタグです。たくさん種類がありますが、まず絶対に覚えておきたいのが、文字コードを指定する <meta charset=”UTF-8″> です。これを書いておかないと、日本語が正しく表示されず文字化けしてしまうことがあります。UTF-8 は、現在世界中で最も広く使われている文字コードなので、基本的にはこれを指定しておけばOKです。
<link rel=”stylesheet” href=”style.css”>：CSSファイルを読み込もう
<link> タグは、現在のHTMLファイルと、外部のファイル（リソース）を関連付けるためのタグです。最もよく使われるのが、CSSファイルを読み込むときです。rel=”stylesheet” で「これはスタイルシート（見た目を定義するファイル）ですよ」と示し、href 属性でCSSファイルの場所を指定します。CSSについては別の機会に詳しく学びますが、HTMLとセットで使われることが多いので、この <link> タグの使い方も覚えておくと便利です。
<body>：ページに表示される内容（見える部分）
<head> タグの次に来るのが <body> タグです。この <body> タグの中に書かれたものが、実際にブラウザの画面に表示されるすべてのコンテンツになります。見出し、文章、画像、リスト、リンクなど、ユーザーが見るものはすべて、この <body> と </body> の間に書きます。HTML文書には、<body> 要素は必ず1つだけ存在します。
<head> はページの裏方設定、<body> はページの表舞台、という役割分担をしっかり理解しておきましょう。
文章の基本：見出しと段落
ホームページの基本は、なんといっても文章（テキスト）です。HTMLには、文章を読みやすく、そして意味が伝わるように構成するためのタグが用意されています。
見出し（ <h1> ～ <h6> ）：文章のタイトルをつけよう
見出しタグ (<h1>、<h2>、<h3>、<h4>、<h5>、<h6>) は、本や新聞の見出しのように、文章のセクション（まとまり）のタイトルを表すためのタグです。<h1> が一番大きな見出し（大見出し）で、数字が大きくなるにつれて <h6> が一番小さな見出しになります。
重要なポイント
見た目だけじゃない！意味が大事
見出しタグは、単に文字を大きくするためのものではありません。これらのタグを使うことで、「ここから新しい話題が始まるよ」「この部分はこういう内容だよ」という文章の構造を明確に示すことができます。これは、人が読むときに分かりやすいだけでなく、検索エンジンがページの内容を理解したり 、スクリーンリーダーを使っている人がページの内容を把握しやすくするためにも非常に重要です。
順番を守ろう
基本的に、ページ全体を表すタイトルとして <h1> を1つだけ使い、その下の階層のセクション見出しに <h2>、さらにその下の小見出しに <h3>… というように、順番に使うのがルールです。いきなり <h1> の次に <h3> を使う、といったレベル飛ばしは避けましょう。
文字サイズはCSSで
文字の大きさを変えたい場合は、見出しタグではなく、CSSの font-size というプロパティを使うのが正しい方法です。
例：HTML
<h1>ホームページの作り方</h1>
<h2>ステップ1：HTMLで骨組みを作る</h2>
<h3>基本的な構造</h3>
<p>...</p>
<h3>見出しと段落</h3>
<p>...</p>
<h2>ステップ2：CSSで見た目を整える</h2>段落（ <p> ）：文章のまとまりを作ろう
<p> タグは、文章の段落 (Paragraph) を表すタグです。文章のひとまとまりを <p> タグで囲むことで、「ここからここまでが一つの段落ですよ」と示すことができます。ブラウザは通常、<p> タグで囲まれた部分の前後に少しスペース（余白）を入れて表示してくれます。
なぜ段落分けが大切なの？
読みやすさアップ
長い文章も、適切に段落に分けることで、どこで意味が区切れているかが分かりやすくなり、格段に読みやすくなります。
アクセシビリティ向上
スクリーンリーダーも段落を認識できるので、段落ごとに読み飛ばしたり、内容を把握しやすくなったりします。
注意点
スペース目的で使わない
見た目のスペースを空けたいという理由だけで、中身が空の <p></p> を使うのはやめましょう。これは意味的におかしいだけでなく、スクリーンリーダーの利用者を混乱させる可能性があります。スペースの調整はCSSの margin や padding というプロパティで行います。
例：HTML
<p>HTMLはウェブページの骨組みを作る言語です。タグを使って要素の意味を示します。</p>
<p>CSSは見た目を整える言語です。色やレイアウトを指定できます。</p>改行（ <br> ）：文の途中で改行したいとき
<br> タグは、段落の途中など、強制的に改行を入れたい場合に使います。<p> タグが文章の「意味的なまとまり」を作るのに対し、<br> は単純に見た目上、行を変えるだけです。
特徴
終了タグ不要
<br> タグは「空要素」と呼ばれ、開始タグだけで完結し、</br> のような終了タグは必要ありません。
使いどころ
詩や住所のように、改行そのものに意味がある場合に使うのが適切です。段落間のスペースを作るために <br> を連続して使うのは、<p> と同様に避けるべきです。レイアウト調整はCSSの役割です。
例：HTML
<p>〒100-0000<br>東京都千代田区<br>〇〇ビル 1F</p>見出し（ <h1> ～ <h6> ）と段落（ <p> ）を正しく使うことで、見た目が整うだけでなく、文章の構造と意味が明確になり、誰にとっても分かりやすいホームページになります。
テキストの強調：重要性やニュアンスを伝えよう
文章の中で、特に読者に注目してほしい部分や、重要だと伝えたい箇所がありますよね。HTMLには、そういったテキストを強調するためのタグがあります。見た目が似ているものもありますが、それぞれ「意味」が異なるので、使い分けが大切です。
重要性（ <strong> ）：本当に大事なことを伝えたい
<strong> タグは、その部分が非常に重要であること、重大であること、または緊急性が高いことを示すためのタグです。単に文字を太くするだけでなく、「ここは本当に重要ですよ！」という強い意味合いを持ちます。
どんな時に使う？
- 警告メッセージ（例：「注意：この操作は取り消せません。」）
- 文章の中で、特に鍵となるキーワード
- ユーザーに必ず守ってほしいルール
ブラウザでは通常、<strong> で囲まれた文字は太字で表示されますが 、それはあくまで見た目のデフォルト設定。このタグの一番の目的は、意味的な重要性を示すことです。
例：HTML
<p>提出期限は<strong>来週月曜日</strong>です。遅れないように注意してください。</p>強調（ <em> ）：ニュアンスを変えたい、アクセントを置きたい
<em> タグ (Emphasis) は、文脈の中で特定の単語やフレーズを強調し、ニュアンスを少し変えたいときや、他との対比を示したいときに使います。話し言葉で、特定の単語を少し強く発音するようなイメージです。
どんな時に使う？
- 「それは絶対に必要だ」（「絶対に」を強調）
- 「リンゴは好きだけどミカンは苦手だ」（ミカンを対比的に強調）
ブラウザでは通常、<em> で囲まれた文字は斜体（イタリック体）で表示されますが 、これも <strong> と同様、見た目よりも意味的な強調が目的です。
例：HTML
<p>この機能を使うには、<em>事前の</em>登録が必要です。</p>使い分けが大切な理由
<strong> と <em> は、どちらもテキストを目立たせる効果がありますが、その「意味」が違います。
- 本当に重要なら <strong>
- ニュアンスを変えたい、アクセントを置きたいなら <em>
この使い分けは、アクセシビリティ（様々な人が情報にアクセスしやすくすること）の観点からも重要です。スクリーンリーダーは、<strong> や <em> タグを読み上げる際に、声のトーンを変えるなどして、その強調の意味合いをユーザーに伝えることがあります。 単に文字を太字や斜体にしたいだけで、特別な意味を持たせたいわけではない場合は、HTMLタグではなく、CSSの font-weight: bold; や font-style: italic; を使うのが正しい方法です。HTMLは意味と構造、CSSは見た目、という役割分担を意識しましょう。
リスト：情報を整理して見やすく表示
情報を箇条書きで整理して表示したいとき、HTMLではリストタグを使います。リストには大きく分けて「順序がないリスト」と「順序があるリスト」の2種類があります。
順序なしリスト（ <ul>、<li> ）：順番が関係ない箇条書き
<ul> タグ (Unordered List) は、項目の順番に特に意味がないリストを作るときに使います。買い物リストや、持ち物リスト、特徴の列挙などに適しています。
使い方
- リスト全体を <ul> タグと </ul> タグで囲みます。
- リストの各項目（アイテム）を <li> タグ (List Item) と </li> タグで囲みます。
ブラウザでは通常、各項目の先頭に「・」（黒丸、ビュレットと呼ばれます）のようなマーカーが表示されます。このマーカーの種類は、CSSを使えば自由に変更できます。
例：HTML
<p>今日の買い物リスト：</p>
<ul>
<li>牛乳</li>
<li>卵</li>
<li>パン</li>
</ul>順序付きリスト（ <ol>、<li> ）：順番が重要な箇条書き
<ol> タグ（Ordered List）は、項目の順番に意味があるリストを作るときに使います。料理のレシピの手順、ランキング、テストのステップなど、順番が重要な場合にぴったりです。
使い方
- リスト全体を <ol> タグと </ol> タグで囲みます。
- リストの各項目を <li> タグと </li> タグで囲みます。
ブラウザでは通常、各項目の先頭に数字（1、2、3…）が表示されます。この番号の形式（アラビア数字、ローマ数字、アルファベットなど）も、CSSで変更できます。
例：HTML
<p>カップラーメンの作り方：</p>
<ol>
<li>フタを半分まではがす</li>
<li>粉末スープとかやくを入れる</li>
<li>お湯を内側の線まで注ぐ</li>
<li>フタをして3分待つ</li>
<li>よくかき混ぜて完成！</li>
</ol><li> タグ：リストの「中身」
<li> タグは、<ul> または <ol> の中で使われ、リストの一つ一つの項目を表します。<li> タグの中には、単純なテキストだけでなく、<p> タグ（段落）や <img> タグ（画像）、さらには別のリスト（ <ul> や <ol> ）を入れることもできます。
リストの入れ子：リストの中にリストを作る
リストの中に、さらに別のリストを入れること（入れ子、ネスト）も可能です。<li> タグの中に <ul> や <ol> を書くことで、階層構造を持った複雑なリストも作れます。
例：HTML
<ul>
<li>飲み物
<ul>
<li>水</li>
<li>お茶</li>
</ul>
</li>
<li>食べ物
<ol>
<li>おにぎり</li>
<li>サンドイッチ</li>
</ol>
</li>
</ul><ul> と <ol>、どっちを使えばいいか迷ったら、「項目の順番を入れ替えても意味が通じるか？」と考えてみてください。順番が関係なければ <ul>、順番が重要なら <ol> を使うのが基本です。リストタグを上手に使って、情報を分かりやすく整理しましょう。
リンク：ページとページをつなげよう！
HTMLの「H」は HyperText の略ですが、この「ハイパーテキスト」の最大の特徴は、文書（ページ）同士や、ページ内の特定の場所を「リンク」でつなげられることです。このリンクを作るのが <a> タグ（アンカータグと呼ばれます）です。
アンカータグ（ <a> ）：クリックできるリンクを作る
<a> タグは、テキストや画像を囲むことで、そこをクリック可能なリンクに変身させます。ただし、<a> タグだけではどこにも飛べません。どこにリンクさせるかを指定するために、href 属性が絶対に必要です。
href 属性：リンク先を指定する（必須）
href 属性（Hypertext Reference の略）は、リンクをクリックしたときにどこにジャンプするか（リンク先のURLや場所）を指定するための属性です。href には、いくつかの書き方があります。
絶対URL：他のウェブサイトへリンク
https:// や http:// から始まる、完全なウェブアドレスを指定します。他の人のウェブサイトや、大きなサービスのトップページなどにリンクするときに使います。 例： <a href=”https://www.google.com/”>Google</a>
相対URL：同じサイト内の別ページへリンク
今いるHTMLファイルから見て、リンク先のファイルがどこにあるかを相対的な位置関係で指定します。自分のウェブサイトの中で、別のページにリンクするときによく使われます。
- 同じフォルダにある profile.html へ： <a href=”profile.html”>プロフィール</a>
- images というサブフォルダの中の map.html へ： <a href=”images/map.html”>地図</a>
- 一つ上のフォルダにある index.html へ： <a href=”../index.html”>トップページへ</a>
ページ内リンク：同じページの中の特定の場所へジャンプ
長いページで、特定のセクションにすぐに移動したいときに便利です。# の後に、移動したい場所にある要素に付けられた id 属性の値を書きます。 例： <a href=”#section3″>セクション3へジャンプ</a>（移動先の見出しなどに <h2 id=”section3″> のように id を付けておく必要があります）
target 属性：リンクをどこで開くか指定する
target 属性は、リンクをクリックしたときに、リンク先のページをどのタブ（またはウィンドウ）で開くかを指定します。
- _self（デフォルト）：同じタブで開く
- 何も指定しない場合、または target=”_self” と書いた場合は、現在開いているタブの中でページが切り替わります。
- _blank：新しいタブで開く
- target=”_blank” と書くと、新しいタブ（または新しいウィンドウ。ブラウザの設定によります）でリンク先のページが開きます。外部のウェブサイトへのリンクを設定するときによく使われます。ユーザーが元のページに戻りやすいようにするためです。
- 例： <a href=”https://ja.wikipedia.org/” target=”_blank”>Wikipedia（新しいタブで開く）</a>
リンクの「テキスト」が超重要
<a> タグで囲むテキスト（または画像）は、ユーザーが「このリンクをクリックしたらどこへ行くのか」を判断するための非常に重要な手がかりです。
やってはいけない例
「詳しい情報については、<a href=”details.html”>こちら</a>をクリックしてください。」
なぜダメなのでしょうか？
- 分かりにくい： 「こちら」だけでは、クリックする前にどこに飛ぶのか予測できません。
- アクセシビリティの問題： スクリーンリーダーを使っている人は、ページ内のリンクだけを読み上げて内容を把握することがあります。「こちら」というリンクがたくさんあると、どれがどのリンクなのか全く分からなくなってしまいます。
良い例
「詳しい情報については、<a href=”details.html”>製品の詳細ページ</a>をご覧ください。」
このように、リンク先のページの内容が具体的にわかるような言葉をリンクテキストにするのがベストです。わかりやすいリンクテキストは、ホームページをずっと使いやすく、そして誰にとっても親切なものにします。
画像：ホームページに彩りを加えよう！
文章だけだと、ちょっと寂しいですよね。ホームページに画像を入れることで、ぐっと見栄えが良くなり、情報も伝わりやすくなります。HTMLで画像を埋め込むには <img> タグを使います。
画像タグ（ <img> ）：画像をページに表示する
<img> タグは、指定した場所に画像を表示するためのタグです。これは <br> タグと同じ「空要素」なので、</img> のような終了タグは必要ありません。画像を表示するには、いくつかの重要な属性を指定する必要があります。
src 属性：どの画像を表示するか指定する（必須）
src 属性（Source の略）は、表示したい画像ファイルがどこにあるか（ファイルの場所、パスやURL）を指定するための必須の属性です。この src 属性がないと、ブラウザは何の画像を表示すればいいか分からず、何も表示されません。src に指定するパスの書き方は、<a> タグの href と同じように、相対パスと絶対パスがあります。
相対パス
HTMLファイルからの相対的な位置で指定します。
- HTMLファイルと同じフォルダにある dog.jpg： src=”dog.jpg”
- images というサブフォルダの中にある cat.png： src=”images/cat.png”
- 一つ上のフォルダの common フォルダの中にある logo.gif： src=”../common/logo.gif”
絶対パス
ウェブサイトのルート（一番上の階層）からのパスや、他のサイトにある画像の完全なURLで指定します。
例： src=”/common/images/header.jpg” や src=”https://example.com/photo.jpg”
通常、自分のウェブサイトで使う画像は、他のサイトから直接リンクするのではなく、自分のサーバーに画像をアップロードして、相対パスかサイト内での絶対パスで指定するのが一般的です。
alt 属性：画像が表示されないときの「代わりの説明」
alt 属性（Alternative text の略）は、何らかの理由で画像が表示されなかった場合に、代わりに表示されるテキストを指定するための属性です。これは、ウェブアクセシビリティ（誰もが情報にアクセスしやすくすること）において非常に重要な役割を持っています。
なぜ alt がそんなに大切なの？
スクリーンリーダーのため
目の不自由な方が使うスクリーンリーダーは、この alt 属性に書かれたテキストを読み上げて、画像の内容を音声で伝えます。alt がないと、画像が伝えたい情報が全く伝わらなくなってしまいます。
画像が表示されなかったときのため
ネット接続が悪かったり、画像の場所が間違っていたりして画像が表示されない場合、代わりに alt のテキストが表示されます。これにより、ユーザーは「ここには本来こういう画像があったんだな」と理解できます。
検索エンジン（SEO）のため
Googleなどの検索エンジンは、画像そのものを見ることはできません。alt 属性に書かれたテキストを手がかりにして、その画像が何についてのものかを理解します。
上手な alt テキストの書き方
具体的に、でも短く
画像の内容を正確に、かつ分かりやすく説明します。 例： alt=”公園でボールを追いかける柴犬”
「～の画像」は不要
alt=”犬の写真” のように書く必要はありません。スクリーンリーダーはそれが画像だと分かっているので、「犬」だけで十分です。
リンク画像の場合
画像がリンクになっている場合は、画像の説明ではなく、リンク先の機能や目的を書きます
例： <a href=”cart.html”><img src=”cart.png” alt=”買い物かごを見る”></a>
飾りの画像の場合
ページの飾り付けのためだけで、特に意味を持たない画像（背景模様や区切り線など）の場合は、alt 属性の値を空っぽにします（alt=””）。こうすると、スクリーンリーダーはその画像を無視してくれます。
ファイル名はダメ
alt=”IMG_1234.jpg” のようにファイル名を書くのは意味がありません。
alt 属性は「あれば良い」ものではなく、すべての <img> タグに必要です。画像が伝える情報をしっかりと言葉で補うことで、あなたのホームページはもっと多くの人にとって使いやすく、親切なものになります。
width と height 属性：画像のサイズを指定しよう
width 属性で画像の横幅、height 属性で画像の高さをピクセル単位（画面上の点の数）で指定できます。
なぜサイズ指定がおすすめなのか
サイズを指定しておくと、ブラウザはHTMLを読み込んだ時点で「ここにこれくらいの大きさの画像が入るんだな」と場所を確保してくれます。もしサイズ指定がないと、後から画像が読み込まれたときに、ページのレイアウトがガクッとずれてしまう（レイアウトシフトと呼ばれる現象）ことがあります。サイズを指定しておくことで、このガタつきを防ぎ、ユーザーが快適にページを見られるようになります。
例：HTML
<img src="images/cat.png" alt="窓辺で眠る猫" width="300" height="200"><img> タグを使いこなして、魅力的でわかりやすいホームページを作りましょう。
テーブル（表）：情報を整理して見せよう
テストの結果、スポーツの試合結果、商品の価格比較など、情報を整理して、行と列の形式で見やすく表示したいときがありますよね。そんなときに使うのがテーブル（表）です。HTMLでは <table> タグとその仲間たちを使って表を作ります。
テーブルの基本的な骨組み
簡単な表を作るには、主に以下の4つのタグを組み合わせます。
<table>：表全体を囲む
これが表全体の大枠となるタグです。表の内容はすべてこの <table> と </table> の間に書きます。
<tr>（Table Row）：表の「行」を作る
<tr> タグは、表の横一列（行）を作ります。表は、この <tr> がいくつか集まってできています。
<th>（Table Header）：表の「見出しセル」を作る
<th> タグは、表の見出しとなるセル（マス目）を作ります。通常、表の一番上の行や、各行の一番左の列に使われ、その列や行にどんなデータが入るのかを示します。ブラウザは通常、<th> の中の文字を太字・中央揃えで表示します。
<td>（Table Data）：表の「データセル」を作る
<td> タグは、表の実際のデータが入るセルを作ります。具体的な数値やテキストなどをこの <td> の中に書きます。
簡単な表のコード例：HTML
<table>
<tr>
<th>教科</th>
<th>点数</th>
<th>評価</th>
</tr>
<tr>
<td>国語</td>
<td>85</td>
<td>良</td>
</tr>
<tr>
<td>数学</td>
<td>92</td>
<td>優</td>
</tr>
<tr>
<td>英語</td>
<td>78</td>
<td>良</td>
</tr>
</table>このコードを実行すると、ブラウザには以下のような表が表示されます（枠線はCSSで追加する必要があります）。
| 教科 | 点数 | 評価 |
|---|---|---|
| 国語 | 85 | 良 |
| 数学 | 92 | 優 |
| 英語 | 78 | 良 |
ポイント
- まず <table> で全体を囲む。
- <tr> で行を作る。
- 各行の中に、見出しなら <th>、データなら <td> でセルを作る。
- 各行のセルの数（<th> と <td> の合計数）は、基本的に同じになるようにします。
テーブルは何のために使うのか
HTMLのテーブルは、もともとデータを分かりやすく整理して見せるために作られました。スプレッドシート（Excelなど）のような、まさしく「表」形式の情報を表現するためのものです。
注意！ レイアウトには使わないで
昔は、ホームページのレイアウト（要素の配置）を作るためにテーブルが使われていた時代もありましたが、これは今ではやってはいけない古い方法です。なぜなら、
- HTMLコードが複雑になり、後で修正するのが大変になる。
- スクリーンリーダーなどが表の内容を正しく読み上げられなくなり、アクセシビリティが悪くなる。
- ページの表示速度が遅くなることがある。
ホームページのレイアウトには、CSSのFlexboxやGridといった、もっと新しくて便利な技術を使うのが現在の主流です。テーブルは、あくまでデータを表形式で見せたいときだけに使いましょう。
最低限覚えたいHTMLタグ早見表
ここまでに解説してきた、ホームページ作成の基本となるHTMLタグを一覧表にまとめました。HTMLを学び始めたばかりの皆さんが、まず覚えるべきタグです。困ったときや、どのタグを使えばいいか忘れたときに、この表を見返してみてください。
| タグ | 読み方 | 解説 | 使い方の例 | ポイント・注意点 |
|---|---|---|---|---|
| <!DOCTYPE html> | ドックタイプ | HTML5文書であることを宣言します。必ず最初に書く。 | <!DOCTYPE html> | タグではない。大文字小文字は区別しない。 |
| <html> | エイチティーエムエル | HTML文書全体のルート（大元）。lang属性で言語を指定。 | <html lang=”ja”>…</html> | この中に<head>と<body>が1つずつ入る。 |
| <head> | ヘッド | ページに表示されない設定情報（タイトル、文字コードなど）を入れる場所。 | <head>…</head> | ユーザーには見えない裏方部分。 |
| <body> | ボディ | ページに実際に表示される内容（文章、画像など）をすべて入れる場所。 | <body>…</body> | ユーザーに見える表舞台。 |
| <title> | タイトル | ブラウザのタブや検索結果に表示されるページのタイトル（<head>内、必須）。 | <title>私のホームページ</title> | ページの内容がわかる具体的で短いタイトルが良い。 |
| <meta> | メタ | 文字コード (UTF-8) などを指定する（<head>内）。 | <meta charset=”UTF-8″> | charset=”UTF-8″ は文字化け防止に必須。 |
| <link> | リンク | 外部ファイル（主にCSS）を読み込む（<head>内）。 | <link rel=”stylesheet” href=”style.css”> | CSSで見た目を整えるときに使う。 |
| <h1>～<h6> | エイチワン等 | 見出し。<h1>が一番大きく重要。数字が大きいほど小さい見出し。 | <h2>自己紹介</h2> | 文章の構造を示す。見た目だけで使わない。順番を守る。 |
| <p> | ピー | 段落。文章のひとまとまり。 | <p>これは段落です。</p> | 読みやすさ、アクセシビリティのために適切に使う。スペース目的で使わない。 |
| <br> | ビーアール | 強制改行（空要素）。 | 一行目<br>二行目 | 詩や住所など改行自体に意味がある場合に使う。スペース目的で使わない。 |
| <strong> | ストロング | 重要性が非常に高いことを示す（通常太字）。 | <strong>注意：</strong>立ち入り禁止 | 意味的な重要性を伝える。見た目だけならCSSで。 |
| <em> | イーエム | 強調。文脈上のアクセントやニュアンス（通常斜体）。 | それは<em>絶対に</em>必要です | 意味的な強調を伝える。見た目だけならCSSで。 |
| <ul> | ユーエル | 順序なしリスト（点の箇条書き）。 | <ul>…</ul> | 順番が関係ないリストに使う。 |
| <ol> | オーエル | 順序付きリスト（番号の箇条書き）。 | <ol>…</ol> | 順番が重要なリストに使う。 |
| <li> | エルアイ | リストの各項目（<ul>または<ol>の中で使う）。 | <li>りんご</li> | リストの中身。 |
| <a> | エー | ハイパーリンク。href属性でリンク先を指定（必須）。 | <a href=”next.html”>次のページへ</a> | リンクテキストは分かりやすく具体的に。target=”_blank”で新しいタブで開く。 |
| <img> | イメージ | 画像を埋め込む（空要素）。srcで画像場所、altで代替テキストを指定。。 | <img src=”cat.jpg” alt=”眠る子猫”> | altはアクセシビリティに超重要！width/heightも指定推奨。 |
| <table> | テーブル | 表全体を囲む。 | <table>…</table> | データを見やすく整理するために使う。レイアウト目的では使わない。 |
| <tr> | ティーアール | 表の行を作る。 | <tr>…</tr> | この中に<th>や<td>を入れる。 |
| <th> | ティーエイチ | 表の見出しセル（通常、太字・中央揃え）。 | <th>名前</th> | 列や行の見出しに使う。 |
| <td> | ティーディー | 表のデータセル（実際のデータ）。 | <td>山田太郎</td> | 表の中身のデータを入れる。 |
この表にあるタグが、HTMLの基本中の基本です。まずはこれらのタグの役割と使い方をしっかりマスターしましょう。
まとめ：HTMLはホームページの土台
この早見表では、「最低限覚えたいHTMLタグ」として、ホームページを作る上で欠かせない基本的なタグとその使い方を解説してきました。
- HTMLの基本構造
- <!DOCTYPE>、<html>、<head>、<body>
- ページの情報設定
- <title>、<meta charset=”UTF-8″>、<link>
- 文章の構成
- <h1>～<h6>、<p>、<br>
- テキストの強調
- <strong>、<em>
- リスト表示
- <ul>、<ol>、<li>
- リンク
- <a>、href、target
- 画像の表示
- <img>、src、alt、width、height
- 表（テーブル）
- <table>、<tr>、<th>、<td>
これらのタグを覚えるだけでなく、それぞれのタグが持つ「意味」を理解し、適切な場所で正しく使うことがとても大切です。例えば、見出しには見出しタグを使い、重要なら<strong>、単なる箇条書きなら<ul>、画像には必ずaltで説明を付ける、といった具合です。このように、タグの意味を考えてHTMLを書くことを「セマンティックHTML」と呼びます。セマンティックHTMLを心がけることで、
- 人間にとって読みやすく、分かりやすいページになる
- 検索エンジンが内容を正しく理解しやすくなる（SEOにも繋がる！）
- スクリーンリーダーなどの支援技術を使っている人にも情報がきちんと伝わる（アクセシビリティが高まる）
といった、たくさんのメリットがあります。
HTMLは、ホームページを作るための土台となる、とても重要な技術です。この早見表が、皆さんのHTML学習の第一歩になれば嬉しいです。ぜひ、実際にコードを書いて、自分だけのホームページ作りに挑戦してみてください。
ホームページ作成の基本から知りたい方は、まずは「【初心者向け】ゼロからわかるホームページ作成完全ガイド」を読むことをお勧めします。
ホームページ作成を検討している方へ
グーペなら、信頼度アップやブランド強化に有効な独自ドメインのホームページをどこよりも早く簡単に作成できます。
簡単に導入できるホームページ作成サービス1、使いやすいホームページ作成サービス2、利用者満足度3の3部門でNo.14を獲得
- 導入の容易性 ↩︎
- 使用の容易性 ↩︎
- 利用者満足度 ↩︎
- インターネットアンケートによりホームページ作成サービスのうち主要含む10社について比較。日本マーケティング・リサーチ機構調べ。2022年1月調査。 ↩︎
