はじめに
HTMLのタグは100種類以上あり,全部を覚えるのは大変である.本記事では最低でも覚えるべき代表的なタグをまとめる.
代表的なタグ
1.p
<p>文章1</p>
<p>文章2</p>
↓結果
<p>
タグはパラグラフ(paragraph)の"p"で段落を作るときに使う.</p>
の後ろで必ず改行される.
2.h1~h6
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
↓結果
<h1>〜<h6>
タグは見出しを作るときに使う.数字が大きくなるほど小さい見出しになる.
3.img
<p>下は画像</p>
<img src="画像.png">
↓結果
<img>
タグは画像を貼るときに使う.<img>
タグは終了タグは使わない.
4.aタグ
<p>これはリンクではない</p>
<a href="指定したリンク先">これはリンク</a>
↓結果
<a>
タグはリンクを作るときに使う.リンクをクリックすることで,属性で指定したリンク先に飛ぶ.
5.ul・ol・li
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<ol>
<li>番号付き項目1</li>
<li>番号付き項目2</li>
</ol>
↓結果
<ul>・<ol>・<li>
タグは箇条書きを作成するときに使う.項目自体は<li>
,順序なしの箇条書きには<ul>
,順序ありの箇条書きには<ol>
を使用する.
6.br
<p>あいうえお<br>かきくけこ<br>さしすせそ</p>
↓結果
<br>
タグは意図的な改行を作るときに使う.<p>
タグでも改行されるが,改行させるために使うべきではない.
7.div
<div class="group" style="color: red;">
<p>本文1</p>
<p>本文2</p>
</div>
↓結果
<div>
タグ自体には特定の意味を持たないが,要素をグループでまとめるために使う.複数の要素をグループ化させることで,複数の要素に同じCSSを適用しやすくなる.
8.span
<span class="group" style="color: red;">
<p>本文1</p>
<p>本文2</p>
</span>
<div>
タグと同様に<span>
タグ自体には特定の意味を持たないが,要素をグループでまとめるために使う.<div>
タグは前後に改行が入るのに対して,<span>
タグは前後に改行を入れずにグルーピングできるという点が異なる.
9.hr
<p>本文1</p><hr>
<p>本文</p>
代表的な属性
属性には特定の要素にのみ指定できる属性と,どのタグにも指定できるグローバル属性の2種類がある.以下はグローバル属性である.
属性名 | 役割 |
---|---|
id | 要素に固有の名前を指定する |
class | 要素に分類名(種類)を指定する |
title | 要素に補足情報を指定する |
lang | 要素内の言語を言語コードで指定する |
name | 要素に名前をつける |
href | リンク先を設定する |
style | 要素に直接スタイルシートを適用する |