MENU

出張デモ

資料請求
見積依頼

お問い合わせ

CONTACT

お問い合わせ

サイト職人CMSに関する
お問い合わせ・ご相談はこちらまで

東京本社

0120-546-384

受付時間 平日9:30~18:00

関西オフィス

0120-546-218

受付時間 平日9:30~18:00

  1. HOME
  2.  > 
  3. サイト職人スタッフブログ
  4.  > 
  5. ホームページを読みやすくするためによく使うHTMLタグ

サイト職人スタッフブログ

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

9dab7b986367c03354e279e2b920dd2a_s

ホームページは読んでもらわなければ意味がありません。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>が見出しタグであるとは限りません。

htag

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

 

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

 

段落を作る

ptag

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

 

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

<p>ABCCDEFGHIJKLMNOPQRS</p>

 

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

 

リストを作る

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

ultag
このように、規則性をもっている場合は、<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>タグをセットして正しく使っていきましょう。

oltag

まとめ

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

PAGETOP