人に聞けない痔の悩み、これでスッキリ >>

td, th, tr, liなどの要素に関して、【HTML4.01の仕様としては】省略していいことになっていることは知っています。

Index of the HTML 4 Elements
http://www.w3.org/TR/1999/REC-html401-19991224/i …

ただ仕様云々の問題ではなく、現実問題として省略しないほうがいいケースがあるのか気になったので質問させていただきました。


質問は以下です。
・省略するとレイアウトが崩れるブラウザがあるのでしょうか?あるのならブラウザ名・バージョンを教えてください。
・省略すると機能的に問題が発生するケースがあるのでしょうか?あるのなら具体的な現象、ブラウザ名・バージョンを教えてください。
・機能・レイアウト以外に省略しないほうがいい理由があるのでしょうか?あるならその理由を具体的に教えてください。
・HTML5ではどうなっているのでしょうか?【結構知りたい】
※XHTMLは書くつもりはないのでこの質問の対象外としていいです

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

HTML5 でどうなっているのか結構知りたいということであれば, 自分で調べてはどうでしょうか. 他人に聞くよりも確実だと思うのですが....



もちろん HTML5 そのものはまだ確定していないので, 今後変化する可能性があることは念頭に置く必要があります.

参考URL:http://www.w3.org/TR/html5/syntax.html#optional- …

この回答への補足

今回の質問を通して以下のことが分かりました。

・HTML5でも省略可とされている
・省略するとブラウザの処理速度が向上する(IE8/FF/Chrome)
・ファイルファイズが小さくなり当然ネットワーク転送速度も速くなる

・閉じタグ可の要素が分からない人はとりあえず省略しないほうがいい
・遅くなるブラウザも昔はあったのかも(未確認)
・解釈のできないブラウザも昔はあったのかも(未確認)

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

補足日時:2011/11/11 12:55
    • good
    • 0
この回答へのお礼

今まで私は、閉じタグが必要かどうかなどはDTDをみて判断していたのですが
HTML5ではDTDがないとのことで何を参照していいのか分からない状態でした。

しかしご提示していただいたページではっきりと把握することができました。
HTML4系と同じで閉じタグは省略可となっているようですね。
「This is a work in progress!」とのことではありますが…。

参考になりました。ありがとうございました。

お礼日時:2011/10/31 18:11

>・機能・レイアウト以外に省略しないほうがいい理由があるのでしょうか?あるならその理由を具体的に教えてください。



「このタグは省略できたかな、どうだったかな」と迷うぐらいなら「全部つける」にしておいた方がかえって楽。この質問のような悩みも生まれないわけです。
    • good
    • 0
この回答へのお礼

なるほど。HTML初学者はとりあえずつけとけってことですね。
参考になりました。ありがとうございました。

お礼日時:2011/11/01 00:51

>強いて言うと「ブラウザに計算を強いること」という問題があるのですね。


>(ブラウザによるかもしれませんが)

 ブラウザにとって、すごく負担になるのは確実です。そのためにXHTMLが推進された経緯があります。また、他のアプリケーションから再利用しにくいのも問題でした。いわゆる整形式ではないですから・・・。

 一方で、タブ、改行など空白文字列を読み飛ばすのはまったく負担になりません。

 そのために、私はHTMLであっても整形式で書くことにしています。特に長大なHTMLの場合、タブできちんとインデントさせれば、わかりやすいこと。テキストエディタで
^\t\t\t<td>([^<]*<td>$
と、探し出したりするのが簡単、機械的にできる。表の場合、いったんexcelで作成したCSVをPerlでtableに直すときも、処理が機械的に出来る。
 とか・・・。

 HTML5とHTML4に、このあたりについてはほとんど変わりがありません。新しい要素が追加されたこと。特に構造化を示すタグは要チェックですね。それもあり、数年前から
<body>
 <div class="header">
 </div>
 <div class="section">
  ・・・と言う風にしてます。


★HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )

この回答への補足

# ブラウザにとって、すごく負担になるのは確実です

とのことですが、この点が抽象的でわかりませんでした。
td要素5万のテーブルのレンダリングを実験してみましたが、
IE/FF/Chromeではすべてで省略したほうが速く処理できました。

下記の点を補足で教えてください。
・根拠はなんですか?書籍?サイト?実績値?予想?
・閉じタグ省略時の負担について参考になる書籍・サイトの紹介など
・負担とは何ですか?処理時間?CPU使用率?メモリ使用量?
・負担になる処理は何ですか?レンダリング処理?DOMアクセス?
・「ブラウザ」とはなんですか?(種類やバージョンなど、あくまでも昔の話なのか今でも問題なのか)

