htmlにての参照・引用コード

同一サイト内のあるページの一部分を別のページにて参照もしくは引用したいです。
具体的には、

ページA
××××××××××××××××××××××××××××××
××××××××××××××××××××××××××××××
◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯
◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯
◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯

ページB
××××××××××××××××××××××××××××××
××××××××××××××××××××××××××××××
△△△△△△△△△△△△△△△△△△△△△△△△
△△△△△△△△△△△△△△△△△△△△△△△△
△△△△△△△△△△△△△△△△△△△△△△△△

ページC
※※※※※※※※※※※※※※※※※※※※※※※※
※※※※※※※※※※※※※※※※※※※※※※※※
（ココでページAの部分を引用して表示したいです）
◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯
◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯
◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯

ページD
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
（ココでページBの部分を引用して表示したいです）
△△△△△△△△△△△△△△△△△△△△△△△△
△△△△△△△△△△△△△△△△△△△△△△△△
△△△△△△△△△△△△△△△△△△△△△△△△


このような場合、htmlにて部分ごと引用するコードはどのようなものがあるのでしょうか？

初心者の質問で申し訳ございませんが、よろしくお願いします＾＾

質問者からの補足コメント

• すみません。
  こちら初心者のため、質問の意図がうまく伝わらず難しい事になっていますが、引用ではなく参照なのでしょうか？
  
  やりたい事は、あるページの一部分を幾つものページで表示したい場合、htmlで参照するコードはどのような方法があるのでしょうかという意味です。
  コピペで持ってくるという方法では、元の参照部分を変更すると、全て変更する必要が生じるため、参照するという方法で対応したいのです。

  No.2の回答に寄せられた補足コメントです。 補足日時：2015/02/26 20:09

• 回答いただきまして、ありがとうございます。
  
  プログラムでやるには具体的にどうしたら宜しいでしょうか？
  PHP、SSI、その他ありましたら、具体的なプログラムを教えていただけるとありがたいです。

  No.3の回答に寄せられた補足コメントです。 補足日時：2015/02/26 21:36

No.5 ベストアンサー 回答者： yambejp 回答日時： 2015/02/27 13:58

＞PHP、SSI、その他ありましたら、具体的なプログラムを教えていただけるとありがたいです。

ようは同じ文書をなんども流用したいだけですよね？
テンプレートだと思えばよいです。
具体的なプログラムをご希望ということですが、
<?PHP
print "引用部分";
?>

それよりは、ご自身でphpやSSIを使える環境が用意できるかどうかを
検討されることをお勧めします。
用意できそうなら一度それ相応の書籍をご一読なさるとよいでしょう。

No.6 回答者： Ogre7077 回答日時： 2015/02/27 18:05

HTML の機能では出来ません。

サーバー側プログラムを用意して動的に書き換えるのがもっとも素直です。

サーバー側をどうにかできない場合の素直じゃない方法として、
ページ内のスクリプトだけで頑張る方法も一応あります。
ただ色々面倒だし制約もあるので、あくまでも参考までに


=== "AJAX" でなんとかする場合、ただしサーバー配置しないと無効
=== ページA.html
ほげほげ
<div id="important">
重要なお知らせ
</div>
ぼけぼけ
=== ページB.html
<script>
addEventListener('DOMContentLoaded', function(){
_ var req = XMLHttpRequest();
_ req.addEventListener('load', function(ev){
_ _ var elm = document.createElement('div');
_ _ elm.innerHTML = ev.target.responseText;
_ _ var im = elm.querySelector('#important');
_ _ if (im) document.getElementById('note').appendChild(im);
_ }, false);
_ req.open("GET", "ページA.html");
_ req.send();
},false);
</script>
...
<div id="note"></div>

=== "ページ間通信" でなんとかする場合、ただしブラウザによっては無効
=== ページA.html
<script>
window.addEventListener('message', function(ev){
_ if (ev.data == 'getImportant') {
_ _ var imp = document.getElementById('important');
_ _ if (!imp) rereturn;
_ _ var txt = 'important:' + imp.innerHTML;
_ _ ev.source.postMessage(txt, '*');
_ }
}, false);
</script>
...
<div id=important>
重要なお知らせ
</div>
=== ページB.html
<script>
window.addEventListener('message', function(ev){
_ var txt = ev.data;
_ if (/^important:/.test(txt)) {
_ _ document.getElementById('note').innerHTML = txt.replace(/^important:/,'');
_ }
}, false);
window.addEventListener('DOMContentLoaded', function(){
_ var fr = document.createElement('iframe');
_ var fx = function(){fr.contentWindow.postMessage('getImportant', '*')};
_ fr.addEventListener('load', fx, false);
_ fr.style.display = 'none';
_ fr.src = 'ページA.html'
_ document.body.appendChild(fr);
},false);
</script>
...
<div id=note></div>

