こんにちは、Nanayakuです。
今回は、前回のHTMLの続きで、HTMLのタグついて解説します。
目次
HTMLの種類
HTMLのタグは、2019年6月現在で109個あります。
その種類は、実は増えていってるんです。
しかし、絶望しないでください。
全てのタグを使うわけではありません。
よく使うタグは20個位で、分からなくなったり知らない時は調べれば大丈夫なのです。
これから、よく使うタグを紹介します。
よく使うタグ
下準備
エディターの設定をHTMLに変更します。
また、htmlのファイルを保存する時は、拡張子を.htmlにします。
次に雛形を作っていきます。
この雛形は、htnlと打つだけで出来ます。
タグ紹介
↑エディターのHTML
↓そのHTMLをブラウザで読み込んだページ
hタグ
これは見出しをつける時に使います。
h1が大見出しで、h2・h3が小見出しです。
一般的にh4ぐらいまでしか使いません。
本の目次を作る感覚です。
pタグ
これは段落を表現する時に使います。
pはparagraphの頭文字です。
aタグ
別のページへ移動させるリンクをはる時に使います。
hrefは移動先のURLを書きます。
<a href="https://nanayaku.com">Nanayaku blog</a>
このタグで囲んだテキストをアンカーテキスト・リンクテキストと呼ぶこともあります。
imgタグ
画像を挿入する時に使います。
<img
src="https://2.bp.blogspot.com/ijRwyI79zDk/XJB44ea988I/AAAAAAABR6k/Z19GsR7c8nkDfuCBuHC_P95mLYOv8a2KACLcBGAs/s800/family_shinseki_dukiai_nigate_woman.png"
alt="イラストや"
>
srcは画像があるURL、altはその画像の説明を書きます。
HTMLは、目が不自由な人も情報を共有できるので、説明はちゃんと分かりやすいものを書きましょう。
ulタグ
箇条書きのリストを書く時に使います。
ulが親要素で、実際に表示される部分は子要素のliで囲みます。
olタグ
連番付きの箇条書きリストを書く時に使います。
ulタグと同じで、実際に表示する部分は子要素のliで囲みます。
divタグ
これ自体に明確な意味はなく、要素をグループ分けする時に使います。
CSSを使うとき、これを非常に頻繁に使うことになります。
グループ分けするのに、classで名前をつけます。
これはヘッダーと言うタグは、Webサイトの上部にあるロゴやメニューなどを表示する時に使います。
↓の画像は、このサイトのヘッダー部分です。
これはフッターと言うタグは、Webサイトの上部にあるロゴやメニューなどを表示する時に使います。
↓の画像は、このサイトのヘッダー部分です。
sectionタグ
このタグは、JavaScriptなどの機能をつける時に使います。
Chromeの検証機能（デベロッパーツール）の使い方
Webサイトの作成する上で、非常に便利なツールがあります。
それはデベロッパーツールと言い、HTML・CSSを調べることが出来ます。
調べたいサイトを右クリックして、検証をクリックします。
すると、↓の画像のようになり、このサイトのコードを調べることが出来ます。
細かい使い方は、サルワカの初心者向け！Chromeの検証機能（デベロッパーツール）の使い方で紹介しているので、ぜひ参照してみてください。
最後に
備忘録がわりに作ったので、間違っている所とかあったら、コメントくれると嬉しいです。