ホームページは、「HTMLタグ」を使って作ります。
そのため、「HTMLタグ」を覚えれば、ホームページを自由に作ることができます。
ただ、「HTMLタグってなんだろう」や「どのHTMLタグを覚えたら良いんだろう」と悩むこともありますよね？
そこで、このページでは、よく使うHTMLタグの一覧とその使い方や意味について、分かりやすく解説します。
ホームページを作るなら、ここでお伝えするHTMLタグを覚えれば十分ですよ。
よく使うHTMLタグ一覧
よく使うHTMLタグ一覧をご紹介します。
下記のリンクをクリックすると、それぞれのタグについて、
詳しく解説されたページを見ることができます。
なお、それぞれのHTMLタグの使い方や意味は、下記でも詳しくお伝えしていますので、ぜひ最後までご覧ください。
HTMLタグの基本知識
まずは、HTMLタグの基本知識から、お伝えします。
そもそもHTMLとは？
HTMLは、ホームぺージを作るための「言葉」です。
HTMLを使うと、文字を大きくしたり、画像を入れたり、リンクを作ったりできます。
ホームぺージの土台となる部分を作るのが、「HTML」です。
HTMLタグとは？
HTMLタグは、HTMLの中で使われる特別な「記号」のことです。
これを使って、テキストや画像、リンクなどをホームページに表示することができます。
つまり、HTMLという言葉でホームページの土台を作り、HTMLタグを使って、テキストや画像やリンクなどをホームページに表示するという形ですね。
HTMLタグの仕組み
HTMLタグは、「タグ」という特別な記号で書かれています。
タグは、始まりの部分と終わりの部分があります。
たとえば、<p>タグは、段落のタグです。
そして、</p>のように、始まりのタグと終わりのタグで囲むことで、段落ができます。
HTMLタグの書き方
タグは、下記のように書きます。
- 始まりのタグ：<タグ名>
- 終わりのタグ：</タグ名>
たとえば、段落を作るタグはこのように書きます。
HTMLタグの中の「属性」
タグには「属性」というものをつけることができます。
属性は、タグにいろいろな情報を追加するためのものです。
たとえば、画像を表示するタグ（imgタグ）には、どの画像を入れるかを教える「src」という属性があります。
|
<img src="image.jpg" alt="説明の文字">
|
「終わりのタグ」がいらないタグもある
タグの中には、imgタグのように、「終わりのタグ」がいらないタグもあります。
imgタグは、画像を表示するだけで完結するので、終了タグが必要ないからです。
基本的には、タグは「始まりのタグ」と「終わりのタグ」で囲むように使いますけど、imgタグのように、「終わりのタグ」がいらないタグもあるので注意してください。
よく使うHTMLタグの使い方と意味
ここでは、よく使うHTMLタグの使い方と意味をご紹介します。
タイトルタグ（<title>）
タイトルタグは、ホームページのタイトルを指定するタグです。
このタイトルタグで指定した内容が、ブラウザのタブや検索エンジンの結果に表示されます。
|
<title>ホームぺージ作成ソフトの使い方</title>
|
見出しタグ（<h1>から<h6>）
見出しタグは、文章の中で大事なところを強調するために使います。
そして、見出しタグには、<h1>から<h6>まであります。
<h1>が一番大きくて重要な見出しで、<h6>が一番小さな見出しです。
|
<h1>これは一番大きな見出しです</h1>
<h2>これは二番目に大きな見出しです</h2>
|
フォントタグ（<font>）
フォントタグは、文字の見た目を変えるためのタグです。
たとえば、文字の色やサイズ、フォントの種類を変えることができます。
|
<font color="red">ホームページに掲載する文章</font>
<font size="1">ホームページに掲載する文章</font>
<font face="ＭＳ 明朝">ホームページに掲載する文章</font>
|
ストロングタグ（<strong>）
ストロングタグは、文章を強調するために使うタグです。
ストロングタグを使うと、文章が太字になります。
たとえば、大切な言葉や強調したい部分に使います。
|
<strong>ホームページ</strong>に掲載する文章
|
段落タグ（<p>）
段落タグは、文章を一つのまとまりとして表示するために使います。
段落タグを使うと、文章が見やすくなります。
|
<p>これは段落です。文章をここに書きます。</p>
|
改行タグ（<br>）
改行タグは、文章の中に改行を入れるために使います。
改行を使うことで、文章が読みやすくなります。
リンクタグ（<a>）
リンクタグは、他のページやサイトに移動するためのリンクを作るときに使います。
リンクタグには、「href」という属性を使って、リンク先のアドレスを指定します。
|
<a href="https://toretama.jp/">クリックすると他のページに移動します</a>
|
画像タグ（<img>）
画像タグは、ホームページに画像を入れるために使います。
画像タグには、「src」という属性を使って、画像の場所を指定します。
「alt」という属性も使って、画像の説明を加えることができます。
|
<img src="image.jpg" alt="かわいい猫の画像">
|
テーブルタグ（<table>）
テーブルタグは、表を作るためのタグです。
まず、tableタグを使って、テーブル全体を作ります。
その中に、枠を縦に並べる trタグや、枠を横に並べる tdタグを入れます。
tableタグと trタグ、そして td タグを一緒に使うことで、表を作ることができます。
|
<table>
<tr>
<td>
ホームページに掲載する文章
</td>
</tr>
</table>
|
コンテナタグ（<div>と<span>）
コンテナタグは、文章や他のタグをまとめるために使います。
<div>はブロックレベルのタグで、大きなまとまりを作るときに使います。
<span>はインラインレベルのタグで、小さなまとまりを作るときに使います。
<div>
<h2>これは大きなまとまりです</h2>
<p>この中に段落や他のタグを入れます。</p>
</div>
<span>これは小さなまとまりです</span>
|
正しいHTMLタグの使い方
ここでは、正しいHTMLタグの使い方について、お伝えします。
正しいタグの使い方
HTMLを使うときは、タグを正しく使うことが大切です。
まず、タグはきちんと閉じることが大切です。
始まりのタグ（<h1>など）があったら、終わりのタグ（</h1>など）も忘れずに書きましょう。
これを「タグを閉じる」といいます。
次に、タグを入れ子にすることも覚えておきましょう。
入れ子にするときは、外側のタグを先に閉じます。
|
<p>これは<span>入れ子の例</span>です。</p>
|
SEOに優れたHTMLタグの使い方
SEO（検索エンジン最適化）は、あなたのホームぺージが検索エンジンで上位に表示されるようにするために工夫することです。
タグの使い方を工夫することで、SEOに良い影響を与えます。
たとえば、見出しタグ（<h1>など）を使って、重要な部分をはっきりと示すと、検索エンジンが内容を理解しやすくなります。
また、画像タグ（<img>）に「alt」属性を付けて画像の説明を書くと、画像の内容が分かりやすくなります。
<h1>ウェブページのタイトル</h1>
<p>これは文章の段落です。</p>
<img src="image.jpg" alt="かわいい猫の画像">
|
誰でも使いやすいホームページを作るためのポイント
世の中には、視覚に障がいがある方もいます。
そのような方にも、ホームページの内容が分かるように、ホームページを作ることが大切です。
具体的には、見出しタグを使って、ページの構造を分かりやすくすることが一つのポイントです。
また、画像の「alt」属性を使って、画像の説明をすることも重要です。
<h2>ページのセクションタイトル</h2>
<p>ここにセクションの説明を書きます。</p>
<img src="example.jpg" alt="説明の画像">
|
このように書くことで、「画面読み上げソフト」という特別なソフトを使ってページを見ている人たちも、内容が理解しやすくなります。
基本的なホームページの作成例
ここでは、基本的なホームページの作成例をお伝えします。
基本的なホームページの作成例
まず、基本的なHTMLのコードを書いてみましょう。
このコードを使うと、シンプルなページが作れます。
<!DOCTYPE html>
<html>
<head>
<title>動画で覚える無料ホームぺージ制作講座</title>
</head>
<body>
<h1>こんにちは</h1>
<p>これは私のホームぺージです。</p>
<a href="https://toretama.jp/">ここをクリックすると移動します</a>
<img src="image.jpg" alt="かわいい猫の画像">
</body>
</html>
|
このソースコードは、以下のように書かれています。
- <html>タグ : ウェブページ全体を囲むタグです。
- <head>タグ : ページの情報（タイトルなど）を入れる場所です。
- <body>タグ : 実際に表示される内容を入れる場所です。
- <h1>タグ : 大きな見出しを作るタグです。
- <p>タグ : 段落を作るタグです。
- <a>タグ : リンクを作るタグです。
- <img>タグ : 画像を表示するタグです。
これが、基本的なホームページの形です。
なお、当サイトで無料で配布している「サンプルサイト」を使うと、もっと分かりやすいので、良かったらお使いくださいね。
・当サイトで使用しているサンプルサイトのダウンロード
【まとめ】よく使うHTMLタグ一覧
【よく使うHTMLタグ一覧】使い方や意味をわかりやすく解説の内容は、いかがでしたでしょうか？
ホームページは、「HTML」という言葉を使って作ります。
そして、HTMLの中で使われる特別な記号のことを「HTMLタグ」と言います。
つまり、HTMLという言葉でホームページの土台を作り、HTMLタグを使ってテキストや画像、リンクなどをホームページに表示するという形ですね。
HTMLタグを覚えれば、ホームページに画像を表示したり、リンクを表示したり、自由に変更できるようになります。
当サイトでは、ホームページの作り方を動画で解説していますし、よく使うHTMLタグを「パーツ集」としてご用意しているので、ぜひ活用してくださいね。
・自分で修正できる ホームページの各パーツテンプレート集
