ブログを書くなら知っておきたい基本のHTMLタグ20選 - 【ちゃんこめBlog】インド在住OLの雑記ブログ

こんにちは、Kome（@chankomeppy）です。

多くのブログサービスではHTMLの知識がなくても編集できるようになっています。

はてなブログをはじめとする各社のブログサービスでは、テキストを装飾するためのツールが豊富に用意されているので、自分でHTMLを直接編集しなくても見栄えを整えることができます。

はてなブログの編集画面（見たままモード）では、赤枠内のツールを使えば、リンクを挿入したり、箇条書きにしたり、テキストを装飾したりできます。

こうしたテキスト装飾ツールは非常に便利ですが限界があり、書式が崩れてしまったり、思ったように表示されないということも起こります。SEOの観点からもよい書き方とは言えませんし、ブログをカスタマイズする際にも最低限のHTML知識は必要です。

そこで、この記事ではブログを書く上で知っておきたい基本のHTMLタグについて説明します！

この記事はこんな人にオススメ

初心者ブロガー
HTML学習者

はじめに
インライン要素のHTMLタグ
ブロック要素のHTMLタグ
さいごに

はじめに

HTMLとは？

HTML（Hyper Text Markup Language）とはWebページの文書構造を作るための言語です。

タグというマーク（命令）を使ってHTML文書の構造（ここからここまでは見出し、ここからここまでは段落など）を指定します。

開始タグ<●●>と終了タグ</●●>で囲まれた部分は要素と呼ばれます。

<●●>←開始タグ～～～終了タグ→</●●>

※ ●●にはHTMLタグが入ります。

ブロック要素とインライン要素

要素には「ブロック要素」と「インライン要素」の2種類があります。

ブロック要素

ブロック要素とはページを構成する大きなかたまりです。

ブロック要素同士が縦に並び^※、ブロック要素の前後には改行が入ります。

※CSSでスタイルを変更すれば横に並べることもできます。

▼ブロック要素のイメージ図

インライン要素

インライン要素とは行の一部のようなもので、インライン要素同士が横に並びます。

ブロック要素という箱のなかに、インライン要素という文章や画像といったコンテンツが詰め込まれているイメージです。

▼インライン要素のイメージ図

HTMLタグを正しく使用する重要性

各タグには「見出し」や「段落」といった、セマンティック上の意味があります。記述するコンテンツの意味に合わせて正しくタグを使用することで、コンピューターに正しい情報を伝えることができ、検索エンジンがユーザに適切な検索結果を返せるようになるので、SEOにおいて優位となります。

文字のフォントサイズを大きくして❝見出し風❞に使用している記事を見かけることがありますが、この場合コンピューターはそれを文章の一部として認識しています。正しく見出しタグを使用すれば、コンピューターに「見出し」であることを伝えることができます。

インライン要素のHTMLタグ

まずは、ブログ記事のテキストなどを装飾する際によく使う、インライン要素のタグを紹介します。

①太字タグ【b】

<b>～</b>で囲った部分を太字（bold）にします。

boldの「b」がタグ名になっています。

bタグはセマンティック上の意味を持たない太字です。見た目は太字で強調されますが、コンピューターにとっては何も強調されておらず、他のテキストと同じものとして認識されます。

使用例

<b>太字です。</b>

【表示例】
太字です。

②イタリック体タグ【i】

<i>～</i>で囲った部分をイタリック体（italic）にします。

italicの「i」がタグ名になっています。

イタリック体とはアルファベットの表記方法のひとつで、前後の文章と区別する際に使われます。例えば英文で外国の単語をあえてそのまま表示するような場合などに使われます。（例：Akihabara is like a heaven for anime otaku）

フォントやブラウザによってはイタリック体が適用されないこともあります。

iタグはbタグ同様にセマンティック上の意味を持ちません。見た目は前後の文章と区別されますが、コンピューターにとっては他のテキストと何の区別もありません。

イタリック体は斜めに傾いているため、しばしば「斜体」と混同されますが異なるものです。

斜体を表す場合は、font styleで「oblique」を指定して表します。

使用例

<i>イタリック体です。</i>
<span style="font-style: oblique;">斜体です。</span>

【表示例】
イタリック体です。
斜体です。

※spanタグについては後で説明します。

③下線タグ【u】

<u>～</u>で囲った部分に下線（underline）を引きます。

underlineの「u」がタグ名になっています。

