htmlの見出しタグについて

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回のメルマガでは
「htmlの見出しタグ」について
お話させて頂きます。

見出しタグは<h1>〜<h6>のタグがあります。
「h」というのは見出しを意味する
headingの「h」を略したものです。

1から6の数字が付いていますが、

<h1>が大見出し
<h2>が中見出し
<h3>から<h6>は小見出し

という流れになります。

前回作成したhtmlファイルに
<h1>〜<h6>のタグを記述してみて下さい。

5_2

ブラウザで確認するとこの様になると思います。

5_1

<h1>タグは基本的にそのページで一度だけ使用します。
そして、<h2>以降は何度使っても構わないとされています。

注意点としては、<h1>タグを使ったあとに、<h2>を使わず
<h3>を使うというのは文書の構造的にあまりよろしくないので
その辺は頭に入れておいた方が良いと思います。

例としてはこのような記述が順序的には良い例になります。

5_4

ブラウザで見るとこのような表示になります。

5_3

見出しタグは、ブラウザ上では文字が大きくなっていたり、
太字になったりするので、飾り目的で使用したくなると
思いますが、本来の目的は文章構造を検索エンジンに
知らせる目的で使用します。

検索エンジンとは、まあ簡単にイメージして頂くために
正確な説明ではない部分もあるかもしれませんが、
GoogleとかYahooで何か調べる時に検索窓に調べたい文字を
入れて検索しますよね?そうすると色んなサイトが順番に表示されますよね。

この順番を表示するために、様々なWebサイトの情報を読み取っている訳ですが、
htmlファイルは「このサイトはこういう内容ですよ」とお知らせしている
と考えて頂ければ良いと思います。

なので、htmlファイルは文章構造がしっかり出来ているファイルを
作るようにしていくことが大切かなと思います。

ちなみに、見出しタグの文字の大きさを変えたり、
色を変えたりなどのデザインの指定は、
スタイルシート(cssファイル)というものに設定を行うことによって
変更することが出来ます。

今の段階では、まずはデザインの部分は触れずに
基本的なhtmlファイルの記述のやり方をご紹介させて頂いておりますので
まずは、見出しタグの使い方、意味などをもう一度しっかりおさらいして頂き、
実際にご自身でhtmlファイルに記述してみて確認して頂ければと思います。

今回は見出しタグについて説明させて頂きました。
では、また来週お会いしましょう。

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