figureタグを使うべきかが、難しいのですが、下記の認識でよいでしょうか？

Question

figureタグを使うべきかが、難しいのですが、下記の認識でよいでしょうか？

https://teratail.com/questions/17680
の続き

figureタグとは
文章に組み入れられない(ドキュメントのメインのフローから単独のユニットとして参照されるものとなります。)
画像, 動画, コンピュータ言語のコード, 詩歌(仕様草案の例にある), 或いはアスキィアートなどが<figure>要素とされる。

また、注釈となる<figcaption>要素は必須で無いため、
注釈を伴わない挿絵, 図表, 写真, 動画, コンピュータ言語のコード, 或いはアスキィアートなどにも用いる事が可能です。

つまり、これが無くても文章が通じなくなる恐れがない場合は、自己完結しているのでfigureを使う。
例えば、ポートフォリオの自分の画像はなくても、文章が通じるので、この場合の画像は自己完結している。
逆に、下記がポートフォリオ一覧ですという文章の下にポートフォリオの画像が有る場合、ポートフォリオの画像がないと、文書の下にポートフォリオがないじゃないかとなってしまうので、自己完結しておらず、ポートフォリオの画像はただのimgのみになる。

＊HTMLのimgやソースなどfigureで囲む可能性のあるソースを削除して、ブラウザ上で見て、何も違和感を感じなければ自己完結している。
違和感があれば自己完結していないので、figureでは無い。

例一覧
・自己完結しているのでfigure。

サイトの例

私はこんなスキルがある。こんな事を考えたサイトを作っている。
（自分の画像）

・自己完結しているのでfigure。この場合、DOMでのgetElementById()メソッドのJAVAスクリプトでの使い方を例として出しているだけですので、これが無くても文章が通じなくなる恐れはないので自己完結している。

サイトの例

<section>
	    <h2>getElementById()メソッドの実装状況</h2>
	    <figure class="code">
	        <figcaption>JAVAスクリプトでの例</figcaption>
	        <pre class="JAVAScript"><code>function showOrHide(e) {</code>
	<code>var ele=<mark>document.getElementById(e)</mark>;</code>
	<code>var d=(ele.style.display || 'block').toLowerCase();</code>
	<code>if (d!='none') ele.style.display='none';</code>
	<code>else ele.style.display='block';</code>
	<code>}</code></pre>
	        </figure>
	    <p>getElementById()メソッドは、いくつかの言語に実装されております。</p>
	    <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p>
	    </secton>

下記のようにしても、おかしい文章と思わないので、自己完結している。
↓

<section>
	    <h2>getElementById()メソッドの実装状況</h2>
	    <p>getElementById()メソッドは、いくつかの言語に実装されております。</p>
	    <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p>
	    </secton>

・自己完結しているのでfigure。

サイトの例

スクリプトタグは、内容物がなくても、終了タグが必須。

例
（ソースコード）

<script></script>＝○ <script>のみ＝× （ソースコード） 例を消しても、問題は起こらない。 ・自己完結していないのでfigureでない。例を消すと、上記ソースって何？ないじゃんとなるから。 サイトの例 （ソースコード） <script></script>＝○ <script>のみ＝× （ソースコード） 上記ソースをみてわかるように、スクリプトタグは、内容物がなくても、終了タグが必須。 ・自己完結していないのでfigureではくimgのみ。 サイトの例 私はこんなスキルがある。私はいつもおしゃれで、下記の画像のように、おしゃれなカッコをしている。 （自分の画像） サイトの例 ・自己完結していないのでfigureではくimgのみ。 私はこんなスキルがある。私は下記のようなイメージの人間です。 （自分の画像） ＊下記の場合はどう思いますか？ サイトの例 ```ここに言語を入力 <section class="main__about-me"> <h2 class="content-wrap-widthmax__heading main__common-heading">GALLARY</h2> <h3>題名</h3> <p>和風の高級感を表現するをコンセプトに作ったサンプルサイトです。</p> <figure class="portfolio-images-common"> <img class="aa-pcimage" src="img/index/aa-pcimage.jpg" alt="PCサイズの画像"> <figcaption>PCサイズ</figcaption> </figure> <figure class="portfolio-images-common"> <img class="aa-tabletimage" src="img/index/aa-tabletimage.png" alt="タブレットサイズサイズのファーストビューの画像"> <figcaption>タブレットサイズ</figcaption> </figure> </section><!-- /#about --> ``` ↓ 下記のようにすると、どれだよと突っ込みが入りそうな気がします。つまり自己完結していないのではないでしょうか？ ```ここに言語を入力 <section class="main__about-me"> <h2 class="content-wrap-widthmax__heading main__common-heading">GALLARY</h2> <h3>題名</h3> <p>和風の高級感を表現するをコンセプトに作ったサンプルサイトです。</p> </section><!-- /#about --> ``` ただ画像の説明のfigcaptionがあるので、それでもfigureでよいのでしょうか？ 矛盾しているようにも取れますが、現場ではここまで気にする必要はないでしょうか？ それとも、そのようにデザインをしない、ポートフォリオへのリンクをつけて、画像がなくてもどれだよと突っ込みが入らないように設計しないのが悪いと、 現場では考えるでしょうか？