uタグもセマンティック上の意味を持ちません。見た目は下線で強調されますが、コンピューターには他のテキストと同じものとしてと認識されます。

使用例

<u>下線を引きます。</u>

【表示例】
下線を引きます。

④強調タグ【em】

<em>～</em>で囲った部分を強調（emphasize）します。

emphasizeの「em」がタグ名になっています。

emタグは「普通の強調」を示し、通常イタリック体で表示されます。

コンピューターには「強調されたテキスト」として認識され、記事内で重要なテキスト部分に使われます。

使用例

<em>強調します。</em>

【表示例】
強調します。

⑤強調タグ【strong】

<strong>～</strong>で囲った部分をより強調（strong）します。

strongタグは「emタグよりも強い強調」を示し、通常太字で表示されます。

コンピューターには「強く強調されたテキスト」として認識されます。

strongタグを重ねて使うことで、さらに強く強調することができるので、記事内で最も重要な部分に使用されます。

使用例

<strong>強い強調</strong>
<strong><strong>もっと強い強調</strong></strong>
<strong><strong><strong>もっともっと強い強調</strong></strong></strong>

【表示例】
強い強調
もっと強い強調
もっともっと強い強調

※ 見え方は同じですが、コンピューターには「もっと強い強調」「もっともっと強い強調」だと伝わっています。

⑥打ち消し線タグ【s】

<s>～</s>で囲った部分を~~打ち消し（strike）~~します。

strikeの「s」がタグ名になっています。

sタグは「（過去には正しかったが）現在はすでに正確ではなくなった、関係なくなった情報」であることを示し、~~打ち消し線~~が引かれます。

使用例

<s>タージマハルの入場料は500ルピーです。</s>
⇒値上がりし、現在は1000ルピーです。

【表示例】
~~タージマハルの入場料は500ルピーです。~~
⇒値上がりし、現在は1000ルピーです。

⑦削除線タグ【del】

<del>～</del>で囲った部分を~~削除（delete）~~します。

deleteの「del」がタグ名になっています。

delタグは「削除・訂正された情報」であることを示し、~~打ち消し線~~が引かれます。

sタグと見た目は同じですが、コンピューターへの伝わり方は異なります。

使用例

インド人は3食<del>カレー</del>スパイスの効いた料理を食べています。

【表示例】
インド人は3食~~カレー~~スパイスの効いた料理を食べています。

⑧スモールタグ【small】

<small>～</small>で囲った部分を注釈・細目として小さく表示（small）します。

smallタグは「免責事項、警告、著作権などの注釈や細目」を示し、ひとまわり小さいサイズで表示します。　

smallタグはメインコンテンツではなく、あくまでも注釈や細目などの短いテキストに使われるものです。長いテキストのフォントサイズを小さくしたいからという理由でメインコンテンツに使用してはいけません。

使用例

<small>©ちゃんこめBlog</small>

【表示例】
©ちゃんこめBlog

➈短文引用タグ【q, cite】

<q>～</q>で囲った部分を引用文（quote）とします。

<cite>～</cite>で囲った要素をイタリック体で表示して引用元・出典（cite）を表します。

quoteの「q」がタグ名になっています。

qタグは「短い引用文」を示します。通常はテキストが❝　❞や「　」で囲まれるので、自分で引用符をつける必要はありません。（当ブログでは「かぎ括弧」で囲まれます）

段落ごとの長い引用文を示す場合は、後で説明するblockquoteタグが使われます。

文章を引用する際はその引用元を明示する必要があります。
citeタグを使用して「引用元」を示します。citetタグで囲んだ要素は、通常イタリック体で表示されます。

引用元がWebサイトの場合、後で説明するaタグと併用して引用元のURLを指定するやり方が一般的です。

使用例

<cite><a href="https://www.chankome.com/entry/blog-html">ちゃんこめBlog</a></cite>では<q>qタグは「短い引用文」を示します</q>と説明されています。
<q>「神々と信仰の国」または「喧噪と貧困の国」</q>といわれるインド</q>と<cite>地球の歩き方</cite>に書かれているが・・・

【表示例】
ちゃんこめBlogではqタグは「短い引用文」を示しますと説明されています。
「神々と信仰の国」または「喧噪と貧困の国」といわれるインドと地球の歩き方に書かれているが・・・

⑩改行タグ【br】

<br>で改行（break）します。

