ホームページの更新を進めると、HTMLタグに触れる機会が増えますね。

WEB制作会社のスタッフのように、専門知識を身に着けていなければ更新は難しいものです。

簡単なテキスト更新（過去記事リンク）や画像更新（過去記事リンク）はすでにご説明しましたが、今回はホームページの更新に最低限知っておくべきHTMLタグの基礎の基礎をご説明いたします！

※この記事内のHTMLは XHTML を想定しております

HTMLタグは開始タグと終了タグで一対

HTMLタグは、かぎかっこのように開始タグと終了タグで一対となります。

例）

お気づきかもしれませんが、開始タグに「/」を付けることで終了タグとなるのです。

つまり、

というように、開始タグ<p>と終了タグ</p>のような組み合わせですね。

必ず一対である必要がありますので、

というように、HTMLタグの開始と終了が一対にならず、またがってしまうのは間違いです。

正しくは

となります。

お客様から「ホームページが壊れた！」と、表示のズレに関するご連絡のほとんどは

• 終了タグが書かれていない
• 一対にならずにHTMLタグがまたがっている

のどちらかですね。

開始タグには「オマケ」がつく！？

HTMLタグには属性と呼ばれる「オマケ」のようなものがつくことがあります。

例えば

と、id=”"やclass=”"のようについてきます。

id=”"やclass=”"とは、CSS（スタイルシート）を使うための名札のようなもので、HTMLとは別のファイルで、style.cssのように「.css」という拡張子がついています。

CSSは文字の色や大きさを変えたり太文字にしたりと、指示内容に名前が付けられています。

その名前が先ほどの名札と合えば文字の色が変わったりするのですね！

更新を行う中で属性を使うことはほとんどないと思いますが、テキスト打ち変え時など、「オマケ」を消してしまうとレイアウトが崩れることもありますので、必ず残しておきましょう。

よく使われるタグ一覧の一部をご紹介

サイトの中でよく使われるタグ、更新の時にも使うことが多くなるタグをご紹介します。

Pタグ

<p></p>

段落のタグです。このタグを入れると文字が改行しますが、改行目的で使うのはやめましょう。
文章の構成上、段落を変える時にだけ使うようにします。

BRタグ

<br />

改行のタグです。段落は分けないが、改行したいときに使います。連続して使うことはありませんので、ご注意ください。また、これは終了タグを必要としないタグです。

DIVタグ

<div></div>

ブロック要素といわれるタグで、このタグを使うとpタグのように改行されますが、このタグ自身は意味をもちません。通常は<div id=”head”></div>のように、スタイルシート（CSS）と合わせて使われることが多いです。

SPANタグ

<span></span>

インライン要素といわれるタグで、divタグと同じくこのタグ自身は意味をもちませんが、改行はされません。こちらもスタイルシート（CSS）と合わせて使われることが多いです。

見たしタグ

<h1></h1>

見出しのタグです。<h1>を一番大きな見出しとしてつかい、最大<h6></h6>まで使うことができます。基本的に<h1>はページ内に1つとして、その後の見出しは小さな数字から順番に使います。

TABLEタグ

<table></table>

スタイルシート（CSS）が普及される前はホームページのレイアウトに使われることが多かったのですが、本来は表を作るためのタグです。

このタグだけでは意味をなさず、

<table>
<tbody>
<tr>
<th>社名</th>
<th>所在地</th>
<th>電話番号</th>
</tr>
<tr>
<td>株式会社WEB-SEED</td>
<td>大阪府大阪市住之江区南港北2-1-10 ATCビルITM棟4階H-3</td>
<td>06-6614-3321</td>
</tr>
</tbody>
</table>

のように、<tr><th><td>といったタグと一緒に使われます。

リストタグ

<ul></ul>

リストを作る時に使うタグです。こちらもこのタグだけでは意味をなさず、

<ul>
	<li>ホームページ制作業務</li>
	<li>システム開発業務</li>
	<li>SEO業務</li>
	<li>コンサルティング業務</li>
</ul>

というように<li>と一緒に使われます。

強調タグ

<strong></strong>

文字を強調させるタグで、見た目も太い文字に変わります。

これらタグはほんの一部ですが、テキストや画像などちょっとした更新であれば、これらタグを知っているだけでも「これ、知っている！」と、作業のハードルが下がるかもしれませんねっ。

ツイート