WEBサイトを作る上で、必須のスキルである「HTML」。コードを書いていくには「<」「>」で挟まれたタグと呼ばる特殊な文字列で囲んで書いていく必要があります。
これらのタグの数は、なんと全部で100個以上種類があります。しかし、こちらの記事でも紹介しましたが、100個以上のタグの意味を全て覚える必要はありません。タグの中にも、よく使われるタグ、滅多に使われないタグがあるのです。
そこで今回は、とりあえず覚えておくべき、よく使うタグをまとめました。
各タグの簡単な意味の説明と各個別記事へのリンクを掲載していますので、HTML初心者の方は参考にしていただけると幸いです。
目次
覚えておくべき、よく使うタグをまとめ
では、順番に見ていきましょう。
pタグ
pタグは、文章の段落を区切る役割があるタグで、最もよく出てくるタグと言っても過言ではないタグです。
<p>今回の記事では、プログラミングで挫折してしまう原因やおすすめの対策方法についてご紹介します。</p>こんな感じで、文章を「<p>」「</p>」で囲むだけです。基本的には、新しい話題に移るときまでを囲む感じです。
h1〜h6タグ
h1〜h6タグとは、HTMLで見出しを表現する時に使用するタグです。
<h1>テキストが入ります</h1>
<h2>テキストが入ります</h2>
<h3>テキストが入ります</h3>
<h4>テキストが入ります</h4>
<h5>テキストが入ります</h5>
<h6>テキストが入ります</h6>種類は、h1〜h6と、6種類あります。
ul、ol、dlタグ
ul、ol、dlタグは、リストを表示する際に使用するタグです。箇条書きリストには「ul」、番号付きリストには「ol」、定義リストには「dl」を使います。
ul・olの各項目は「liタグ」を、dlでは「dtタグ」でキーワードを「ddタグ」で説明を書きます。
箇条書きリスト
<ul>
<li>りんご</li>
<li>お肉</li>
<li>お魚</li>
</ul>番号付きリスト
<ol>
<li>〇〇駅東口を出て右折</li>
<li>そのまま直進</li>
<li>到着</li>
</ol>定義リスト
<dl>
<dt>【HTML】</dt>
<dd>ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の事。</dd>
<dt>【CSS】</dt>
<dd>カスケーディング・スタイル・シート（Cascading Style Sheets）の事。</dd>
</dl>
aタグ
aタグとは、リンクを指定する際に使用するタグです。
<a href="リンク先ページへのパス">リンク指定したいものが入ります</a>「<a>」「</a>」の間に、リンク指定したいものを挟み、リンク先は、href属性に、相対パスまたは絶対パスを指定します。
imgタグ
imgタグは、画像を読み込ませる際に使用するタグです。WEBサイトに画像を読み込ませるシーンは多々あり、よく使用されるタグです。
<img src="画像のパス" alt="代替テキスト">src属性で画像のパスを、alt属性で代替えテキストを指定します。
tableタグ
tableタグは、HTMLで表を作る際に使用するタグです。
<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>ラーメン</td>
<td>900円</td>
</tr>
<tr>
<td>チャーハン</td>
<td>1,050円</td>
</tr>
</table>| 商品名 | 価格 |
|---|---|
| ラーメン | 900円 |
| チャーハン | 1,050円 |
使用すると、こんな感じの表が作成できます。
divタグ
divタグは、それ自体、何の意味も持っていないタグですが、要素をグループ化する際に重宝するタグです。
<div class="green-box">
<p>今日の夜ご飯は焼きそばだ。</p>
<p>楽しみだー。</p>
</div>こんな感じで、一まとめにする際に使用します。
brタグ
brタグは、段落内で改行をしたい場合に使用するタグです。
<p>今日、中国の偵察気球が日本の領空内に侵入しました。<br>
これを受け、日本政府は中国へ抗議。今後日本と中国の対立が激化する可能性があります。</p>こんな感じで、改行したい箇所に<br>タグを使うことにより、改行されます。
HTMLタグがまとまった本が欲しい方へ
よく使われるHTMLタグは分かったけど、まとまった本とか無いのかな？？
このように思った方いらっしゃらないですか？ネットで検索をかけるより、本で調べる方が好きな方も当然います。
そこで、HTMLタグ辞典みたいな本があるのでご紹介しておきます。
この本は、今回の記事でご紹介した、よく使うタグはもちろん、滅多に使わないタグまで紹介されているタグ辞典のような本です。
また、CSSでよく使われるプロパティまで掲載されているので大変便利な参考書です。
※どうしてもCSSは、HTMLと切っても切れない関係性があり、この本でもセットになっています。
筆者も、職場の机の上にこの本が置いてあり、大変お世話になっています。机の上にあると大変心強い一冊ですので、是非手に取ってみてはいかがでしょうか？
まとめ
今回は、とりあえず覚えておくべき、よく使うタグをまとめました。
今回の記事で紹介したタグは、本当によく出てくるタグなので、参考にしていただけると幸いです。
