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

メモ帳日記

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

2007年 3月 20日(先負

俺的 HTML マークアップ規則

自分の脳内 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 で下にっていうのはやったことないですねえ。
暇があったら試させていただきます。

コメント投稿フォーム