本記事はこんな方にオススメ
「web初心者で、HTMLで見出しを作れるか不安な方」
「ブログやサイト等の記事の構成をより見やすくしたい方」
「SEOを意識した見出しをHTMLで作成したい方」
本記事の内容
ブログやサイト等の記事にぜったいに不可欠なほど重要な見出し。
この見出しは一見、記事の構成を見やすくするためのものだけに思われがちです。
ですが実は、SEOと呼ばれる、webでの検索の上位表示を狙い、価値ある情報を多くの方に届けるために、絶対に意識して入れるべき記事の最重要な要素でもあります…。
今回はそんな記事を見やすくするために必要で、より多くの人に情報を届けるために必須になってくるHTMLでの見出しの作り方をご紹介していきます。
入力するのは本当に数文字のアルファベットだけなので、HTMLを学びたての方にもすぐにご理解いただけるはずです♩
また、他のHTMLにも役立てていけること間違いなしのHTMLタグでもあります。
[Web初心者でも簡単] HTMLで見出しを作ってみよう（HTML実用編３）
今回の記事のゴール
今回作る見出しはこんなもの
今回作るリストはこの様なものです。
この記事を読み進めると、Web初心者の方でも上の様な見出しを作ることができます。
この見出しの作り方は、例えばHTMLで目次を作るときなどに応用されるので、この機にぜひ押さえてしまいましょう。
とっても簡単です♩
今回の目次作りで身につく知識
- 見出しの作り方
- <h○i>の使い方
- 目次を作るときに応用できる基礎知識
見出しは記事に必須
見出しは記事の構成を一瞬で読者の方にしっかりと伝えることができるので、記事を書く際には重宝されます。
しかし読者の方に分かりやすくするという観点だけではなく、検索ブラウザにあなたの記事の内容をより深く知ってもらうために非常に重要な要素でもあります。
もし記事を書くときに見出しがHTMLで入力されていない場合、記事を読み取り、検索結果に反映してくれるロボットが記事の内容をうまく認識しずらいのです。
いわゆる、SEOと呼ばれる検索上位表示を狙うためには見出しは必須とも言えます。
見出しをHTMLで作るために
記事に必須とも言える見出しを、web初心者の方でも簡単に、HTMLで作る方法を早速見ていきましょう♩
見出しで使うHTMLタグの公式
今回使うHTMLタグは、こちらです！
hの後のナンバーは、1~6の数字が入ります。
また、見出しのタイトルとして表示したい文字は〇〇の部分に書きましょう。
では次はこの公式を使って、具体的に見出しの作成方法を見ていきましょう。
箇条書きリストを作ってみよう
例えばこんなリストを作る時、
HTMLはこの様になっています。
今回はHTMLで見出しを作成するために、入力すべき<body>から</body>の部分を説明していきます。
1.<hナンバー>でこれから見出しを作成するという宣言を、記事を読み取るブラウザのロボットに伝えています。
2.<hナンバー>記事タイトルや目次タイトル等の見出しテキスト</hナンバー>を順次並べていき、重要度のランク付けをそのブラウザのロボットに伝えていきます。
3.</hナンバー>で見出しの内容が終了した事を記事を読み取るブラウザのロボットに伝えています。
なので、実際にリストを作成するときは
見出しの重要度に沿って、<hナンバー>のナンバーの数値を入力してください。
続いて、<hナンバー>○○</hナンバー>中身である○○の部分をご自由に入力してください。
そのフォーマット部分の意味がよく分からない方はこのままコピペして頂くか、
別記事にHTMLのフォーマット基礎をまとめますので、そちらの記事でご確認ください。
まとめ：HTMLの見出しタグと公式
今回ご紹介したHTMLでの見出し作成のタグと公式をまとめます。
hの後のナンバーは、1~6の数字が入ります。
また、見出しのタイトルとして表示したい文字は〇〇の部分に書きましょう。
難しいものではないので、ぜひこの機会にマスターして他のHTML作りにつなげていきましょう♩
以上、jazziでした！
コメント