breakの「br」がタグ名になっています。

brタグは「文章の途中で強制的に改行する要素」で、段落を変えずに改行する際に使用します。

開始タグのみで完結し、終了タグは必要ありません。このような要素を空要素といいます。

brタグをいくつも重ねて何行も改行することで段落のようなものを作っているケースを見かけますが、これは正しい使い方ではありません。段落を作る場合は、ブロック要素の項目で説明するpタグを使用するべきです。

使用例

強制的に<br>改行します。

【表示例】
強制的に
改行します。

⑪画像タグ【img】

<img>で画像（image）を表示します。

imageの「img」がタグ名になっています。

imgタグは「画像を表示する要素」です。brタグ同様に空要素なので、終了タグは不要です。

imgタグは単体では使えず、src属性とセットで記述します。HTMLの属性とは、要素の設定変更をするオプションのようなものです。

imgタグで使用する主な属性は以下の通りです。

属性	説明	値
src (必須)	画像URLの指定	https://～～
alt (推奨)	画像の代替テキスト	テキスト
title(任意)	画像の補足情報	テキスト
width (任意)	画像の横幅	px値, %値

src属性は必須で、画像のURLを指定して画像を表示します。

alt属性は必須ではありませんが、設定することが強く推奨されています。読み上げソフトは画像のalt属性の説明を読み上げますし、ネットワークエラーで画像がうまく読み込めない場合は画像の代わりにalt属性の説明が表示されます。検索エンジンにどのような画像であるかを正確に伝えることもできるので、alt属性はほぼ必須と言ってもいいくらい、重要です！

▼はてなブログではHTMLをいじらなくても画像挿入時にalt属性を設定できます。

title属性は任意項目です。PCで閲覧時に画像にカーソールを合わせると、title属性に入力したテキストが補足情報として表示されます。「タイトル」という名称ですが補足情報を示すものです。スマホ閲覧時には何も表示されません。

はてなブログの場合、alt属性とtitle属性を設定しないと、自動的に[f:id:xxxxx:yyyymmddhhmmssj:plain]が設定されてしまいます。
title属性を空にする場合は、「title=""」と設定する必要があります。

[f:id:xxxxx:yyyymmddhhmmssj:plain]

xxxxx: はてなブログID

yyyymmddhhmmss: 画像アップロードの年月日時分秒

j: 画像の種類（j⇒jpeg, p⇒png, g⇒gif）

width属性で画像の横幅を変更できます。画像を小さく表示したいな、という場合に●●px、●●%とサイズを指定するのに便利です。横幅を変更すると、縦横比はそのままで高さも変更されます。

使用例

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/c/chankome/20200210/20200210201949.png" alt="サンプル画像" title="サンプル画像" width="300px" max-width="50%">

【表示例】
サンプル画像

PCで閲覧していたら、表示例の画像にカーソールを重ねてみてください。「サンプル画像」というタイトル情報が表示されるはずです！

⑫アンカーリンクタグ【a】

<a>～</a>で囲った部分にリンクを指定（anchor）します。

anchorの「a」がタグ名になっています。

aタグは「ハイパーリンク先を指定する要素」です。anchorは船の錨（いかり）（つなぎとめて固定するもの）という意味があり、指定したリンク先につなぐための重要なタグです。

aタグは単体では使えず、主にhref（hyper reference）属性とセットで記述します。

aタグで使用する主な属性は以下の通りです。

属性	説明	値
href (ほぼ必須)	ハイパーリンク先の指定	https://～～ mailto:～～ #～～
target (任意)	リンク先ターゲットの指定	_blank
title(任意)	リンク先の補足情報	テキスト

href属性値にはサイトのURL（https://～～）以外にも、メールアドレス（mailto:～～）や特定の場所（#～～ /ページ内リンク）を指定できます。

target属性では、どのようにリンク先を開くか設定できます。「_blank」を設定すると、新しいタブやウィンドウでリンク先を開くことができます。※何も設定しなければ現在のウィンドウでリンク先を開きます。

imgタグで説明したtitle属性はaタグでも使用でき、PCでカーソールを重ねると補足情報が表示されますが、スマホでは表示されません。

aタグはテキストだけではなく、pタグ（段落）やimgタグ（画像）を囲むこともできます。

使用例

