【HTML・CSS】ブロガーも必見!HTML5の重要タグを覚えよう!

ディレ松
2019年5月12日 日曜日
html-css-4

この記事は2019年05月15日に更新された記事です。

本記事では、HTML5の頻出タグについて解説します。

今回の目標

  • ページ概要を表すmeta descriptionの役割を理解する
  • HTML文書を書く時の基本となる見出し(h)、段落(p)、改行(br)、引用(q, blockquote)を覚える
  • 画像引用(img)とアンカーリンク(a)の色々な貼り方を把握する

前回記事はこちら。

ページの概要を説明するメタディスクリプション(meta description)

メタディスクリプション(meta description)は、ページ内容の概要を表した文章です。メタディスクリプションはページごとに設定します。

メタディスクリプションの特徴とサイト訪問者数の増加が見込める理由

下記はGoogleで「JAM25」と検索した画面キャプチャです。

Googleで「JAM25」と検索した時の検索結果一覧画面

jam25-description

1.検索結果一覧のタイトル下に100文字程度で表示される

検索結果一覧画面で、各Webページのタイトル下の説明部分がメタディスクリプションです(赤枠で囲った部分)。文字数は100文字程度です(スマートフォンでは50文字程度)。

2.検索ワードがメタディスクリプション内にあると太字表示される

検索ワードがメタディスクリプション内にあると太字でハイライト表示されます。

3.メタディスクリプションは必須ではないが、設定するとクリック率増加が見込める

必須のタイトルタグに対して、メタディスクリプションは必須ではなく、また、検索順位への影響もありません。ただし、ユーザーに「求めている情報がこのページにありますよ!」と伝えることがでれば、クリック率(CTR)いわゆる貴方のサイトへの訪問者数が増えるので設定しておきましょう。

Tips

メタディスクリプションを設定しない場合、検索エンジンがサイト内のテキストから「つぎはぎ」にて自動生成した文章を表示します。自動生成のため不自然な文章となることもあります。

HTMLでのmeta descriptionの書き方

メタディスクリプションのソースコード

メタディスクリプションはhead要素内のメタ要素<meta>として下記のように記述します。

<meta name=”description” content=”ここにメタディスクリプションを書きます”>

メタディスクリプションの記述例

<head>
  <meta charset="UTF-8">
  <title>Webサイトのタイトルが入ります</title>
  <meta name=”description” content=”ここにメタディスクリプションを書きます”>
</head>

HTMLの基本構文を確認したい方はこちら。

見出し要素(h1, h2, h3, h4, h5, h6)について

HTMLでは見出しを6段階で表す

<h1>〜<h6>要素はセクションの見出しを6段階で表します。<h1>が最上位で<h6>が最下位です。

h1は一番見て欲しい情報に設定する

Webサイトにおいてロゴにh1を使うケースがよく見られますが、ロゴにh1を置くのは推奨しません。ユーザーに一番見て欲しいものは何かを考え設定するのが大切です。

h1を使用する箇所はブログであればタイトルであり、企業サイトであれば「社名」よりもどういう会社なのか?どういうことをしている会社なのか?と伝えることが重要となります。

重要

見出し要素<h1>〜<h6>に含まれるキーワードは検索順位(SEO)に関わってくるためキーワードを適切に設定することが大切です。SEOについては別の記事にて取り上げます。

h1〜h6のブラウザでの見え方(Google Chrome)

h1-h6

Google Chromeで見出しh1〜h6を表示した例です(CSSの調整なし)。見出しは上位のものほど重要となるため、大きく表示されます。

h要素使用時の注意点

1ページに<h1>要素は1回しか使用しない

1つのページ内で<h1>要素は1回の使用とし、2回以上の使用は避けます。<h1>要素はそのページ内で一番重要な扱いのためです。

見出しレベルを飛ばさない

複数の見出しレベルを使用する時は見出しレベルを飛ばさずに使用します。常に<h1>から始め、順に<h2>、<h3>、<h4>、<h5>、<h6>と使用します。

フォントサイズの調整はCSSを使用する

フォントサイズを拡大・縮小する目的で見出しレベルを変更してはいけません。フォントサイズの指定にはCSSプロパティのfont-sizeを使用します。

HTMLでのh要素の書き方

見出し要素のソースコード

h要素は開始タグ<>と終了タグ</>で囲って記述します。

<h1>h1見出しが入ります</h1>
<h2>h2見出しが入ります</h2>
<h3>h3見出しが入ります</h3>
<h4>h4見出しが入ります</h4>
<h5>h5見出しが入ります</h5>
<h6>h6見出しが入ります</h6>

見出し要素の記述例

<h1>Webサイトに使われる技術</h1>
  <h2>HTML</h2>
    <h3>HTMLは文章構造を表す</h3>
      <h4>タグについて</h4>
  <h2>CSS</h2>
    <h3>CSSはデザインを表す</h3>
      <h4>CSSの書き方</h4>
  <h2>JavaScript</h2>
    <h3>JavaScriptは動きをつける</h3>
      <h4>JavaScriptの基本構文</h4>

参考:<h1>–<h6>:HTMLの見出し要素(MDN web docs)

段落要素(p)について

p要素は1つの段落を表し、p要素間には余白が入る

段落要素<p>は、テキストの段落を表します。既定で、ブラウザーは段落を単一の空行で分割します。

段落要素(p)のブラウザでの見え方(Google Chrome)

p

意味の塊や、一文が長くなり読みにくくならないように、文章を段落で分けて記述します。段落と段落の間は余白ができ、可読性が上がります。

p要素使用時の注意点

段落間の余白はCSSプロパティで調整する

段落間の余白を空ける目的でp要素を使用してはいけません。段落間に余白を空けたい場合はCSSプロパティのmargin-bottom等を使用します。

