計算式や注意書きなどの記述は？(HTML5)

質問

お世話になります。

今回も本当に初歩な内容で申し訳ありません。

HTML5で、下記のような計算式の部分や注意書きの部分は、
どのタグで記述すれば適切でしょうか。

－－－－－－－－－－－－－－－－

aを求める計算式は、下記の通りとする。

a = b * c + d

注1) b及びcは～とする。
注2) dは～～～～でなければならない。

－－－－－－－－－－－－－－－－－

以上になります。

一見、式は<q>かとも思いましたが、引用ではないし、
<details>でも違うようです。

注)に関しては、<small>かとも考えてみましたが、
やはり違うようです。

ふさわしいタグを教えていただけますでしょうか。

よろしくお願いいたします。

回答No.4

神崎 渉瑠（@taloo）

No.2です。すみません、訂正です。
数式が改行されると良くないので、<pre>の方が良いも知れません。

<p>aを求める計算式は、下記の通りとする。</p>
<pre>a = b * c + d</pre>

<div>
aを求める計算式は、下記の通りとする。
<pre>a = b * c + d</pre>
</div>

ブラウザをMathML対応ブラウザに限定できるならMathMLがいいと思いますが、
<img>がよく使われると思います。
（imgの代替コンテンツは、数式をプレーンテキストで表現したもの）

<p>aを求める計算式は、下記の通りとする。<br>
<img src="expression.png" alt="a = b * c + d"></p>

回答No.3

ORUKA1951

No.1です。<mathML>以外の要素の説明
<figure>
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document,以下省略
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.5 Grouping content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/grouping-content.html#the-figure-element )］より
　挿絵、画像、写真、コードリストのように、本文に注釈を付けるために使われます。
<figcaption>
　は文字通り、そのキャプション(説明)です。

<q>は引用です。
<details>は、非表示にする等が前提の要素です。ブラウザには表示させず、ユーザーのアクションで表示させたりします。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
The details element is not appropriate for footnotes. Please see the section on footnotes for details on how to mark up footnotes.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.11 Interactive elements — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/interactive-elements.html#the-details-element )］より

<aside>
　これは本文とは直接関係ない記事をマークアップします。
<article>
　これは、内部に<header><section><footer>を持つか、持つと期待されている完結した記事をマークアップします。

　HTML5では、原則として<div><span>は使わず、まず最適な要素がないかを確認して、それがある場合は、それを使います。数式は、HTML5には、<header><section><aside>などと同列に使えることになっています。　
　⇒4.8 Embedded content — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#mathml )

figureとmath,varの組み合わせは、仕様書に実際に書かれています。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
<figure>
　<math>
　　<mi>a</mi>
　　<mo>=</mo>
　　<msqrt>
　　　<msup>
　　　　<mi>b</mi><mn>2</mn>
　　　</msup>
　　　<mi>+</mi>
　　　<msup>
　　　　<mi>c</mi><mn>2</mn>
　　　</msup>
　　</msqrt>
　</math>
　<figcaption>
　　Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of a triangle with sides <var>b</var> and <var>c</var>
　</figcaption>
</figure>
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.6 Text-level semantics — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/text-level-semantics.html#the-var-element )］より

お礼

早速のご返答、ありがとうございます。

mathというタグがあるということは知りませんでした。
しかし、やはり対応していないブラウザが多いようです。

表示目的ではなく、意味合いを持たせるだけならば、
使っていけそうです。

またよろしくお願いいたします。

ありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

私の書き方です。
MathMLは表示できる環境も多くはない（ブラウザシェア的に）ので、基本的には使いません。

<article>
<p>aを求める計算式は、下記の通りとする。</p>
<p>a = b * c + d</p>
<aside>
<ul style="list-style-type: none">
<li><strong>注1)</strong> b及びcは～とする。</li>
<li><strong>注2)</strong> dは～～～～でなければならない。</li>
</ul>
</aside>
<article>

