HTML書式のメモ：Ulタグ

HTML書式のメモ：Ulタグ

• #block level elementがポイント
• #色々なケース
  • ケース1：ULタグのそのものの使い方も問題。
  • ケース2：ULタグは正しい使い方です。paragraph breakと？
  • ケース3：ULタグは正しい使い方です。non paragraph breakと？
• #ケースを検証してみます。
  • ULタグの使いか方の間違い
  • ULタグは正しい使い方。heading tag(paragraph break tag)
  • ULタグは正しい使い方。font tag(non paragraph break tag)
  • %flow なので、このような使い方もあります。
• #HTML ChekerとValidatorの違い

block level element と入れ子がポイント

　ULタグはblock level element です。内容は基本の%textのみで なく、入れ子ができます。そのために、%flowという考えを入れてい ます。［DTD 3.2 概観］を参照してください。

　文字を大きくするために見出しタグを転用した場合を考えてみます。むろん、転用 そのものがいけないのですが。そこから、一般的なものへと話をすすめてみます。
　ここでもブラウザでの表示だけではコーディングの正しさの保証にはならないことに 注意してください。しかも、HTML ChekerとValidatorの違いについても十分理解してお かなければなりません。

[目次に戻る]

Unordered Lists
    <!ELEMENT UL - -  (LI)+>
        <UL>
        <LI>%text
        </UL>
        と<UL>には<LI>と続けます。
    <!ELEMENT LI - O %flow -- list item -->
        * %flow:  <!ENTITY %flow "(%text | %block)*">
                      %text か %block か、
                      　%text が、基本です。
                     　 %block は入れ子ができることを意味します。
                     　 (%block には、heading, ADDRESS は入りません）
        <UL>
        <LI>%text
           <UL>         -----+
           <LI>%text         | この入れ子"<UL><LI></UL>" は%blockです。
           </UL>        -----+
        </UL>
　　　　　　　　　　　　　%text | %block | という意味です。これを%flowと

色々なケース

ケース1：ULタグのそのものの使い方も問題。

　でも、記号が表示されないので使いたくなります。前にアイコンもってくるなどし たくなります。

　　　このコードです。
<UL>
<H2>HTML書式のメモ：ulタグ</H2>
<H3>HTML書式のメモ：ulタグ</H3>
<H4>HTML書式のメモ：ulタグ</H4>
</ul>

ケース2：ULタグは正しい使い方です。paragraph breakと？

　見出しタグが、ここにきてもいいのかと言う問題です。

　　　コーディングは以下のようになっています。
<UL>
<LI><H2>HTML書式のメモ：ulタグ</H2>
<LI><H3>HTML書式のメモ：ulタグ</H3>
<LI><H4>HTML書式のメモ：ulタグ</H4>
</UL>

ケース3：ULタグは正しい使い方です。non paragraph breakと？

　フォントタグなら、ここにきてもいいのかと言う問題です。

• HTML書式のメモ：ulタグ
• HTML書式のメモ：ulタグ
• HTML書式のメモ：ulタグ

　　　上のコーディングです。
<UL>
<LI><FONT SIZE="5">HTML書式のメモ：ulタグ</FONT>
<LI><FONT SIZE="4">HTML書式のメモ：ulタグ</FONT>
<LI><FONT SIZE="3">HTML書式のメモ：ulタグ</FONT>
</UL>

#^目次に戻る

ケースを検証してみます。

ULタグの使いか方の間違い

nsgmls:<OSFD>0:28:3:E: document type does not allow element "H2" here
nsgmls:<OSFD>0:29:3:E: document type does not allow element "H3" here
nsgmls:<OSFD>0:30:3:E: document type does not allow element "H4" here
nsgmls:<OSFD>0:31:4:E: end tag for "UL" which is not finished

27. <UL>

28. <H2>HTML書式のメモ：ulタグ</H2>
29. <H3>HTML書式のメモ：ulタグ</H3>
30. <H4>HTML書式のメモ：ulタグ</H4>
31. </UL>

ULタグは正しい使い方。heading tg(paragraph break tag)

nsgmls:<OSFD>0:45:7:E: document type does not allow element "H2" here
; missing one of "DIV", "CENTER", "BLOCKQUOTE", "FORM" start-tag
nsgmls:<OSFD>0:46:7:E: document type does not allow element "H3" here
; missing one of "DIV", "CENTER", "BLOCKQUOTE", "FORM" start-tag
nsgmls:<OSFD>0:47:7:E: document type does not allow element "H4" here
; missing one of "DIV", "CENTER", "BLOCKQUOTE", "FORM" start-tag

44. <UL>

45. <LI><H2>HTML書式のメモ：ulタグ</H2>
46. <LI><H3>HTML書式のメモ：ulタグ</H3>
47. <LI><H4>HTML書式のメモ：ulタグ</H4>

48. </UL>

ULタグは正しい使い方。font tag(non paragraph break tag)

　検証には引っかかりません。

%flow なので

以下のような使い方もできます。

• 文字列
• アンカー（注：リンクはありません。）

• <P>パラグラフ１

• 文字列

  <P>パラグラフ２

• <PRE>パラグラフ２</PRE>

• 文字列

  <PRE>パラグラフ２</PRE>

• <P>パラグラフ３

  • 文字列；入れ子
  • アンカー入れ子　（注：リンクはありません。）

  • <P>パラグラフ１入れ子

  • <PRE>パラグラフ２入れ子</PRE>

  • パラグラフ１入れ子

  • <PRE>パラグラフ２入れ子</PRE>

• 文字列；入れ子をでる。
• <P>アンカー入れ子をでる

• <PRE>パラグラフ２入れ子</PRE>

• 文字列；入れ子をでる。<BR><BR>
  
  
• 間を上の<BR><BR>で作る
  
  

#^目次に戻る

HTML ChekerとValidatorの違い

　Kinder, Gentler Validationでは、Weblint Resultsも同時に報告するoptionがあり
ます。Weblint Resultsでは、この種のものをチェックしません。sgmlサーバと言われ
る（validator）ものとの併用が必要になるわけです。

Kinder, Gentler Validation Results
Jump to: Weblint Results.
=======================
HTML Validation Results
========================
　Below are the results of attempting to parse this document with
an SGML parser.
   ^^^^^^^^^^^^
Version of HTML selected: HTML 3.2.
----------------------------------------------------------------------------

Error at line 28:
   <H2>HTML書式のメモ：ulタグ</H2>
      [^] end tag for `UL' omitted,
          but its declaration does not permit this (explanation...)
----------------------------------------------------------------------------

Error at line 31:
   </UL>
       [^] end tag for element `UL' which is not open (explanation...)
----------------------------------------------------------------------------
Error at line 45:
   <LI><H2>HTML書式のメモ：ulタグ</H2>
          [^] end tag for `UL' omitted,
          but its declaration does not permit this (explanation...)
----------------------------------------------------------------------------
Error at line 46:
   <LI><H3>HTML書式のメモ：ulタグ</H3>
      [^] element `LI' not allowed here (explanation...)
----------------------------------------------------------------------------
Error at line 47:
   <LI><H4>HTML書式のメモ：ulタグ</H4>
      [^] element `LI' not allowed here (explanation...)
----------------------------------------------------------------------------
Error at line 48:   </UL>
       [^] end tag for element `UL' which is not open (explanation...)
----------------------------------------------------------------------------

Sorry, this document does not validate as HTML 3.2.

   D'oh!
----------------------------------------------------------------------------
===============
Weblint Results
================
Below are the results of running Weblint on this document:
   * line 62: <FONT> is extended markup.
   * line 62: </FONT> is extended markup.
   * line 63: <FONT> is extended markup.
   * line 63: </FONT> is extended markup.
   * line 64: <FONT> is extended markup.
   * line 64: </FONT> is extended markup.
----------------------------------------------------------------------------

　ケース1と2の表示は、コーディングミスの例ですのでタグでは記入していません。
オンラインでの表示画面のgif画像です。コーディングは同時に表示してありますので
各自でオンラインで表示して見てください。
　タグ記入したものを検証し、その結果を記載しています。

#^目次に戻る

［ホームページへ戻る］［HTML書式のメモ：へ戻る］［table］

Congratulations, this document validates as HTML 3.2!