HTML書式のメモ：位置揃えcentering

line
_________________________________________________________

タグの位置付け、分類を頭にいれておきます。
まず、DTD 概観で意味を見てください。

text level elements:(%text)-->text flow の基本
block level element:-->text flow の延長
- %block:　基本的に内容は%text がくる。
- %flow:　|%text | %block | とリストで入れ子Okayの意味
Heading:(%heading)--> text flow ではなく、 flow の見出し
ADDRESS:(address)--> 本文のtext flow と直接関連してない。
body 内のすべてのブロックが内容になるもの:
- %body.content: %text| %block| %flow| heading |ADDRESS |
  または、: text level element, block level element, Heading, ADDRESS
  
  CENTER、DIV の内容は、この%body.content がくる。

　の様に分類、レベル分けがなされています。

　ブラウザでの表示ではこのコーディングミスは見えませんので、検証の必要性がでてくるわけです。

　取りえる内容は、DTDに以下のように書かれています。
　　　　　　　　- -　開始タグ必須　終了タグ必須
　　　　　　　　- O　開始タグ必須　終了タグ省略可( O: Omitt)

　<!ELEMENT ( %heading ) - - (%text;)*>
　<!ELEMENT P - O (%text)*>

　<!ELEMENT center - - %body.content>
　<!ELEMENT DIV - - %body.content>

内容の考えを間違ったケース

ミスのケース1

取り得る内容は、基本の%textですが、CENTERというblock level element がきてます。

<H4><CENTER>AAAAAAAAAAAAAAAAAAAA</CENTER></H4>

<P><CENTER>BBBBBBBBBBBBBBBBBBBBB</CENTER></P>

ミスのケース2

<CENTER>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<P>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</P>
</CENTER>

上の二つのケースは間違った使い方です。

内容の正しい使いかた

　CENTER のとる内容は、%block や %body.content になっています。

headingタグでみる。

＊　センタリングタグで、

AAAAAAAAAAAAAAAAAA

<CENTER> <H3>AAAAAAAAAAAAAAAAAA</H3> </CENTER>

＊　<H3>の属性で、

AAAAAAAAAAAAAAAAAA

<H3 ALIGN="CENTER">AAAAAAAAAAAAAAAAAA</H3>

Pタグでみる。

＊　センタリングタグで、

AAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBB

<CENTER>
<P>AAAAAAAAAAAAAAAAAA</P>
<P>BBBBBBBBBBBBBBBBBB</P>
</CENTER>

------------------------------------------------------
" AAAAAAAAAAAAAAAAAA "　は %text ですが、"<P>AAAAAAAAAAAAAAAAAA</P>" は%block(block level element) になっています。
-------------------------------------------------------

＊　<P>の属性でセンタリング

AAAAAAAAAAAAAAAAAA

<P ALIGN="CENTER">AAAAAAAAAAAAAAAAAA</P>

<DIV>タグでみる。

＊　<DIV>タグの属性で、

AAAAAAAAAAAAAAAAAA

BBBBBBBBBBBBBBBBBB

<DIV ALIGN="CENTER">
<P>AAAAAAAAAAAAAAAAAA</P>
<P>BBBBBBBBBBBBBBBBBB</P>
</DIV>

このドキュメントは、<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">で
http://www.asahi-net.or.jp/‾bd9y-ktu/JIREI_F/centering_e.htmlでEUC版です。コーディン
グチェックに利用してください。

====================================================
HTML Validation Service Responseは指摘してくれます。
====================================================
Document checked:
Option settings: Level Wilbur Strict

Errors

nsgmls:<OSFD>0:19:11:E: document type does not allow element "CENTER" here
nsgmls:<OSFD>0:21:44:E: end tag for element "P" which is not open

19. <H4><CENTER>AAAAAAAAAAAAAAAAAAAA</CENTER></H4>
20. <P><H4><CENTER>AAAAAAAAAAAAAAAAAAAA</CENTER></H4>
21. <P><CENTER>BBBBBBBBBBBBBBBBBBBBB</CENTER></P>

Kinder, Gentler Validation Results

Here are the Kinder, Gentler Validation results for the document at URL:

     http://www.asahi-net.or.jp/‾bd9y-ktu/centering.html

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 20:
   <H4><CENTER>AAAAAAAAAAAAAAAAAAAA</CENTER></H4>
              [^] end tag for `H4' omitted,
          but its declaration does not permit this (explanation...)
----------------------------------------------------------------------------
Error at line 20:
   <H4><CENTER>AAAAAAAAAAAAAAAAAAAA</CENTER></H4>
     end tag for element `H4' which is not open [^] (explanation...)
----------------------------------------------------------------------------
Error at line 23:
   <P><CENTER>BBBBBBBBBBBBBBBBBBBBB</CENTER></P>
     end tag for element `P' 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 20: <CENTER> is extended markup.
   * line 20: </CENTER> is extended markup.
   * line 23: <CENTER> is extended markup.
   * line 23: </CENTER> is extended markup.
   * line 28: <CENTER> is extended markup.
   * line 31: </CENTER> is extended markup.
   * line 53: <CENTER> is extended markup.
   * line 57: </CENTER> is extended markup.
   * line 70: <CENTER> is extended markup.
   * line 73: </CENTER> is extended markup.
----------------------------------------------------------------------------

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

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

Congratulations, this document validates as HTML 3.2!

JIS版：http://www.asahi-net.or.jp/‾bd9y-ktu/jirei_f/centering_j.html

加藤泰孝　bd9y-ktu@asahi-net.or.jp

email : y.kato@personak.emaol.ne.jp
Last modified 02/14/1997