ホームページ制作、千太の絵空事

時に勝つ!投稿できることに感謝しています。(千太) SINCE 2005

・(X)HTML

[ リスト | 詳細 ]

記事検索
検索

全3ページ

[1] [2] [3]

[ 次のページ ]

OL要素の活かし方

OL要素の活かし方


通常、OL要素など使ってのマークアップはいたしませんが、
このブログをやっていて、
「もしや、これは使えるのでは?」
とふと、思っています。

ふふふ、それは…。

OL要素はつかいにくい


LI要素を内容とする要素にはUL要素がありますが、
このOL要素は,マーカーが、LI要素の数に合わせて順番に自動で表示してくれます。

便利なのですが、
例えば、目次や,レシピに使った場合、
この数字を目安にし文を執筆しがちで、
その使い方に注意が必要です。

目次などは、いっそUL要素の入れ子で構築し、
階層はきちんと文字で記入した方がいいと考えています。

ふふふ


と,使えないなぁと考えを固定しないのが味噌。

何か使えないかなぁと、やっていると、

ふふふ、

活かし方ありましたよ!。

CSSのプロパティのリスト使いながら、これはいいと思いました。

執筆者が、

数を数える

のには,最適。

多い項目でも、これなら,1つ二つと数えなくてもブラウザがLI要素の項目を数えて表示してくれる

項目名を指定する際には,「1の」とだけいわず、

「何番目の○○」とあくまで補足的に言う程度で、
しっかり○○を項目名で説明するように記入してやればいい。

項目名の数は下に記入してやればいいだけですよね。

しかも、Wikiでやれば,簡単に数が数えられるというわけです。

この記事は「OL要素の活かし方
更新:2006-10-06
ホームページ制作、千太の絵空事

「XHTML™ Basic」の要素

「XHTML™ Basic」の要素



Structure Module*
  1. body,
  2. head,
  3. html,
  4. title

Text Module*
  1. abbr,
  2. acronym,
  3. address,
  4. blockquote,
  5. br,
  6. cite,
  7. code,
  8. dfn,
  9. div,
  10. em,
  11. h1,
  12. h2,
  13. h3,
  14. h4,
  15. h5,
  16. h6,
  17. kbd,
  18. p,
  19. pre,
  20. q,
  21. samp,
  22. span,
  23. strong,
  24. var

Hypertext Module*
  1. a

List Module*
  1. dl,
  2. dt,
  3. dd,
  4. ol,
  5. ul,
  6. li

Basic Forms Module
  1. form,
  2. input,
  3. label,
  4. select,
  5. option,
  6. textarea

Basic Tables Module
  1. caption,
  2. table,
  3. td,
  4. th,
  5. tr

Image Module
  1. img

Object Module
  1. object,
  2. param

Metainformation Module
  1. meta

Link Module
  1. link

Base Module
  1. base

52

【リファレンス】

『XHTML™ Basic』の要素
更新:2006-10-05
ホームページ制作、千太の絵空事

Second Edition(XHTML1.0)

Second Edition(XHTML1.0)

10:05 2005/12/20
本質的には「XHTML; 1.0: The Extensible HyperText Markup Language」
と何ら変わりはありません。変更といってもレイアウトが他の新しい文書の様になったり、
(Quick Table of Contentsや、4.7→4.7.など)
文中での使われる単語の統一や表現の変更など(cannot →must not)
校正的な作業がされた改訂版になります。いわゆる第2版です。
新バージョンではなく、変更は、コミュニティーによって提出されたコメントの結果やHTMLワーキンググループ内の進行中の仕事の結果を適用された修正を反映しています。他の標準文書との誤謬の統合だけとなっています。このSecond Editionには本質的な変更はありません。
→《Status of this document》

誤謬errataはこの様になっています。
只、注意する必要のある修正や加筆されている部分もありますので
このセクションでは、その一部について紹介いたします。
  • DTD宣言の変更

DTD宣言の変更


DTDの識別子の部分が変更修正されています。

  • <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    
    ※URI部分が文書と統一的なURIに変更になっています。

その他、詳細は修正部分と加筆された部分がわかりやすく表示されている
リファレンス先で確認してみてください。



【リファレンス】

この文書は「Second Edition(XHTML1.0)
更新10:05 2005/12/20
©ホームページ制作、千太の絵空事

HTML4との違い(XHTML1.0)

HTML4との違い(XHTML1.0)


  • Well-formedness:整形式
  • 要素名、属性名は小文字
  • 非空要素の終了タグは必須
  • 属性値は常に引用符
  • 属性最小化
  • 空要素
  • 属性値内での余白の扱い
  • スクリプト、スタイル要素
  • SGMLの排除
  • 要素のid、name属性

Well-formedness:整形式


