雑誌から学ぶデザイン
copyrightのマークアップにsmallを使うことについて。
久方ぶりのブログです。そういうわけでオオコシです。
コードレビューをしているときに下記のようなマークアップを見かけて、
<footer>
<p><small>©2020- EVOWORX</small></p>
</footer>そういえばコレsmall要るんだっけ？と思い、改めて確認してみたんですが、最近の日本のリファレンス系サイトを見ると、わりとどのサイトもfooter > p > small で記載するよう書かれていました。
※ちなみにコピーライトの書式については 著作権表示 – Wikipedia や 年号と©マークと何が必要？Copyright（コピーライト）表記の正しい書き方 を参照してみてください。©と発行年、権利者が書いてあればOKです。
なぜこの書き方に違和感を持ったかと言うと、2014年のものになってしまうんですが、下記の記事を見てからfooterの中身がcopyrightだけであればsmall である必要はないと記憶していたから。
だが仮に
footer要素に著作権表示しかないとすると、small要素を使わない方がより適切になるだろう。併用するのはいかにも冗長であるから、と言うことではなく、
https://hail2u.net/documents/markup.htmlsmall要素足る条件を満たしていないと考えられるから、だ。
海外のサイトはどうなってる？
じゃあ有名どころはどうだったっけ、ということでいくつか見てみました。
選んだ基準はなんとなく。
Github
divですね…。下層ページはliでした。
<div class="col-lg-4 list-style-none mr-lg-5">
<a title="Home page" class="d-none d-lg-flex footer-octicon footer-octicon no-underline" href="https://github.com">
（略）
<div>
<span class="f6 text-gray-light">
© 2020 GitHub, Inc.
</span>
</div>
</a>
</div>AirBnB
footerの中にdiv。
<footer class="_fph8lt">
（略）
<div style="margin-top: 48px; margin-bottom: 48px;">
<div><a href="https://www.airbnb.com/" title="Airbnb, Inc." rel="home" style="display: inline-block; text-decoration: none; font-size: 18px; color: rgb(72, 72, 72);">© Airbnb, Inc.</a></div><!-- react-empty: 1044 --></div>
</div>
（略）
</footer>Netlify
footerにp。なんかいろいろ端折りましたけど。
<footer class="footer compat-grid">
（略）
<p class="footer-copyright">© 2020 Netlify</p>
（略）
</footer>MDN
こちらもfooter に pですね。
<footer id="nav-footer" class="nav-footer" data-testid="footer">
（略）
<p id="license" class="footer-license">© 2005-<!-- -->2020<!-- --> Mozilla and individual contributors. Content is available under<!-- --> <a href="/docs/MDN/About#Copyrights_and_licenses">these licenses</a>.</p>
（略）
</footer>Vue.js
Vue.jsも、footer > p。
<footer id="footer" role="contentinfo">
（略）
<p>Released under the <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener">MIT License</a><br>
Copyright © 2014-2020 Evan You</p>
</footer>Twitter(developers)
Twitter…は単にdivだけだったのでdevelopersの方を。footer に divでspanです。
<footer class="u02 twtr-color-bg--blue-dark">
（略）
<div class="u02__column u02__column--bottom">
<span class="u02__column-footnote twtr-type--roman-50 twtr-dtc-color--extra-light-gray">
© 2020 Twitter, Inc.
</span>
</div>
（略）
</footer>Facebookはfooterにspan。
でも spanの中にul入ってるのが気持ち悪い…。なぜここに。
<footer aria-label="Facebook" role="contentinfo">
<span class="oi732d6d ik7dh3pa d2edcug0 qv66sw1b c1et5uql a8c37x1j muag1w35 dco85op0 e9vueds3 j5wam9gi knj5qynh m9osqain" dir="auto">
<ul class="nc684nl6">
（略）
</ul>Facebook © 2020</span>
</footer>ここまで見たところで、footer > p > smallは見当たりません。
もしかして日本だけなんじゃ…と思いつつ。
こんな時には仕様を見るのが一番。というわけで HTML Living Standard （日本語訳）確認してみました。
<small>
まずは small から。
The
smallelement represents side comments such as small print.Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements.
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-small-element
small要素は、小さな活字体などの副次的なコメントを表す。小さな活字体は通常、免責事項、警告、法的制約、または著作権を取り上げる。小さな活字体はまた、時として帰属に対して、またはライセンス要件を満たすために使用される。
https://momdo.github.io/html/text-level-semantics.html#the-small-element
著作権。たしかに入ってます。
用法はこちら。
料金に朝食は入ってるけどVAT（付加価値税）は入ってませんよー、という注釈。わかる。
<dl>
<dt>Single room
<dd>199 € <small>breakfast included, VAT not included</small>
<dt>Double room
<dd>239 € <small>breakfast included, VAT not included</small>
</dl>しかし著作権っぽいサンプルがないのでMDNを見てみましょう。
<p>MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.</p>
<hr>
<p><small>The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.</small></p>p > small が出てきてますね。しかし、このコンテンツはCC2.5ライセンスですよーっていう話なので、サイトのコピーライトとはちょっと違うような。本文に対して「小さな活字体」として記述する注釈っていうニュアンスというか。
<footer>
ではfooterも見てみましょう。
The
footerelement represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.When the
https://html.spec.whatwg.org/multipage/sections.html#the-footer-elementfooterelement contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
footer要素は、その直近の祖先セクショニングコンテンツまたはセクショニングルート要素に対するフッターを表す。フッターは、たとえば誰が書いたか、関連文書へのリンク、著作権データなど、そのセクション関する情報を一般に含む。https://momdo.github.io/html/sections.html#the-footer-element
footer要素がセクション全体を含む場合、付録、索引、長い奥付、冗長なライセンス契約などのコンテンツを表す。
「著作権データなど、そのセクション関する情報を一般に含む。」これっぽいですね。
用法はこちら。まさにサイトフッターのサンプルですが、small入ってません。
<FOOTER> <!-- site wide footer -->
<NAV>
<P><A HREF="/credits.html">Credits</A> —
<A HREF="/tos.html">Terms of Service</A> —
<A HREF="/index.html">Blog Index</A></P>
</NAV>
<P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>MDNも、入ってません。
<article>
<h1>How to be a wizard</h1>
<ol>
<li>Grow a long, majestic beard.</li>
<li>Wear a tall, pointed hat.</li>
<li>Have I mentioned the beard?</li>
</ol>
<footer>
<p>© 2018 Gandalf</p>
</footer>
</article>以上のことから、サイトの著作権表示にsmall使うのは間違いではない…とも思うんですが、footerの中にコピーライトのみ、あるいはfooter内の他の要素と比較して、小さく表示する必要はないということであればsmallにしなくても良いのでは。という話でした。
html4時代の「小さな文字」という使い方ではなくなったけど、やっぱりsmallっていう単語使ってるわけだし、そのコンテンツの内容と比較して小さく表示すべきか否かっていう使い分けなんじゃないでしょうか。（プライバシーポリシーとか特商法の重要度と比較して著作権がより小さいってこともないだろうし）
でも悉くcopyrightにはsmall使いましょうって書いてあるんだよな…。
昔はここまで多くのサイトで書いてなかったような気がするんだけど。
補足
WAI-ARIAでそれっぽいのなかったっけ、って思ったんですが、footer は role="contentinfo" と同義とのこと。
https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role
<footer>要素を使用すると、自動的にセクションにcontentinfoロールを持つことを伝えます。 開発者は、ARIA を使用するよりも正しい意味論の HTML 要素を常に使用するべきで、確実に VoiceOver の既知の問題をテストしてください
HTML フッター要素 (
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines<footer>) はページのフッターを定義し、ふつうは著作権情報や法的事項を含み、いくつかのリンクを含む場合もあります。セクションに対して使用された場合は、フッターは区切られた部分のコンテンツの公開日やライセンス情報などを含むかもしれません。
