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>タグは長い文章をそのまままとめて引用する際に使います。ブラウザ上では上下の余白とインデント（字下げ）が表示され、引用であることが示されました。
続いて、一部を引用する<q>タグです。
<p>ある人は言いました。<q>何もしなければ、何も起こらない</q></p>
qタグで囲んだ部分が かぎ括弧によって表示されました。
なお、以前はqタグで書くと、全て 「” ”（ダブルコーテーション）」で表示されていましたが、最近では日本語に対応してかぎ括弧で表示されるようになりました。このサンプルコードのように、言語を<html lang=”ja”>とすると、かぎ括弧（） で表示されます。
また、<blockquote>タグも<q>タグも、cite属性を付け加えることによって出典先や引用元を指定することができます。
例えばこのように書きます。
<blockquote cite=”https://www.kiramex.com/service/”>
このとき、cite属性で記述した引用元はブラウザ上には反映されません。ただ、引用元が記録されているとWebページを管理するときに参考になるので、何かを引用する際にはぜひcite属性をつかって引用元のURLを記述しておきましょう。
今回はHTMLで引用タグを使う方法をご紹介しました。
HTMLの基礎をさらに学びたい場合は、HTMLでリストを使う方法も合わせてご覧ください。
あの～！引用タグって必要なんでしょうか？
それは、どういうこと？
a(アンカータグ)でリンクを張って、テキストで引用ですって書いても、引用文だってわかってもらえますよね？
ただ、それだと検索エンジンにはわからないよね。引用タグって言うけれど、重複ではないよって意味もあるんだよ。
なるほど！重複だと思われたら、検索エンジンからペナルティがあるかもしれないですもんね！
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
