オーダーメイドコース
icon
icon

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

HTML初心者向けに、【引用タグ】を使う方法を解説した記事です。まとめて引用する blockquoteタグ、一部を引用するqタグの使い方をサンプルコード付きで学べます。また、引用元を「cite」で表記することも可能です。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

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

 

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

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

 

田島悠介

今回は、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では、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。