どうもMKです。
今回はいつもHTMLコーディングしていて汎用的に使用する事の多いHTMLのタグを紹介していきまっす。
HTML5になってからもう何年も経過するんだけど、学習を始めた頃HTML4.01というもので、ブロックレベル要素とインライン要素と呼ばれるカテゴライズで呼ばれてました。
この記事を書き始めるためにおさらいしようと思って調べてみたんだけど、
HTML5になった今、ブロックレベル要素とインライン要素ってなくなったんだね。
驚愕したよ。
その変わりにコンテンツ・モデルと呼ばれるもので識別されるようになったみたい。
でも今回はただ単にタグの紹介だけに留めておくことにします。
なんてったって独学で学んできた事を整理整頓してアウトプット、深くなかった事や取り急ぎ詰め込んだ知識を深めてアウトプットするために始めたブログだし。
それではまず、超基本的なTAGをいくつか。
| タ グ | 使い所 |
| <html>〜</html> | htmlの始祖 |
| <head>〜</head> | この中に言語文字コード、だとかレスポンシブ用の記述だとか。CSS・JSを読み込んだりその場でじっこうさせたり |
| <meta /> | 文字コードやレスポンシブ用の記述、ページの説明文から、OGPまで調べてみると色々このタグで書いて指定する事が出来るよ。 |
| <link /> | CSS読み込む時に使うよー |
| <script>〜</script> | JavaScriptを読み込む用、そのまま書いちゃったりします。 |
| <title>〜</title> | 検索結果でクリックするタイトル文を括る、ブラウザのタブにも表示される |
| <body>〜</body> | ブラウザに表示される部分をこのタグの中に書いていく。 |
次に主要コンテンツを括っているタグ
| タ グ | 使い所 |
|
<header>～</header> |
ページのヘッダー、コンテンツのヘッダー等など、ヘッダーが必要なときにはどうぞ。 |
| <footer>〜</footer> | footerコンテンツを定義するタグ |
| <main>〜</main> | １ページに１個のみ記述する事が出来て、そのページのメインコンテンツを括る。 |
| <article>〜</article> | そのページの主要コンテンツが複数個に渡る場合に使用する。mainタグとは違い、複数配置する事が可能。 |
| <div>〜</div> | コンテンツ領域を区切る時に使う。マトリョーシカみたいになる事が多い。 |
| <aside>〜</aside> | 主要コンテンツとは関係の無いコンテンツ領域を定義する時に使う。良くサイドバーをコーディングする時に使われる。 |
| <nav>〜</nav> | サイト内のナビゲーション領域を定義するために使う。navタグの中に<ul>タグを書くとモヤッとする。 |
| <section>〜<section> | articleタグの中に書く。要素の区切り。h1〜h6タグが無いとダメ。かっこ悪い。 |
とまあちょこちょこ書かせてもらったけど、まだまだある。
pタグやulタグなどなど。
また追記します。
