あなたの映画力を試せる!POPLETA映画検定(無料) >>

べたうちでHTML言語を使っています。

前の質問で<P>タグの</P>は省略可能と回答があります。
<div>や<ul>でも省略できるでしょうか?
今のIEを使っていて正常に表示されています。
他のものでは誤作動を起こしているのでしょうか?

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

A 回答 (5件)

http://www.w3.org/TR/html4/index/elements.html
このタグ一覧のEnd Tagの項目が O になっているものが省略可能です。
ちなみにFは<img>や<br>などのように、終了タグがなく開始タグだけで使用する物です。
それ以外(空白の物)は必須です。

XHTMLで記述するときは全て必須ですが、
HTML4で"F"だったものは、<img></img>と書いても<img/>と書いてもかまいません。
前者の書き方は古いブラウザで<img>が2つあると見なすこともあるため、非推奨となっています。


>今のIEを使っていて正常に表示されています。
>他のものでは誤作動を起こしているのでしょうか?
可能性はあります。


省略可能なタグでも、ブラウザごとに解釈が違う物もあります。

<p><table>(略)</table>

という書き方については、</p>の省略位置の判断の仕方が違うことがあり、
<p><table>(略)</table></p>
と見なすブラウザと
<p></p><table>(略)</table>
と見なすブラウザがあります。
(HTML4では後者が正しく、DHTMLでは前者が正しい。(と思われる。HTML同様にDHTMLもいくつかのバージョンがあり、違いがあるかもしれません。)
互換モードはHTML4に準拠する物と、DHTMLに準拠する物が様々なため、どちらで表示されるかはブラウザ依存。)


また、省略不可能なタグを利用した場合にも、ブラウザごとに解釈が違う物もあります。

<p><span><table>(略)</table></span></p>

この場合、
省略不可な</span>が記述ミスにより省略されたと見なし、
<p><span></span></p><table>(略)</table><p><span></span></p>
このように表示するブラウザがあります。

また、省略不可のタグは省略不可のままとして、
<p><span><table>(略)</table></span></p>
書いて有るとおりに表示するブラウザもあります。

これらの違いはスタイルシートやJavaScriptを使用したときに如実に表れますが、
そういう機能を使わなければ、表示の違いが現れることはないと思います。
    • good
    • 0
この回答へのお礼

詳細な回答、ありがとうございます。
難しいですが、すこしずつ勉強します。

お礼日時:2010/12/30 19:50

答えは2つです。


ひとつは、(x)htmlのバージョン、互換方法によっては、終了タグが省略可能になる場合があること。詳細は他の回答者さんのリンクが参考になります。もうひとつは、文法の正誤に関わらず、省略できるブラウザとできないブラウザがあること。です。

正しい文法で書くことは重要ですが、実際のところは、複数のブラウザで表示を確認し、それぞれの挙動に慣れるしか方法がありません。とくにIEは文法を裏切るかなりの問題児で知られています。質問者さんがどういったレベルでホームページをつくられているか分かりませんが、最低でもIE、Safari、Firefox、Opera、Chromeの最新バージョンでの確認はしたほうがよいと思います。各ブラウザをインストールするだけなので、そんなに難しい話ではないはずです。
    • good
    • 0
この回答へのお礼

ありがとうございます。
趣味で、自分が見る程度のHPです。

→最低でもIE、Safari、Firefox、Opera、Chromeの最新バージョンでの確認はしたほうがよいと思います。各ブラウザをインストールするだけなので

これだけはやろうと思います。
参考になりました。

お礼日時:2010/12/30 19:53

確かにHTMLは、ルールに従っていれば、終了タグの省略、さらには開始タグも省略してもゆるられます。

<body>が無くても文法違反にならないケースもあります。
(※知ってるでしょうけど、XHTMLでは省略できません)

 でも、このルールを考えながらマークアップするのは、かえって面倒です。ですから明らかに自明な単純なケース以外省略しない方がよいです。

 例えば、<select>下の<option>られつなんか、</option>を書かないほうが見やすいですよね。

(参考)省略TAG機構
http://bakera.jp/html/sgml/omittag.html
http://www1.u-netsurf.ne.jp/~7l1rll/SGMLsec6_0.h …
    • good
    • 0
この回答へのお礼

ありがとうございました。
HTMLとXHTMLの違いがわかりました。

お礼日時:2010/12/30 19:48

どんなページを作っているかはわかりませんが


<div>タグを閉じなければ 永遠にそのタグの設定を引き継いでしまうと思いますけど?
パディングも何もあったもんじゃないものが出来ますね。

DIV要素を並べる必要のないほど単純なページでしょうか?
IE以外で見たらとんでもない方向に文字が羅列しているページになりそうですね。
プロの仕事なら絶対にしません。互換性がなくなりますから。
    • good
    • 0
