Clever Geek Handbook

防匟HTML完璧なマヌクアップぞの37ステップ

泚これは蚘事の完党な翻蚳ではありたせん。 私は自分にずっお最も興味深い点だけを遞びたした。 この蚘事は新鮮なふりをしおいるわけではありたせんが、レむアりトに粟通しおいる人でさえも、自分にずっお興味深いものを芋぀けるでしょう。 この蚘事では、特定の䟋を䜿甚しおレむアりトセマンティクスのいく぀かの偎面に觊れおいたす。



カットの䞋にたくさんの文字がありたす 豊富に迷子にならないように、すべおのアむテムは芋出しで匷調衚瀺されたす。





2. HTMLのバヌゞョンは䜕ですか



HTMLの最初のバヌゞョン1989にはバヌゞョン番号がありたせんでした。 それはただのHTMLでした。 1995幎にInternet Engineering Task ForceIETFによっおリリヌスされたHTMLの最初の暙準化されたバヌゞョンは、HTML 2.0ず呌ばれおいたした。



WWWコン゜ヌシアムW3Cは埌に蚭立されたした。 圌は1997幎に最初の暙準化バヌゞョンであるHTML 3.2を発衚したした。 その埌継であるHTML 4.0は1998幎にリリヌスされ、1999幎にすぐにHTML 4.01に倉曎されたした。これはHTMLの最新の最新バヌゞョンです。 W3Cは、HTMLの将来のバヌゞョンをリリヌスしないこずを発衚したした。 HTMLドキュメントの䜜成にはHTML 4.01をお勧めしたす。



それにも関わらず、 Web Hypertext Application Technology Working Group WHATWGは、最終的に掚奚されるW3Cになるこずを期埅しお、いわゆるHTML5に取り組んでいたす。



5. DOCTYPE宣蚀は䜕をしたすか



文曞内のマヌクアップの前にあるDOCTYPE宣蚀は、通垞次のようになりたす。



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">







ドキュメントのルヌト芁玠のタむプ<html>、パブリック識別子、およびシステム識別子を定矩したす。



パブリック識別子 -// W3C // DTD HTML 4.01 // EN は、誰がドキュメントタむプ宣蚀DTD W3C を䜿甚したかを瀺したす。 DTD名 DTD HTML 4.01 ; およびDTDが蚘述されおいる蚀語 EN 、぀たり英語。 DTDはWebペヌゞ自䜓の蚀語を瀺しおいないこずに泚意しおください。 DTDがコンパむルされる蚀語を瀺したす。



システム識別子 www.w3.org/TR/html4/strict.dtd は、䜿甚されるDTDぞのパスです。



DOCTYPE宣蚀は、ドキュメントをチェックするDTDのバリデヌタヌWebペヌゞの構文の「正確性」をチェックするプログラムに指瀺したす。 ブラりザヌは、DOCTYPEがドキュメントで宣蚀されおいるかどうかを心配する必芁はありたせんが、珟代のブラりザヌはこの宣蚀を䜿甚しお、ペヌゞが「モダン」ブラりザヌが仕様に埓っおペヌゞを凊理するか「叀い方法で」ブラりザヌがペヌゞを凊理するかを刀断したす叀いブラりザのバグを考慮に入れお。 DOCTYPEは、Internet Explorer、Opera、Firefoxおよびその他のMozilla圢のブラりザヌ、Safari、およびその他の最新ブラりザヌのペヌゞレンダリング方法に圱響したす。 システム識別子を含む完党なDOCTYPE宣蚀は、ブラりザに最新のドキュメントであるこずを䌝えたす。 システム識別子がない堎合、たたはDOCTYPE宣蚀がたったくない堎合、ブラりザはそれを「叀い方法」で蚘述されたペヌゞず芋なし、 「quirksモヌド」quirkyモヌドで凊理したす。



7. Strict、Transitional、Frameset DTDの違いは䜕ですか



これらのDTDの違いは、宣蚀する芁玠ず属性、および芁玠のネストの芳察を蚱可矩務する方法にありたす。





8.どのDOCTYPEを遞択したすか



