プログラミング

HTMLタグは100以上あります

更新日:

こんにちは、Nanayakuです。

今回は、前回のHTMLの続きで、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で名前をつけます。

 

headerタグ・footerタグ

これはヘッダーと言うタグは、Webサイトの上部にあるロゴやメニューなどを表示する時に使います。

↓の画像は、このサイトのヘッダー部分です。

 

これはフッターと言うタグは、Webサイトの上部にあるロゴやメニューなどを表示する時に使います。

↓の画像は、このサイトのヘッダー部分です。

 

sectionタグ

このタグは、JavaScriptなどの機能をつける時に使います。

 

Chromeの検証機能(デベロッパーツール)の使い方

Webサイトの作成する上で、非常に便利なツールがあります。

それはデベロッパーツールと言い、HTML・CSSを調べることが出来ます。

調べたいサイトを右クリックして、検証をクリックします。

すると、↓の画像のようになり、このサイトのコードを調べることが出来ます。

細かい使い方は、サルワカの初心者向け!Chromeの検証機能(デベロッパーツール)の使い方で紹介しているので、ぜひ参照してみてください。

 

最後に

備忘録がわりに作ったので、間違っている所とかあったら、コメントくれると嬉しいです。

-プログラミング
-

Copyright© Nanayaku blog , 2019 All Rights Reserved Powered by AFFINGER5.