間違えやすいHTMLタグを比較!

2017.06.26

22 PV

Web制作に欠かせないHTMLタグですが、しっかり意味を理解して使っているでしょうか?私もなんとなくこれは、ここに入れれば…ということはわかり始めましたが、実際なぜここにこのタグを使うのかしっかり考えたことはありませんでした。ちょっとした違いですが、間違えやすい、勘違いしやすいタグ、今回は、HTMLタグについて書いていきたいと思います。

 HTMLとは

HTMLとはハイパーテキスト・マークアップ・ランゲージと呼ばれる、マークアップ言語の一つです。.htmlという拡張子がHTMLファイルとなります。インターネット上で公開されている、ウェブサイトはほとんどHTMLで作成されています。そして今は、HTML5という仕様になっています。HTML4でのHTML文書が改良され、ウェブアプリケーションを開発するための要素など新たな機能が追加されています。また、文章構造をより明確に示すことができます。また、framesetやframeタグを使っているフレームを利用したタグが廃止されていることも特徴です。そのため、疑似フレームなどをつかうことが必要となりました。

そしてタグとは、文字を<>で囲むことによって指示を与えるものです。ここの文字は大きくしたり、画像を入れたり、リンクを追加したり、さらにリストを作ったり…と様々なことを指示することができます。細かい装飾となるとCSSで指定し、タグで囲まれているところに反映します。試しに右クリック→ページソースを表示をやってみると分かりますが、沢山の<>で囲まれているソースコードが表示されているのが分かります。これがHTMLタグです。

タグの記入方ですが、開始は<>で囲み、終わりは</>で囲むことによってその間にある要素が実際にWebに反映されます。終わりに/をつけ忘れると、Webページが崩れてしまうので、つけ忘れがないように気をつけなければなりません。

 属性について

例えば

<font color=”blue”>属性</font>

このタグだと、colorと書かれている部分が属性(アトリビュート)となります。タグをより細かく効果の指示を出したり、具体的に指示を出したりすることができます。そして属性は多くの場合、属性値を指定する必要があります。属性値とは、上記の場合だと、””で囲まれているblueの部分です。分かりやすく見ると

<font>→開始タグ
</font>→終了タグ
color→属性
blue→値

となります。fontタグにcolorという属性を与え、それにblueという値を指示しています。また、半角スペースを入れることにより、複数の属性を与えることもできます。

間違えやすいタグの比較

次は間違えやすいタグの比較をしてみます。

 divとsectionとarticleの違いとは?

HTML5より、sectionやarticleといったHTML要素が導入されました。HTML4以前はなんでもdivでくくっていました。しかしHTML5から、sectionやarticleが登場したことにより、より明確に文章構造をコンピュータに伝えることが可能となりました。divといったい何が違うのか?その違いについてです。

 div

このタグはブロック要素といい、このタグだけでは特に意味をもちません。しかし、<div></div>で囲った部分を一つのかたまりとして扱うことができます。例えば、ここはヘッダー、ここはフッターなどと、見えない線で区切りを入れているイメージです。使い場所としては、headerやfooterなどが使えない部分となります。ここには、この要素があるよと、コンピュータに伝えるために、これらの要素があります。divは要素が囲めないときのためにあるということが分かりますね。

しかし、最初にも話したように、divには特に意味を持たないので、入れることができるときは出来るだけ、headerなどに優先的に入れることが必要となります。divはその後になります。

 section

sectionとは文章の章や節などのように、見出しとそれに関する内容というように範囲を指定する場合に使います。divより目的がしっかりとしており、主に見出しなどに使われています。そのため、sectionを使う場合には、中に要素の中にはh1~h6要素を使って見出しをいれなければなりません。

タグを使うか迷った際には、中にh1~h6を入れるかどうかで判断すると良いと思います。また、必ずしもsectionを使った方がいいとは限りません。レイアウトが目的の場合はdivを使用した方がいいという場合もあります。

article

sectionと似ているタグですが、根本的な部分が違います。これは『自己完結した内容』に対したものに用いるタグです。例えば、ブログやニュースの記事などを想像してみてください。1つ、1つ並んでいますが、全く別の内容となっています。sectionは本のように1つのものに対して見出しをつけ、並べていますが、articleは1つ1つが完結していることになります。

特に要素を持たない場合は「div」、独立したコンテンツならarticle、そうでなければsectionということになります。場合によって使い分けていくことが大切です。

divとpの違いとは?

使っていて、たまに悩むのがdivとpの使い分けです。どのような違いがあるのでしょうか?

 pタグとは

pとはParagraphといい、段落を指定するためのタグです。<p>〜</p>で囲まれたタグは一つの段落として扱われます。HTMLでは文章を囲む際に多く使用され、文章だけでなく画像を囲むことも可能です。divは一つのかたまりとして扱う、pは段落を指定して扱う。どちらとも要素を囲むことに使われています。ブロック要素という点が同じですね。
しかし大きな違いとしては、各ブロック要素の間に1行空白ができるかどうかという点です。pタグだと、文章終了後に1行空白ができます。

しかしdivは改行はできますが、空白が空くことがありません。pタグは中に別のブロック要素を入れることができませんが、divは中にpタグを入れることができます。つまり、divタグは入れ子をすることが可能です。
使い分けとしては、改行させたい場合はpタグ、装飾したい場合はdivタグを使うと使い分けることが大切です。

また、似たようなタグにspanというタグがありますが、これは特定の文字などを装飾したい場合に使用します。divやpと違いインライン要素となるため、pやdivなどの要素の中で使います。インライン要素とブロック要素の違いは、改行が入るか入らないかの違いとなります。使い勝手が良さそうなdivタグですが、先ほどにも書いたように、あまり意味を持たないタグですので、とりあえずと使うのはおすすめしません。入れることができる場合には、適切なタグを使うことが必要です。どうしても使えない場合のみにdivを使います。似ているようで、使い方が違うタグということが分かりました。

 まとめ

いかがでしたでしょうか?見た目はちょっとした違いですが、実際に反映させるとなると根本的に違う要素ということがわかりました。タグの違いが分かれば、悩むことも少なくなるはずです。綺麗なコーディングができるように、これからも勉強してしっかり理解していきたいと思います。

このエントリーをはてなブックマークに追加

筆者

A.Yabe

Bigmac制作部に所属。まだまだひよっこなので、早く一人前になれるよう、勉強の日々です。覚えることは沢山ありますが、新しい知識が増えることがとても楽しいなと感じます。ぼんやりと空を見上げていると、気持ちがリフレッシュし、新しいアイデア浮かんだりするので好きです。好きなデザインに出会えると、恋をしたようにドキドキが止まりません。人の心を射止めるようなデザインができるように頑張っていきたいです。よろしくお願いします。

筆者が最近執筆した記事