ブログ初心者が覚えておきたい HTML タグ一覧と基本的な使い方

WordPress ブロックエディターを使ってブログを書いているなら、細かい HTML タグを覚える必要はないかもしれません。

でも、記事を書くことにちょっと慣れてきたなら、各タグの使い方と役割を理解しておくことでさらに読みやすい記事が書けるようになると思います。

そこで今回はブログ記事内でよく使うタグをまとめました。もしかすると使ったことがないタグがあるかもしれません。

HTML タグの基礎

まず基本の “キ” からおさらいしておきましょう。

01. 小文字で書く

タグは半角英数字と半角記号を使います。英字は大文字でも小文字でもかまいません。

ただ、HTML に似た XHTML というものがあり、XHTML ではすべて小文字にしなければならない、というルールがあります。

そうした経緯もあって、混同を避けるために「HTML タグは小文字で書く」というのが一般的です（タグを大文字で書いているサイトを見かけることはなくなりました）。

02. 開始タグと終了タグがある

タグには大きく分けて 2 種類あります。

• 開始タグと終了タグを必要とするもの
• 開始タグのみで OK なもの（空要素）

たとえば、段落を意味する <p> は以下のように使います。

<p>ここがひとつの段落になります。</p>

スラッシュ「/」をつけることで「閉じる」という意味をもつ終了タグになります。

HTML は <開始タグ> ～ </ 終了タグ> でワンセット、と覚えておきましょう。

ただし例外として、改行を意味する <br> のように単独で使われるタグもあります。

<p>任意の場所で改行させてみましょう。<br>
あまり多用すると読みづらいかも？</p>

このように、</ 終了タグ> がなく、単独でも動作するタグを「空要素」と呼びます。

03. タグに属性をつけられる

各タグには以下のように「属性」をつけることができます。

<p 属性="値"> ～ </p>

たとえば以下は class をつけたものです。CSS のスタイルを適用したい（装飾したい）ときに使うものですね。

<p class="red">この段落には “red” というクラス名がつきます。</p>

CSS でフォントカラーを「赤」にしておくと、class="red" がある要素は赤文字になります。

.red { color: red; }

ほかにも属性はたくさんありますが、属性をつけることによりいろいろなコントロールができる、と覚えておきましょう。

04. タグは入れ子にできる

HTML タグは入れ子にして使うことができます。

タグの中にさらにタグがある、ということですね。

<p><strong>ここが強調文字</strong>になります。そのほかは普通の文字です。</p>

このとき、順番が前後しないよう注意してください。以下のような形は NG です。

<strong><p>ここが強調文字</strong>になります。そのほかは普通の文字です。</p>

ブログ記事内で使うタグが複雑な形になることはめったにないと思いますが、複雑になるときは改行＋インデントで整理するのが一般的です。

<div class="box1">
    <div class="box2">
        <p>ここは段落です。</p>
    </div>
</div>

ブログ記事でよく使うタグ一覧

それでは、記事でよく使うタグをご紹介していきます。

見出しタグ <h1> ～ <h6>

見出しタグは、文字どおり見出しに指定するものです。<h1> から <h6> まで 6 段階あって、若い番号のほうが強い意味を持ちます。

テーマにもよりますが、記事タイトルには最も大きな見出しとして <h1> が割り当てられていることが多いですね。

そのの場合、記事内の大見出しを <h2>、中見出しを <h3> と順番に使っていくのが正しい使い方です。いまご覧いただいているこの記事も、以下のようになっています。

<h1>ブログ初心者が覚えておきたい HTML タグ一覧と基本的な使い方</h1>
	<h2>HTML タグの基礎</h2>
		<h3>01. 小文字で書く</h3>
		<h3>02. 開始タグと終了タグがある</h3>
		<h3>03. タグに属性をつけられる</h3>
		<h3>04. タグは入れ子にできる</h3>
	<h2>ブログ記事でよく使われているタグ一覧</h2>

ただダラダラと文章が続いているよりは区切りがあって読みやすいと思いますし、検索エンジンもこの見出しを評価対象としています。

あまりに記事が短い場合（500 文字程度など）は見出しがなくてもかまいませんが、長くなってしまう場合は必ず見出しを入れましょう。

WordPress では、プラグインを使ってこの見出しから目次を自動生成することもできます。

「Table of Contents Plus」の設定方法・使い方

段落タグ <p> と改行タグ <br>

記事を書いているときに、段落タグや改行タグを意識する必要はありません。

ブロックエディターでは、Enter で段落ブロックが挿入され、Shift ＋ Enter で改行できます。

ただ、段落と改行がどのような意味をもつかは覚えておいたほうがよいでしょう。以下の記事で詳しく解説しています。

連続改行 br は NG！ HTML の正しい改行・段落・空白行の使い方

句読点ごとに細かな改行を入れたり、1 つの段落がやたらと長かったり、1 行ごとに間隔をあけたり…。このあたりは書き手のセンスというか特徴が表れる部分です。

今はタブレットやスマホでブログが読まれることが多いので、PC での見た目だけ考えて書くのではなく、スマホでの読みやすさも考慮しなければなりません。

これが正解だ！ という絶対的なルールはないので、ブログ内のルールを統一してください。記事ごとに書き方がバラバラだと読者は違和感を覚えてしまいます。

リストタグ <ul> <ol>

リストタグは箇条書き用のタグです。

<ul> は順序のないリスト、<ol> は順序があるリストで、どちらも <li> と組み合わせて使います。

