赤文字で強調される箇所は、エラーによってはツールチップで内容を表示してくれることに気付いた
#RANDOMの例#ENDxxを起点として分岐ブロックを読んでる気がするどこまで要素を入れ子にできるのか試してみた
Firefox 11は上限200レベル
.xhtmlに変更）、201レベル以降のDOMはすべて破棄されるOpera 11.61は上限500レベル
Chrome 17は正確にレンダリングできる上限が510レベル
XHTMLとして解釈させた場合は、インデントもインライン要素も正しく表示される
（すくなくとも1000レベルまでは）
Lynx 2.8.6 rel.4THは上限800レベル
Safari 5.1は少なくとも1000レベルまでは表示される模様
赤文字で強調される箇所は、エラーによってはツールチップで内容を表示してくれることに気付いた
<br>改行だし、pixivは<textarea>だし、小説本文に対してまともなマークアップを適用しうる小説投稿サイトって青空文庫くらいじゃないかなー（マークアップ品質は投稿者次第だけど）#RANDOMとtypoのハーモニー恋のしょほうせん -Soft Landing Style- / DJ 葱
#random 2
#if 1
#08304:78797A7B7C7D7E7F37000000A0000000
#endif
#if2
#08304:78797A7B7C7D7E7F37000000A1000000
#endif譜面末尾の#if2はtypo
これは通常のBMSソフトでは以下のような感じになる
#random 2
#if 1
#08304:78797A7B7C7D7E7F37000000A0000000
#endif
#if 2
// this section does not exist
#endif
#endrandom
// just comment #if2
#08304:78797A7B7C7D7E7F37000000A1000000
// just comment #endif1が生成された場合、結果的に同一チャンネルが重複する→通常は「後方の行」が優先される2が生成された場合、#if 1のパターンは捨てられ、#if 2のパターンは空振るつまり生成値が何にせよ、必ず#bmpA1が表示されることになる
HTMLの<table>のグループ化属性が競合するとどうなるのか調べる（俺用宿題）
thead > tr > th[scope="col"]とtbody > tr > th[scope="rowgroup"]とかtbody > tr > th[scope="rowgroup"]とtbody > tr > th[scope="row"]とかブロックの閉じコメントは、ブロックの中に入れるほうが好ましいらしい
| not very good | good |
|---|---|
|
|
floatする要素と要素の間に挟まれたコメントが原因Node.COMMENT_NODEが取り残されるから面倒、なるほど確かにADsafeを読んでると、JavaScriptに対して変な笑いがこみあげてくる
for (i; i>=0; i--) {doc.createElement(elms[i]); }ですらアウトとか、笑うしかない添え字は直したけど、thisはどうあがいても使わざるを得ないような気がするんだけど・・・
(function (doc) {
'use strict';
var elms = ['abbr', 'hgroup', 'mark', 'section', 'time'];
while (elms.length) {doc.createElement(elms.pop()); }
}(this.document));event.target.ownerDocumentとか使えるんかなあ・・・詰んでる感あるけど宿題HTML5の<dl>要素が、なんかすごいめんどくさい・・・
| not incorrect | not incorrect | not incorrect |
|---|---|---|
|
|
|
仕様にはname-value groups (a description list)と書いてあるから、JSON的なイメージ？
{
"BMS Family": ["BMS", "BME", "BML", "PMS"],
"DTX Family": ["DTX", "GDA", "G2D"]
}たぶん右端の例がこのモデルに最も合致すると思うけど、見た目は普通にキモいからさ・・・
<di>不要」と仰ってるから、<dl>をこまぎれにしてやりすごすよ俺うわあ なんだか凄いことになっちゃったぞ
次世代の糞文書シーンの嚆矢
polyglot markupは確かに面白そうなのですが、一つの規格に従っておいて、別の規格に後で移行しやすいような形で書いておく、という方針では駄目なのでしょうか。
駄目どころか普通はそれが望ましいのでは！判子記法（整形式）なら数箇所変えればあらゆる文書型に適合するので、移行しやすさ重視ならXHTMLで書いておけば大丈夫だと思いますー
俺の場合は特定UA専用ページを作るのが面倒で検討してるだけなのでした。一部の携帯はtext/htmlがダメ、IE8以下はapplication/xhtml+xmlがダメ、というわけで現在はPHPで動的生成してるけど、ハイブリッド文書で静的に済むならそれがベストかなーと
「ソースの表示」にHTML5パーザを使うようになったおかげで、うちのソースに赤字が登場
| Firefox 10 | Firefox 11 |
|---|---|
 |
 |