よろしくお願いします。

補足日時:2011/11/03 14:54
    • good
    • 0
この回答へのお礼

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

お礼日時:2011/11/11 12:46

なぜ省略してもよいかと言うと、


<td>に続いて、</tr>や<td>が来るはずないからです。それらが続いて現れれば、</td>が省略されているとみなされるからです。手で入力するときに楽だから。
 DOM上では問題もあります。--HTML5では、そのようなときの解釈についても厳密に定義されますから問題ありませんが、それより前のHTMLでは、ブラウザによって解釈の違いがありえます。
 ただ、現在省略可能となっている要素に関しては、問題ありません。ただ、ブラウザに計算を強いることですかね。

 私は一切省略しませんが、それは、タグの閉じ忘れ出はなく、階層を忘れてしまうからです。
<table summary="section">
 <tbody>
  <tr>
   <td>
    <table>
     <tbody>
      <tr>
       <td>
       </td>
      </tr>
     </tbody>
    </table>
   <td>
  </tr>
 </tbody>
</table>
 なら、ミスしません。

・省略するとレイアウトが崩れるブラウザがあるのでしょうか?あるのならブラウザ名・バージョンを教えてください。
・省略すると機能的に問題が発生するケースがあるのでしょうか?あるのなら具体的な現象、ブラウザ名・バージョンを教えてください。

 いずれも、ありません。それがブラウザに対する仕様でもありますから。問題は、誤ったマークアップのときの処理は異なると言うことです。(終了タグが省略可能な場合の省略は
誤っていません)、誤ったマークアップを防ぐためにきちんと閉じる癖をつけるということです。また、以前、HTMLは、HTML4.01が最後の仕様で、今後はすべてXHTMLになるとされていましたから、そうなると閉じる癖を付けておかなければ・・

 しかし、世の中はHTML5に向かっています。HTML5では、合わせてXHTMLの仕様も加わりますから、XHTML構文を使用する場合は閉じなければなりません。

※XHTMLは書くつもりはないのでこの質問の対象外としていいです

 ですが、XMLから、XSLTを使ってXHTMLに変更するなど、手抜きのためにはXHTML(XML)も知っておいたほうが・・というか、XHTMLのほうが慣れれば作るのは楽ですね。

この回答への補足

<table summary="section">
<tr><td>
  <table>
   <tr><td><td><td>
   <tr><td><td><td>
  </table>
</table>

私の場合こんな感じで書くことが多いです。
階層が少なくなり、またシンプルにコンパクトに書けるので。
コーディング基準に明記されてる場合でもない限りは自由なので
人によって好みが大きく分かれるところですよね。

補足日時:2011/10/31 18:17
    • good
    • 0
この回答へのお礼

レイアウト・機能的に問題が発生することはないとのことで安心しました。
ネット上では特に理由の記述なく「書いたほうがいい」とだけ書いてあるサイトがいくつかあったので。

強いて言うと「ブラウザに計算を強いること」という問題があるのですね。
(ブラウザによるかもしれませんが)


# 以前、HTMLは、HTML4.01が最後の仕様で、今後はすべてXHTMLになるとされていましたから
# HTML5では、合わせてXHTMLの仕様も加わりますから、XHTML構文を使用する場合は閉じなければなりません。

そうなんですか。今後のHTML5の仕様策定の動向を観察し考慮したいと思います。


# XMLから、XSLTを使ってXHTMLに変更するなど、手抜きのためにはXHTML(XML)も知っておいたほうが
XSLTは多少使ったことがありますが、部分的な抽出に使ったことがあるくらいであまりダイナミックに使ったことはありません。
よく使うかどうかは、人によると思いますが今後検討したいと思います。

参考になりました。ありがとうございました。

お礼日時:2011/10/31 18:27

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

Q白い部分を透明にすることは可能ですか?

ペイントで白い部分を透明にすることは可能ですか?
やり方を教えてください。
ペイントじゃできないのかも教えてください。

Aベストアンサー

 残念ながらペイントでは、まわりが、白いままです。
 
 お使いのパソコンのOSが、一致するようでしたら
 
 無料のソフト「GIMP」(ギンプ)を使用することをおすすめします。

 ・Gimp2のダウンロードページ
 http://www.geocities.jp/gimproject2/download/gimp-download.html


 ・GIMP(ギンプ)の使い方
