【HTML初心者入門】h タグとは?使い方も徹底解説! | プログラミング入門ならWEBCAMP NAVI
【3月枠も残りわずか】転職保証コース

【HTML初心者入門】h タグとは?使い方も徹底解説!

みなさんはHTMLの学習をしていませんか?

今回の記事では<h>タグの使い方や注意点について紹介していきます!

様々な見出しを表示する

HTMLの見出しタグは、h1、h2、h2といったHTMLタグで囲まれた見出しのことをさします。

<h1>~<h6>のhとはHeadingの略で、見出しを意味します。
<h1>が最上位の見出し(大見出し)で、以下数字が小さくなるにつれて下位の見出し(小見出し)となります。
<h6>が最下位の見出しです。

一般的なブラウザでは<h>タグで囲まれた部分はテキストのサイズが変化し、太字で表示され前後に改行が入ります。

見出しの種類

本文には見出しがつきものです。大見出し、小見出しなど、見出しには階層があります。
各要素の詳しい意味合いは以下のようになります。

h1 : chapter 章
h2 : section 節
h3 : subsection 小節(項)
h4 : subsubsection 小々節(目)
h5 : paragraph title 段落小見出し
h6 : subparagraph title 小段落小見出し

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

使用上の注意点

見出しタグはSEOの面から見ても重要な意味を持つタグです。そのため、見出しタグを使う時は以下の注意点を守るようにしましょう。

2-1.ページ構成と関係ない意図で使わないこと

時々、見た目を調整することのために、見出しを多用する人がいます。本来、見出しタグはテキストの見た目を調整するためのものではなく、あくまでもページ上の階層構造をユーザーや検索エンジンにとって分かりやすく示すために使うものです。テキストの見た目を調整したい場合は、以下のタグを組み合わせて使うようにしよう。

<b>テキスト</b> :太字表示
<em>テキスト</em> :斜体表示にして強調
<strong>テキスト</strong> :太字表示にして強い強調
<font size=”○○px”>テキスト</font> :テキストのサイズを変える

2-2.見出し1(h1)は1ページ1つにすること

h1タグは、そのページでもっとも重要なテキストに対して使用するタグです。例えば、サイトのトップページであればサイトタイトルが、記事ページであれば記事タイトルがそのページでもっとも重要なテキストに割り当てます。

そのためh1タグは、タイトルに設定するのが自然です。

なお、HTML5では1つのページに複数の<h1>タグも技術的には使用することができますが本当に必要かどうか十分考慮して使用判断をしましょう。

注意点

※h1とtitleタグには同じテキストを設定しておきましょう。
※タイトルタグは、そのページの要素の中でも最重要と言えるもので、h1タグも同じように
※そのページ内で最も重要なテキストを示すためのタグです。同じ意味と考えると
※同一になるのが自然です。

2-3. 見出しタグの順番を守ること

見出しタグは<h1>から始まり<h6>までありますが、<h1>の次に来るのは<h2>、<h2>の後に来るのは<h3>というように順番を守って使用します。

繰り返しになりますが、見出しタグは見た目のためではなく、コンテンツの階層構造を正しく示すために使うもので見出しタグの順番が守られていないということは、その階層構造を正しく示せていないということになります。

・HTMLタグを一覧から探したい方は、「【初心者向け】htmlで使う主要なタグ一覧を解説」の記事を参考にしてください。

サンプル

<!DOCTYPE html>
<html>
<head>
<title>Webページ練習</title>
</head>
<body>

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

</body>
</html>
・学習サイトでの練習を考えている方は、「【初心者向け】htmlの練習ができる学習サイト8選!」の記事を参考にしてください。

まとめ

初心者の方向けにhタグを紹介していきましたが、いかがでしたか?

hタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

3月枠も残りわずか!!未経験からエンジニアを目指すならDMM WEBCAMP

DMM WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98%!短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

「未経験だから不安…」、「転職できるんだろうか…」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。

無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。

【無料】キャリア相談の日程を見る

転職保証付のDMM WEBCAMPで
安心してエンジニア転職を目指そう

「スキルがないし…」「失敗したくないし…」
カウンセラーがあなたのキャリアを真剣に考え、
ご相談に乗ります。