No.4 回答者： ORUKA1951 回答日時： 2015/02/27 09:28

＞こちら初心者のため、質問の意図がうまく伝わらず難しい事になっていますが、引用ではなく参照なのでしょうか？

　初心者だからこそ、ここは、HTMLの根幹に関わるとっても重要な部分なので正確に理解するようにしてください。難しいことではなく、簡単なことなのですよ。

＞やりたい事は、あるページの一部分を幾つものページで表示したい場合、htmlで参照するコードはどのような方法があるのでしょうかという意味です。
※繰り返しますが、HTMLは、あくまで文書構造--意味的な構造をマークアップするのが目的です。

　それは参照ではありません。HTMLにおいて、参照とはリンクとほぼ同じ意味になります。
Links in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　<a href="****">ここを参照</a>してください。

　そうでしなく、実際にその記事を引用して表示するのですからマークアップ的には<blockquote></blockquote>でマークアップすべきですが、その場合対称が変更されると齟齬が生じますから、日付と現在の情報へのリンクを設けるのが引用の手法です。
　これは引用という動作の目的が主となる本文の補完であり、従なのですから、もしも主文の補強のための引用であった物が、相手の変更で主文を否定する物になった時に困るからです。ですから、面倒手も引用先が変更になったら、引用文を変更とすると同時に本文も見直します。

