HTML入門講座も3回目です。
やっと、タグの説明に入りたいと思います＾＾
タグの書き方
"<" と ">"で囲みます。で終了の時に、閉じタグ “</” と “>” で囲んで書きます。
<div>ふぉっふぉっふぉ</div>って感じです。
基本的には閉じタグで完了させますが、タグのみで意味をもたせされるものは閉じタグをつける必要がないです。
例えば、
画像タグとかです。
<img src="sample.jpg">
※ タグには付属の部品として、属性と呼ばれるものをつけることができます。
imgタグには、 srcという属性をつけられます。srcには、画像のある場所を指定します。
属性は、基本的には、""(ダブルクオテーション)で囲みます。
それでは、よく使う主なタグについてみていきましょう。
セクショニングに使用する主なタグ
セクショニングとは、文書構造を定義するということです。
文章の構造を検索エンジンに正しく伝えるために、正しい使い方が必要となります。
header
ページ上部のヘッダー部分に使用するタグです。
nav
ナビゲーション部分に使用するタグです。メインメニューとかに使います。
main
メインのコンテンツ部分に使用します。
article
コンテンツ部分に使用します。独立したコンテンツとして、それ自体で成り立つ成り立つものに使用します。
ブログの記事みたいな感じですかね＾＾；
section
こちらもコンテンツ部分に使用します。コンテンツの中で、１つの機能など意味のある区切りとして使います。
（※わかりづらいですねw あとで図で説明しますw）
※ ちなみに、article と section は内部に見出しレベル（後述する <h1>とか）を指定することが推奨されています。
footer
ページ下部のフッター部分に使用されます。サイトのリンクやSNS、コピーライトなどを置くことが多いですかね。
図に表すとこんな感じです。
article バージョンの図
なんとなくつかめますかね＾＾；
まあ、sectionとかarticleとかは、使い方、人や会社によってまちまちなので、（こんなん言っていいのかな）ざっくりこんなもんって押さえておいてもらえればと笑
ブロック要素の主なタグ
div
ディビションの略で「div」です。それ自体にとくに意味はもってないです。１つのブロックとしてくくりたいときに使います。
なので、コードの中では最も多く使うタグです。
p
パラグラフの略で「p」です。１つの段落だったり、文章の塊を意味します。
ul , li
リスト表示の際に使うタグです。
リストの項目に<li>を使います。で、リスト全体を<ul>で囲って使います。
ちなみに、リストの項目に1,2,3・・・と番号をふりたいときは、<ul>の代わりに<ol>を使います。
ul は、Unordered List(順序の無いリスト)
ol は、Ordered List(順序のあるリスト) の略です。こう考えるとわかりやすいですね＾＾
table
表（テーブル）を表す時に使うタグです。
テーブル、ちょっとややこしいですが、詳しくは
ここを見ていただければと＾＾；
HTMLクイックリファレンスはわかりやすくまとまってるので、よく見ます♩
※はしょってすみませんw
h1 〜 h6
h は heading の略で、要は、見出しを表します。
大きな見出しから順に、h1 - h6 と使用する感じです。
インライン要素の主なタグ
a
リンクを表します。anchor の略です。
「href」属性に リンク先を指定します。
img
画像を表します。なんとなくわかると思いますが、image の略ですw
「src」属性に指定した画像を表示します。ちなみにその画像が何を示しているのかを「alt」属性に指定します。
imgタグのみで意味を表すので閉じタグは必要ないです。
span
特に意味はもってないですが、それ自体をひとかたまりにしたいときに使用します。
主には、CSSでその部分だけにスタイルを指定したい時に使います。
ぼくのなまえは<span class="red-color">やまだたろう</span>です。
みたいな感じです。
br
改行したいときに使います。
改行するだけなので、閉じタグはないです。
今回は、主なものだけですが、ざーーーーーーっとどんなタグがあるか見てきました。
他にもいろんなタグがあるので、ここらへんは実際に作りながら覚えていければいいと思います！
※ 余談ですが、仕事でばりばりプログラミングやってる人も全てを確実に覚えている人はいないです＾＾；
みんな、ググって、調べて、試行錯誤してやってるので、まあ、そーゆーもんって思ってもらえればと笑
今回のポイント
- SEO的には、セクショニングは重要になってきます！
- わからないところは調べればいい！くらいの気構えでw
- なので、検索力って意外と大事です♩