HTML <blockquote>

<blockquote>は他の文献からの引用であることを示すHTMLタグです。blockquote要素の使い方をサンプルを交えてご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。blockquote 要素の終了タグは省略できない。

<blockquote>
  <!-- flow content -->
</blockquote>

<BLOCKQUOTE>
  <!-- flow content -->
</BLOCKQUOTE>

コンテンツモデル

blockquote 要素の開始タグと終了タグの間にはフロー・コンテンツを含めることができる。具体的には、以下に示す要素である。

テキスト
<a>
<abbr>
<address>
<article>
<aside>
<audio>
<b>
<bdi>
<bdo>
<blockquote>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<details>
<dfn>
<div>
<dl>
<em>
<embed>
<fieldset>
<figure>
<footer>
<form>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<header>
<hgroup>
<hr>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<main>
<map>
<mark>
<math>
<menu>
<meter>
<nav>
<noscript>
<object>
<ol>
<output>
<p>
<picture>
<pre>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<table>
<template>
<textarea>
<time>
<ul>
<var>
<video>
<wbr>

属性

次に示す属性をblockquote要素に指定できる。

cite

引用元のURIを指定する。

blockquote 要素に cite 属性を指定する例を以下に示す。

<blockquote cite="https://www.w3.org/">
  The World Wide Web Consortium (W3C) is an international community
  that develops open standards to ensure the long-term growth of the Web.
</blockquote>

The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

id

HTML文書内で一意な識別子を指定する。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

引用文をイタリックで表示する例を以下に示す。

<blockquote style="font-style: italic">
  It is a truth universally acknowledged, that a single man
  in posession of a good fortune, must be in want of a wife.
</blockquote>

It is a truth universally acknowledged, that a single man in posession of a good fortune, must be in want of a wife.

引用文の左側に境界線を描く例を以下に示す。

<blockquote style="border-left: medium solid red; padding-left: .5em">
  When Mary Lennox was sent to Misselthwaite Manor to live with her uncle
  everybody said she was the most disagreeable-looking child ever seen.
</blockquote>

When Mary Lennox was sent to Misselthwaite Manor to live with her uncle everybody said she was the most disagreeable-looking child ever seen.

title

ソースに関する詳細情報など、ツールチップに適した要素のアドバイザリ情報を指定する。

blockquote 要素に title 属性を指定する例を以下に示す。

<blockquote title="The Wonderful Wizard of Oz">
  Dorothy lived in the midst of the great Kansas prairies, with Uncle
  Henry, who was a farmer, and Aunt Em, who was the farmer's wife.
</blockquote>

Dorothy lived in the midst of the great Kansas prairies, with Uncle Henry, who was a farmer, and Aunt Em, who was the farmer's wife.

参考文献

Web Hypertext Application Technology Working Group (2022) Grouping content HTML Living Standard