透過(透明な部分を作る技法)
 保存は、gifかpngの拡張子にして下さい

  http://www.geocities.jp/gimpmanual/manual.html

 ※jpgは、写真を構成するのが、目的な拡張子ですので
   まわりが、白くなり透明には、なりません。

Q英語で「個数」「件数」は?

質問は単純です。
英語で「個数」や「件数」をなんというか、です。

とりあえず、思いついたのは、numberでした。
たとえば、「りんごの個数」は"a number of apples"ですか?
でも、"a number of"は「いくつかの」という意味ですよね。

「データの件数」は"a number of data"でしょうか?

私は英語はほとんど出来ませんが、numberは「個数」というよりも「番号」という意味であるような気がしてなりません。

Aベストアンサー

>「個数」や「件数」をなんというか、です。
>とりあえず、思いついたのは、numberでした。
意外に思われるかもしれまんせんが、語の選択はnumberであっています、と思います。

>「りんごの個数」
the number of (the) apples

>「データの件数」
the number of (the) data

>numberは「個数」というよりも「番号」という意味であるような気がしてなりません。
実は、昔、私も、「個数や件数はなんていうのかな、え、number? え、本当?」と、奇異に感じたことを、思い出しました。

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qwidthやheightの数値に単位(px)はつけない方が良いの?

自分はHTMLやCSSにおいて<img>や<td>に width="100px" とか、
div に { width: 70px } とか、ピクセルの単位を付けて作っています。
どこかの本が単位をつけると教えている……はずだったからです。

今日、HTMLチェックというサービスを行ったら
『不正な設定。数値か%指定にしてください』という様なことをいわれました。

ちなみに用いているDocument宣言は4.01 Transitionalです。幅・高さに
単位はまったく必要ないのでしょうか? 逆に単位を省略してはいけないタグはありますか。

Aベストアンサー

仕様書を確認してみましょう
属性索引からimg要素のwidth属性を調べてみると

>width = length [CN]
画像・オブジェクトの幅を上書きする。

という記述が見つかります
lengthからリンクを飛ぶと少し上に行った所にピクセルの説明があり

># ピクセル: (DTDでは%Pixels; と表記)の値は、スクリーンや紙などキャンバスに表示する際のピクセル数を表す整数である。

の後に重要な記述があります

>従って、「50」という値は50ピクセルを意味する。
ピクセルに関する規範的情報は、 [CSS1]を参照のこと。

で、

># 長さ: (DTDでは%Length; と表記)の値は、%Pixel;または水平・垂直方向で利用可能な空間に対するパーセンテージである。従って、「50%」という値は、可能な空間の半分を意味する。

つまり widthは「50」などの数字で指定するか「50%」ちいうパーセントで指定することが出来ます

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QProxyを利用しているかどうか確認する方法

自分のPCからネットに接続する際
Proxyサーバを経由しているかどうかを
確認する方法はありますか?

Aベストアンサー

ブラウザーがIEの場合として、
ツール→インターネットオプション→接続→LANの設定→LANにプロキシサーバを使用する ここにチェックがはいっていればProxyサーバ経由です。

Q「以降」ってその日も含めますか

10以上だったら10も含める。10未満だったら10は含めない。では10以降は10を含めるのでしょうか?含めないのでしょうか?例えば10日以降にお越しくださいという文があるとします。これは10日も含めるのか、もしくは11日目からのどちらをさしているんでしょうか?自分は10日も含めると思い、今までずっとそのような意味で使ってきましたが実際はどうなんでしょうか?辞書を引いてものってないので疑問に思ってしまいました。

Aベストアンサー

「以」がつけば、以上でも以降でもその時も含みます。

しかし!間違えている人もいるので、きちんと確認したほうがいいです。これって小学校の時に習い以後の教育で多々使われているんすが、小学校以後の勉強をちゃんとしていない人がそのまま勘違いしている場合があります。あ、今の「以後」も当然小学校の時のことも含まれています。

私もにた様な経験があります。美容師さんに「木曜以降でしたらいつでも」といわれたので、じゃあ木曜に。といったら「だから、木曜以降って!聞いてました?木曜は駄目なんですよぉ(怒)。と言われたことがあります。しつこく言いますが、念のため、確認したほうがいいですよ。

「以上以下」と「以外」の説明について他の方が質問していたので、ご覧ください。
http://oshiete1.goo.ne.jp/kotaeru.php3?qid=643134


人気Q&Aランキング