最初に覚えておきたい！！HTMLのタグについて

覚えておきたい！！
～HTMLのタグについて～
＜頻出のタグ１５選＞

こちらでは、HTMLを始めてHTMLタグの多さに困ったり、どう使えばよいかわからないといった方にタグを紹介していきたいと思います。

プログラミングを始めようとしている方は、先ず基礎から学ぼうとしていると思います。

HTMLについてどんなものなのか学んだ方なら、次にどんなタグが有るのだろうと、考えるのではないでしょうか？

これまで皆さんが学習してきた勉強は英語においては試験で単語を丸暗記しなければならなかったりと大変な思いをした方も多いのではないかと思います。

HTMLについても、英単語と同じようにタグと呼ばれるものが100種類以上存在します。

『100種類くらい何とか憶えれる！！』と思える方もおられるとは思いますが、HTMLも日々変わってきており、使われなくなるタグも有るのですべてを覚えるのは、かなり非効率だと思います。

ですので、ここではよく使われるタグを用途別に１５個ご紹介していこうと思います。

ここで紹介しないタグでどんなものがあるのか、ご興味ある方は『HTMLタグリファレンス』でご確認頂ければお思います。

HTMLでよく使われるタグ

まず初めに、HTMLを作成する際に多く使用されるHTMLタグを紹介していきます。

それぞれの意味やHTML上での使い方も紹介していきますので、参考にして頂ければと思います。

１.文書情報表すタグ

　1-1.<!DOCUTYPE>

HTMLはバージョンによって使用出るタグの種類が変わってくるのですが、この<!DOCUTYPE>の宣言によってどのバージョンなのかをはっきりさせることが出来るものです。

現在ＨＴＭＬのバージョンは”ＨＴＭＬ５”となっておりあまり意味が無いようにはなってきておりますが、慣例として記述しておくことが望ましいと思います。

　1-2.<html>

<html>は、最初に<html>と記述して、一番最後に</html>と記述しこれで囲われたものは、HTML文書であることを示しています。

◎使用例

<html>
　　<head>
　　<title>文書のタイトル</title>
　　</head>
　　<body>
　　文書の本体
　　</body>
　　</html>

タグの中では最も外に記述するタグであり先にも述べましたが、<html>～</html>と囲むことにより『この中の文書はHTML文書です』とWebブラウザに教えているのです。

HTMLを記述する上で必ず使用するタグの一つです。

　　1-2-1.<head>タグ

<head>タグは、検索エンジン（google,yahoo)やブラウザそして、クローラー（ネット上にいる巡回ロボット）にhtmlの情報を渡すために記述するタグです。

そのため、ユーザー（Webサイトを見る人）には見えないのです。

<head>の中には、<meta>や<title>といったタグが入ります。

　　1-2-2.<meta>タグ

つまり、Webサイトの情報を書き込むタグと言えます。

これを記述しない場合にはワードプレスであれば、サイトの内容の冒頭部分が掲載される形となります。

SEOの観点から考えても入れておいて損は無い部分になると思います。

　　1-2-3.<title>タグ

<title>はそのページのタイトルを決めるタグです。

例えば、下記の画像のようにページ上部にあるタイトルを指定するときに使われます。

<head>の中に記述されるタグの中では特殊で、クローラーにもユーザーにも見ることが出来るタグとなっております。

　1-2-4.<link>タグ

例えば、文章を装飾するCSSのデータを読み込んで、反映するために使われています。

Webフォントの読み込みや、インターネットで検索した際に表示されるWebサイトのアイコン(ファビコン)の読み込みにも使われます。

ここまでが、<head>タグの中に記述されるタグとなります。

２.特定のグループや情報を与えるタグ

仕様例を挙げておきます。

<body>
  <div>
      <p>bodyに記載された情報がブラウザに表示されます</p>
  </div>
   <header>
       <p>ヘッダーには、導入的なコンテンツやナビゲーションの等のグループを表します。</p>
   </header>
   <section>
        <h1>１章の見出し</h1>
        <p>文章</p>
   </section>
   <section>
        <h2>２章の見出し</h2>
        <p>文章</p>
   </section>
   <footer>
       <p>フッターには通常、関連情報へのリンク、著作権情報、コピーライト等を含めます。</p>
   </footer>
</body>

上記がこれから紹介するタグの使用例となります。

もしよければ、こちらを以前のブログ（HTMLとは）で書かせて頂いた方法でブラウザに表示してみて下さい。

では、一つずつ見て行きましょう。

　2-1.<body>タグ

<body>タグはユーザー（サイトを見る方）が見れる情報を書き込む時に使用するタグです。

ただ文書を書いただけだとブラウザに文書だと認識されません！！ですので<body></body>で囲むことでブラウザに『この中に書いてあるのは文書です』と認識させるタグになります。

