このページには、優先的に覚えていただきたいHTMLタグを掲載しています(随時更新中)。

各ボックスの見方は次のとおりです。

html
ここに書かれているものを記事(テキストモード)にコピペしてください
ブラウザでの表示
ブラウザではここに表示されているように表示されます
※WordPressをご利用の場合、テーマによってデザインが異なる場合があります(CSSを利用してデザインを変更することもできますが、このページでは触れません)。

1.箇条書き(ul・ol・li)

箇条書きタグは、文章の読みやすさを向上させてくれます。
読みやすさの違いは次のとおりです。

箇条書きタグを使った例

  • 項目が長文になり改行が必要になった場合も、ビュレット(項目の先頭の点)の幅だけインデントされる(行頭の文字が右にずれる)ため読みにくくなりません。読者にもストレスを与えることもありません。
  • ほら、インデントされていますね。
箇条書きタグを使わない例
・タグを用いず自分で中黒(・)を打っても、インデントせずに改行されてしまうため読みにくく、読者に多大なストレスを与えます。
・また、どうしても素人のブログ(サイト)のような印象を与えてしまうでしょう。

1-1.箇条書き(ビュレット)

ブラウザでの表示

  • 項目1
  • 項目2
  • 項目3
html

<ul>
	<li>項目1</li>
	<li>項目2</li>
	<li>項目3</li>
</ul>

このように、<ul>タグと<li>タグ(上記)、<ol>タグと<li>タグ(下記)のように必ずセットで用います。
また、<li>タグを増やせば、項目4、項目5と項目を増やすことができます。

1-2.箇条書き(番号)

ブラウザでの表示

  1. 項目1
  2. 項目2
  3. 項目3
html

<ol>
	<li>項目1</li>
	<li>項目2</li>
	<li>項目3</li>
</ol>

2.リンク(a)

自ブログ(の別ページ)や他ブログへのリンクを貼りたくなることがあります。

※本例は当サイトのトップページへのリンクです。

html

<a href="リンク先URL" target="_blank">リンク先ページタイトル</a>

※ target="_blank"を記述することによって、リンク先を別のウィンドウ(タブ)で開かせることができます。リンク先を同一ウィンドウで(自ブログを閉じて)開かせたい場合には記述は不要です。

3.引用(blockquote)

他のブログの文章などを引用したくなる(すべき)ことがあります。
引用にはルールがあり、ルールに則っていない引用は重複コンテンツ(パクリコンテンツ)としてGoogleからのペナルティを受けかねません。

ブラウザでの表示

マッチングビジネスやブログなどのインフォビジネスをひとりで運営するノウハウを提供しています。専門家になって競合のないビジネスを始めませんか?

出典: HERO Biz – 専門家になって競合のないビジネスを手に入れる

※本例は当サイトのトップページからの引用です。
※引用する内容はそのまま転記しましょう。表現を変えてもいけません。

html

<blockquote>
<p>引用する内容</p>
<p><cite>出典: <a href="引用元URL" target="_blank">引用元ページタイトル</a></cite></p>
</blockquote>