静的な文書の面倒くささたるや
SHOULD（かなり強めの要請）<span lang="en" xml:lang="en">で括ったらAnother HTML Lint 5大激怒文書内の<script>|<style>コードを、とてもくだらない方法で「埋め込み可」にした
| <script type="text/javascript">(funtion (doc) { 'use strict'; | |
|---|---|
| before: | |
| after: | |
| }(this.document));</script> |
匿名ブロックはやっぱり避けたほうが良い気がしてきたので修正中、しかしこれが非常に面倒
でも入力支援に半端に慣れちゃったせいで、今でもぽろっと書いちゃう・・・
| not very good | correct |
|---|---|
|
|
大間違い祭り
<script>と<style>のCDATAセクション<script>タグなら、コード全体を"//<![CDATA["と"//]]>"で括る<style>タグなら、コード全体を"/*<![CDATA[*/"と"/*]]>*/"で括る//と/*と最後の*/はCDATAの外にあるから、非対応UAでの挙動が不安<!--//--><![CDATA["とかどうだろう？手元で試せるブラウザではいずれも問題なかったけど<script>タグ内の<!--が単行コメント扱いされるなら、CDATAセクションも無視されちゃう？<script>と<style>のHTMLコメントアウト<script>タグなら、コード全体を<!-- ... //-->で括る<style>タグなら、コード全体を<!-- ... -->で括る//を書き忘れてただけでしたーというわけで、CDATAセクションとHTMLコメントアウトを組み合わせることは、普通に可能
| <script> | <style> | <style type="text/css" |
|---|---|---|
| </script> | </style> | </style> |
|
|
|
試してないし試す気ないけど、書き方で誤魔化す方向でどうにかできそうな予感はする
| <script> | <style> |
|---|---|
| </script> | </style> |
|
|
ああ、一目瞭然で悪習だから誰も書かないんだ・・・言葉でなく心で理解
"< & ]]> --"のどれかを使うコードは外部ファイル一択
インラインに書いていいのは、"<"も"&"も1個たりとも含まない安全なコードだけ
先日のinnerHTMLの例もアウト、あれっぽっちでさえ外部化するべき・・・う〜ん
Valid HTML5かつwell-formed XMLな文書（Valid XMLではないし、どのXML DTDにも適合しない）
application/xhtml+xmlとtext/htmlをダブルプレイできるのがみそ文字コードはUTF-8限定で、以下のいずれかの方法によって指定する（複合も可）
<meta charset="UTF-8" /><meta>つけるのを推奨）<meta http-equiv="Content-Type"...は禁止されてるから仕方ないね、さらばLynx
<!DOCTYPE html>必須、大文字小文字の区別に注意
<!DOCTYPE html SYSTEM "about:legacy-compat">とかも可<tbody>省略すんなとか、<noscript>使うなとかHTML5では<svg>とかそのまんま書けたけど、XMLと互換するならルート要素は名前空間必須
<html xmlns="http://www.w3.org/1999/xhtml"><math xmlns="http://www.w3.org/1998/Math/MathML"><svg xmlns="http://www.w3.org/2000/svg">属性値は引用符必須、属性値の中で改行するの禁止、必要なら16進数で文字参照する
\n"でなく"
"、タブ文字は"\t"でなく"	"<svg>の<path>の描線座標属性dとか悲惨langとxml:langの両方を指定する<html>要素はlangとxml:langの両方が必須&"や"<"あたりも文字参照したほうが、セキュリティ的には安全な気がする？追記： そもそもXHTMLなんだから"&"は全部文字参照しなきゃページが表示すらされませんよねー、おれ寝惚けすぎ"&, <, >, ', ""以外の特殊文字はすべて数値文字参照する
""の"x"は必ず小文字、他はどっちでもいい
| character | decimal | hexadecimal |
|---|---|---|
| & (AMPERSAND) | & | & |
| < (LESS-THAN SIGN) | < | < |
| > (GREATER-THAN SIGN) | > | > |
| ' (APOSTROPHE) | ' | ' |
| " (QUOTATION MARK) | " | " |
| (NO-BREAK SPACE) |   |   |
| 〜 (WAVE DASH) | 〜 | 〜 |
body > imgとかやっててびっくりするけど、まあいいや教えていただいたHTML 4.01解説サイト群をひととおり斜め読み完了。ありがとうございました！
<body>直下に書けるのはブロックのみ一方で<!DOCTYPE html><title></title>はValid HTML5
<body>を構造の親玉と見做して<body><p>(^^)</p></body>と書くも良し（互換性は最高）<body>を単なる本文と見做して<body>(^^)</body>と書くも良し<body>を暗黙の本文と見做して(^^)と書くも良し（文書ファイルサイズは最小）<body>を空にしてhead > scriptで好き勝手するも良し（アクセシビリティ最悪）application/xhtml+xmlを使いうるなら<body><p>(^^)</p></body>が無難？解説サイトを眺めていて、「<div>は外しても準拠文書であれ」という考え方を知る
body > div > imgよりはbody > div > p > imgがうつくしいよね的な0を無くすような感じ<blockquote>も<body>と同様に、子要素ブロックのみ制限がHTML5で緩和された
<blockquote><p>(^^)</p></blockquote>が無難？<address>は従来はインライン要素しか持てなかったけど、条件つきでブロックも持てるようになった
<address>は使わずに<meta>や<link>で置き換えたほうが簡単そう従来の<h1>〜<h6>の利点と欠点：
HTML5の「見出し全部<Sectioning content>+<h1>」の利点と欠点：
<h>要素を、従来文書との互換性を維持しつつ採用したものと思われる<noscript>禁止（文書型ごとに中身が違ってて面倒だし、XHTML5では使えない）
<p>Table can be sorted by Dart</p>のように、お知らせを直接書いておくとか<input type="file" disabled>のように、フォームはデフォルトでは無効にしておくとかdocument.write()およびdocument.writeln()禁止（理由： Polyglot Markup | 邦訳）
innerHTMLで手軽に済ませるか、document.write()を上書きするか（俺むり）innerHTMLを使うと、IE8以下で悪夢のようなバグにひっかかる素朴にDOMのメソッドを使うなら、意味不明な回避策は要らない・・・けど生のDOMはマゾ専用
<script type="text/javascript"><!--//--><![CDATA[//><!--
(function (doc) {
"use strict";
var body = doc.getElementsByTagName("body")[0];
var p = doc.getElementById("TEST");
var section = doc.createElement("section");
var h6 = doc.createElement("h6");
h6.appendChild(doc.createTextNode("(^^)"));
section.appendChild(h6);
body.insertBefore(section, p.nextSibling);
}(this.document));
//--><!]]></script>↓しかしIE8のシェアはいまだに世界一（現時点で約30%）なので、マゾヒスト大勝利↓
↓本来target.innerHTML = "<section><h6>(^^)<\/h6><\/section>";の一行で済む話↓
↑あれっ？IE8でもDOMツリーが正しく構成されてるっぽいけど・・・？？↑
もしかしていつのまにか修正されてたとか？まあinnerHTMLが普通に使えるならそれでいいや・・・
Polyglot Markupには、<script>|<style>タグ内コードのコメントアウト方法も載ってる
<!-- ... -->による配慮はもはや不要（参考）a--をa-=1にしたり、a>bをa>bにしたりする代わりに、<![CDATA[ ... ]]>で括る'<![CDATA[？）・・・んんん？？CDATA区間内ならもしかして<!-- ... -->も書けるのか？
<script>や<style>の中身を全文表示するUAへの配慮は、やはり忘れるべきあと思い出したけど、HTML 4.01では"</"が<script>|<style>の内容終端と見做される
p.innerHTML = "<b>(^^)</b>";とかは危険p.innerHTML = "<b>(^^)<\/b>";とエスケープしたりして誤魔化す必要があった上記のクソ馬鹿馬鹿しい問題はすべて、スクリプトやCSSを全部外部ファイルにすれば回避できる
p.innerHTML = "<b>(^^)</b>";のようにストレートに書いてよし<script>タグを生成して、その中でさらに内容生成を行う場合とかは"<\/"が必要？<\/"と書いたほうが安全かな少し前に、メドレー差分ならぬマッシュアップ差分を作ろうとして、BMS List Sorterを使ったのですが、複数の
#WAVを選択できても、一行ずつの移動では結構時間がかかりますね。もしかして、何か裏ワザでもあるんでしょうか。
| Before: | After: |
|---|---|
|
|
Afterの状態にするために、数分間Alt+Downを押し続けなければならない件ですね！
定義リストだけならテキストエディタで片付くけど（たとえばEmEditorならAlt+Dragで矩形選択してAlt+Nで連番入力）、データ文も同期する場合は確かに時間がかかります。
定義番号を「詰める」ように、「下詰め」や「移動先の番号指定」ができると便利そうですね！
ファイル入出力と文字列操作だけなら、PowerShell Scriptとかで片付きそうな気はします。#BGAや#EXWAVなどの定義内参照(?)も考慮するとなると、俺にはパッと書くのは無理ですけど・・・
2月29日の拍手返信について、やっぱり、バリデータの解説「だけ」を基に学ぶと、知識がまとまらない気がします。仕様書を通読したり、適切な解説書を読んだりして、体系的に学ぶのも良いのでは。（既に実践されていたら申し訳ありません。）
助言ありがとうございます！本格的に「学ぶ」ならそれしかない、と思ってはいました。
「とにかく書かないと始まらない」(ｷﾘｯ)とか「仕様書を読むべき」(ｷﾘｯ)とか最初は書いてたんですけど、俺が言えたもんじゃないし、<font>タグ時代の俺がそんなこと言われたら逃げ出してるなあ、と思ったのでボツにしました。かわりにValidatorを挙げるにとどめて、「鵜呑みにできない」とか仄めかして逃げました。暗黙の表現に期待しないとかいいながらコレだよ！誠意なさすぎる返信かましてすみませんでした；
俺自身はというと、仕様書は辞書代わりというか、拾い読み程度に眺めてはいます。HTML5.JPは通読しましたが、体系的な学習を実践できているとは言い難いので、「適切な解説書」はむしろ俺が教えてほしいです。
べつにプロを目指すわけじゃないし、というかセマンティクスとかアクセシビリティとかには正直あんまり深入りしたくないので、最低限W3Cの構文チェッカをクリアする程度に妥当ならそれでいいやと思ってます。
なんというか、勉強云々とは別に、仕様書は読み物としても面白いです。<nav><h1>Navigation</h1>みたいな例とか、じわじわきます。まさに趣味として「仕様書を面白く読む」というのはアリかもしれません。
<table>をやめるぞギョギョーsummaryとかabbrとか、もう廃止される属性を勧められたり、scopeとかいちいち面倒くさい<table>のメリットは、表という意味が機械に伝えられることと、既存の表ソーターが使えるくらい？<dl>とdisplay:table;とWAI-ARIAだけで簡単に完璧に代替できるはずだけど、display:table;に非対応のIE7以下は絶対に残るだろうから、そうもいかない<tr>相当のグループ化要素が、<dl>には無い・・・XHTML2.0の<di>が欲しい| should be modified: | implicit sectioning: | explicit sectioning: |
|---|---|---|
|
|
|
結論： 暗黙の文書区分に頼るとロクなことない
transparentとかinheritとか一切禁止| case: | wrong: | parsing result: | correct: |
|---|---|---|---|
| Semicolon | |
|
|
| curly bracket | |
|
|
結論： セミコロンや波括弧を省略するとロクなことない
#SUBTITLEで明示するほうが確実#ENDRANDOMが無いと構文解析が大変(^^)
<table>のままでも、ページ内リンクを駆使すれば「音声操作が困難」の警告は潰せたっぽいなーlang="en-JP"？