1. メモ帳日記 >
  2. Web >
  3. HTML / CSS >
  4. 俺的 HTML マークアップ規則

メモ帳日記

日記書いたりメモ書いたり

2007年 3月 20日（火） 先負

俺的 HTML マークアップ規則

Created Date
2007-03-20T14:50:51+09:00
Modified Date
2007-04-04T19:19:55+09:00
Category
PermaLink
http://bsakatu.s201.xrea.com/mt/2007/03/20/14-50-51
Comment
2 件

自分の脳内 HTML マークアップ規則を明文化してみるエントリ。これを作りながら規則を変えたところもある。

本文書内において空行とは U+000A のみを有する行のことを示す。

このエントリはちょくちょく変更する。また、別ファイルにして公開すると思う。

  • #PCDATA は基本的に改行しないで続けて書く。長くなっても、 Emacs 等は勝手に折り返してくれるので問題なし。
  • ブロック要素は、同階層内に複数ある場合、基本的に前後に空行を置く。また、内包可能なものが %Flow; である要素 (li 要素や dd 要素)内で、#PCDATA とブロック要素がある場合も、#PCDATA とブロック要素の前後に空行をおく。例外として、head 要素内では以下のようにグループごとにまとめて、グループ間では空行をおく。
    1. meta 要素で http-equiv 属性を含むもの
    2. meta 要素で name 属性を含むもの
    3. title 要素
    4. link 要素 (以下に示すもの以外)
    5. link 要素で rel 属性に stylesheet を含むもの
    6. link 要素で rel 属性に stylesheet を含まず、かつ alternate を含むもの
    <head profile="http://bsakatu.s201.xrea.com/meta_data_profile">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css;" />
  <meta http-equiv="Content-Script-Type" content="text/javascript;" />

  <meta name="author" content="B-SAKATU" />
  <meta name="generator" content="Movable Type 3.33-ja" />
  <meta name="description" content="日記書いたりメモ書いたり" />

  <title>メモ帳日記</title>

  <link rel="contents" href="http://bsakatu.s201.xrea.com/mt/archives" title="メモ帳日記 : 記事アーカイブ" />
  <link rel="home" href="../" title="B-SAKATUのページ" />

  <link rel="stylesheet" href="http://bsakatu.s201.xrea.com/css/mt/mt" />

  <link rel="alternate" href="http://bsakatu.s201.xrea.com/mt/atom" type="application/xml" title="Atom" />
  <link rel="alternate" href="http://bsakatu.s201.xrea.com/mt/rss20" type="application/xml" title="RSS 2.0" />
  <link rel="alternate" media="handheld" type="application/x-httpd-cgi" title="MT4i" href="http://bsakatu.s201.xrea.com/x/cgi-bin/MT3.3/MT4i/mt4i.cgi?id=1" />

</head>
  • ソースコードのマークアップに関する議論リンク集を見て考えた結果、コンピュータコードをマークアップするには、本来は以下のように、 
    <ol>
  <li><code>hogehoge</code></li>
  <li><code>foobar</code></li>
</ol>
    とするのが理想的だが、さすがにすべての行をリストでマークアップするのは面倒くさすぎるので、以下のようにすることにした。なので、そのとおりにする。エディタの置換機能使えばいいじゃんということに気づいた。これ以外の方法としては次の方法があげられる。 
    <pre><code title="コンピュータコードのタイトル">hogehoge
  foobar
</code></pre>
    このとき、<code> の直後では改行しないで、 </code> の直前に改行し、<pre> はインデントするが </code> はインデントをしない。
  • Latest topics > Past > 2002 > 07 - outsider reflex - div をなくすよりは、より適切マーク付けを重視します

    もし HTML で定義されたブロック要素の中に適当なものがなければ、 div でマーク付けし、 class か id で補足する。

    以上を参考にして、定義されていない要素を使うとき、例えば XHTML 2.0 の section 要素は <div class="section"> とする。もちろんブロック要素は div 要素で、インライン要素は span 要素である。
  • 『blockquote要素の中に出典を示すcite要素を包含すべきか』に関する議論リンク集 @ CD を読んで考えた結果、自分としては以下を参考にして、
    XHTML+CSS (r)evolution
    <dl>
  <dt>
    <cite>(引用元)</cite>
  </dt>
  <dd>

    <blockquote>
      <p>(引用文)</p>
    </blockquote>
  </dd>
</dl>

    <dl>
  <dt><cite><a href="(引用元 URI)">(引用元)</a></cite></dt>
  <dd>
    <blockquote cite="(引用元 URI)" title="(引用元)">
      <p>(引用文)</p>
    </blockquote>
  </dd>
</dl>
  • ol, ul の子要素 (li 要素)が複数あり、かつ、どれか一つでもブロック要素を含んでいる li 要素がある場合、インデントする際に li 要素の前後に空行を置く。例は以下のとおり。 
    <ul>
  <li>hogehoge</li>
  <li>foobar</li>
  <li>fugafuga</li>
</ul>

    <ul>
  <li>
    <p>hogehoge</p>
  </li>
</ul>

    <ul>

  <li>
    <p>hogehoge</p>
  </li>

  <li>
    <p>foobar</p>
  </li>

  <li>
    <p>fugafuga</p>
  </li>

</ul>

コメント - 2 件

2 件のコメントが寄せられています。

この記事につっこむ

Anonymous
2008-07-07T10:30:36+09:00

引用のマークアップを参考にさせていただきます。今まで見た中で一番しっくりきました。

CSSでdtを下に持ってきたりすると良さそうです。

B-SAKATU
2008-07-07T20:37:26+09:00

こんな過疎ブログにわざわざどうもw
参考になったのでしたら幸いです。

CSS で下にっていうのはやったことないですねえ。
暇があったら試させていただきます。

コメント投稿フォーム