blockquote要素の使い方は?HTML5の要素を使いこなそう【 HTML編】

Pikisuperstar - jp.freepik.com によって作成された technology ベクトル

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子
ペン子

blockquote要素っていつ使うの?

ユキ
ユキ

引用文を表示したい時に使うよ!

結論からいうと、blockquote要素は引用文を表示するために使います。

今回はblockquote要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。


スポンサーリンク

1: HTML5について

html5

HTML5とは、HTMLバージョン5のことです。
過去HTMLは少しずつ改訂されていき、2014年にHTML5が発表されました。
みなさんが普段聞いてるHTMLはHTML5と同じ意味です。
ホームページを作るならHTML5といわれるほど、過去のHTML4と比べると格段に機能が多くなりました。
スマホ対応が簡単になったり、アニメーションが作れたりします。

つまりHTML5は、「今まで難しかった処理を簡単にしてくれた」ものというわけです。

2: blockquote要素とは

blockquote要素とは、比較的長文の段落ごとに分かれたテキストを引用する際に使う要素です。

他サイトの文章を使う時にはblockquote要素は必須になってきます。
なぜかというと、コピー元の文章をそのまま自サイトに掲載してしまうと検索エンジンにコピーコンテンツだと認識されてしまうからです。ひどい時には悪質なコンテンツのリスト入りになってしまいます。
これを避けるためにblockquote要素を使用して、検索エンジンに引用文として使ってますよと認識してもらう必要があります。
SEOに関しても検索エンジンにコピーサイトだと認識されてしまうとブラウザの検索結果に反映されなかったりしてしまいます。せっかく書いた記事が誰にも読まれなくなってしまうというわけです。
これは記事を作成した日付などから判断され後から書いた方がコピーコンテンツだと判断されてしまいます。検索エンジンに載る前に盗作されないように早めにクロールしてしまうのが得策といえるでしょう。

同じように引用文を表示するための要素がもう一つあります。
それはq要素です。
q要素はblockquote要素のように段落ごとに分けられない短い文を引用する際に使用します。
詳しい説明は下記の記事を参考にしてみてください。

Pikisuperstar - jp.freepik.com によって作成された technology ベクトル q要素の使い方は?HTML5の要素を使いこなそう【HTML編】

blockquote要素で特に使用する属性はcite属性です。
これは引用元のURLを指定して、検索エンジンに「このサイトから引用させてもらいました」と示す属性になります。
cite属性を指定することで無断転載とみなされる未然に危険性を回避できます。
忘れずにつけるようにしましょう。

属性機能
cite引用元のURLを指定し、検索エンジンにコピーコンテンツではないと示す。

3: blockquote要素の使い方

<blockquote cite="https://sample.co.jp"> <p>引用文</p>
</blockquote>

blockquoteはテキストコンテンツであるため、body要素内で使用します。

cite属性で引用元の文書のURLを記載します。
これで無断転載としてみなされる危険性を回避し、検索エンジンにも引用元のサイトを教えることができます。

まとめ

今回はblockquote要素についてと使い方について解説しました。

blockquote要素は比較的長文の文章を引用するために使用します。q要素とblockquote要素は文の長さによって使い分けできるので適宜使用するべき要素を選択できるようになりましょう。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。

以上、ユキでした!