<a href="https://www.chankome.com" title="ちゃんこめBlog ホーム画面に移動します。">ちゃんこめBlog</a>
<a href="#sample">ページ内リンク</a>
<a href="https://www.chankome.com" target="_blank"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/c/chankome/20200210/20200210201949.png" alt="サンプル画像" title="" width="200px" max-width="100%"><br>新しいタブでブログトップ画面を開きます</a>

【表示例】
ちゃんこめBlog
ページ内リンク
 サンプル画像
新しいタブでブログトップ画面を開きます

例ではページ内リンク先に#sampleを指定しています。
↓↓↓↓↓

↑目には見えませんが、ここに<p id="sample"></p>と記述しているので、ここにジャンプします。

ページ内リンク指定先（ジャンプする目的地）に記述するコード：
<p id="●●"></p>
リンクコード：
<a href="#●●">テキストとか</a>

目的地のコードには「id」、リンクのコードには「#」を使うのがポイントです💡

ブログ記事の目次には、この方法が使われています。

⑬spanタグ【span】

<span>～</span>で囲った部分がインライン要素としてグループ化されます。

spanタグ単体では意味を持ちませんが、spanタグで囲った部分をグループ化してフォントのサイズや色など、スタイルを変更することができます。

よく使うstyle属性については、使用例でご確認ください。複数使うこともできます。

使用例

<span style="font-size:20px;">フォントサイズ（px値）</span>
<span style="font-size:80%;">フォントサイズ（%値）</span>
<span style="font-weight:bold;">フォントの太さ</span>
<span style="font-family:Meiryo UI;">フォントの種類（メイリオUI）</span>
<span style="font-family:serif;font-size:22px;font-weight:bold;">フォントの種類（serif）＋サイズ＋太さ</span>
<span style="color: blue;">フォントの色</span>
<span style="background-color:#ffcaca;">背景色</span>

【表示例】
フォントサイズ（px値）
フォントサイズ（%値）
フォントの太さ
フォントの種類（メイリオUI）
フォントの種類（serif）＋サイズ＋太さ
フォントの色
背景色

これらは手軽にテキストを装飾することができて便利ですが、HTMLに直接記述すると長くて複雑になります。また冒頭で書いた通り、HTMLは文書構造をつくるための言語です。

従って、HTMLが複雑で長くなるものや、何度も使用するものに関してはCSSで指定するべきだと思います。AmebaブログなどCSSをいじることができないブログサービスの場合はやむを得ないですが･･･。

ブロック要素のHTMLタグ

次に、代表的なブロック要素のタグを紹介します。

⑭見出しタグ【h1～h6】

<h1>～</h1>で囲った部分が見出し（headline）となります。

headlineの「h」がタグの名前になっています。

hタグは「見出し」を示します。h1, h2, h3, h4, h5, h6というように6種類あり、数字が小さいほど重要度が高い大きな見出しを意味します。

h1：1番大きな見出し
h2：2番目に大きな見出し
h3：3番目に大きな見出し
h4：4番目に大きな見出し
h5：5番目に大きな見出し
h6：6番目に大きな見出し

見出しについて、Googleでは以下の通り言及しています。

見出しタグを使用して重要なテキストを強調する
一般に、見出しタグはタグに囲まれているテキストをページ上の通常のテキストよりも大きく表示するため、ユーザーにとってはそのテキストが重要であるという視覚的な手がかりとなり、見出しテキストの下に続くコンテンツの内容について理解しやすくなります。複数の見出しサイズを正しい順序で使用すると、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。
（中略）
ページ上のコンテンツの主要なポイントと下位のポイントは何かを検討し、それに応じてどこに見出しを使用するか決定します。
Google Search Consoleヘルプ
検索エンジン最適化（SEO）スターターガイド

説明されている通り、ブログ記事の要所で、正しい順番（h1→h2→h3→･･･）で使用することが推奨されています。

h1は最も大きな見出しなので、ブログ記事内では1度だけ使用するのが望ましいです。
⇒つまり、h1は記事タイトルに使用^※します。

※各ブログサービスでは、記事タイトルがh1タグになるように設定されています。

h1を記事タイトル、h2を大見出し、h3を中見出し、h4を小見出しとして使用するのが一般的ですが、

はてなブログの見たままモードではではh1を記事タイトル、h3を大見出し、h4を中見出し、h5を小見出しとして使用する設定になっています。SEO的には見出しを正しい順番で使う＝h2を大見出しにした方が良いという意見もあるので、気にされる方はHTML編集モードで変更した方がいいかもしれません。Markdownで入力している方は大見出しを「##」とすればいいですね。

