間違えやすいHTMLタグを比較!タグの属性や違いについて

シェア

ツイート

LINEで送る

Pocket

ブックマーク

間違えやすいHTMLタグを比較!タグの属性や違いについて

Web制作に欠かせないHTMLタグですが、しっかり意味を理解して使っているでしょうか?タグの差はちょっとした違いですが、間違えやすい、勘違いしやすいタグ名について書いていきたいと思います。

HTMLとは

HTMLとはハイパーテキスト・マークアップ・ランゲージと呼ばれる、マークアップ言語の一つです。.htmlという拡張子がHTMLファイルとなります。インターネット上で公開されている、ウェブサイトはほとんどHTMLで作成されています。今は、HTML5という仕様になっています。

HTML4でのHTML文書が改良され、ウェブアプリケーションを開発するための要素など、新たな機能が追加されています。また、文章構造をより明確に示すことができます。他にもframesetやframeタグを使っているフレームを利用したタグが廃止されていることも特徴です。廃止された事により疑似フレームなどをつかうことが必要となりました。

タグとは、文字を<>で囲むことによって指示を与えるものです。タグで文字を大きくしたり、画像を入れたり、ボタンを作成したり、リンクを追加したり、さらにリストを作ったり…と様々なことを指示することができます。HTMLタグで装飾を記述する事は可能ですが、構造がごちゃごちゃとしてしまったり、ブラウザによってはレイアウトが崩れてしまいます。細かい装飾はHTMLタグではなくスタイルシートで行っていくようにしていきましょう。

スタイルシートにつきましては、こちらの記事で説明していますので参考にしてください。
CSSとは?〜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></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つが完結していることになります。articleは独立したコンテンツのときに使用するということが分かります。

特に要素を持たない場合は「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を使います。

他にもリスト項目のulとliとolの使い分けや、テーブルタグのセルによってthやtrやtdを使い分けるなどあります。似ているようで、使い方が違うということが分かりました。

タグに迷ってしまった時は

初心者はもちろん慣れていても作業をしていて分からない部分などがでてくると思います。躓いてしまった時は、リファレンスサイトを検索してみましょう。HTMLだけでなく、CSSやPHPについての情報が掲載されているサイトもあります。困った時は活用して、作業の効率をアップしていきましょう。

まとめ

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

シェア

ツイート

LINEで送る

Pocket

ブックマーク

CATEGORY :
サイト制作
tree