<ul>
	<li>ここが 1 つめ</li>
	<li>ここが 2 つめ</li>
</ul>

<ol>
	<li>ここが 1 つめ</li>
	<li>ここが 2 つめ</li>
</ol>

実際に表示すると、<ul> にはただの点がつき、<ol> には数字が振られます（※ WordPress テーマによってデザインが異なる場合があります）。

<br> で改行して箇条書きにしてもよいのですが、リストタグを使うことで検索エンジンが構造を認識しやすくなる、というメリットがあります。

リストを多用すれば検索順位が上がるわけではありませんが、せっかくタグが用意されているのですから使うべきところには使いましょう。

リンクタグ <a>

リンクタグは、他のサイトや自分のブログ記事へリンクするときに使います。ページ内の特定の位置に移動させるジャンプリンクでも使われますね。

<a href="https://example.com/">テキストまたは画像</a>

「href」が属性、「URL」が値となっており、他に以下のような属性が使えます。

<a href="https://example.com/" target="_blank">新しいタブまたはウィンドウでリンクを開きます</a>

<a href="https://example.com/" rel="nofollow">リンク先をクロールさせない</a> 

<a> の構造を知っておくと、複雑に見えるアフィリエイトリンクなども読み解けるようになります。

リンクの開き方は「同じタブ」「新しいタブ」のどちらが最適か

画像タグ <img>

<img> は記事内に画像を出したいときに使うタグです。src は、画像の URL を入れます。

<img src="https://example.com/sample.jpg">

よく使われる属性はこちら。

alt（代替テキスト）は、目の不自由な方や検索エンジンに画像の内容を伝える重要な属性です。背景画像など意味のない画像を除き、記事内の画像は必ずつけておきましょう。

<img src="https://example.com/sample.jpg" alt="サンプル画像">

alt に関する詳細は以下の記事をご覧ください。

WordPress で画像を挿入するときに気をつけたいファイル名と alt 設定

強調タグ <strong>

<strong> は読者や検索エンジンに重要な語句を伝えます。

<p>文章内の<strong>重要な語句</strong>を伝えます。</p>

必要な属性はとくにありませんが、class をつけて CSS を設定しておくと同じタグで見た目を変えられます。

強調文字 strong をちょっとおしゃれにする CSS デザインサンプル

ブログを書く側からするとあれもこれも重要なポイントで、でいたるところに <strong> をつけたくなるかもしれません。

でも、読む側からすれば重要なポイントはかぎられています。乱用しても SEO に有利なことはないので、文章内の最も重要な部分に使いましょう。

範囲定義タグ <span>

<span> というタグ自体は何の意味も持ちません。「ここからここまで」を定義するものです。

<p>当サイトは <span class="red_underline">10 周年</span> を迎えました！</p>

.red_underline { border-bottom: 2px solid #cc0033; }

当サイトは 10 周年 を迎えました！

上記サンプルのように、「文章にアクセントをつけたいけれど <strong> を使うほど重要なキーワードではない」というときに使えます。

引用タグ <blockquote>

<blockquote> は引用部分を明示するためのタグです。<cite> タグと組み合わせると、引用元を明示できます。

<blockquote>
    <p>ニュースをネタにするときは、転載と引用の違いに気をつけましょう。ニュース記事をコピペし、数行のコメントを入れるだけなら引用ではなく無断転載となります。</p>
    <cite><a href="https://seory.co.jp/find-a-story/">ブログ記事ネタを探す方法 10 選</a></cite>
</blockquote>

※ <cite> タグは必須ではありません

記事本文の一部を紹介して、そこにひとこと付け加えるだけで終わるなら引用とは言えません。

ブログ記事ネタを探す方法 10 選

<blockquote> を使えばなんでも引用とみなされるわけではなく、著作権法で定義されている要件を満たしたものだけが引用と認められます。

タグはそれを補完するだけなので、無断転載とならないようご注意ください。

ブログ運営者が覚えておきたい著作権・肖像権・商標権

表タグ <table>

表を作成するとき、<table> <tr> <td> をワンセットで使います（最低限の構成です）。

<table>
    <tr>
        <td>左上</td>
        <td>右上</td>
    </tr>
    <tr>
        <td>左下</td>
        <td>右下</td>
    </tr>
</table>

<tr> が横 1 行、<td> が各セルを表します。

また、<td> のかわりに <th> を使うと、そのセルが見出しになります。デザインは WordPress テーマによって異なりますが、太文字でセンタリングされていたり、背景色がつけられていることが多いですね。

<table>
    <tr>
        <th>左上</th>
        <th>右上</th>
    </tr>
    <tr>
        <td>左下</td>
        <td>右下</td>
    </tr>
</table>

複雑な表を作るときはコードも複雑になるので、表に苦手意識を持っている人も少なくありません。

HTML タグでがんばって組み上げるよりは、「Flexible Table Block」や「TablePress」を使うほうがよいと思います。

まとめ

本記事でご紹介した HTML タグは以下のとおりです。

タグはこのほかにもたくさんありますが、WordPress で記事を書くだけなら上記のタグだけで十分です。それぞれのタグが持つ意味は何となくでも理解しておくとよいですね。

Web 関連の仕事をしたいなら、書籍を数冊読んだほうがよいでしょう。これから始めるなら以下の本がおすすめです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

¥2,486 （2023/10/25 15:23時点 | Amazon調べ）

口コミを見る

Amazon

＼ポイント最大11倍！／

楽天市場

Yahoo!

ポチップ