コンテンツ
初心者必見、基本中の基本タグ
こんにちは、ホームページ制作のオイゾウです！
HTMLの概念がだいたい分かってきたところで、これからは実際に具体的なノウハウを使ってご自身でホームページを作っていく段階になりますが、今回は初心者の方にまず最低限知っておいて頂きたいタグをご紹介します。
前回「HTMLタグの種類を覚えよう～ヘッダ情報」ではhead要素（<head></head>）内に記述する要素についてでしたが、今回はbody要素（<body></body>）内に記述する、実際にブラウザに表示される部分のタグになります。
もちろんここで紹介する4つのタグ以外にもたくさんタグを知ってなければならないのですが、最初からいきなりたくさん覚えるのは大変なので、まずは使用頻度の高いタグからしっかり覚えて、あとはコーディング（記述すること）しながら必要に応じて徐々に理解していきましょう！
pタグ（段落）
pはparagraph（パラグラフ）の頭文字で、段落を作成するためのタグです。
pタグの前後は改行されます。
ちなみに、単に改行したい場合は毎回pタグを使わず、<br>という改行タグを使いましょう。
例
[html]<p>しのだ屋は創業82年です。さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。川越に来た際には是非立ち寄ってください。</p>[/html]この段落の中に改行を入れたいとき、
[html]<p>しのだ屋は創業82年です。</p>
<p>さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。</p>
<p>川越に来た際には是非立ち寄ってください。</p>[/html]
このように、単に改行目的でpタグを使うのは構文的に良くありませんので、
[html]<p>しのだ屋は創業82年です。<br>
さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。<br>
川越に来た際には是非立ち寄ってください。</p>[/html]
改行したい場合は<br>タグを使いましょう！
実際には以下のように表示されます。
しのだ屋は創業82年です。
さつま芋を使った和菓子や和風の食器、小物などのお土産を販売しています。
川越に来た際には是非立ち寄ってください。
hタグ（見出し）
hはheading（見出し）の略で、見出しを意味するタグです。
h1、h2、h3、h4、h5、h6と、1〜6まであって、数字が小さくなるほど重要度が高まります。
つまり、h1が最も重要な見出しタグになります。
見出しを効果的に使うことにより、整理された読みやすい文章構成となり、SEO的にもとても好影響となるため、状況に応じて適切に使っていきましょう。
例
pタグだけだとこのようになります。
[html]<p>しのだ屋のこだわり</p>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<p>贈り物にも喜ばれます</p>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<p>伝統と旬の融合</p>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html]
これがブラウザでは以下のような表示になります。
しのだ屋のこだわり
素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。
贈り物にも喜ばれます
当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。
伝統と旬の融合
江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。
見出しタグを使うと、
[html]<h3>しのだ屋のこだわり</h3>
<p>素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。</p>
<h3>贈り物にも喜ばれます</h3>
<p>当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。</p>
<h3>伝統と旬の融合</h3>
<p>江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。</p>[/html]
このように表示されます。
しのだ屋のこだわり
素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。
贈り物にも喜ばれます
当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。
伝統と旬の融合
江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。
とても読みやすい構成になりましたね！
実際にはこの<h3>タグにスタイルを指定しているため、見出しの下に青い下線が入っています。
特にスタイルを指定してない状態であれば、単純に文字が太く大きくなります。
aタグ（リンク）
アンカータグ。
別のファイル（ページ）や同ページ内の違う場所にリンクを貼るために使います。
クリック（スマホの場合はタップ）すると、指定したURLに移動します。
例えば
[html]<a href=“https://oizo.jp/sample/osusume.html”>ここをクリックしてください</a>[/html] このように書くと、実際には以下のように表示されますので、試しにクリックしてみてください。
ここをクリックしてください
ちなみに「osusume.html」のソースは以下になります。
[html]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>しのだ屋のおすすめ商品</title>
<meta name="description" content="小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？">
<meta name="keywords" content="和菓子,芋,まんじゅう,お土産">
</head>
<body>
<h1>名物「芋まんじゅう」</h1>
<p>小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？</p>
<p>容量：12個入り</p>
<p>販売価格：2,000円</p>
<p><a href=“https://oizo.jp/sample/index.html”>最初のページに戻る</a></p>
</body>
</html>[/html]
imgタグ（画像）
image（イメージ）の略で、画像を表示するためのタグです。
[html]<img src=“◯◯◯” />[/html] この「◯◯◯」の部分に、表示する画像のURLを入れます。今回は「manju.jpg」という芋まんじゅうの画像を表示してみます。
[html]<img src=“https://oizo.jp/sample/images/manju.jpg” />[/html]
これを、
先ほどの「osusume.html」という「しのだ屋のおすすめ商品」ページに入れてみましょう。
<html>
<head>
<meta charset="utf-8">
<title>しのだ屋のおすすめ商品</title>
<meta name="description" content="小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？">
<meta name="keywords" content="和菓子,芋,まんじゅう,お土産">
</head>
<body>
<h1>名物「芋まんじゅう」</h1>
<p>小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？</p>
<img src="https://oizo.jp/sample/images/manju.jpg" />
<p>容量：12個入り</p>
<p>販売価格：2,000円</p>
<p><a href="https://oizo.jp/sample/index.html">最初のページに戻る</a></p>
</body>
</html>[/html] 12行目に入れてみました。
これをブラウザで表示すると、以下のようになります。
名物「芋まんじゅう」
小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか？
容量：12個入り
販売価格：2,000円
FTPやCSSも今後覚えましょう
いかがでしたでしょうか？
今回はHTMLの必須なタグ4つを紹介しました。
これで「見出し」「段落」「アンカー（リンク）」「画像」を表示できるようになりましたので、見栄えはさておきこれだけでしっかりとした構成のHTML文書になります。
ただ、ここまでの説明だけでは実際に同じような形で表示することができません。
例えば
- index.html
- osusume.html
- manju.jpg
この3つのファイルを、一体どうやってウェブ上に公開すればいいのかという説明をまだできてません。
例えば芋まんじゅうの画像は、
[html]<img src=“https://oizo.jp/sample/images/manju.jpg” />[/html]
上記のようなURLの場所にあるわけですが、ではこの場所にどうやって画像をアップロードすればいいのでしょうか？
それは「初めてのホームページ作りに必要な知識：HTMLとは？」でも軽く触れましたが、FTPという通信を行なう必要があり、そのためにFTPソフトを使ってローカル（自分のパソコン）からサーバにそれらのファイルをアップロードすることで初めてウェブに公開されます。
その仕組みや方法はまた別の機会に説明するとして、まずは今回紹介したHTMLの基礎的なタグをしっかりと覚えてましょう！
また、今の段階ではとてもシンプルなページですが、CSSというスタイルを指定するための言語によってレイアウトを整えたり、文字や背景に色を付けたり、余白や行間を調整したりできますので、このあたりのことも今後じっくり説明していきたいと思います。
次ページ⇒知ってると便利なHTMLタグ厳選13個（簡単な例文付き）
[…] 次ページ⇒HTMLタグの種類～使用頻度の高い必須のタグ4つ […]
分かりやすくて、喜んで見ました。
ノートにしっかりメモしました、ありがとございます。
>>矢野幸之助様
読んで頂きありがとうございます！
お役に立てれば何よりでございます。