ホームページを読みやすくするためによく使う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入門の本やホームページを見れば、今よりももっと知識を身に付けることができます。それらを参考にしながら、読みやすいホームページを作成してみましょう。

Share |

TRACKBACKS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

関連記事こちらの記事も合わせてどうぞ。