使用例

<h1>記事タイトル</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し1</h4>
<h5>小見出し2</h5>
<h6>小見出し3</h6>

【表示例】

See the Pen headline by chankome (@chankome) on CodePen.

⑮段落タグ【p】

<p>～</p>で囲った部分が段落（paragraph）となります。

paragraphの「p」がタグ名になっています。

pタグは「段落」を示します。段落とは文章において見やすくまとめられた文の塊（ブロック）であり、複数の文によって構成されるものであるとWikipediaでは定義しています。（出典：段落 - Wikipedia）

しばしば⑩改行タグ【br】と混合されがちですが、brタグは強制的な改行、pタグは段落を示しその意味は異なるので、使い方を意識するべきです。

使用例

<p>一つ目の段落です。</p>
<p>二つ目の段落です。</p>
<p>三つ目の段落で<br>強制的に改行します。</p>

【表示例】

See the Pen paragraph by chankome (@chankome) on CodePen.

⑯引用タグ【blockquote, cite】

<blockquote><p>～</p><cite>～</cite></blockquote>で囲った部分が段落引用（blockquote）、引用元（cite）を表します。

blockquoteタグは「引用文」であることを示し、長いテキストを段落（<p>～</p>）ごと引用する場合に使用されます。短文引用の場合は、先に紹介したqタグを使用します。

blockquoteタグを使用すると、各ブログサービスやブログテーマで定められた引用の囲み枠で表示されるかと思います。

当ブログでは、blockquoteタグに以下のスタイルを適用しています。

長い引用文（段落ごと）
ここに引用元を明記

blockquoteタグを使用した部分は他の文章よりも目立って表示されるため、引用ではなく「テキストを目立たせるため」に使われていることがあります。これは本来の目的とは異なるため、blockquoteタグを引用文以外に使用するべきではありません。

qタグと同様に、blockquoteタグ使用時にはciteタグを用いて引用元を明示します。

使用例

<blockquote>
  <p>インドのトイレには「汚さそう」「臭そう」「屋外排泄」というような固定概念が付きまとっており、ポジティブなイメージを抱く人はほとんどいないだろう。</p>
    <cite>
      <a href="https://www.chankome.com/entry/indian-toilet" target="_blank">難易度別にインドのトイレを比較してみる ～衛生面や気をつけたい点など～ | ちゃんこめBlog</a>
    </cite>
</blockquote>

【表示例】

インドのトイレには「汚さそう」「臭そう」「屋外排泄」というような固定概念が付きまとっており、ポジティブなイメージを抱く人はほとんどいないだろう。
難易度別にインドのトイレを比較してみる～衛生面や気をつけたい点など～ | ちゃんこめBlog

引用タグを使用する必要性

引用する際は必ず引用タグ（blockquoteタグ, qタグ）を使用しなければいけません。

引用タグを使用せずに他サイトの文章を載せると、Googleなどの検索エンジンに「コピペした文章」であると認識され、検索順位が下がったり、最悪の場合は悪質なコピーコンテンツであるとして検索結果に反映されなくなったりする可能性があります。

「引用」「転載」「参考」「出典」と著作権について

blockquoteタグ、qタグ、citeタグを正しく使用しないと、気づかないうちに著作権を侵害することになります。

SEOへの悪影響だけでなく、法律遵守の面からも、引用タグの使い方はしっかりと覚えておくべきかと思います。

⑰リストタグ【ol, ul, li】

<ol><li>～</li></ol>が順序付きのリスト（ordered list）、
<ul><li>～</li></ul>が順序なしのリスト（unordered list）です。

ordered listの「ol」、unordered listの「ul」、listの「li」がタグ名になっています。

olタグは①②③④･･･というような「順序があるリスト」、
ulタグは箇条書きの「順序がないリスト」、
liタグは「リストの項目」を示します。

liタグをolまたはulタグで囲みます。説明よりも使用例を見た方が分かりやすいと思うので、ご確認ください。

使用例

<ol>
  <li>1番目の項目です。</li>
  <li>2番目の項目です。</li>
  <li>3番目の項目です。</li>
</ol>

<ul>
  <li>箇条書きの項目です。</li>
  <li>箇条書きの項目です。</li>
  <li>箇条書きの項目です。</li>
