aの中にspan
spanの中にa
どちらが正しいですか?
<a class="eee" href="http://a.com/">
<strong class="eeee">ホーム</strong>
<span class="eeeee">HOME</span>
</a>
は正しいですか?
No.1ベストアンサー
- 回答日時:
a も span もインライン要素であり、どちらもインライン要素とテキストを内包できますので、文法的にはどちらも正しいかと思います。
ただ、spanは意味を持たないインライン要素で、目的が文章をグループ化することなので、特別な理由がない限りspanの中にaが来るのが正しいといえると思います(aに文章をグループ化するという目的はないのにspanを内包してグループ化するのはおかしいし、そもそもspanがグループ化してくれている文章をさらにaでグループ化するとなると意味が2重になってしまい不自然)。
No.3
- 回答日時:
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
- 回答日時:
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を使用するのは間違っています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
smallにtext-allignが効かない
-
NからZへの全単射を具体的に構...
-
emとstrongの反対
-
親要素・子要素
-
【ヒトの神秘】美男美女から何...
-
imgタグをそのまま使うことは正...
-
含む含まないという概念自体の...
-
CSSのセレクタに指定するbodyと...
-
input type="hidden"で取得した...
-
HTMLで <p>~</p>内で2回以...
-
html タグの閉じスラッシュ前の...
-
CSSでjavascriptが中央寄せにな...
-
aの中にspan
-
質問1.
-
タグは大文字と小文字どちらが...
-
textareaの幅を画面と合わせたい
-
figcaption要素の中にul要素
-
vb/vb.net XMLの大量データの作...
-
CSSセレクタの子孫要素について...
-
初歩的な質問です。<div>のwidt...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
質問1.
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
改行ほどは行かないけど、若干...
-
マージソートの計算量について-...
-
親要素・子要素
-
border: noneでボタンの境界線...
-
C言語 並び替え(配列)について
-
tdに対してmin-heightの定義、...
-
HTMLでTextareaを横に2つ並べ...
-
テキストボックスの中にリンク...
-
CSSで改行後の行間調整
-
H1タグを画像にしたい
-
ある要素の中身を全部グレーア...
おすすめ情報