リンク中の<br>の問題は？

質問

こんにちは。html5でウェブサイトを構築している者です。毎回みなさんのご協力が有り大変嬉しく思います。今回も解決出来ない質問があります、質問させて下さい。

<a href="～">いちご<br>(ストロベリー)</a>
<a href="～">すいか<br>(ウォーターメロン)</a>
<a href="～">みかん<br>(オレンジ)</a>
<a href="～">りんご<br>(アップル)</a>
・・・

という下層へリンクを貼っているページがあります。html5ということで<nav>を利用しても面白いかなと考えているのですが、問題は文中の改行<br>です。スタイリングのために<br>を使ってはいけないとはご教示頂けたのですが、今回、例えば”りんご”をクリックしても”アップル”をクリックしても同じページに辿り着きたいのです。ですが、スタイリング上、下記のように改行したいのです。

ーーーーーーーーーーーーーーーーーー
いちご
(ストロベリー)
ーーーーーーーーーーーーーーーーーー
すいか
(ウォーターメロン)
ーーーーーーーーーーーーーーーーーー
みかん
(オレンジ)
ーーーーーーーーーーーーーーーーーー
りんご
(アップル)
ーーーーーーーーーーーーーーーーーー
・・・

しかも今回は50音順になっています。<nav>を使うなら個々は<li>でいいのか？というのもあります。

みなさま、何卒よろしくお願いいたします。

回答No.3

noname#206842 · ベストアンサー

＜ｂｒ＞は、改行ではありません！Brakeの意味で、強制的に止める意味です。
そのためにブラウザは、改行しているだけのこと。
タグは、すべて英語で、意味を持っています。
ほとんどの方が、間違った使い方をしているのが、現状ですが、正しく覚えてください。

ご質問の件は、
<ul>
<li>イチゴ</li><li>すいか</li><li>みかん</li><li>りんご</li>
</ul>
という記述にないます。
リンクをかけるのであれば、
<ul>
<li><a href="ichigo.html">イチゴ</a></li><li><a href="suika.html">すいか</a></li><li><a href="mikan.html">みかん</a></li><li><a href="ringo.html">りんご</a></li>
</ul>
と、いったようになります。
ｈｔｍｌ５で記述すると、
<nav>
<section id="kudamono">
<h1>果物の選択</h1>
<ul>
<li><a href="ichigo.html">イチゴ</a></li><li><a href="suika.html">すいか</a></li><li><a href="mikan.html">みかん</a></li><li><a href="ringo.html">りんご</a></li>
</ul>
</section>
</nav>
となります。

あとは、横並びにするのであれば、cssに、
#kudamono ul{text-align:center;}
#kudamono li{display:inline;padding:left:10px;}
などの、記述をすれば、簡単にできます。

liは、listの意味です。
タグの意味を、正しく理解することから、始めましょう。

参考URL：

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html

回答No.4

noname#206842

よく理解できないのですが、下記参照URLのようにするということですか？・・・

正解であれば、http://www.nanden.asia/test2/test2.zip　を、お持ち帰りください。

参考URL：

http://www.nanden.asia/test2/temp.html

回答No.2

noname#206842

＜ｂｒ＞は、改行ではありません！Brakeの意味で、強制的に止める意味です。
そのためにブラウザは、改行しているだけのこと。
タグは、すべて英語で、意味を持っています。
ほとんどの方が、間違った使い方をしているのが、現状ですが、正しく覚えてください。

ご質問の件は、
<ul>
<li>イチゴ</li><li>すいか</li><li>みかん</li><li>りんご</li>
</ul>
という記述にないます。
リンクをかけるのであれば、
<ul>
<li><a href="ichigo.html">イチゴ</a></li><li><a href="suika.html">すいか</a></li><li><a href="mikan.html">みかん</a></li><li><a href="ringo.html">りんご</a></li>
</ul>
と、いったようになります。
ｈｔｍｌ５で記述すると、
<nav>
<section id="kudamono">
<h1>果物の選択</h1>
<ul>
<li><a href="ichigo.html">イチゴ</a></li><li><a href="suika.html">すいか</a></li><li><a href="mikan.html">みかん</a></li><li><a href="ringo.html">りんご</a></li>
</ul>
</section>
</nav>
となります。

あとは、横並びにするのであれば、cssに、
#kudamono ul{text-align:center;}
#kudamono li{display:inline;padding:left:10px;}
などの、記述をすれば、簡単にできます。

回答No.1

ORUKA1951

<br>は、強制改行でしたが、HTML5(大文字で書きます--頭文字ですから)
br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.( http://www.w3.org/TR/2012/CR-html5-20121217/text-level-semantics.html#the-br-element )
・・・br要素は、詩や住所のように、実際に【改行自体が】内容の一部をなすような場合のみに使わなければいけません。・・・
　と言うことです。

[提示例]
<a href="～">いちご<br>(ストロベリー)</a>
<a href="～">すいか<br>(ウォーターメロン)</a>
<a href="～">みかん<br>(オレンジ)</a>
<a href="～">りんご<br>(アップル)</a>
では、レンダリングは
＿＿＿＿＿＿＿＿＿＿＿＿＿＿
いちご
(ストロベーリー)すいか
(ウェーターメロン)みかん
(オレンジ)りんご
(アップル)
￣￣￣￣￣￣￣￣￣￣￣￣￣￣
になりますよ。

HTML5では、文書構造をマークアップすることに専念しますから、もしこの文脈どおりでしたら、BRはコンテンツの一部ではありませんから
<p><a href="～">いちご<span class="katakana">(ストロベリー)</span></a></p>
<p><a href="～">すいか<span class="katakana">(ウォーターメロン)</span></a></p>
<p><a href="～">みかん<span class="katakana">(オレンジ)</span></a></p>
<p><a href="～">りんご<span class="katakana">(アップル)</span></a></p>
となるべきでしょうね。
　そしてスタイルシートで、
p span.katakana:before{content:"\A";white-space:pre;}
　とすれば良いです。

＞という下層へリンクを貼っているページがあります。
と提示されたソースが結びつきませんが、下層だろうがなんだろうが、それがナビゲーションでしたら<nav>要素を使用しますが、フッターはすでに、ナビゲーション的な意味を持っていますから、さらに<nav>を使うことはありませんが、それ以外で、ナビゲーションを示すブロックであるならば<nav>要素を使います。

お礼

何時もお世話になっております。ご回答ありがとうございます。

ご指摘のようにやってみましたら出来ました。<span>を使うとは思いも寄りませんでした。

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