ブログ
【WEB制作の基本】これだけは覚えておきたいHTMLタグ
WEBサイトを作成するのに欠かせないものに「HTML」があります。
HTMLとはWEBサイトを作るための設計図（骨組み）ともいえる重要なものです。
しかし、HTMLという言葉を聞いたことがあっても、具体的にイメージが浮かばない方も多いのではないでしょうか？
この記事では、必要最低限覚えておきたいHTMLタグとその活用方法を解説していきます！
覚えておきたいHTMLタグ
headerタグ
「header」はサイトのヘッダー部分を構造化する際に使用します。
具体的には、サイトのタイトルやナビゲーションなどを囲います。
<header></header>footerタグ
「footer」はサイトのフッター部分を構造化する際に使用します。
サイトに関する情報や、著作権に関する表記、連絡先などを構造化します。
<footer></footer>
mainタグ
「main」はサイトの主要コンテンツ部分を構造化する際に使用します。
mainタグの中には、sectionタグやdivタグなどを用いてページの主となるコンテンツを構造化します。
<main></main>asideタグ
「aside」はサイトのサイドバー部分を構造化する際に使用します。
<aside></aside>navタグ
「nav」は「navigation」の略で、サイトのメニュー部分を示す際に使用します。
navタグの中には、ul、liタグなどを用いてメニューを作ります。
<nav></nav>articleタグ
「article」は記事という意味があり、サイト内で独立したコンテンツを囲む際に使用します。
<article></article>sectionタグ
「section」は節や章という意味があり、見出しを伴う文書の章や節目であることを表現する際に使用します。
<section></section>h1～h6タグ
「h」は「heading」の略で、見出しを作成する際に使用します。
h1が大見出しで1番大きく、サイトのメインとなる見出しに使われます。h2〜h6となるにつれ、小さな見出しになっていきます。
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>pタグ
「p」は「paragraph」の略で、テキストの段落を作成する際に使用します。
<p>段落、段落、段落</p>imgタグ
「img」は「image」の略で、画像を表示する際に使用します。
src属性でファイルの場所を指定します。
alt属性で画像が読み込めなかったときの代替テキストを指定します。
<img src="../image.jpg" alt="代替テキスト">aタグ
「a」とは「anchor」の略で、リンクを埋め込む際に使用します。
href属性の中にURLを書き、リンク先の指定をします。
target属性に書かれている_blankは、リンク先のドキュメントを新しいタブやウィンドウで開くための指定です。
<a href="https://fair-design.net/" target="_blank">フェア・デザイン</a>ul / ol / liタグ
■ ulタグ
「ul」は「unordered list」の略で、順序のないリストを表示する際に使用します。
■ olタグ
「ol」は「ordered list」の略で、順序のあるリストを表示する際に使用します。
■ liタグ
「li」は「list item」の略で、リストの各項目を記述する際に使用します。
ulタグもしくはolタグの入れ子として使用します。
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>table / tr / th / tdタグ
■ tableタグ
tableタグは、表を作成する際に使用しtrタグ、thタグ、tdタグと併せて使用します。
■ trタグ
「tr」は「table row」の略で、表なかの行を作成する際に使用します。
trタグを使用した分だけ、行の数が追加されていきます。
■ thタグ
「th」タグ「table header」の略で、表のなかの見出しのセルとして使用します。
■ tdタグ
「td」は「table data」の略で、表のなかの見出し（th）に対するデータのセルとして使用します。
<table>
<tr>
<th>リスト</th>
<td>リスト</td>
</tr>
<tr>
<th>リスト</th>
<td>リスト</td>
</tr>
</table>divタグ
「div」は「division」の略で、特別な意味はなく、要素をグループ化する際に使用します。
<div> <h1>見出し</h1> <p>段落、段落、段落</p> </div>
spanタグ
「span」は、divタグと同様に特別な意味はなく、要素をグループ化する際に使用します。
文章の一部にスタイルシートを適用したい時によく使います。
<span>汎用、汎用、汎用</span>
divとspanの違い
①前後の改行
divタグで囲われると前後に改行が入りますが、spanタグで囲われても前後は改行しません。
②幅と高さの指定
divタグはCSSで幅（width）と高さ（height）の指定ができますが、spanタグはどちらも指定できません。
③中に入れる要素
divタグはdisplay:blockなので、p要素など何でも入れることができます。
spanタグはdisplay:inlineの要素しか入れることができません。
brタグ
「br」は「break」の略で、改行を行うために使用します。
pとbrの違い
①段落と改行
pタグは一つの主題を持った文章の切れ目である段落ですが、brタグは一つの文章を途中で区切って、行を新しくする改行タグです。
②ブラウザ上での表示
pタグは1行分改行された状態で表示されますが、brタグは文章の途中で改行された状態で表示されます。