HTMLでのp要素の書き方

段落要素のソースコード

p要素は開始タグ<p>と終了タグ</p>で囲って使用します。

<p>ここに文章が入ります。</p>

段落要素の記述例

<p>1つめの段落の文章がここに文章が入ります。</p>
<p>2つめの段落の文章がここに文章が入ります。</p>
<p>3つめの段落の文章がここに文章が入ります。</p>

参考:<p>:段落要素(MDN web docs)

改行要素(br)と引用要素(q, blockquote)について

改行要素(br)

改行要素(br)は意味のある改行を表す

改行要素<br>も住所や詩などの意味のある改行を表すので、段落間の余白を空ける目的で使用してはいけません。この場合はp要素で囲い、CSSプロパティmargin-bottom等で調整します。

HTMLでのbr要素の書き方

br要素は空要素(子要素やテキスト情報が入らない)であり、終了タグを持ちません。<br>を文章中で改行したい部分に記述して使用します。

郵便番号abc-defg<br>
都道府県 市区町村 番地<br>
会社名<br>

参考:<br>:改行要素(MDN web docs)

引用要素(q, blockquote)

記事の引用時はq要素やblockquote要素を使う

ページ内で参考文献や他の記事等の引用をする時は引用要素(q要素やblockquote要素)を使用します。b要素とblockquoter要素はともに、開始タグ<>と終了タグ</>で囲って記述します。

q要素とblockquote要素のブラウザでの見え方(Google Chrome)

q,blockquote

Google Chromeでq要素とblockquoteを表示した例です(CSSの調整なし)。通常、引用句””や字下げして「引用部分」がわかるように使用します。

行内引用要素(q)とHTMLでの書き方

行内で短い引用を行う際に使用します。引用するボリュームが多い場合はblockquote要素を使用します。

HTMLでは下記のように記述します。

<p>文章が入ります。<q>【ここがq要素での引用です】</q>文章が入ります。</p>

参考:<q>:行内引用要素(MDN web docs)

ブロック引用要素(blockquote)とHTMLでの書き方

独立したブロックとして引用する際に使用します。

HTMLでは下記のように記述します。

<p>1つめの段落の文章がここに文章が入ります。</p>
<blockquote>【ここがblockquote要素での引用です】</blockquote>
<p>2つめの段落の文章がここに文章が入ります。</p>

参考:<blockquote>:ブロック引用要素(MDN web docs)

埋め込み画像要素(img)とパスについて

img要素は適切なパスとalt属性を指定して使用する

<img>要素は、文書に画像を埋め込む際に使用します。img要素は<img>のみで使用する空要素です。画像はsrc属性で絶対パス、もしくは相対パスで引用します。また、画像をテキストで説明するalt属性を付与することが推奨されています(アクセシビリティやユーザビリティ)。

参考:<img>:段落要素(MDN web docs)

絶対パスと相対パスについて

Webサイトのディレクトを第一階層「index.html」、第二階層「logo.png」とした例で説明します。

Webサイトのディレクトリ例

  • index.html
  • images
  • └ logo.png

Webサイトのディレクトリについてはこちらの記事をご参照ください。

相対パス

相対パスとは、現在のファイル「index.html」からみて目的のファイルがどこにあるかを指定する方法です。上記例では、「./images/logo.png」と指定します。

  • (./)同一階層であることを意味します
  • (../)一つ上の階層にいけます

絶対パス

絶対パスとは、URLから始まるファイルの指定方法です。上記例でドメイン名をjam25.jpとすると、「http://jam25.jp/images/logo.png」となります。

重要

相対パスを使用していればドメインが変わっても書き直さなくて大丈夫です。また、外部サイトへのリンクは絶対パス以外の指定はできません。

HTMLでのimg要素の書き方

(相対パスで画像を読み込み)
<img src="./images/logo.png" alt="logo">
(絶対パスで画像を読み込み)
<img src="http://jam25.jp/images/logo.png" alt="logo">

アンカー要素(a)について

ハイパーリンクを作るa要素

アンカー要素(a要素)は、他のURL、ファイル、同一ページ内の場所、電子メールアドレスへのハイパーリンクを作成します。

HTMLでのa要素の書き方

a要素は開始タグ<a>と終了タグ</a>で囲って記述します。href属性href=""を使用してハイパーリンクを作成するURLパスを指定します。

<a href="https://jam25.jp/">JAM25</a>

色々なリンク先指定方法

よく使うリンク先の指定方法を確認しておきましょう。

リンク先を別ウィンドウで表示(target=”_blank”)

<a href="https://jam25.jp/" target="_blank">JAM25</a>

同一ページ内でページトップに移動(href=”#”)

<a href="#">ページトップへ</a>

同一ページ内の別見出しへ移動(href=”#id名”)

(同じページ内で id="section1" を持つ要素へリンク)
<a href="#section1">セクション1</a>

メールを送る(href=”mailto:メールアドレス”)

<a href="mailto:JAM25のメールアドレス">JAM25にメールを送る</a>

参考:<a>:アンカー要素(MDN web docs)

まとめ:HTML5の頻出要素は毎回登場するので覚えて損なし!

今回取り上げたHTMLの各要素はどのWebページにも登場するので覚えておいて損しません。

改行要素brや引用要素blockquote、パスの指定方法等、本来の要素の持つ役割とは違う誤った使い方がされてしまうことも多いので、各要素の役割と正しい記述方法を理解しておくことが大切です。

今回は以上となります。

この記事を書いた人:ディレ松

人材営業マンからWebディレクターにジョブチェンジ。画像編集、Webサイト制作など、初級レベルからお届け!

CATEGORYカテゴリーごとの最新記事

WORK REQUEST

CONTACT