　一方、文字通り「参照」が目的でしたら、リンクで良いのです。なぜなら、HTMLが開発された目的--誕生し普及した最大の目的が、リンクなのですから。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
文書や人などあらゆるものを参照できることこそが、言論の自由という 基本的人権そのものなのである。ハイパーテキスト・リンクを使った 参照は効率的ではあるが、参照以外の何ものでもない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［よいウェブページを書こうとする人のためのヒント( http://www.sal.tohoku.ac.jp/~gothit/webauthoring … )］より
　それまでの科学論文は論文末に参考文献という一覧があって、それを探して自分で見つけなければならなかったことが、リンクをクリックする動作だけで参照できるようになった。

＞あるページの一部分を幾つものページで表示したい場合、htmlで参照するコードはどのような方法があるのでしょうか
　ですから、あなたの質問内容を総合すると、参照(リンク)でよいでしょう。先にも提示しましたが、HTMLのコードは、
<blockquote cite="http://www.sal.tohoku.ac.jp/~gothit/webauthoring …
<p>
文書や人などあらゆるものを参照できることこそが、言論の自由という 基本的人権そのものなのである。ハイパーテキスト・リンクを使った 参照は効率的ではあるが、参照以外の何ものでもない。
</p>
<address><a href="http://www.sal.tohoku.ac.jp/~gothit/webauthoring …よいウェブページを書こうとする人のためのヒント</a></address>
</blockquote>
ですね。
<blockquote></blockquote>で引用であることを示し、<a href=""></a>で参照先を示しています。
　もし、この引用文を参照先の変更に合わせて、動的に書き換えたいのでしたらプログラムを書くしかありません。(後述)

　そうではなく、単純に該当部分をそのままコピーしてしまいたい。
★これは引用という動作ではなく、それ自体がそのページのコンテンツの主体である場合。具体的にはブログの項目の一部をそのまま転記、転載したリストを作りたいとかです。
　その場合は、引用でも参照でもないのですから、マークアップは
<section>
　<h2>ブログ記事抜粋</h2>
　<ul>
　　<li>2015/01/23の記事
　　　<p><iframe></iframe></p>
　　</li>
とかで、示すことになるでしょう。

[プログラムで引用する方法]
<article><!-- HTML5未満の場合はdiv class="article" -->
<!-- REFERER,/product/d.html,abc -->
</article>
　のように、プログラムで利用できるようわかりやすい任意の埋め込みコードを書いておいて、それをperlなどのプログラムで、指定されたファイルを開いて該当部分を切り出す。
(例)d.html
<section id="abc"><!-- HTML5未満の場合はdiv class="section" -->
　<h3>なんたらかんたら</h3>
・・・・・
</section><!-- #abc -->
部分を切り取るプログラムを書きます。
$REFERER = s/<!-- REFERER,(.*) -->/;
($url,$target) = split /,/ $REFERER;
open IN $url;
while(<IN>){
・・・

とか

No.3 回答者： yambejp 回答日時： 2015/02/26 21:23

＞htmlで参照するコードはどのような方法があるのでしょうか

ですので、#1で提示したようにプログラムでやるのが妥当です。
phpなど流行の言語をつかってもよいでしょうし、
参照だけならレガシーなSSIなどでもよいでしょう。

サーバー側のプログラムが実行できないのであれば
多少効率はわるいですがajaxなどの技術を使えば所定の位置に
任意の文書の一部を表示することは可能です

No.2 回答者： ORUKA1951 回答日時： 2015/02/26 19:42

他サイト、自サイトに関わらず引用は

<blockquote cite=""><!-- citeには引用先のURL
　<p></p>
　<address></address>
</blockquote>
とかです。インライン（フレーズ）での引用は<q cite="">このフレーズは引用</g>
　HTMLは、デザインの道具ではなく、文書を構成する要素(Element)をタグを用いてマークアップする言語仕様です。それをどのように表示するかはブラウザなどのもつスタイルシートという別の仕様で行なっています。
★この最も重要な部分を誤解されているような気がします。
　例えば、引用部分を他の要素より左右にマージンを取って描画するのはお使いのブラウザによるだけで、スクリーンリーダーでしたら、「ここから引用」と言って語調を変えて読んでくれたりしますし、検索エンジンもそこが引用だと理解できる。
　HTMLのすべての要素(Element)は意味を持ちます。★デザインではない★
　⇒要素索引( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　その上で、スタイルシートで
blockquote{
margin:1em 2em;/* 上下１文字左右２文字マージン */
padding:0.5em 1em;/* 内部には上下0.5文字、左右1文字 */
border:gray solid 1px;/* 枠線はグレーで1pxの直線 */
font-size:0.95em;/* 文字は他の0.95 *.
color:gray;/* 文字色はグレー */
}
とブラウザ自体が持つスタイルシートを上書きしてデザインします。

また、それが引用と言うより要約とか完結した記事の場合は、
HTML5でしたら
<article>
<!-- header,section,footerをもちうる完結した記事 -->
</article>
とマークアップしても良いでしょう。ブログ記事の引用などはこの方が意味的に良いかも知れません。
HTML4でしたら
<div class="article">
<!-- header,section,footerをもちうる完結した記事 -->
</div>
と、classなどを併用して文書構造を示します。
　<q cite="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する</q>
　この場合も、
div.article{
margin:1em 2em;/* 上下１文字左右２文字マージン */
padding:0.5em 1em;/* 内部には上下0.5文字、左右1文字 */
border:gray solid 1px;/* 枠線はグレーで1pxの直線 */
font-size:0.95em;/* 文字は他の0.95 *.
color:gray;/* 文字色はグレー */
}
とかですね。

要は、あなたの作成されている文書において、構造上それがどのような要素であるかをタグを使ってマークアップすることだけに専念しましょう。
　引用は「（他人？）の記事を一切手を加えずに、その前後の文章の補強のために利用する」と言う意味です。上記<q>が例です。
<blockquote cite="http://law.e-gov.go.jp/htmldata/S45/S45HO048.htm …
<p>（引用）</p>
<h4>第三十二条</h4>
<p>公表された著作物は、引用して利用することができる。この場合において、その引用は、公正な慣行に合致するものであり、かつ、報道、批評、研究その他の引用の目的上正当な範囲内で行なわれるものでなければならない。</p>
<address><a href="http://law.e-gov.go.jp/htmldata/S45/S45HO048.htm …著作権法</a></address>
</blockquote>
とかね。

articleの説明はしました。ブログ記事の一部を抜粋するとかはarticleでしょう。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
article 要素は、ドキュメント、ページ、アプリケーション、サイトの中の完全な、または、自己完結した構成を表します。つまり、原則的には、シンジケーションのように、単独で再配布でき再利用できるものです。これはフォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジットやガジェットなど、コンテンツの独立した記事項目が考えられます。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［article 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP( http://www.html5.jp/tag/elements/article.html )］より

No.1 回答者： yambejp 回答日時： 2015/02/26 15:31

htmlにおける文字情報の引用はBLOCKQUOTEやQタグを利用する場合が多いです

（半）自動的に他のページの所定の部分を切り取ることはhtmlではできないので
そのような仕様が必要であればなにかサーバー側のプログラムを作る必要があります。

図や画像なども含めた引用となるとさらに面倒になるので
そういう場合はキャプチャして画像として引用するほうがよいかもしれません