Answer 1

figure要素を勘違いされていると思います。

前の質問で

自己完結している。
なおかつ文章から参照される性質のものであること。

と書かれているように、 figureタグで囲まれた要素自身は独立している必要がありますが、その外側の文章は、figure要素を参照していなくてはなりません。

文章から figure要素を取り除いて成り立つのであれば、それは「文章から参照される性質のもの」を満たしていません。

---

追記

自己完結しているとは何か

<section>
  <h2>getElementById()メソッドの実装状況</h2>
  <figure class="code">
    <figcaption>JAVAスクリプトでの例</figcaption>
    <pre class="JAVAScript"><code>function showOrHide(e) {</code>
<code>var ele=<mark>document.getElementById(e)</mark>;</code>
<code>var d=(ele.style.display || 'block').toLowerCase();</code>
<code>if (d!='none') ele.style.display='none';</code>
<code>else ele.style.display='block';</code>
<code>}</code></pre>
    </figure>
  <p>getElementById()メソッドは、いくつかの言語に実装されております。</p>
  <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p>
</secton>

上記のHTMLから

<figure class="code">
    <figcaption>JAVAスクリプトでの例</figcaption>
    <pre class="JAVAScript"><code>function showOrHide(e) {</code>
<code>var ele=<mark>document.getElementById(e)</mark>;</code>
<code>var d=(ele.style.display || 'block').toLowerCase();</code>
<code>if (d!='none') ele.style.display='none';</code>
<code>else ele.style.display='block';</code>
<code>}</code></pre>
</figure>

の部分だけ取り出して成り立つかどうかが、自己完結しているかどうかです。

（すいません、Googleの例は取り除きました）

参照されているかどうか

<section>
  <h2>getElementById()メソッドの実装状況</h2>
  <p>getElementById()メソッドは、いくつかの言語に実装されております。</p>
  <p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p>
</secton>

で成り立ってしまうなら、参照していません。例えば

<p>JAVAスクリプトでの例で示すように、getElementById()メソッドは、いくつかの言語に実装されております。</p>

とあれば、参照していると言えるでしょう。

Comments

[退会済みユーザー]

お返事ありがとうございます。

＞＞＞
と書かれているように、 figureタグで囲まれた要素自身は独立している必要がありますが、その外側の文章は、figure要素を参照していなくてはなりません。

確かにそうですね。忘れていました。ありがとうございます。

つまり、figureタグで囲まれた要素自身は独立している必要があるという部分は、
その画像を削除しても、文章が通じなくなる恐れがないということですね。

独立しているサイトの例

<section>
<h2>getElementById()メソッドの実装状況</h2>
<figure class="code">
<figcaption>JAVAスクリプトでの例</figcaption>
<pre class="JAVAScript"><code>function showOrHide(e) {</code>
<code>var ele=<mark>document.getElementById(e)</mark>;</code>
<code>var d=(ele.style.display || 'block').toLowerCase();</code>
<code>if (d!='none') ele.style.display='none';</code>
<code>else ele.style.display='block';</code>
<code>}</code></pre>
</figure>
<p>getElementById()メソッドは、いくつかの言語に実装されております。</p>
<p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p>
</secton>

