こんにちは。
株式会社Lifeit（ライフイット）です。
Webサイトを制作するのに欠かせない『HTML』。
「HTMLとは？」「HTMLって何なの？」と感じているのではないでしょうか？
初心者の方でも分かるように解説していきます。
前回の解説の続きとなります。
よく使われるタグの書き方
HTMLの基本を「HTML入門」として前回に解説をいたしました。
そちらを元に引き続き解説していきます。
まだご覧になっていない方は、是非「HTML入門」からお読みくださいませ。
今回は、サイトを制作する際によく使われるHTMLのタグについて解説をいたします。
HTMLのタグ数は100個以上ありますが、すべてを覚える必要はないので必要に応じて調べて使っていきましょう。
実務でよく使われるタグは、ぜひ覚えておきましょう。
実務でよく使うタグ
- h1〜h6タグ
- pタグ
- aタグ
- brタグ
- imgタグ
- ul / ol / liタグ
- table / tr / th / tdタグ
- divタグ
- spanタグ
h1〜h6タグ
「h」とは「heading（ヘディング）」の略で、見出しを意味するタグです。
<h1>が大見出しで1番大きく、サイトのメインとなる見出しに使われます。<h2>〜<h6>となるにつれ、小さな見出しになっていきます。
同じ数値のものが複数ある場合、は同じランクとして扱われます。
<h1>大見出し</h1>
<h2>見出し</h2>
<h3>小見出し</h3>
<h4>小見出し</h4>
<h5>小見出し</h5>
<h6>小見出し</h6>
pタグ
「p」とは「paragraph（パラグラフ）」の略で、テキストの段落を意味するタグです。
使用頻度は高く、最も使われるHTMLタグの一つと言えるでしょう。
HTMLにおける段落は、通常の文章と同じく文章のひとかたまりを表します。
pタグで囲ったテキストの前後に1行の改行が生まれますが、改行の目的で使用することはありません。文章中で改行する場合はbrタグを使用します。
<p>こんにちは。</p>
<p>株式会社Lifeit（ライフイット）です。</p>
aタグ
「a」とは「anchor（アンカー）」の略で、リンクを埋め込む際に使用するタグです。
href属性の中にURLを書き、リンク先の指定をします。
target属性は、リンク先の文書を開くフレームやウインドウを指定するための属性です。
記載されることが多い「_blank」は、リンク先のドキュメントを新しいタブやウィンドウで開くための指定です。
<a href="https://www.lifeit.co.jp/" target="_blank">株式会社Lifeit</a>
brタグ
「br」とは「break（ブレーク）」の略で、改行を行うためのタグです。
こちらは単体で、終了タグなしで使用します。<br>だけで使います。
しばしば余白を開けるために使用されることもありますが、ユーザーの環境によって行間などが変わってしまう可能性があるので、その場合はスタイルシートを使用して調整することをおすすめします。
<p>
ここで
<br>
改行されました
</p>
imgタグ
「img」とは「image（イメージ）」の略で、画像を表示する際に使用するタグです。
src属性は必須の属性でファイル名(GIF形式（○○.gif）、JPEG形式（○○.jpg）、PNG形式（○○.png）)を指定します。
alt属性は代替テキストを設定することができ、アクセシビリティのために記述するようにしましょう。（HTML5では必須でなくなりました。）
代替テキストとは、ページ上で画像の表示がされなかった際に表示されるテキストです。
<img src="logo.jpg" alt="ロゴの画像" />
ul / ol / liタグ
ulタグ
「ul」とは「unordered list（アンオーダードリスト）」の略で、順序のないリストを表示する際に使用するタグです。
type属性を指定することで、先頭の「・」を「黒丸、白丸、黒い四角」と指定することが可能です。
olタグ
「ol」とは「ordered list（オーダードリスト）」の略で、順序のあるリストを表示する際に使用するタグです。
type属性を指定することで、先頭につく記号の種類を「算用数字、アルファベット小文字、アルファベット大文字、ローマ数字大文字、ローマ数字小文字」と指定することが可能です。
liタグ
「li」とは「list item（リストアイテム）」の略で、リストの各項目を記述する際に使用するタグです。
ulタグもしくはolタグの入れ子として使用します。
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ol>
<li>1つ目のリスト</li>
<li>2つ目のリスト</li>
<li>3つ目のリスト</li>
</ol>
table / tr / th / tdタグ
tableタグ
tableタグは、表を作成する際に使用するタグです。
trタグ、thタグ、tdタグと併せて使用します。
しばし、レイアウトのために使用されることがあります。
しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。
trタグ
「tr」は「table row（テーブルロー）」の略で、表なかの行を意味するタグです。
trタグを使用した分だけ、行の数が追加されていきます。
thタグ
「th」タグ「table header（テーブルヘッダー）」の略で、表のなかの見出しのセルとして使用するタグです。ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
tdタグ
「td」は「table data（テーブルデータ）」の略で、表のデータ（内容）に対するセルとして使用するタグです。
<table>
<tr>
<th>会社名</th>
<td>株式会社Lifeit</td>
</tr>
<tr>
<th>電話番号</th>
<td>03-6823-5900</td>
</tr>
</table>
divタグ
「div」とは、「division（ディビジョン）」の略で、特別な意味はなく要素をグループ化する際に使用するタグです。
divタグはブロック要素としてグループ化を行うので、下に積まれていきます。
グループ化することで、align属性により水平方向の位置をまとめて指定したり、指定した範囲にスタイルシートを適用したりすることができます。
<div>
<p>あいうえお</p>
<p>かきくけこ</p>
</div>
spanタグ
spanタグは、divタグと同様に特別な意味はなく、要素をグループ化する際に使用するタグです。
ただし、spanタグはインライン要素としてのグループ化を行うため、下に積まれずに横に並びます、前後に改行は入りません。
グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。
<span>あいうえお</span>
<span>かきくけこ</span>
最後に
引き続き『HTML』についての解説をしました。
これでどのようにHTMLが記述されているのかが理解出来たかと思います。
ここからさらにほかのタグの種類などについても解説していきます。
弊社では制作の請負サービスも承っております。
より詳しく丁寧にご説明もいたしますので、
オリジナルのページを作成をされたいなど場合はご連絡下さいませ。
