最初に覚えるべき「よく使うHTMLタグ」2019/11/04前回はHTMLの書き方について学びました。今回は、まずはじめに覚えるべき基本的な「HTMLタグ」を紹介します。HTMLタグは100以上あるのですが、それら全てを覚える必要はなく、初めのうちは10個程度覚えれば事足りることが多いです。少量のタグを覚え、必要に応じて他のタグも学習していくのが良いでしょう。「使用頻度の高いタグ」と「サイト構成する上で使った方が良いタグ」に分けて紹介します。使用頻度の高いタグまずは使用頻度の高いタグから紹介します。サイトを作る上で何度も何度も書くことなるタグです。liリストを表すp段落を表すdivブロックを表すspanインラインを表すそれでは一つずつ、簡単に見ていきましょう。hタグ(1〜6まで)まずはhタグです。hタグは1〜6まであり、記述の際は<h1>フロントグラム</h1>このようにサイトタイトルなどのような重要な見出しを書く際に利用します。h1が一番目立たせたい見出しに使用し、数字が小さくなるにつれて、弱い見出しとなります。画像のようにサイトタイトルであればh1を使用します。記事タイトルである「hタグとは使い方を解説!」はサイトタイトルよりは弱い見出しを使いh2にしています。このような感じで、強調したい見出しに優劣をつけてサイトの中で、何がどのくらい重要なのかと言うのを表現します。aタグaタグはリンクを表すタグです。Googleへのリンク上記のリンクは以下のように記述します。href="https://google.com">Googleへのリンク</a>hrefという属性に遷移したいURLを記述し、タグ内にリンクの文字列を書きます。target属性に`_blank`という値を記述することで、別タブで開かせることが出来ます。target="_blank">Googleへのリンク</a>imgタグimgタグは画像を表示するためのタグです。/>このような感じで画像が表示されます。imgタグは閉じタグ不要なタグです。閉じタグが不要なタグは他にもいくつかあったりします。liタグはリスト(箇条書き)を表すタグです。<li>みかん</li></ul>上記のHTML記述をすることで以下のようになります。りんごバナナみかんまた、ulをolに変えるだけで、数字付きの箇条書きにすることも可能です。ul、ol以外にもtype属性でも表現を変えることが出来ます。pタグpタグは段落を表すタグです。文章をたくさん書いていて、段落を分けたい場合はpタグで区切っていきましょう。<p>文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1文章1</p><p>文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2文章2</p>divこれはhタグやpタグなどとは異なり、何も意味を持たないタグです。いう時に使うかと言うと、「意味は持たないけど、こことここをブロックとして扱いたい時」などに使用します。divは前後に改行を含むタグです。ブロック要素と呼ばれていました(現在はこの呼名は廃止されているようです)<div>box1<div><div>box2<div>こう記述するとbox1box2という風にbox1のあと改行され、box2が表示されます。この後紹介するspanは横並びになります。spanこちらもdivタグ同様何も意味を持たないタグです。divタグと異なる部分は前後に改行を含まないという点です。box2と表示されます。divと変わって、改行されずに横並びになりました。違いはこの部分だけで、どこで使用するかというと、文章中の特定の文字列だけデザインを変えたい場合など、spanタグで囲ってそのエリアに対してデザインを変えるCSSと呼ばれるものを当てていきます。</p>このようにspanで特定の部分だけ囲むことで、「ぶんしょう」だけデザインを変えることが可能です。サイト構成する上で使った方が良いタグでは続いてサイトを構成する上で使った方が良いタグを見ていきましょう。以下のタグを使っていくことで、サイト内の各場所がどういう意味を持つのかを検索エンジンに示すことができます。headerサイトの基本情報であるサイトタイトルやメニューなどを配置する(navはheader内に入れます)navサイトのメニューなどを配置するmainメインのサイトコンテンツを配置するasideサイドバーなどサイトの付属情報を配置するfooter会社情報や利用規約、SNSなどの細かい情報を配置するarticle単独で完結する内容を配置するsectionまとまりとしてセクショニングする内容を配置するarticleとsectionは似ていて使い所が難しいですので、画像でイメージを掴んでください。このようなサイト構成の場合、各タグで表現すると以下のようになります。sectionはarticleに囲まれるイメージですね。イメージなのでコレ通り使わないと行けないということではありません。臨機応変に利用していきましょう。headerやfooter、navやasideなどは使いやすと思うので、どんどん使っていってください。次回より、いよいよCSSに入っていきます。HTMLを使用しているだけだと、サイトの構成を作るだけでデザインはできませんでした。CSSを使うことでサイトのレイアウトやデザインが自由自在に出来るようになります。