Well-formednessは[XML]で導入された新しい概念です。


  • 本質的にはすべての要素が終了タグを持つ
    ([特殊な形式]を除く)
  • すべての要素がnest入れ子の状態でなけらばならない。


  • 正しい例(要素が入れ子になっている。)
    <p>here is an emphasized <em>paragraph</em>.</p>
    

  • 誤: (要素がoverlapping 重なり合っている)
    <p>here is an emphasized <em>paragraph.</p></em>
    

要素名、属性名は小文字


要素名や属性名には小文字を使用します(必ずです。)

例えば[XML]としては <li> と <LI> とは異なるタグと認識するからです。

非空要素の終了タグは必須


SGMLに基いたHTML4では終了タグを省略されるのを許されていた一部の要素があります。
この省略は、XMLに基いたXHTMLにおいては許されません。
DTDで EMPTY として宣言されている空要素以外の
すべての要素に終了タグは必須です。
  • 正しい例:
    <p>here is a paragraph.</p><p>here is another paragraph.</p>
    
  • 誤:
    <p>here is a paragraph.<p>here is another paragraph.
    
    
    

属性値は常に引用符

属性値は、引用符で括って使用します。(必須)
  • 正しい例: 属性値が引用符で括られています。
    <table rows="3"> 
    
  • 誤: 属性値が引用符で括られていません。
    <table rows=3>
    

属性最小化

XMLは属性最小化をサポートしていません。
ですのでXHTMLでも
属性値ペア(属性名とその属性値)は完全でなければなりません。

  • 正しい例:
    <dl compact="compact">
    

  • <dl compact>
    

空要素

Empty Elements 空要素は
<br/> や <hr></hr> のように開始タグが/>であるか
終了タグがある必要があります。

後方互換性→[Compatibility Guidelines]互換性ガイドライン

属性値内での余白の扱い


Section 3.3.3ofXML
  • 属性値の先頭、末尾の余白を剥ぎ取られます
  • 1つ以上の余白文字(改行を含む)単一の単語間スペースへと割付けされます。

スクリプト、スタイル要素

XHTMLでは、スクリプト、スタイル要素は、[#PCDATA ] を内容に保有するとして宣言されています。
< や & は、マークアップの始まりとして認識されます。

例えばXMLプロセッサは&lt; や &amp; などの実体は、実体参照として、 < や & に認識することになります。

スクリプト、スタイル要素の内容を CDATA マークの領域に内包させることにより、実体の展開が避けられる。

  • script type="text/javascript">
    <![CDATA[
    ... unescaped script content ...
    ]]>
    </script>
    
    ※:&は&です。jはjです。

この場合CDATAの領域は、XMLプロセッサにより認識され、ドキュメントオブジェクトモデルのノードとして出現します。
※: Section 1.3of the DOM Level 1 Recommendation DOM.

SGMLの排除

SGMLではDTDの執筆者に、要素に内包されていることから、特定の要素を除外することができますが、XMLにおいては不可能です。

例えば、HTML4のStrict DTDではa要素の中に他のa要素を入れ子とすることを子孫の深さによらず禁止していますが、これをXMLで完全に綴るのは不可能となっています。

※:一定に入れ子にできない要素や、要素の中で入れ子に出来ない要素などはElement Prohibitions
[要素の禁止]


要素のid、name属性

HTML4でname 属性を定義た要素はa, applet, form, frame, iframe, img, map ですが、
HTML4は、id 属性も導入しています。
これらの属性はfragment identifiersフラグメント識別子として扱われるように設計されています。


ですが、XHTML 1.0 では、id 属性が ID 型として定義されています。

  • XMLではフラグメント識別子は''type ID''ID型ですので、
    要素のID 型の属性は1個となります。
    

厳密な正確なXML文書であることを保証する必要がある場合に、XHTML 1.0 文書では name 属性のある要素であっても、id 属性を使う必要があります。

※XHTML文書をtext/htmlとして配布する場合:
アンカーの後方互換性としてはこちら→Compatibility Guidelines

【注意】XHTML 1.0 では、これらの要素の name 属性は公式には廃止予定とされていました。後続バージョンの[XHTML1.1]で廃止となっています。


更新8:34 2005/12/20

HTMLとの互換性ガイドライン(XHTML1.0)

《HTML Compatibility Guidelines》

Processing Instructions and the XML Declaration


  • Processing Instructionsをレンダリングするユーザエージェントもあることに注意
  • XML宣言が文書にない場合はデフォルトのcharacter encodingsである UTF-8 か UTF-16 しか使えないことに注意

空要素

たとえば <br /> のように、空要素には最小化タグ文法を使います。
※XMLで許容されている代替の<br></br> は、多くの既存のUAでは結果が一定でない。


  • <br /> 
    <hr />
    <img src=http://img.yahoo.co.jp/images/clear.gif alt="Karen" />
    
    空要素の最後の部分の / と > との前にスペースを1つ入れます。
    ;
    只、この<br />という表記も実は…
    

要素最小化と空要素内容

内容モデルが EMPTY ではない要素が
空インスタンスの場合には、最小化形式は使用しません。
  • 正しい例
    <p> </p>
    
  • 誤:
    <p /> 
    

埋め込みのスタイルシートとスクリプト


スタイルシートや、スクリプトが < か & か ]]> か -- かを使っている場合には、埋め込みではなく、外部にスタイルシートや、スクリプトを用意して使用します。

  • スタイルシート
