HTMLで見出しを表現する - hタグの利用 - HTML

HTMLで見出しを表現するするコードを紹介します。

概要

HTMLで見出しを記述するには hタグを利用します。hタグには、h1,h2,h3,h4,h5,h6 があり、番号が大きいほど見出しのレベルが下がり、小見出しの表示になります。

書式

<h1>見出しの文字列</h1>
<h2>見出しの文字列</h2>
<h3>見出しの文字列</h3>
<h4>見出しの文字列</h4>
<h5>見出しの文字列</h5>
<h6>見出しの文字列</h6>
hタグのhは何の略?
hタグのhは "heading"(見出し)の略です。
大文字、小文字どちらで記述したほうが良いか
HTMLのタグは大文字でも小文字でも記述できるため、h1 H1 どちらの記述も可能です。 一般的な慣習では、HTMLタグは小文字で記述することが推奨されています。 なお、XHTMLでは大文字と小文字が区別されるため、XHTMLを使用する場合は、タグを小文字で記述する必要があります。

コード例

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1>h1の見出しです</h1>
    <p>本文の段落です。</p>
    <h2>h2の見出しです</h2>
    <p>本文の段落です。</p>
    <h3>h3の見出しです</h3>
    <p>本文の段落です。</p>
    <h4>h4の見出しです</h4>
    <p>本文の段落です。</p>
    <h5>h5の見出しです</h5>
    <p>本文の段落です。</p>
    <h6>h6の見出しです</h6>
    <p>本文の段落です。</p>
</body>
</html>

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。h2,h3,h4と数字が上がるごとに文字のサイズが小さくなり小見出しとして表現されていることが確認できます。


著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-07-02
改訂日: 2023-11-29
作成日: 2017-01-18
iPentec all rights reserverd.