メッセージのセマンティックHTML

Question

私は小さなウェブチャットユーティリティを作成しており、メッセージに使用する要素についてのアドバイスを探しています。

ここで私は、現時点で使用して考えてんだよ：

<p id="message-1"> 
    <span class="timestamp" id="2009-03-10T12:04:01+00:00"> 
     12:04 
    </span> 
    <cite class="admin"> 
     Ross 
    </cite> 
    Lorem ipsum dolor sit amet. 
</p> 

私は、タイムスタンプの周りにブラケットを追加するためにここにCSSを活用したい、cite Dのユーザなどのアイコンが、私はそれを考えましたそれぞれのメッセージにを使用するのは愚かであり（間違っている）、私はメッセージを掲示したユーザーを指しているので、citeは正しいと考えています。

私はこれがa）正確な科学ではなく、b）完全に本質的であることを知っていますが、私は全体を通してspanではなく意味のある要素を使うことを好みます。私が考慮すべき他の要素はありますか？マイクロフォーマット？

Answer 1

「id」が無効であることを除いて、私には妥当と思われます。 NAMEトークンは数字で始めることも、「+」を入れることもできません。

さらに、2人のユーザーが一度に話した場合、一意でないIDを持つことになります。おそらく、そのデータは 'title'のような別の属性に入っているはずです（正確なタイムスタンプを表示するためにホバーすることができます）。

Answer 2

あなたが提案した内容はすでに非常に優れています。

<dl class="message" id="message-1"> 
    <dt class="datetime">Datetime</dt> 
    <dd class="datetime"> 
     <span class="day">Wed</span> 
     <span class="dayOfMonth">11</span> 
     <span class="month">Mar</span> 
     <span class="year">2009</span> 
     <span class="hourMin">17:34</span> 
     <span class="sec">33</span> 
    </dd> 
    <dt class="author">Author</dt> 
    <dd class="author">Ross</dd> 
    <dt class="message">Message</dt> 
    <dd class="message">Lorem ipsum dolor sit amet</dd> 
</dl> 

Answer 3

HTMLではありません：あなたは（重いHTMLを犠牲にして）さらに一歩それを取ると同じマークアップでさまざまなプレゼンテーションオプションのトンを許可することができるようにしたい場合は、あなたのような何かを行うことをお勧めします非常にセマンティックなカスタマイズ可能な方法で。それにもかかわらず、どのブラウザでもあなたのフォーマットを理解できるはずです（あなたが指摘したように、適切なCSSを使用してください）。

上記のコード例には、XMLと非常によく似ています。あなたのニーズには面倒で過度なことかもしれませんが、はの両方の（X）HTMLの代わりにXSLTを使用してXMLを使用することを指摘したいと思います。こうすることで、タグをできるだけセマンティックにすることができ、HTMLタグの制限に妥協する必要はありません。

w3schoolsのトピックについてはan articleです。 XMLで行われたsun.comのWebページを見たことを誓うことができましたが、もう見つけられません。

これを第三者のソフトウェアによって解釈または解析するつもりがない場合でも、私はこの方法に対してアドバイスし、実績のあるHTMLを守ってください。

Answer 4

<ol> 
    <li class="message" value="1"> 
     <span class="timestamp" id="2009-03-10T12:04:01+00:00"> 
      12:04 
     </span> 
     <cite class="admin"> 
      <address class="email"> 
       <a href="mailto:ross@email.com"> 
        Ross 
       </a> 
      </address> 
     </cite> 
     Lorem ipsum dolor sit amet. 
    </li> 
</ol> 

私は上記のようなものを試します。通知順序付けされたリストに合うようにコメントを解釈できるので、すべてを順序付きリストに配置しました。また、Citeタグの中にAnchor要素を持つAddressタグを埋め込んでいます。残念なことに名前の付いたAddress要素は、実際に著者の連絡先情報を伝えることを意図しているので、おそらく著者の電子メールアドレスにリンクしたいと思うでしょう。

Answer 5

質問でmicroformatsについて言及しているので、間違いなくmicroformats wikiに詳しいことは間違いありません。これは、さまざまな状況のための数多くの例を含んでいます。

もう1つの可能性は、SIOCの部分を借りることです。フォーラムのオントロジはチャットとよく似ています。

既存の形式を再利用することで、Operatorのようなプラグインやツールを利用してアプリを自由に活用することができます。

Answer 6

セマンティックHTMLの場合、HTML5は、<cite>要素の使用がもう正しいとは考えていません。

人の名前は、人がその人を仕事の一部と呼んでも、その人の名前はマークされていないため、その要素をマークアップする必要がありません。

Answer 7

データを変換（スタイル付け）するためにXSLTでXMLを使用します。

意味的には意味がありますが、アーカイブに適した形式の会話（XMLなど）もあります。何らかのログや履歴があると想定しています。

Answer 8

@bobinceと同じように、id="2009-03-10T12:04:01+00:00"は無効です。

あなたはこれを変更する必要があります。これに

<span class="timestamp" id="2009-03-10T12:04:01+00:00"> 
    12:04 
</span> 

：

timeタグに：あなたはHTML5 DoctorとW3Cでtimeタグに関するより多くの情報を得ることができます

<time class="timestamp" datetime="2009-03-10T12:04:01+00:00"> 
    12:04 
</time> 

HTML5は、日付とtを明白にエンコードするための新しい要素を提供します人間が判読可能な方法でそれらを表示しながら、マシンのためのイメージを表示します。

time要素は、24時間制の時刻、または、予防接種グレゴリオ暦の正確な日付を表し、必要に応じて時刻とタイムゾーンオフセットを表します。

...

私はちょうど掲示時間タグと間違ったaddresscite内部タグによる場合を除いて、@Robotsuにより投稿（ol）ソリューション順序付きリストに同意します！