메시지 용 시맨틱 HTML

Question

작은 웹 채팅 유틸리티를 만들고 메시지에 사용할 요소에 대한 조언을 찾고 있습니다. 여기

내가 지금 사용 생각하고 무엇을 : 나는 타임 스탬프 주위에 괄호를 추가하려면 여기를 CSS를 활용 것

<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> 

등 cite D 사용자를위한 아이콘 나는 그것을 거라 생각 각각의 메시지에 대해 을 사용하는 것은 어리 석다. (그리고 부정확하다.) 나는 메시지를 게시 한 사용자를 가리키는 것으로서 cite이 맞다고 생각한다.

나는 이것이 정확한 과학이 아니며 완전히 필수적이지만 나는 전체적으로 span이라는 의미있는 요소를 사용하는 것을 선호한다고 생각합니다. 고려해야 할 다른 요소가 있습니까? 모든 마이크로 포맷?

Answer 1

"id"가 유효하지 않은 것을 제외하고 나에게 합리적이라고 생각됩니다. NAME 토큰은 숫자로 시작하거나 '+'를 포함 할 수 없습니다.

두 사람이 한 번에 말하면 고유하지 않은 ID를 갖게됩니다. 아마도 해당 데이터는 '제목'과 같은 다른 속성으로 이동해야합니다 (정확한 타임 스탬프를 보려면 마우스를 올려 놓을 수 있습니다).

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입니다. sun.com에 XML로 된 웹 페이지를 보았지만 더 이상 찾을 수 없다고 맹세했습니다.

타사 소프트웨어에서 해석하거나 구문 분석하지 않으려는 경우에도이 방법에 대해 조언하고 입증 된 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을 잘 알고있을 것입니다. 그것은 다른 상황에 대한 좋은 예제를 포함합니다.

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는 날짜와 시각을 명확하게 인코딩하기위한 새로운 요소를 제공합니다. 사람이 읽을 수있는 방식으로 여전히 그들을 표시하면서 기계에 대한 imes.

time 요소는 24 시간 시계의 시간 또는 선택적으로 그레고리력의 정확한 날짜를 나타내고 선택적으로 시간과 시간대 오프셋을 나타냅니다.

... 내가 정렬 된 목록에 동의

은 (ol) 솔루션은 그냥 게시 된 시간 태그와 cite 태그 내부의 잘못된 address 제외하고, @Robotsu에 의해 게시!