２行にしたい要素、改行か分割すべきか

質問

質問が漠然としているかもしれません。

例えば、見出しや定義リストの一部（ＴＤ要素）で複数言語での表記を併記したい場合など、文書構造的に単一の要素だが行を分けたい場合

・改行タグをはさんで２行の単一要素にする
・複数の同じ要素に分割しCSSで見た目を操作する

のどちらが望ましいと考えますか。

回答No.7

神崎 渉瑠（@taloo） · ベストアンサー

連続で済みません。

見出しについてですが、
サブタイトル（補足事項）を、行を分けて書きたい場合はいくつかの方法があります。
（すべて文法上はOKです。）

<h1>タイトル - サブタイトルや補足</h1>

<h1>タイトル<br>
- サブタイトルや補足</h1>

<h1>タイトル</h1>
<h2>サブタイトルや補足</h2>

最後の<h1>と<h2>を分ける方法ですが、
本来のHTMLの文法で考えれば、「大見出し」「小見出し」ですので、サブタイトルでなくなってしまいます。

HTML5では、複数の見出しを<hgroup>でひとまとめにする事ができます。

<hgroup>
<h1>タイトル</h1>
<h2>サブタイトル</h2>
</hgroup>

ただ、これでも厳密にはサブタイトルではなくなってしまうと思いますので、私は、以下のいずれかをお勧めします。

<h1>タイトル<span> - サブタイトル</span></h1>

<h1>タイトル<br>
<span> - サブタイトル</span></h1>

あくまで私見ですので、
・「サブタイトル（補足事項）も含めた物が１つのタイトル（<h1>）」 ・・・私の考え方
・「サブタイトル（補足事項）はタイトル（<h1>）ではない、だから<h2>や<p>に分ける」・・・No.3の考え方と思います
のどちらか好きな方を選べばいいと思います。

お礼

※　「教えてｇｏｏ」から閲覧している方向け：全ての補足後、締め切り時にお礼しています。

回答No.４～７をまとめてのお礼になります。
ソースを見直した結果
・一続きの長い文面で、スタイルシートを切った場合でも１要素として見えてほしい場合（補足No.９）
（現行の主要ブラウザは要素を分けると見た目も分離してしまう）
と
・分離していても構わない場合（言語絡みはおおむねこれに該当）
に区別できそうなので、前者は<br>、後者は要素分割する形にしたいと思います。

回答No.14

神崎 渉瑠（@taloo）

すみません、今更ながら、全面撤回します。

<br>の項目を読み直すと、
> http://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-br-element
>br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

改めて、
>as in poems or addresses
詩と住所に使用する（「など」という表現ではない）、ですので、
そのままの文字通りに解釈すれば、

> 質問文中
>例えば、見出しや定義リストの一部（ＴＤ要素）で
>複数言語での表記を併記したい場合
この２つの条件下において、
たとえ行を分けたい場合でも、<br>を使えないという事になります。

------------
セマンティックウェブについて、
自分の意見がうまくまとまらないのですが、、、
タグの種類が少なすぎる物を、それ以外の規格を利用したり、作ったりして区別させようという物だと思います。

(1) 句を<p>で区切る

<div class="article tanka">
<div class="section kaminoku">
<p class="shoku">秋の田の</p>
<p class="dai2ku">かりほの庵の</p>
<p class="dai3ku">とまをあらみ</p>
</div>
<div class="section shimonoku">
<p class="dai4ku">わが衣手は</p>
<p class="kekku">露にぬれつつ</p>
</div>
</div>

(2) 上の句と下の句を<br>で区切り、句を<span>で区切る場合

<div class="section">
<p class="tanka">
<span class="kaminoku">
<span class="shoku">秋の田の</span>　<span class="dai2ku">かりほの庵の</span>　<span class="dai3ku">とまをあらみ</span>
</span><br>
<span class="shimonoku">
<span class="dai4ku">わが衣手は</span>　<span class="kekku">露にぬれつつ<span>
</span>
</p>
</div>