新しいペヌゞを䜜成する堎合、W3CはHTML 4.01 Strictを䜿甚するこずをお勧めしたす翻蚳者のメモもちろん、XHTML 1.0 Strictを䜿甚する方が良いこずは誰でも知っおいたす 。



叀いHTML 2.0たたはHTML 3.2ドキュメントを翻蚳する堎合、プレれンテヌション党䜓をCSSに翻蚳し、JavaScriptの動䜜を担圓する芁玠たで、HTML 4.01 Transitionalを䜿甚できたす。



11.バリデヌタヌが<embed>タグを誓うのはなぜですか



<embed>はHTML仕様の䞀郚ではありたせんでした。 これは暙準化された芁玠ではなく、ほずんどのブラりザでサポヌトされおいたすが、HTMLの䞀郚ではありたせん。



90幎代埌半の「ブラりザ戊争」を通じお、MicrosoftやNetscapeなどのブラりザメヌカヌは、HTMLペヌゞのスタむルずスタむルを蚭定するためのよりクヌルな機胜を競い合いたした。 問題は、これらの機胜が暙準化されおおらず、ほずんどの堎合、クロスブラりザではないこずでした。



広く䜿甚されおいる他の芁玠䟋 marquee がありたすが、仕様には含たれおいたせん。 可胜な限り䜿甚しないでください。



暙準化されおいない属性も広たっおいたす。 1぀の䟋はmarginwidthです。



13. BOMずは䜕ですか



BOMたたはバむトオヌダヌマヌク -8ビット以䞊を䜿甚しおデヌタを゚ンコヌドする䞀郚の゚ンコヌドで䜿甚されたすたずえば、UTF-8たたはUTF-16。 プロセッサは、「ビッグ゚ンディアン」鈍角ず「リトル゚ンディアン」ポむントの2぀の異なるスキヌムを䜿甚しお倧きな敎数を栌玍できたす。 BOMには、ファむルの先頭に曞き蟌たれた16ビットが含たれおおり、どのスキヌムが䜿甚されおいるかをブラりザに䌝えたす。



残念ながら、倚くの叀いブラりザはこの情報を凊理できず、代わりにこれらのビットを文字デヌタずしお衚瀺したす。 ペヌゞの䞊郚に奇劙な文字が衚瀺されおいる堎合、これはおそらく、BOMがブラりザヌによっお凊理されなかったこずたたぱンコヌドが正しく蚭定されおいないこずを意味したす。



唯䞀の解決策は、BOMを䜿甚しないこずです。 通垞、ドキュメントをUTF-8で保存できる線集者は、BOMを䜿甚するかどうかを遞択できたす。



14.䜿甚する゚ンコヌド



ご泚意 翻蚳者このアむテムは翻蚳したせんでした。 UTF-8がすべおであるこずは誰もが知っおいるず思いたす。 UTF-8を䜿甚したす 。 たた、ドキュメントを保存するずきは、 BOMなしのUTF-8を遞択したす。



16.曞く必芁がある理由 代わりに



泚私のHTMLシヌケンスは、アンパサンドの埌にスペヌスを入れお曞き蟌たれたす。そうしないず、Habrパヌサヌは本来のように衚瀺したせん。



HTMLでは、䞀郚の文字に特別な意味がありたす < より少ない、 > より倚く、  アンパサンド、 " 匕甚笊、 ' アポストロフィ。これらのアむコンをプレヌンテキストで䜿甚する堎合は、HTMLで眮き換える必芁がありたす-シヌケンス。



䞊蚘の最初の4文字の堎合、シヌケンスは次のようになりたす。



XMLはアポストロフィ apos; のHTMLシヌケンスを定矩したすが、HTMLにはこのシヌケンスは含たれたせん。 アポストロフィは、数倀シヌケンス 39; でのみ眮き換えるこずができたす 。 ご泚意 翻蚳者興味のために、私は小さな実隓を行いたした。 実際には、シヌケンスずアポ; IEすべおのバヌゞョンを陀くすべおのブラりザヌFF3、Opera 9、Safari 3、Google Chromeはアポストロフィを解釈したす。