この回答へのお礼

回答してくださったことには、お礼を申し上げますが。
あなたの回答は参考になりません。

→ページになりそうですね。

そんな憶測でものを言ってるあなたもプロじゃないでしょ?

お礼日時:2010/12/30 19:47

IEはHTMLエラーを勝手に補完しますから、「IEで意図通りに表示されるからHTML記述として正しい」とは言えません。


むしろ「HTML通りに表示しない」だけたちが悪いとも言えます。
IE9ではこの機能がなくなるという話もあるので閉じタグは付ける癖を付けておいた方がいいでしょう。
    • good
    • 0
この回答へのお礼

ありがとうございました。
IEの性質がよくわかりました。

お礼日時:2010/12/30 19:46

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

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

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

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

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

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 タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

Q同じid属性を何回も使ってはいけないの?

「Another HTML-lint gateway」(個人のサイトっぽいのでリンクは貼りません)というHTMLの文法チェックサイトで、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">として文書をチェックしたところ、id属性が重複して使用されているのが良くないという結果が出ました。

具体的にはHEAD内にstyle定義として、仮に「#td1 td{ スタイルの内容 } 」という属性を書き、その属性を反映させたいテーブルに「id="td1"」を付けました。全く同じ処理をしたいテーブルがたくさんあるのでそれらにも全て「id="td1"」を付けたところ、上記チェックでダメだしを食らったというわけです。

id属性は、同じように処理したい箇所を、ひとつ定義を作ることによって全て同じように処理を適用するものだと思ってるんですが、そういうものではないんですか?
また、同じような属性としてclassも同様なのでしょうか?

Aベストアンサー

idは重複してはいけません。
classは重複してOK。

idは一意にするためにあって、classは分類するためにあるって感じかな。

Qタグのテキストを取得

jqueryを使っています。

$('a');を使用しページ内のaタグを全て抜き出すと
hrefの属性値が表示されてしまい、取り出したい<a>タグに
囲まれたテキストを取得することが出来ません。

<a href="http://yahoo.co.jp">Yahoo!</a>
<a href="http://google.co.jp">Google</a>

取り出したい内容は「Yahoo!」及び「Google」のテキスト部分です。
恐らく簡単な内容だとは思いますがご教授お願い出来ますでしょうか?

Aベストアンサー

アンカーに挟まれるのは必ずしもテキストとは限りません。
javascriptで普通にとるならこんなやりかたもできます。

<script>
function check(){
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
var n=a[i].firstChild;
while(n){
if(n.nodeName=="#text") alert(n.nodeValue);
n=n.nextSibling;
}
}
}
</script>
<a href="http://yahoo.co.jp">Yahoo!<img src="1.jpg">Yohaa!</a>
<a href="http://google.co.jp">Google</a>

<input type="button" value="check" onclick="check()" />

Q1ピクセルって何ミリですか?

1ピクセルって何ミリなのでしょう?
至急、お答えお待ちしております。
かなり急いでます。よろしくお願いいたします。

Aベストアンサー

1ピクセルが何ミリかという質問の答えになるかどうか分かりませんが、
WEB制作上に限って言えば、横100ピクセルの画像を作りたい場合、
Photoshop等では単位をピクセルで作れますが、Illustrator等の場合は、
100pointで作ります。
1pointは、0.35277ミリです。

Q「いずれか」と「いづれか」どっちが正しい!?

教えて下さいっ!
”どちらか”と言う意味の「いずれか」のかな表記として
「いずれか」と「いづれか」のどちらが正しいのでしょう???

私は「いずれか」だと思うんですが、辞書に「いずれか・いづ--。」と書いてあり、???になってしまいました。
どちらでもいいってことでしょうか?

Aベストアンサー

「いずれか」が正しいです.
「いづれ」は「いずれ」の歴史的かな遣いですので,昔は「いづれ」が使われていましたが,現代では「いずれ」で統一することになっていますので,「いずれ」が正しいです.

Q1文字って1バイトだったっけ?

タイトルの通りなんですが
私の記憶では1文字1バイトで漢字が2バイトだったような・・・。
アルファベットは?数字は?わかんないので教えてください。
それと、1バイト=8ビットですよね?
ちょっと興味があるので暇のある方がおられましたら詳しく教えてほしいです。

よろしくおねがいいたします。

Aベストアンサー

全角文字(英語・漢字・数字問わず):2バイト
半角文字:1バイト
では無いでしょうか?

>1バイト=8ビット
その通りです

http://www.pc-view.net/Help/manual/0082.html
などもありますので参考までに

参考URL:http://www.pc-view.net/Help/manual/0082.html

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

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の方も修正する方法でもよけ...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。


人気Q&Aランキング