(3) 上の句と下の句を<p>で区切り、句を<span>で区切る場合

<div class="section">
<p class="kaminoku">
<span class="shoku">秋の田の</span>　<span class="dai2ku">かりほの庵の</span>　<span class="dai3ku">とまをあらみ</span>
</span></p>
<p class="shimonoku">
<span class="dai4ku">わが衣手は</span>　<span class="kekku">露にぬれつつ<span>
</p>
</div>

私は、
句は段落ではありませんから、（<span>を書かない場合でも）どの書き方も正しいと思います。
多くの人が、２番目の方法（下の句を全角スペースでインデントする）か、３番目の方法（下の句をスタイルシートでインデントする）を使うのではないでしょうか。

HTML4、XHTMLでは、<span>は「その他の要素」という意味がありますが、
HTML5では、<span>に意味はありません。
もしHTML5で書くのであれば、２番目、３番目は、HTMLの文法上は句が別れていない事になります。
（さらに、全角スペースで区切るのは、文法的に不正だと思います。）

人が見たときではなく、「コンピューターに句を区別させる」という目的があるのであれば、
1番目の例が適していると思いますが、
そうでなければ、２番目、３番目でもいいと思います。

短歌や俳句は段落ではありませんので、<p>でいいのかということになると思いますが、
HTMLでは、他に適した要素がなければすべて<p>です。

段落ではない物のために要素を作るように要求しましたが、却下されました。
詩の段落（書籍などでは空業で区別する）と句は違うと思いますし、広告や商品パッケージにあるような文字の部分も段落ではないと思うのですが、、、
「<p>要素は段落やparagraphではなく『<p>要素である』」という考え方にした方がいいのかもしれません。

お礼

※　「教えてｇｏｏ」から閲覧している方向け：全ての補足後、締め切り時にお礼しています。

他の回答へのお礼と内容が重複しますが、複数言語併記については「同一内容の２つの要素」ととれますので
要素を分ける形にしようと思います。

これは余談ですが、
あんまり要素が増えてもブラウザの実装者とhtml文書の執筆者が困るだけのように思います。
>HTMLでは、他に適した要素がなければすべて<p>
>「<p>要素は段落やparagraphではなく『<p>要素である』」
これで十分なような。

回答No.13

Chaire

To: No.11
脱線すみませんが、ひとつ誤解を解きたいと思います。

> ナントカ学会では「こういう意味にしたかったという考え方」が禁止されているかもしれません

HTML というのは、必ずしも「本来の構造」を反映するとは限りません。HTML はあくまで、HTML-UA に解釈・表示させるための形式にすぎないからです。分かりやすい例として、HTML で作るタブパネルを挙げてみます。ウィジェットを Accesibility API にマッピングする WAI ARIA では、タブパネルの基本骨格は次のようになります。

<tablist>
　<tab>Tab 1</tab>
　<tab>Tab 2</tab>
</tablist>
<tabpanel/>
<tabpanel/>

もちろん、このままではブラウザ上で使えませんので、HTML にマッピングします。

<ul role="tablist">
　<li role="tab" id="tab1">Tab 1</li>
　<li role="tab" id="tab2">Tab 2</li>
</ul>

<div role="tabpanel" aria-labelledby="tab1"></div>
<div role="tabpanel" aria-labelledby="tab2"></div>

「本来の構造」から HTML へのマッピングの過程で、情報が削ぎ落ちたり、余計な情報がついたりするかもしれない。しかし可能なら、マッピングの精度を上げたいところです。HTML5 でやたら内容にうるさくなったのは、マッピングの精度、つまり「どちらを『意味させたいか』」という作者の意向をなるべく反映させ、「解釈の差異」を小さくするためです。

> 小説などの文法と、HTMLを初めとするコンピュータープログラムに置ける文書構造は全く違います。
> 小説では段落かもしれませんが、プログラムでの文書構造は段落ではないかもしれません。

