aの中にspan

aの中にspan
spanの中にa
どちらが正しいですか？
<a class="eee" href="http://a.com/">
<strong class="eeee">ホーム</strong>
<span class="eeeee">HOME</span>
</a>
は正しいですか？

No.1 ベストアンサー 回答者： weakweak 回答日時： 2013/07/03 02:26

a も span もインライン要素であり、どちらもインライン要素とテキストを内包できますので、文法的にはどちらも正しいかと思います。

ただ、spanは意味を持たないインライン要素で、目的が文章をグループ化することなので、特別な理由がない限りspanの中にaが来るのが正しいといえると思います(aに文章をグループ化するという目的はないのにspanを内包してグループ化するのはおかしいし、そもそもspanがグループ化してくれている文章をさらにaでグループ化するとなると意味が2重になってしまい不自然)。

No.3 回答者： ORUKA1951 回答日時： 2013/07/03 09:09

　A要素は行内要素で、その内容も行内要素でなければなりません。

HTML5ではブロックも条件付で含めることが出来ます。ただし、いずれも必ずブロック要素の中になければなりません。

　ただ、例にあげられたマークアップは感心しないところがいくつかあります。
classは、あくまで、その要素の文書構造を示すために使用します。また他に適当な要素がある場合はそれを使います。
この場合は
<a href="[URI]"><span lang="jp">ホーム</span><span lang="en">HOME</span></a>
とか
<a href="[URI]"><span title="HOME">ホーム</span></a>
でよいのではないかと・・
※A要素のclassは不要でしょう。href属性の値で区別できますから・・

No.2 回答者： hirotn 回答日時： 2013/07/03 05:50

xhtml1.0 strict の文書定義(DTD)によると、

<!ELEMENT span %Inline;>
<!ENTITY % inline "a | %special; | %fontstyle; | %phrase; | %inline.forms;">

<!ELEMENT strong %Inline;> <!-- strong emphasis -->

<!ENTITY % phrase "em | strong | dfn | code | q | sub | sup |
samp | kbd | var | cite | abbr | acronym">

<!ELEMENT a %a.content;>
<!ENTITY % a.content
"(#PCDATA | %special; | %fontstyle; | %phrase; | %inline.forms; | %misc;)*">
<!ENTITY % special
"br | span | bdo | object | img | map">

いずれも問題は無いようです。

振り返れば、
<a href="foo.bar">this is <span style="color: red;">NOT</span> a pen.</a>とかやりそうです。

また、
ENTITY a.contentをみると、*があるのでaの中に2つ以上要素（今回はstrongとspan)があってもよいです。

ただし、太字にするためにstrongを使用するのは間違っています。