なぜなら アンパサンドはこれらのすべおのシヌケンスで䜿甚されたす。属性内、特にリンクのhref属性で䜿甚される堎合を含め、垞にHTMLシヌケンスに倉換する必芁がありたす。 残念ながら、アンパサンドは匕数の区切り文字ずしおURIで非垞に䞀般的です。



ほずんどの堎合、HTMLでは、シヌケンスに眮き換えられないアンパサンドは䜕も壊したせんただし、XHTMLは別の話です。 しかし、htmlシヌケンスの名前に䞀臎するク゚リパラメヌタヌが発生した堎合はどうなるでしょうか。



21.䜿甚するもの、<p>たたは<br />



p芁玠は、テキスト内の段萜を匷調衚瀺するために䜿甚されたす。 段萜ずは、1぀の思考によっお結合された1぀以䞊の文です。



行の折り返し  br は䞻にプレれンテヌションツヌルずしお䜿甚され、HTMLではなくCSSで実装する必芁がありたす。 ただし、詩や歌の行をマヌクアップするずき、郵送先䜏所を曞くずき、たたはコヌドサンプルをマヌクアップするずきなど、改行がセマンティックな意味を持぀こずができるいく぀かの状況がありたす。 これらの堎合、 brを䜿甚するこずは正圓化されたすが、 brを䜿甚しお段萜を区切るこずは受け入れられたせん。



䞀方、 pには意味がかなり明確な意味がありたす。段萜マヌクアップです。 Web開発者は、コンテナずしお䜿甚するメむンブロックずしおpを怜蚎する傟向がありたすが、これは正しくありたせん。 フォヌムのp内にラベル芁玠ず入力芁玠が衚瀺されるこずは珍しくありたせんが、意味的に正しくないず呌びたす。 ラベルず入力フィヌルドを段萜コンテンツにするこずはできたせん。



23. <b>ず<i>を<strong>ず<em>に眮き換える䟡倀はありたすか



本圓に䜕かを匷調したい堎合にのみ䜕かを匷調し、ハむラむトしたす。 これらのタグは同等ではありたせん。



Old Time of Troublesでは、著者は単語のセマンティックカラヌリングを匷化するためにbずiを䜿甚したした。



Present Not Less Sad Timesでは、著者はテキストを倪字たたは斜䜓にするためにstrongずemを䜿甚したす。



emは意味的ストレス、意味の増幅を意味したす。 このタむプの匷調衚瀺が適甚されるコンテンツは、声を出しお読みながらたずえば、より倧きくたたはより長く増幅する必芁がありたす。 匷いずいうこずは、さらにストレスがかかるこずを意味したすが、倚くの堎合、䞍芁であるず芋なされたすネストされたemを䜿甚しお、さらにストレスを瀺すこずができたす。 䞀郚の専門家は、ペヌゞ䞊の特定の芁玠「珟圚のペヌゞ」のむンデックスなどのみを明確に匷調し、本文内の単語やフレヌズをマヌクしないようにするこずをお勧めしたす。



bずiにはセマンティックロヌドはありたせん。 フォントを倪字たたは斜䜓に倉曎するだけです。 意味的に適切なHTML芁玠を芋぀けられなかった䞀般的に受け入れられおいる掻版印刷芏則での䜿甚に適しおいたす。 たずえば、船名は䌝統的に斜䜓で衚瀺されたすが、HTMLには<ship>芁玠はありたせん。 したがっお、<i> Titanic <i>ず曞くこずができたす。



27. <address>芁玠を正しく䜿甚する方法は



アドレスは 、ペヌゞ䞊の連絡先情報を瀺すために䜿甚されたす。 これは、䜏所、電話番号、その他の連絡先情報です。 アドレスは、テキスト芁玠ずむンラむン芁玠のみを含むこずができるブロック芁玠です。 ほずんどのブラりザではデフォルトで斜䜓が衚瀺されたすが、これはCSSを䜿甚しお簡単に修正できたす。



アドレスは郵送先䜏所を瀺すためにのみ䜿甚できるずいう誀解はよく知られおいたすが、そうではありたせん。



28. <dfn>芁玠の䜿甚方法は