「小説という構造を、特定形式（HTML）に落とし込むときのズレ」の問題提起であるなら、全く同感です。できるだけ「ズレ」の生じない方法を考える、という点では同じ方向を向いているはずなのに、何か嫌みを感じる気がするのは何故なんでしょう。

---
以上が建前の話。以下は私の本音ですが、私はこんなの余計なお世話だと思っています。W3C、というかセマンティック・ウェブ界隈は、もともとオントロジーをやりたい人達なので、（語弊はありますが）意味を意味のまま扱える道具立てを用意してはいましたよ。まあ、えらく学術的で私にはさっぱりですが。

ですがそれを使わずに、HTML の意味論強化という方向を望んだのはブラウザ開発者主導の WHATWG であり、それを支えるウェブ制作者だったのでは。なので、この文脈で「W3C」が出てくると、私はちょっと、うーんとなるかなあ。

回答No.12

ORUKA1951

＞「行を分けて表示したいと言うことは、必然的に文書構造も異なるはずです。」
＞この部分に納得できません。
　それは、それで良いです。絶対と言うわけではなく、ほとんどの場合で良いですよ。たとえば
<address>東京都新宿区<br>・・・・<br>・・・</address>
なんて、住所と言うひとつの段落でありながら、視認性のために<br>を挿入することは認められています。
　ただ、質問は「例えば、見出しや定義リストの一部（ＴＤ要素）で複数言語での表記を併記したい場合など、文書構造的に単一の要素だが行を分けたい場合」とはっきりと書かれていましたから、それに沿ったお答えをしたつもりです。

　どうしてもひとつの構成要素としてマークアップはしたいけど、明確に英語の部分だけを改行したい・・・長くて悠長と言う意味で無い場合ですが、
<h2>日本語<span lang="en">Japanese</span></h2>
をスタイルシートで
h2 span[lang="en"]:before{white-space: pre;content:"\A";}
とすれば良いです。
　一行が長くて読みにくい場合は、コンテナブロックの幅を指定{max-width}して、ユーザー側に任せるのが筋でしょう。でないと想定よりもっと狭い場合、へんに表示される。

　基本はHTMLは構成要素に分解してマークアップし、プレゼンテーションはスタイルシートに任せましょう。
　でしょう。

お礼

※　「教えてｇｏｏ」から閲覧している方向け：全ての補足後、締め切り時にお礼しています。

回答No.３と１２をまとめてのお礼になります。

ソースを見直した結果
・一続きの長い文面で、仮にスタイルシートを切った場合でも１要素として見えてほしい場合（補足No.９）
（現行の主要ブラウザは要素を分けると見た目も分離してしまう）
と
・分離していても構わない場合（言語絡みはおおむねこれに該当）
に区別できそうなので、前者は<br>、後者は要素分割する形にしたいと思います。
（<br>で行を分けることの弊害については理解しました。DIVタグは極力打ちたくないので、要素へのwidth指定なども含めて考えてみます）

質問の本題と離れた部分になりますが、
html3.2で書かれたサイトを縮小ついでに4.01フレームへ（最終更新のため手間を省きたく）書替えている途中での質問で、
CSS（CSS1）もこの更新で初導入になります。

回答No.11

神崎 渉瑠（@taloo）

混乱させて済みません。

>No.9補足
および、質問文中
>文書構造的に単一の要素だが
この条件に当てはまるのであれば、「<br>を使う事が望ましい」となります。

すみません、さらに混乱させるかもしれません。
便宜上<p>を例にしていますが、<h1>などでも同様だと思います。

私の回答文でも、長い文章では読点で改行、つまり<br>を入れていますが、こういう場合であれば、<br>が望ましいと思います。
小説、手記、日記など、段落が明確な物はわかりやすくていいですね。

以前、小説を書いてらっしゃる方が、セリフの後の改行は<br>か<p>か、という質問をされていました。

