ホームページを読みやすくするためによく使うHTMLタグ

ホームページは読んでもらわなければ意味がありません。HTMLタグが適切に使用されていないウェブサイトのコンテンツは、非常に読みづらく、Googleのクローラーに評価してもらえません。

読みやすいホームページを作成するには、HTMLタグの意味を理解し、正しく扱う必要があります。今回は、基本的なHTMLタグやその覚え方をご紹介します。

HTMLタグとは？

Web担当者の中には、HTMLに対して正しい知識を持っていない方が意外と多いです。なぜなら、WordPressを利用すれば、手軽にHTMLを記述できるからです。そもそも、HTMLとは、ウェブページの土台を作るための言語です。タグと呼ばれるものを利用して、記述していきます。

HTMLの基本

HTMLには、必ず開始タグと終了タグがあります。コーディング初心者にありがちなのが、終了タグの入れ忘れです。ブラウザで表示を確認した際、表示がおかしいと感じた場合は、タグが初めと終わりに並んでいるかチェックしましょう。

見出しを付ける

まずは、見出しタグの使い方をマスターしましょう。見出しタグとは、<h>タグのことで、下記のようなものがあります。

【<h>タグの使用範囲】

<h1></h1>～<h6></h6>

【<h>タグの使用実例】

<h1>コーディングの基礎</h1>

<h2>コーディングのメリット・デメリット</h2>

<h3>コーディングの作業環境</h3>

<h4>コーディングの実践方法</h4>

見出しタグを設定すると、他のテキストよりも大きく強調され、手軽にグルーピングができます。数字の小さな見出しタグほど、SEO評価を受けやすくなります。この時、必ず<h1>～<h6>が見出しタグであるとは限りません。

サイトによっては、<h1>～<h4>までしか、使用できないこともあるので、エンジニアに確認しながらコンテンツのアップロードをしてください。詳しい規則性については、下記を参考にしてください。

https://www.site-shokunin.com/blog/seo/3430.html

段落を作る

文章をひとつのかたまり（段落）であると、指定する場合、<p>タグによって、文章を囲みます。

<p>あいうえおかきくけこさしすせそたちつてと</p>

<p>ＡＢＣＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳ</p>

基本的には、見出しタグの下にあるテキストを<p>タグを使用して、段落をつけます。もし、段落がつかない場合、CSSの設定が正しくできていない可能性が高いため、段落幅を調整して利用しましょう。

リストを作る

規則性をもったコンテンツには、リストを指定してください。たとえば、下記のようなコンテンツです。

このように、規則性をもっている場合は、<ul></ul>を上下にセットして、<li></li>

を入れていきます。そのため、下記のように記述します。

<ul>

<li>コーディングの基礎1：毎日、作業する。</li>

<li>コーディングの基礎2：コードの意味を覚える。</li>

<li>コーディングの基礎3：毎日、サイトを作る。</li>

</ul>

リストタグを入れると、自動的に冒頭の「・」が表示されるため入れる必要がありません。一方で、コンテンツの冒頭に番号がつくものがあります。その場合は、<li>タグではなく、<ol>タグを利用します。

<ul>

<ol>コーディングの基礎：毎日、作業する。</ol>

<ol>コーディングの基礎：コードの意味を覚える。</ol>

<ol>コーディングの基礎：毎日、サイトを作る。</ol>

</ul>

すると、<ol>タグを利用した数に応じて、番号が表示されます。今回であれば、1番～3番が表示されます。しかしながら、<ol>は、ほとんど使用する機会がありません。<li>タグしか使わないことが多いため、上下に<ul>タグをセットして正しく使っていきましょう。

まとめ

一目見てページの構成が分かる見出しや段落、要約が分かるリストを使用することは、だれにとっても読みやすく分かりやすいホームページを作成するには重要なことです。HTML入門の本やホームページを見れば、今よりももっと知識を身に付けることができます。それらを参考にしながら、読みやすいホームページを作成してみましょう。