　　2-1-1.<div>タグ

<div>は、それ自体に意味を持たないタグになります。

主に構成ごとに区切る為に使用します。

<div>~</div>で囲むことにより、囲ったものが一つのグループだとブラウザに認識させることが出来ます。

　　2-1-2.<header>タグ

<header>タグはWebサイトの冒頭にあたる部分を指します。

Yahoo！のトップページのこの部分です。

つまり<header>タグは、ページの上部の部分で使われるタグなのです。

　　2-1-3.<section>タグ

<section>タグは、まとまりをくくる時に使用するタグです。

このタグを使用する主な用途としましては、文章を章分けにする際に使用する時に使われます。

そうすることで、ブラウザに『ここで章分けされている』と伝える事が出来ます。

　　2-1-4.<footer>タグ

<footer>タグは、<header>タグとは反対にフッター(Webサイトの一番下)部分に使用します。

サイトに関する情報、著作権に関する注記、連絡先などが入ります。

今は、SNSのようなリアルタイムで書き込みが更新されるようなサイトが増えてきており、フッターが使用されていないケースもあります。

　　2-1-5.<h1>～<h6>タグ

<h1>～<h6>タグは文章の見出しを表現するタグです。

<h1>が一番大きな文字であり、サイトのメインとなる見出しに使用されます。<h2>～<h6>になるにつれてどんどん小さな文字の見出しになります。

<h6>より小さい見出しタグは有りませんので注意して下さい。と言っても<h6>まで使うことも早々無いのであまり意識する必要はないと思います。

3.文書や画像などを表示するタグ

　3-1.<p>タグ

<p>タグは段落（paragraph)を作成する際に使用するタグです。

<p></p>と文章を囲う事で、段落を作成することが出来ます。

　3-2.<img>タグ

<img>タグは、画像を貼り付ける際に使用するタグです。

配置や大きさの設定はCSSで行うことができます。終了タグが存在しません。(入れるとエラーとなります)

これまでのタグとは記述方法が少し違うので気を付けて下さい。

記述例

<img src="img_1.png">

ブラウザ上では上のようなイラストが表示されます。

　3-3.<a>タグ

<a>タグは、リンク先を指定したり、外部ファイルを表示させたりするときに使われるタグです。

指定したメールアドレスへの送信を行う際にも使用します。

開始タグでリンクしたい内容を属性によって指定し、タグ内にはリンクを貼りたいテキストや画像を入れます。

記述例

<a href="http://example.com/">リンク</a>

上記のように記述するとブラウザ上では下記のように表示されます。

リンク

タグの中にリンク先の情報やサイト名などを記載します。

HTMLを記述する上での注意点

HTMLを記述する上で注意しなければならないことがが有ります。

このことに注意しないと、ページがうまく表示されなかったり、後々別の人が見たときに非常にわかりづらく編集に苦労してしまったりとといったことが行ってしまいます。

1.HTMLの基本的な書き方を理解する

HTMLを記述する際には、基本的な書き方を理解しておく必要が有ります。

というのも、HTMLは書き方のルールが有ってそのルールに沿って書かないと、ちゃんと表示してくれないからです。

もっとも多いのが、終了タグの抜けです。

これは僕もよくやってしまいます(^^ゞ

2.分かり易い記述をする

HTMLのタグは誰が見てもわかるように、わかりやすく記述する必要があります。

記述したHTMLはあなただけが見るのなら、自分でわかるように記述すれば良いです。

しかし、今後コーディングを複数人で行う場合、あなた以外の人もあなたが記述したHTMLを見ることがあります。

その際に、自分だけがわかるようにHTMLのタグを記述していては、他の人の仕事に支障をきたしてしまうでしょう。

そのため、誰が見てもわかるようにHTMLのタグを整理して記述する必要があるのです。

まとめ

HTMLのタグについて書いてきました。タグの種類は先にも述べたように100種類以上あるので全部憶えていると時間が掛かってしまいますし、挫折してしまいそうになってしまいます。

僕も、学習し初めにはやっぱり全部覚えて行かなくてはいけないような気がしていましたが、いろいろと教材で学習していくうちに、全部覚える必要はないと思うようになりかなり気が楽になりました(*^^)v

沢山”タグ”を覚えておくことに越したことは無いですが、今回書かせてあげたタグが頻出するタグであることは間違いないので、これをまず覚えていくのが良いと思っております。

それと、どんな勉強でもそうですが、インプットだけでは不十分でアウトプットをしてこそ自分の糧となるので、何か簡単なものを作成してみるのもいいと思います。

その中で、新たに『こうしたい！！』と思った時にそれを実現できるタグを探して実装していくとサイトや教材で学習するより確実に理解が深まると思います。

僕も出来る限りそうやって日々勉強していくように心掛け手行きたいと思っています。