HTML5でフィギュアタグを使うべきか、ただのimgで良いかをどう区別していますか?
・フィギュアの場合
自己完結している。
なおかつ文章から参照される性質のものであること。
・フィギュアでない。
自己完結していない。
ないしは文章と関連が無い画像。
つまりその画像が無いと本分の意味が通らないなら、img、無くても意味がわかるなら自己完結した画像なのでフィギュアでしょうか?
ポートフォリオサイトの自分のポートフォリオの画像や自分自身の画像などは、文章から参照される性質に該当するとは思うのですが、自己完結しているかはっきり分かりません?
上記のような場合はフィギュアを使いますでしょうか?
それともそこまでセマンティックにこだわる必要はないのでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
私もHTML5を学習中の身です。以下は完全に私見であり、一切の正確性を保証いたしません。
まず初めにPortfolioサイトにてfigureタグをimgと併用すべきかという質問でよろしいでしょうか。
色々とサイトによって意見が割れていますが今回の例では私は以下を使用の判断基準にできると考えます。
・本文に関係あるか(Portfolioサイトのギャラリーページなら関係あるでしょう)
・他のページにてその要素は有効か?本文に影響を与えないか
(つまり自己完結しているか。この場合ギャラリー以外に作品があったとしてそれが問題となるかどうか。
作品という意味で完結していると解釈できると思いますが……影響を与えないかというと微妙)
究極的には解釈によって変わってくると思うのですが(回答率が低い理由かと)私としては使用してもそこまで問題はないのではないかと思います。
(私が使用するかと言われるとかなり微妙なところですが……)
迷うくらいなら旧来の指定方法でも問題ないとも思います。
(imgタグにtitleでキャプションを指定し、見出しタグで見出しを付ける)
何故かと言いますと旧来の方法は大きく間違っているわけではないからです。
新しい方法やタグはより適切に文書を構成するために作られたわけですから、その使用に迷い、最終的に文書構造に誤った部分ができるくらいなら使用しなくても構わないのではないでしょうか?
(もちろん正しいときに使用できるのが最良ですし、その判断が付くよう学習するべきです)
headerやfooterタグ、navタグなど非常に利用目的が明確なタグなら積極的に使用したほうがいいと思いますが。
100点満点の文書を目指すために追加されたタグを使って、90点から80点に落ちるというようなことがあっては本末転倒ですよね。
(失敗から学ぶことはできますが)
投稿2015/10/12 06:27
総合スコア730
0
文章やリンクボタンの一部として使う場合は素のimg、別途図表や挿絵など独立して使うならfigureで囲んでキャプションをつけるのがいいのではないでしょうか?
かなり適当ですが、例えば、下記のような感じです。
HTML
1<p>図1を参照してください。一覧に<img src="neko_icon.png" alt="猫アイコン">が表示されるのがわかります。</p> 2<figure> 3 <img src="zu1.jpeg" alt="猫アイコンの表示例の図"> 4 <figcaption>図1</figcaption> 5</figure> 6<button onclick="kakudai();"><img src="kakudai_button.png" alt="拡大"></button>
figureを使ったからと言ってfigcaptionが必須というわけではありませんので、キャプションを付けない場合でも、独立している(地の文章の中にない)ならfigureで囲った方が構造として意味が通じると思います。
他、下記のサイトでfigureの使い方が良くまとめられていますので、参考にしてみてください。
[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
投稿2015/10/11 23:53
総合スコア21735
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/12 06:50
退会済みユーザー
2015/10/12 17:29
2015/10/12 18:03
退会済みユーザー
2015/10/13 15:07
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/10/12 08:50
2015/10/12 14:04
退会済みユーザー
2015/10/13 08:01
退会済みユーザー
2015/10/13 11:58
2015/10/14 07:28