今回は、サイトを制作する際によく使われるHTMLのタグについて解説していきます。
HTMLのタグ数は100個以上あります。すべてを覚える必要はないので、必要に応じて調べて使っていきましょう。よく使われるタグは覚えておくと作業が効率化されます。
無料で30日間、Web制作が学べる『ZeroPlus Gate』
プログラミングに関する質問をエンジニアへ、し放題のサービス！
- 正しいコードの書き方が身につく
- 50本以上の動画教材でサイト制作を学べる
- 30日間に4回の学習サポート面談がある
- わからないことはSlackでエンジニアに質問し放題
目次
実務でよく使用するタグ
h1〜h6タグ
「h」とは「heading（ヘディング）」の略で、見出しを作成する際に使用します。
<h1>が大見出しで1番大きく、サイトのメインとなる見出しに使われます。<h2>〜<h6>となるにつれ、小さな見出しになっていきます。
<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>
<h5>見出し</h5>
<h6>見出し</h6>
pタグ
「p」とは「paragraph（パラグラフ）」の略で、テキストの段落を作成する際に使用します。
pタグで囲ったテキストの前後に1行の改行が生まれますが、改行の目的で使用することはありません。文章中に改行する場合はbrタグを使用します。
<p>完全0から始める</p>
<p>Webデザイン/プログラミング</p>
aタグ
「a」とは「anchor（アンカー）」の略で、リンクを埋め込む際に使用します。
href属性の中にURLを書き、リンク先の指定をします。
target属性に書かれている_blankは、リンク先のドキュメントを新しいタブやウィンドウで開くための指定です。
<a href="https://zero-plus.io" target="_blank">ZeroPlus</a>
ul / ol / liタグ
ulタグ
「ul」とは「unordered list（アンオーダードリスト）」の略で、順序のないリストを表示する際に使用します。
type属性を指定することで、先頭の「・」を変更することができます。
olタグ
「ol」とは「ordered list（オーダードリスト）」の略で、順序のあるリストを表示する際に使用します。
type属性を指定することで、先頭につく記号の種類を変更できます。
liタグ
「li」とは「list item（リストアイテム）」の略で、リストの各項目を記述する際に使用します。
ulタグもしくはolタグの入れ子として使用します。
<ul>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Design</li>
<li>WordPress</li>
</ul>
<ol>
<li>HTML/CSS</li>
<li>JavaScript</li>
<li>Design</li>
<li>WordPress</li>
</ol>
imgタグ
「img」とは「image（イメージ）」の略で、画像を表示する際に使用します。
src属性は必須の属性でファイル名(jpgやpng形式など)を指定します。
alt属性は必須ではありませんが、代替テキストを設定することができアクセシビリティのために記述するようにしましょう。
代替テキストとは、ページ上で画像の表示がされなかった際に表示されるテキストです。
<img src="logo.jpg" alt="ZeroPlusのロゴ" />
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>25歳</td>
</tr>
</table>
sectionタグ
「section」には「節」や「章」という意味があり、見出しを伴う文書の章や節目、区間であることを表現する際に使用します。
sectionタグ内には、見出し要素（h1〜h6）を含む必要があります。
<section>
<h2>ZeroPlusの特徴</h2>
<p>ZeroPlusで6ヶ月学習すれば確実にエンジニアへの1歩を踏み出せます。</p>
</section>
articleタグ
「article」には「記事」や「論説」という意味があり、サイト内で独立したコンテンツをラップする際に使用します。
articleタグ内に、見出し要素（h1〜h6）を含む必要があります。
<article>
<h2>プログラミング学習のモチベーション維持に大事な8つのこと</h2>
<p>重要なのは、「自分がなぜプログラミングを学んでいるのか」という目的をはっきりさせることです。</p>
</article>
divタグ
「div」とは、「division（ディビジョン）」の略で、特別な意味はなく、要素をグループ化する際に使用します。
divタグはブロック要素としてグループ化を行うので、下に積まれていきます。
<div>
<p>あいうえお</p>
<p>かきくけこ</p>
</div>
spanタグ
spanタグは、divタグと同様に特別な意味はなく、要素をグループ化する際に使用します。
ただし、spanタグはインライン要素としてのグループ化を行うため、下に積まれずに横に並びます。
<span>あいうえお</span>
<span>かきくけこ</span>
headerタグ
headerタグは、サイトのヘッダー部分を構造化する際に使用します。
具体的には、サイトのタイトルやナビゲーションなどを囲います。
<header>
<!-- サイトのタイトルやナビゲーションが入ります -->
</header>「nav」とは「navigation（ナビゲーション）」の略で、サイトのメニュー部分を示す際に使用します。
navタグの中には、ul、liタグなどを用いてメニューを作ります。
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#feature">Feature</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>mainタグ
mainタグは、ページ内で1番伝えたい事・重要な部分を示す際に使用します。
mainタグの中には、articleタグやdivタグなどを用いてページの主となるコンテンツを構造化します。
<main>
<!-- 主要コンテンツが入ります -->
</main>
asideタグ
asideタグは、公式では余談要素と記されおり、ページの補足的な情報を示す際に使用します。
サイトのサイドバー部分を構造化する際に適切です。
<aside>
<!-- ページの補足的なコンテンツが入ります -->
</aside>footerタグは、webサイトの末尾・最後の部分を示す際に使用します。
サイトに関する情報や、著作権に関する表記、連絡先などを構造化します。
<footer>
<!-- 著者の情報やコピーライトが入ります -->
</footer>
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