--------
「こんにちは」
と挨拶をすると、、、云々。
----
<p>「こんにちは」<br>
と挨拶をすると、、、云々。</p>
----
<p>「こんにちは」</p>
<p>と挨拶をすると、、、云々。</p>
--------

どちらが正しいか、という内容です。

スレッドが流れるたびに６～７回ほど質問し直されていたようですが、、、
こういう場合、私は、どちらを意味するかではなく、「どちらを『意味させたいか』」で決めればいいと答えています。

小説などの文法と、HTMLを初めとするコンピュータープログラムに置ける文書構造は全く違います。
小説では段落かもしれませんが、プログラムでの文書構造は段落ではないかもしれません。

何を持ってこの条件を当てはめるのか、どこにこの条件が適用されるのか、
というのが、いろんな人の解釈の仕方で違いが生じるところはないでしょうか。

>HTML5サンプル（正しい書き方）
><p><label>Name: <input name="name"></label></p>
><p><label>Address: <input name="address"></label></p>
HTML4のサンプルでは、<fieldset>とはいえ一まとめにしてあるという事と、
個人情報という意味で、addressとnameは一つの段落と思ってたんですが、どうやら違うらしいですね。

「どちらを『意味させたい』か」で決めればいいと申し上げましたが
ナントカ学会では「こういう意味にしたかったという考え方」が禁止されているかもしれません。
（先のような、（<fieldset>ではなく<p>で）個人情報というひとまとめにするのは、（W3Cから）間違っていると言われた場合など。）

こういうのを調べるのは、１つ１つ、具体例を持って聞いていくしかないと思います。

なお、W3C関係者以外の意見（翻訳も含めて）は、すべて「一個人の私見」と考えています。

回答No.10

Chaire

No.9 補足より：
> 内容が冗長にならざるを得ない要素を、可読性向上のために執筆者の意図で強制改行するのは可か否（要素を分ける）か

言語に特化した流れを作った私としては、『複数言語での表記を併記したい場合』なら lang 属性のコンテナが必要なので、別要素にする必要がある、ということ。その上で、強制改行が必要ならすれば良い。別に、どちらか一方である必要はありません。

見出しに関しては、主題・副題であれば hgroup の中に 2 個の見出しを入れる HTML5 的な方法と、ひとつの見出しの中に主題・副題の両方を入れる方法があります。いずれにせよ、主題と副題を別々に操作する必要があるとき（たとえばスクリプトを使った目次生成）は、主題と副題の区別をつけるために別々の要素（span でも、あるいは b でも良い）に入れた方が良い。その上で、改行が必要ならすれば良い。

つまり、ご質問の『改行か、要素分割か』というのは、別に排他的な関係ではなく、両方やりたきゃやればいいじゃん、的な話だと思います。改行が必要かは見た目の問題であり、要素を分けるかはページ制御のしやすさの問題なのですから。

ゆえに、もう少し具体的な用途・具体的な使用場面がないと、ちょっと考えにくいわけで（なので、私はまず言語に特化した状況を想定したのです）。

---
単純に、この掲示板の多くの方々のように「句読点の位置で改行するのは是か非か」であるならば、私は半分賛成で、半分反対です。

br 要素は「強制改行」と訳されますが、HTML5 の仕様書には「改行ではない別の方法、例えば緑ドットや大きめの空白によって、行の終わりを示しても良い」的なことが書かれています。新聞の小コラムなんかは「▼」で段落ないし改行を表してしますね。もし、br が改行ではなく「▼」で表示されても良いなら、そこは br にしても良いと言えます。

<!-- これが -->
<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

<!-- こうなっても良いなら -->
<p>P. Sherman▼42 Wallaby Way▼Sydney</p>

つまり、br そのものを含めてひとつのテーマである場合。この意味では、句点になっても良いでしょうか。

<!-- 句点にしてみました -->
<p>P. Sherman、42 Wallaby Way、Sydney</p>

