デキるライターは知っている?htmlでの見出しや表、リストの書き方を解説

html-tag

ブログなどで使うhtmlですが、ライターも記事を書くときに使います。表や箇条書き、また見出しを作る時も便利です。htmlとは文章をわかりやすくするための言語です。見出し、箇条書き、表などを表示する事ができます。他にも色々なタグがあるのですが、まずはよく使う、見出し、表、箇条書きのタグをご紹介します。

htmlタグを使う事によって、読者が読みやすくなるだけでなくGoogleなどの検索エンジン対策にもつながるので是非覚えるようにしてください。

htmlでの見出し

headline

記事を読む時、ただだらだらと書いているものよりも何の事について書いてあるか見出しがついていたほうがわかりやすいです。見出しをつけるためにhtmlを使います。

見出しタグの種類

  • <h1>見出し</h1> 1番に来る見出し、大見出し
  • <h2>見出し</h2> 2番に来る見出し、中見出し
  • <h3>見出し</h3> 3番に来る見出し、小見出し

これよりさらに細かく見出しを作る時は、h4、h5と続きます。

見出しの順番を間違えないようにしてください。必ず一番大きな見出しがあって、その下にh2、h3と続くようになります。

正しい使い方

上記のようにhtmlタグをつけることで、ブラウザで表示をすると1番に来る見出しが一番大きな文字で、数字が進むにつれ文字の大きさが小さくなっていきます。これは設定をする必要がなくこのように表示してくれる便利なものです。

なぜ必要か

見出しタグをつける事によって、読者がぱっと見た時に文章の構成がわかりやすいのです。見出しをみるだけである程度の内容がわかるので、文章を読んでいて頭に入りやすいです。

これだけでも見出しタグは大きな効果があるのですが、それだけではないのです。Googleなどの検索エンジンも見出しタグがあった方が構成がわかりやすいため、SEO対策にも効果が現れます。

htmlタグとGoogle

読者だけでなくGoogleなどの検索エンジンにとっても、その記事がどんなコンテンツなのかがわかりやすい方が良い影響をあたえます。SEO対策として上位に来るようになるのです。ただSEO対策をするためにはいくつかルールがあります。

ページを構成するため以外に見出しタグは使わない

確かに見出しタグがあればぱっと見た時と見た目はよくなります。しかし見出しタグの目的は、読者にとっては構成がわかりやすいようにするため、そしてSEO対策としてはgoogleなどの検索エンジンにとっても同じ事がいえます。

形だけの見出しであれば結局何を書いているかが伝わりません。

一番大きな文字になるh1タグは1ページに1つ以上使わない

h1タグはページの中で一番重要な事で、これからこういう内容の事を書きますよという案内にもなっています。もし1ページに複数入ると結局何がかきたいのかわからなくなりますし、検索エンジンにもひっかかりにくくなります。h1タグに書かれている事は、そのページに書かれている事だと思ってください。

見出しタグの順番

たとえばh3がh2の前に来るなど順番がばらばらになると構成が崩れます。読者にとっても読みにくいですし、構造が崩れているため検索にもひっかかりにくくなります。

htmlでの表

htmlでの表とは

WEBライターが表を記事の中に入れたい時、htmlを使って表を作るときれいに表示されます。料金表や、特徴の比較など文章で書くよりも表を作った方が一目瞭然にわかりやすいです。

それでは表を作る時にどのようなタグを使うのか、またhtmlを使っての表の作り方をご説明します。htmlというと難しいイメージがあるのですが、タグと意味だけ覚えていただけたらあとは簡単です。

また表があると記事の内容もよりわかりやすくなるので、是非マスターしてください。

htmlで表を表示する時に使うタグ

使うタグはtable、tr、th、tdです。

table

表を表すhtmlの最初と最後につけます。

tr

テーブルの行にあたる部分です。行の数だけ必要となります。

th

テーブルの見出しに当たる部分です。見出しの分だけ必要となります。

td

実際のデータ(項目)の部分にあたります。

htmlでのリスト

htmlでのリストとは

htmlを使って箇条書きをきれいに作る事ができます。またデザインを変える事ができるのも良いところですね。

読者にとって、要点がまとめてあるので、どんな事を書いた記事であるのかがわかりやすくなります。

htmlでリストを表示する時に使うタグ

リストを表示したい時は<li>と<ul>を使います。

<li>~</li>を作ったら<ul>~</ul>で囲んでください。

<li>~</li>の中にはdivやh1~h6など他のタグを入れる事ができます。

見出しを箇条書きにもできるという事です。

htmlでの見出しや表、リストがあると読者が読みやすい

文章の中にhtmlタグを利用する事によって、自動処理をしてくれるのでWEBにきれいに表示してくれます。またGoogleなど検索エンジンはタグを確認する為、タグの内容は検索されやすくSEO対策にもなります。

html自体は見た目を変えるなどの目的ではなく、文章をわかりやすくしてくれるものです。

見出しタグのh1~h6、改行タグのbr、リストタグのul、ol、表タグのtableなどを覚えておくと良いでしょう。ここで紹介したもの以外にも文章構造を意味づけするためのタグが多くありますので、意味だけでも知っておくとさらに読みやすい記事にする事ができるでしょう。

記事を読んでもらう為には文章の内容だけでなく、見やすさも大切です。htmlタグは文章をさらにわかりやすくする働きをしてくれます。