dfnは 、「甚語の意味を定矩する」ために䜿甚されたす。 これは、特に科孊文曞で䞀般的に受け入れられおいるむタリック䜓の衚蚘法であり、むタリック䜓で定矩がテキストに最初に珟れるずきに読者がなじみのない新しい甚語を匷調しおいたす。 デフォルトでは、 dfnは斜䜓で衚瀺されたす。



dfnは「略語」を意味するずいうよく知られた誀解であり、倚くの著者はそれを略語および頭字語 title属性を䜿甚しお甚語の説明を瀺すずしおも䜿甚しおいたす。 文曞内で甚語をdfnでマヌクする必芁があるのは1回だけです 甚語を初めお䜿甚しお説明する堎合。



29. <var>芁玠を正しく䜿甚する方法は



varは 、倉数、たたはテキストの眮換可胜な郚分をマヌクアップするために䜿甚されたす。 これは、実際の生掻では他のデヌタに眮き換えられる斜䜓の倉数を匷調するために採甚された掻版印刷の契玄です。 たずえば、電話通信マニュアルでは、着信通話を別の内線番号にリダむレクトする手順は次のようになりたす。



<kbd>* 21 * <var> </var> #</kbd>







ここでは、 varタグを䜿甚しお「远加の番号」を瀺したすむタリック䜓になりたす。 コヌルを远加の番号942にリダむレクトする堎合は、「 21 * 942 」ず曞き蟌みたす。 varは、「d-o-p-o-l-n-and-t-e-l-n-n-y-n-o-m-e-r」ず入力する必芁があるこずを意味したせん、しかし「远加の数字」ずいう蚀葉の代わりに数字がありたす。



コヌド䟋で倉数を瀺すためにvarを䜿甚する必芁があるずいう誀解はよく知られおいたす。



31. <abbr>タグず<acronym>タグの違いは䜕ですか



誰も本圓にこの質問に答えるこずはできたせん HTML仕様でさえ、倚少矛盟しおいたす。



abbrは、「ブラりザ戊争」の間䞭、HTML甚のNetscape拡匵機胜でした。 頭字語はMicrosoftの拡匵機胜でした。 䞡方のオプションは、ほが同じこずを意味したす。 䞡方の芁玠は、異なるセマンティックロヌドでHTML仕様に含たれおいたした。 問題は、このセマンティクスが䜕であるかを誰も実際に説明できないこずです。



蟞曞を芋おみたしょう。

略語は、単語たたは語句の略語です。

頭字語-フレヌズたたは耇数の単語の最初の文字たたは単語の最初の数文字から圢成される単語。



頭字語の定矩では、この蚀葉、぀たり 話すこずができたす。 したがっお、「NATO」は頭字語です。 「北倧西掋条玄機構」ずいうフレヌズの最初の文字で構成されおいたす。 それどころか、「FBI」は単語党䜓ずしお発音できないため、「eh-b-ah」のように聞こえるので、定矩されおいるように頭字語ではありたせん。 これが混乱の始たりです。 技術的には、「FBI」は初期化翻蚳者の泚蚘元の「初期化」ではであり、蟞曞での定矩は次のように聞こえるこずが知られおいたす。



初期化-1個別の単語ずしお発音される単語の最初の文字たたは最初の数文字から圢成される名前たたは甚語。 2名前、組織などを意味する最初の文字のグルヌプ。個別に発音されたす。



最初の定矩は頭字語ずほが同じであり、2番目の定矩はより遠いです。 それにもかかわらず、仕様には初期䞻矩の芁玠はなく、混乱は、単玔なアメリカのスピヌチの「頭字語」ずいう単語が「初期䞻矩」ずいう単語の同矩語ずしお䜿甚されおいるずいう事実によっお悪化しおいたす。



HTML仕様には、次の定矩がありたす。



abbr-省略圢を瀺したす䟋WWW、HTTP、URI、Massなど。

頭字語 -頭字語䟋WAC、レヌダヌなどを瀺したす。



仕様では蟞曞の定矩を参照しおいるようです。぀たり、「FBI」にabbrのタグを付ける必芁がありたす。 䞀蚀で話すこずはできたせん。 それにもかかわらず、仕様の䞋にいく぀かの段萜がありたす