逆に、HTML5 仕様書によれば、br の不適切な例は次のようなものです。

<p>
<label>Name: <input name="name"></label>
<br>
<label>Address: <input name="address"></label>
</p>

なぜかと言えば、br の前後でテーマが異なってはならないから、ということのようです。テーマを変えるなら、p なりを使わねばなりません。

<p><label>Name: <input name="name"></label></p>
<p><label>Address: <input name="address"></label></p>

以上、br の使い所は、br 自体が文章の一部であり、その前後でテーマが変わらない場合、ということになります。『行を分けたい』とする要素内容は、この条件を満たしているでしょうか。

さらに、画面の狭いモバイル端末での利用を考えるなら、初期スタイルが改行である br の多用は鬱陶しいのではないか云々、という現実的な判断もからんだりします。

お礼

※　「教えてｇｏｏ」から閲覧している方向け：全ての補足後、締め切り時にお礼しています。

回答No.８～１０をまとめてのお礼となります。
ソースを見直した結果
・一続きの長い文面で、スタイルシートを切った場合でも１要素として見えてほしい場合（補足No.９）
（現行の主要ブラウザは要素を分けると見た目も分離してしまう）
と
・分離していても構わない場合（言語絡みはおおむねこれに該当）
に区別できそうなので、前者は<br>、後者は要素分割する形にしたいと思います。
（<br>を使うことの問題点については理解しました。他の区切り文字にレンダリングされても（更に冗長になりますが）問題はなさそうです）

質問の本題と離れた部分になりますが、
html3.2で書かれたサイトを縮小ついでに4.01フレームへ（最終更新のため手間を省きたく）書替えている途中での質問で、CSS（CSS1）もこの更新で初導入になります。

回答No.9

Chaire

No.5 に関連して、言語タグにおけるサブタグは下記で管理されています。
http://www.iana.org/assignments/language-subtag-registry

言語併記ではなく、見出しにおける副題のマークアップ例なら以下にまとまったものがあります。
http://wiki.whatwg.org/wiki/Hgroup_element
現実としてこのようなものがあるので、hgroup のようなものは必要にはなるのですが。

ちなみに、hgroup が導入される前は header が同じ役割を持っていました。また、見出し要素の子として subhead 要素を設けてはどうか、なんて提案も未だに出たりするので、私はまだ hgroup を使うには慎重な立場ではあります。だいぶ固まったとは思いますけどね。

補足

※「教えてｇｏｏ」で閲覧している方向け：お礼前（No.１補足及びNo.３補足後）に補足しています。

回答有難うございます。
質問文に不備があったようで、回答が言語の問題に引きずられてしまっている事について
全回答者の方に謝らせていただきます。

質問意図を今時点で見直して書き直すと
「内容が冗長にならざるを得ない要素を、可読性向上のために執筆者の意図で強制改行するのは可か否（要素を分ける）か」
となりますが、ここまでの回答でも可否両方あるようです。

各回答へのお礼につきましては今一度内容を検討後、締め切り時に記載させて頂きますので
今しばらくお待ち下さいませ。

回答No.8

Chaire

すみません。No.2 の一部を修正＆撤回いたします。

> この場合、「日本語」に属する dd はなく、「English」に属する dd が「駅」と「Station」の 2 つ、という意味になります

この記述は誤りです。「日本語」「English」という 2 つの名前と、「駅」「Station」という 2 つの値からなる、ひとつのグループとなります。とはいえ、どちらの名前がどちらの値に対応するか（機械的・検索エンジン的に）分からないのは、No.6 がご説明下さった通りです。

なぜか別の話と混同しておりました。ゆえに No.3 の例も、No.4 の例 2 も問題ございませんので、No.2 の上記の記述に惑わされないで下さい。質問者さんに混乱を与えてしまい、申し訳ありません。