下記のようにしても、おかしい文章と思わないので、自己完結している。 ↓

<section>
<h2>getElementById()メソッドの実装状況</h2>
<p>getElementById()メソッドは、いくつかの言語に実装されております。</p>
<p>主に、JAVAスクリプト, VBスクリプト, JAVAなどに実装されております。</p>
</secton>

・figure要素を参照という部分が抽象的でよくわからないのですが、

上記例なら、参照しているのでしょうか？

[hello-world]

追記しました。

[退会済みユーザー]

忙しく、お返事が遅れて大変恐縮です。

下記二つの場合のみフィギュアタグを使う。ということですね。
・フィグキャプションがある。
・自己完結していて、本文から参照される画像など

＞＞
文章から figure要素を取り除いて成り立つのであれば、それは「文章から参照される性質のもの」を満たしていません。

上記が気になるのですが、自己完結しているという事は、その画像などは、そのページからはずしても、そのページの内容は問題なく伝わり、かつ、その画像などは、ほかのページにいきなり張り付いていても、その画像などが何なのかわかるということだと聞いております。

つまり、上記のお話ですと（文章から figure要素を取り除いて成り立つのであれば、）自己完結しているとなるのではないですか？
自己完結しているので、（文章から figure要素を取り除いて成り立つのであれば、）figureになるように思えます。

[hello-world]

figureタグが求めている自己完結は、

間違い： figureタグを取り除いても、外側の文が成り立つ
正解： figure要素の部分だけを取り出しても（つまりfigureの外側を削除しても）意味が通じる

です。

ちなみに「取り除いてもOK」つまり本文と関係性の薄い部分は aside タグを使ってください。

[退会済みユーザー]

お返事ありがとうございます。

HTML5の言う自己完結とは、すべてのタグで同じ意味であり、
その意味は、そのタグを取り除いても、外側の文が成り立ち、かつ取り除いたタグを他のページに移動しても、移動先で意味が成り立つと聞いているのですが、
そうではないのでしょうか？

figureタグだけが、例外ということでしょうか？それとも上記の認識が、articleなどを含むその他自己完結したタグ全般に言えることなのでしょうか？
下記を見ると、そう思えます。
＞＞
ちなみに「取り除いてもOK」つまり本文と関係性の薄い部分は aside タグを使ってください。

RSSリーダーで配信できるかとも言われますが、これは
正解： figure要素の部分だけを取り出しても（つまりfigureの外側を削除しても）意味が通じる
と一致すると思います。

[hello-world]

HTMLの話ではなくて自己完結という用語の話です。

例えば「日本の食料事情は国内で自己完結している」という意味は、外国の食料の輸入がなくなっても大丈夫という意味であり、日本国内から食料生産がなくなっても大丈夫という意味ではありません。
自己完結は「外側がなくても良い」という意味です。

[退会済みユーザー]

つまり

・HTML5の言う自己完結とは、すべてのタグで同じ意味である。

・自己完結は「外側がなくても良い」という意味です。RSSリーダーで配信できる。
それだけをいきなり見せられてもなんだかわかる。

・その意味は、そのタグを取り除いても、外側の文が成り立ち、かつ取り除いたタグを他のページに移動しても、移動先で意味が成り立つという意味ではない。

ということでよろしいでしょうか？

[hello-world]

はい、それで間違いございません。

[退会済みユーザー]

それですと、ポートフォリオのaboutmeにある自分の画像は、自己完結していて、figureタグで囲むべきなのですかね？

その画像だけ見せられると、人の画像とはわかりますが、この人誰となりますね。
これは、それだけを見てわかったというべきなのでしょうか？

HTMLが言う自己完結している、それだけ見せられてわかるという事は、ポートフォリオの原作者の画像と完璧にわかる場合のみということでよろしいでしょうか？

人の画像とわかるだけでは自己完結しているとはいえないのでしょうか？
それともそこまで現場では気にしないで、それぞれの感覚でなんとなくfigureを使ったり使わなかったりしているのでしょうか？