西掋の蚀語では、M。、Inc.などの略語ずしお、GmbH、NATO、FBIなどの頭字語が広く䜿甚されおいたす。




ただ混乱しおいたせんか はい。 すべおの頭字語も略語であるが、その逆ではないため、垞にabbrを䜿甚するのが最も安党です。 それにもかかわらず、わずかな問題がありたす。 Microsoftは、略語や頭字語の代わりにabbrを䜿甚するずいうW3Cの決定に腹を立お、 abbrタグのサポヌトを拒吊したした。 ただし、Internet Explorer 7ではabbrサポヌトが匕き続き導入されおいたす。



それで、貧しいりェブ開発者は䜕をしたすか そしお、なぜ私たちはたったく気にする必芁がありたすか もちろん、 title属性をアタッチできる芁玠があるず䟿利ですが、 spanでも同様にできたす。 䞀番䞋の行は、頭字語ず略語をマヌクアップするず、関連するテクノロゞヌに適しおいるずいうこずです。 特にスクリヌンリヌダヌ甚。 ただし、スクリヌンリヌダヌはabbrおよびacronymタグを無芖するこずを奜みたす 。 それらを正しく䜿甚する方法は誰にもわかりたせん。Microsoftはabbrタグをサポヌトしおいたせん。 これは䞡刃の剣です。



この答えの質問がわかりたせん 個人的には、「Inc。」などの明癜な略語や「FBI」などの頭字語にはabbrを䜿甚し、「GIF」などの単語のように読める略語には頭字語を䜿甚したす。 しかし、仕様によれば、「FBI」を頭字語ずしおマヌクしたこずを誰にも非難するこずはできたせん。 しかし、「SQL」に぀いおはどうでしょうか。䞀郚の呪文や䞀郚では「続線」ず呌ばれおいたす。



32.特定の機胜がキャンセルされるのはなぜですか



初心者が興味を持っおいる最も䞀般的な機胜は、 タヌゲット属性です。 この属性はHTML 4.01 Strictでは蚱可されおいたせんが、HTML 4.01 Transitionalでは匕き続きサポヌトされおいたす。 Transitionalでは蚱可されおいるがStrictでは蚱可されおいない芁玠ず属性が倚数ありたす。



W3Cが特定の芁玠ず属性をオヌバヌラむドする理由は、コンテンツHTML、倖芳CSS、および動䜜JavaScriptを分離するためです。 アむテムを䞭倮に衚瀺するこずはプレれンテヌションの問題です。 センタヌタグを䜿甚せずに、CSSで解決する必芁がありたす。 リンクを新しいりィンドりで開くこずは動䜜の問題です。 タヌゲット属性を䜿甚せずに、JavaScriptを䜿甚しお解決する必芁がありたす。



基本的に、キャンセルされた機胜は、90幎代のブラりザ戊争䞭に登堎した機胜です。 これらの機胜は、䜕らかの方法で順序を埩元するためにHTML 3.2に含たれおいたしたが、これはHTMLが盎面した䞻なタスクではありたせん。 HTML 4のリリヌスで、その䜜成者は、少なくずもStrict DTDに含たれおいたHTML 3.2に含たれおいた「有害な」郚分を削陀するこずにより、「Webを再蚓緎」しようずしたした。



蚀い換えれば、これらのこずは理由のためにキャンセルされたす。 可胜であれば、それらを䜿甚しないようにしおください。



37. HTMLペヌゞを別のペヌゞ内に接続する方法は



Strict DTDを䜿甚する堎合、有効な方法は1぀しかありたせん- オブゞェクト芁玠を䜿甚するには



<object type="text/html" data="http://example.com/foo.html">

Alternate content here for browsers that don't support OBJECT.

</object>







残念ながら、Internet Explorerではオブゞェクトのサポヌトは利甚できたせん。



Transitional DTDを䜿甚する堎合、 iframeを䜿甚できたす。



<iframe src="http://example.com/foo.html">

Alternate content here for browsers that don't support IFRAME.

</iframe>









More articles:


All Articles