または、<div>を使用して仮想的な段落を作成できます。

<article>
<div>
aを求める計算式は、下記の通りとする。
<p>a = b * c + d</p>
</div>
<aside>
<ul style="list-style-type: none">
<li><strong>注1)</strong> b及びcは～とする。</li>
<li><strong>注2)</strong> dは～～～～でなければならない。</li>
</ul>
</aside>
<article>

ただし「aを求める～」が何か別の部分に対する注意事項なら、全体が<aside>になります。

<article>
本文
<aside>
<p>aを求める計算式は、下記の通りとする。</p>
<p>a = b * c + d</p>
<ul style="list-style-type: none">
<li><strong>注1)</strong> b及びcは～とする。</li>
<li><strong>注2)</strong> dは～～～～でなければならない。</li>
</ul>
</aside>
</article>

HTMLではまず<p>以外のすべてのタグを調べて、対応するタグがない場合に<p>を使ってください。

http://www.w3.org/TR/html5/grouping-content.html#the-p-element
> The p element should not be used when a more specific element is more appropriate.

http://www.html5.jp/tag/elements/p.html
>より意味が限定され、より適切な要素が他にあるのであれば、p 要素を使うべきではありません。

http://www.w3.org/TR/html5/sections.html#the-article-element
http://www.w3.org/TR/html5/sections.html#the-aside-element
http://www.html5.jp/tag/index.html

お礼

早速のご返答、ありがとうございました。

mathを使用しない、現在の形式で教えていただいたのですが、
そうなると、数式は特に決められているタグはないという
ことになるのでしょうか？

数式にしても、注意事項にしても、特に決められては
いないのなら、自分なりの書き方で構わないのでしょうか。

もしそうであれば、もう少し検討してみたいと思います。

またお願いいたします。

ありがとうございました。

回答No.1

ORUKA1951

HTML5は数式にMathMLが使えますから、それを使います。
Firefoxは、何年も前から使えますから、firefxで試すと良いでしょう。
MathML-fonts( https://addons.mozilla.jp/firefox/details/367848 )
を入れておくときれいに表示されます。

<figure>
　<figcaption><var>a</var>を求める計算式は、下記の通りとする。</figcaption>
　<p class="mathML">
　　<math xmlns="http://www.w3.org/1998/Math/MathML">
　　　<mi> a </mi>
　　　<mo> = </mo>
　　　<mi> b </mi>
　　　<mo> &#x00D7;</mo>
　　　<mi> c </mi>
　　　<mo> + </mo>
　　　<mi> d </mi>
　　</math>
　</p>
　<figcaption class="note">注1) b及びcは～とする</figcaption>
　<figcaption class="note">注2) dは～～～～でなければならない。</figcaption>
</figure>
とかですかね。
これにスタイルシートを組み合わせると下記になります。
firefoxでの表示を添付しておきます。
★タブは＿に置換してあります。
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
<style>
<!--
figure{width:90%;margin:0.8em auto;}
figure p.mathML{font-size:1.6em;}
figure var{font-size:1.2em;margin-left:0.5em;margin-right:0.5em;}

-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿</section>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<figure>
＿＿＿<figcaption><var>a</var>を求める計算式は、下記の通りとする。</figcaption>
＿＿＿<p class="mathML">
＿＿＿＿<math xmlns="http://www.w3.org/1998/Math/MathML">
＿＿＿＿＿<mi> a </mi>
＿＿＿＿＿<mo> = </mo>
＿＿＿＿＿<mi> b </mi>
＿＿＿＿＿<mo> &#x00D7;</mo>
＿＿＿＿＿<mi> c </mi>
＿＿＿＿＿<mo> + </mo>
＿＿＿＿＿<mi> d </mi>
＿＿＿＿</math>
＿＿＿</p>
＿＿＿<figcaption>注1) b及びcは～とする</figcaption>
＿＿＿<figcaption>注2) dは～～～～でなければならない。</figcaption>
＿＿</figure>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>