< か & か ]]> か -- かを使っている場合には、
}}}
外部スタイルシートを使用します。

  • スクリプト
    < か & か ]]> か -- かを使っている場合
    
    外部スクリプトを使用します。

  • 【注意】
    commentsコメントの内容を除外することがXMLパーサには許されていることに注意すること。

    ※文書を後方互換的にする場合commentsコメントの中にスクスクリプトやスタイルシート「隠す」という慣習的手法は、
    XMLを基礎とした実装では期待した動作にならない可能性が高い。


    属性値内での改行

    属性値内での改行している場合など
    UAによって扱いが一貫していないので、
    属性値内では改行や重複した余白文字は避ける。


    • 
      
      
      
      
      

    Isindex

    文書の head の内容に2つ以上の isindex を入れない。
    isindex 要素は、deprecated で廃止予定でありinput 要素を使用することが推奨されている。

    ※:廃止されている。

    lang 属性と xml:lang 属性

    要素の言語を指定する場合は
    lang と xml:lang との双方を使用します。

    ※xml:lang 属性の値が優先します。

    フラグメント識別子

    XMLでは
    "#foo" というフラグメント識別子の場合
    URI [RFC2396] は、name="foo" という属性のある要素を参照せず、
    id 属性といったような、ID 型として定義されている属性のある要素を参照します。
    只、現在の多くのHTMLクライアントは、
    ID 型属性の使用法をサポートしていない場合があるので、

    前方互換性と後方互換性とを保証する場合
    属性の両方について同一の値を補います。

    • <a id="foo" name="foo">...</a>
      

    【注意】
    XHTML 1.0 は a, applet, form, frame, iframe, img, map 要素の name 属性を廃止予定になります。
    後続バージョンのXHTMLからは除去されています。


    キャラクタエンコーディング


    文字コードを指定するには
    xml 宣言でのエンコーディング属性の指定
    • 例:
      <?xml version="1.0" encoding="EUC-JP"?>) 
      
    meta http-equive ステートメント
    • 例:
       <meta http-equiv="Content-type" content='text/html; charset="EUC-JP"' />
      
    との両方を使用します。
    ※xml処理命令のencoding属性の値が優先します。

    ブール属性

    UAによっては、ブール属性が完全(非最小化)形式で出現すると、
    XML 1.0 で要求されているとおりに解釈できない場合がある。

    【注意】
    HTML4に準拠したUAには影響はありません。

    属性
    compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer.


    ドキュメントオブジェクトモデルとXHTML

    HTML4文書オブジェクトモデルではは、HTML要素名、属性名は大文字で返されることを規定
    XML文書オブジェクトモデルでは、要素名、属性名は、それらが指定されている文字で返されることを規定


    XHTML 1.0 では、要素や属性は小文字で指定される

    • text/html としてDOM経由でのXHTML文書にアクセスする場合:
      アプリケーションは HTML-DOMを使用可能であり、
      要素名や属性名が大文字で返されることが期待できる
    • text/xml または application/xml としてのXHTML文書にアクセスする場合
      アプリケーションはXML-DOMを使用することも可能であり
      要素や属性は、小文字で返されることになります

    【注意】
    XHTML要素によっては、内容モデルにおいて任意的な部分は
    オブジェクトツリーに出現したり、しなかったりする要素があります
    • 例:(table 要素内の tbody 要素)
      
      
      
    アプリケーションの場合は対応する必要があります。
    →[]

    属性値中ではアンパサンドを使用


    属性値中でのアンパサンドは文字実体参照として表記します。
    • 例.
      "&"
      

    a 要素の href 属性が、パラメータ付きでCGIスクリプトを参照している場合


    【リファレンス】
    W3C
  • [RFC2854]
    RFC2854


  • この文書は「HTMLとの互換性ガイドライン(XHTML1.0)」
    更新8:41 2005/12/20
    ホームページ制作、千太の絵空事

    全3ページ

    [1] [2] [3]

    [ 次のページ ]


    .
    *************
    *************
    非公開 / 非公開
    人気度
    Yahoo!ブログヘルプ - ブログ人気度について
    検索 検索

    過去の記事一覧

    ブログバナー

    友だち(1)
    • ペーパーキャプテン・りヴぁ
    友だち一覧

    Yahoo!からのお知らせ

    よしもとブログランキング

    もっと見る

    [PR]お得情報

    CMで話題のふるさと納税サイトさとふる
    毎日お礼品ランキング更新中!
    2019年のふるさと納税は≪12/31まで≫
    数量限定!イオンおまとめ企画
    「無料お試しクーポン」か
    「値引きクーポン」が必ず当たる!

    その他のキャンペーン


    プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

    Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

    みんなの更新記事