---
複数言語という場合、実は @lang のみならず、書記方向（bidi）も問題になります。アラビア語のように右から左に書く場合ですね。もしそうなら、単なる改行だけでは問題が大きくなるかもしれません。いずれにせよ、言語併記ならそれぞれ別要素にするのが無難と考えます。

さらに、読み上げ時の問題……例えば、単純に両言語を併記した場合、音声ナビは両方とも読み上げるでしょう。しかし多くの場合、利用者が必要とする言語はどちらかひとつだけです。つまり、利用者の操作に応じて適切な言語を優先できるようにするのが望ましいと考えられます（音声に限らず視覚的にも、不要な言語での表記が並ぶのは面倒に感じるでしょう）。

まあ、これは大きなブロック単位での翻訳の問題ですので、ご質問の主旨（ごく一部の何かについて併記する？）とは異なると思いますが、ふと頭をよぎったので一応。

回答No.6

神崎 渉瑠（@taloo）

>No.2
>なお、以下はダメです。
>
><dl>
>　<dt lang="ja">日本語</dt>
>　<dt lang="en">English</dt>
>　<dd lang="ja">駅</dd>
>　<dd lang="en">Station</dd>
></dl>
>
>この場合、「日本語」に属する dd はなく、「English」に属する dd が「駅」と「Station」の 2 つ、という意味になります（HTML5 の意味論）。

これについてですが、
<dt>が連続で複数並び、その後<dd>が複数並ぶというのは、HTMLの文法上は問題ありません。

ですが、
「『日本語』の対応付けが『「駅』である」
「『English』の対応付けが『Station』である」
という意味（対応付け）を持たせたいのであれば、
<dt>の直下に<dd>を置かなければなりませんので、意味（対応付け）的に不正という事になります。

用語として、
日本語では「駅」、英語では「Station」で、その意味は・・・であれば、
文法も、意味（対応付け）も、問題ないと思います。

<dt>駅</dt>
<dt lang="en">station</dt>
<dd>列車を止めて、乗客の乗降、貨物の積み降ろしをする所</dd>
<dd lang="en">A train station is a railway facility where trains regularly stop to load or unload passengers or freight (goods). </dd>

（大辞泉、Wikipedia (in English)）

回答No.5

神崎 渉瑠（@taloo）

訂正です。
イギリスはen-GBでした。（Great Britain）
イギリスもいくつかの島になっているので、厳密には細かく別れているようです。

<dt lang="en-GB">

参考URL：

http://ja.wikipedia.org/wiki/ISO_3166-1_alpha-2

回答No.4

神崎 渉瑠（@taloo）

ある問題を別の方法で解決しようとすると、どこかで矛盾が生じると思います。
（たとえばHTMLの問題をスタイルシートやJavaScriptで解決するなど。）

スタイルシートを使わないときにどのような表示になってほしいか、何を意味したいかで決めればいいと思います。

（<html lang="ja">と指定してある場合。）

例1：
<dt>色<br>
<span lang="en-us" class="en en-us">(color)</span>><br>
<span lang="en-uk" class="en en-uk">(colour)</span></dt>
<dd>光の波長の違い（色相）によって目の受ける種々の感じ。</dd>
<dd>人の肌の色。人の顔の色つや。</dd>

例２：
<dt>色</dt>
<dt lang="en-us" class="en en-us">color</dt>
<dt lang="en-uk" class="en en-uk">colour</dt>
<dd>光の波長の違い（色相）によって目の受ける種々の感じ。</dd>
<dd>人の肌の色。人の顔の色つや。</dd>

（MacOS X 付属辞書（小学館大辞泉））

これらの違いは、
「２つの補足を含む用語が１つ」なのか、「同じ意味の用語が３つ」なのかだと思います。

国語辞典のようなものであれば、前者のような書き方が適切だと思いますし、また一般的だと思います。
（多くは言語などを問わない）学術用語集などであれば、後者の方がふさわしいと思います。

なお、HTMLに日本語のカッコ書き（補足など）を意味するタグはありませんので、<span>を使う事になります。