</ul>

【表示例】

See the Pen list by chankome (@chankome) on CodePen.

⑱表のタグ【table, tr, th, td】

<table>～</table>で表（table）を作成し、
<tr>～</tr>で表の横一列（table row）、
<th>～</th>で表の見出しセル（table header cell）、
<td>～</td>で表のデータセル（table data cell）を定義します。

table rowの「tr」、table header cellの「th」、table data cellの「td」がタグ名になっています。

HTMLで表を作る基本的な構造は、tableタグで「表」を作り、その中にtrタグで「横一列」を示し、さらにその中にthタグで「見出しセル」、tdタグで「データセル」を示します。

theadタグを使用すればテーブルのヘッダーとなる行部分、tbodyタグを使用すればテーブルのボディ部分を定義することができます。（省略可能）

説明よりも使用例を見た方が分かりやすいと思うので、ご確認ください。

使用例

<table>
  <thead>←★省略可能
    <tr>
      <th>見出しセル1</th>
      <th>見出しセル2</th>
      <th>見出しセル3</th>
    </tr>
  </thead>←★省略可能
  <tbody>←◎省略可能
    <tr>
      <td>データセル1（1行目）</th>
      <td>データセル2（1行目）</th>
      <td>データセル3（1行目）</th>
    </tr> 
    <tr>
      <td>データセル1（2行目）</th>
      <td>データセル2（2行目）</th>
      <td>データセル3（2行目）</th>
    </tr>
  </tbody>←◎省略可能 
</table>

【表示例】

See the Pen table by chankome (@chankome) on CodePen.

⑲水平線タグ【hr】

<hr>で水平線（horizontal rule）を引いてテーマや話題を区切ります。

horizontal ruleの「hr」がタグ名になっています。

hrタグは、話のテーマや話題が変わったときの「区切り」を示しており、通常は水平線が引かれます。

かつては単なる水平線として使われていましたが、現在は「話の区切り」という意味で使われるので注意してください。

使用例

<p>インドのコロナウイルス感染者数は中国を抜いてアジア最大となりました。日本では外出自粛制限が解除され・・・</p>
<hr>
<p>さてここで、在宅勤務のために購入してよかったと思う商品を紹介したいと思います。
</p>

【表示例】
インドのコロナウイルス感染者数は中国を抜いてアジア最大となりました。日本では外出自粛制限が解除され・・・

さてここで、在宅勤務のために購入してよかったと思う商品を紹介したいと思います。

⑳divタグ【div】

<div>～</div>で囲った部分がブロック要素としてグループ化されます。

divisionの「div」がタグ名になっています。

divタグ単体では意味を持ちませんが、divタグで囲った部分をグループ化して、ページのレイアウトを決めたり、CSSでカスタマイズする際の親要素としてよく使用されます。

spanタグで紹介したstyle属性を使用して例を挙げますが、実際にこのように使用している人は殆どいないと思います（普通はHTMLを直接編集せず、CSSを編集します）。

使用例

<div style="padding:10px;background-color:#cccccc80;border:5px dashed #ccc;border-radius:10px;">
  <p>簡単な囲み枠を作成しました。CSSでスタイルを指定するのが一般的ですが、例なのでHTMLに直接記述してみました。</p>
</div>

【表示例】

簡単な囲み枠を作成しました。CSSでスタイルを指定するのが一般的ですが、例なのでHTMLに直接記述してみました。

さいごに

HTMLタグの意味を理解する目的は、見た目を整えること、そしてGoogleなどの検索エンジンにブログ記事の内容を正しく伝えて検索流入を増やすことにあると思います。

HTMLタグは100個以上あり、全て覚えるのは大変ですし、ブログを書く上で全て覚える必要もありませんが、今回紹介したタグはすぐに使えるものばかりです。

慣れるまでは難しいかもしれませんが、ぜひ使ってみてください。
それでは！

ブログブログカスタマイズ

HTML・CSSについて学べる書籍

リンク
Point
Chapter1でHTMLとCSSの基本について分かりやすく解説されています。「HTMLって何？」「CSSって何？」というビギナーの方にオススメ。Kindle Unlimited対象。
リンク
Point
辞書的な感じで使える入門書。はてなブログのカスタマイズでもよく使うCSSが分かりやすくまとまっているので、ブログをこれからどんどんカスタマイズしていきたい！という方にオススメ。