HTMLで引用タグを使う方法【初心者向け】

HTML初心者向けに、【引用タグ】を使う方法を解説した記事です。まとめて引用する

タグ、一部を引用するタグの使い方をサンプルコード付きで学べます。また、引用元を「cite」で表記することも可能です。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLで引用タグを使う方法について解説します。

そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

引用タグの種類

HTMLでは、引用文であることを明示するために「引用タグ」を使うことがあります。

いくつか方法があるので、その方法を覚えておきましょう。

 

・まとめて引用する blockquote <blockquote>〜</blockquote>

長い文章をまとめて引用したいときにつかいます。

 

・一部を引用する quote <q>〜</q>

文の一部や短い文章を引用したいときにつかいます。

 

・引用元を表記する cite

引用した文章がどこから引用したものであるかを示します。

 

大石ゆかり

引用元のアドレスって書かなければだめなんでしょうか?

田島悠介

引用した場合は、やっぱり引用元を書かないとだめだよ。著作権にも関わってくるし。

大石ゆかり

あー!そうですね。他の人が書いた内容だったの忘れてました。

田島悠介

著作権もあるけど、実はまだ理由があるんだ。くわしくはページ最下部で!

 

引用タグの書き方

どんな種類があるかわかったら、例をもとに書いていきましょう。

 

まずは、<blockquote>タグです。

<blockquote> <p>インターネットによって時間と場所の制約から解き放たれたように、 プログラミングを普及させることで個の選択肢、可能性をもっと伸ばせるはず。 プログラミング教育を通じて世界を豊かに。それが私達のミッションです。</p></blockquote>

blockquote_tag

<blockquote>タグは長い文章をそのまままとめて引用する際に使います。ブラウザ上では上下の余白とインデント(字下げ)が表示され、引用であることが示されました。

 

続いて、一部を引用する<q>タグです。

<p>ある人は言いました。<q>何もしなければ、何も起こらない</q></p>

q_tag

qタグで囲んだ部分が かぎ括弧によって表示されました。

なお、以前はqタグで書くと、全て 「” ”(ダブルコーテーション)」で表示されていましたが、最近では日本語に対応してかぎ括弧で表示されるようになりました。このサンプルコードのように、言語を<html lang=”ja”>とすると、かぎ括弧() で表示されます。

 

また、<blockquote>タグも<q>タグも、cite属性を付け加えることによって出典先や引用元を指定することができます。

例えばこのように書きます。

<blockquote cite=”https://www.kiramex.com/service/”>

blockquote_q_tag

このとき、cite属性で記述した引用元はブラウザ上には反映されません。ただ、引用元が記録されているとWebページを管理するときに参考になるので、何かを引用する際にはぜひcite属性をつかって引用元のURLを記述しておきましょう。

 

今回はHTMLで引用タグを使う方法をご紹介しました。

HTMLの基礎をさらに学びたい場合は、HTMLでリストを使う方法も合わせてご覧ください。

 

大石ゆかり

あの~!引用タグって必要なんでしょうか?

田島悠介

それは、どういうこと?

大石ゆかり

a(アンカータグ)でリンクを張って、テキストで引用ですって書いても、引用文だってわかってもらえますよね?

田島悠介

ただ、それだと検索エンジンにはわからないよね。引用タグって言うけれど、重複ではないよって意味もあるんだよ。

大石ゆかり

なるほど!重複だと思われたら、検索エンジンからペナルティがあるかもしれないですもんね!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。