Семантический 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 и т. Д. Я подумал, что было бы глупо (и неправильно) использовать blockquote для каждого сообщения, хотя я * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * верните cite правильно, поскольку оно относится к пользователю, опубликовавшему сообщение.

Я знаю, что это не а) точная наука и б) совершенно существенная, но я бы предпочел использовать значимые элементы, а не span s повсюду. Есть ли другие элементы, которые я должен рассмотреть? Какие-нибудь микроформаты?

Answer 1

HTML не очень семантический в настраиваемом виде. Тем не менее, ваш формат должен быть понятен в любом браузере (с надлежащим CSS, как вы указали).

То, что я вижу в приведенном выше примере кода, очень похоже на XML. Это может быть громоздким и излишним для ваших нужд, но я хотел бы отметить, что вы можете использовать XML с XSLT вместо обоих (X) HTML. Таким образом, вы можете получить ваши теги как можно более семантическими, и вам не нужно идти на компромисс с ограничениями HTML-тегов.

В w3schools есть статья на эту тему. Я могу поклясться, что видел веб-страницу в sun.com, которая была сделана в XML, но я больше не могу ее найти.

Если вы не хотите, чтобы это интерпретировалось или анализировалось сторонним программным обеспечением, я, тем не менее, рекомендовал бы не использовать этот метод и придерживался проверенного HTML.

Answer 2

Если вы собираетесь использовать семантический HTML, вы, вероятно, захотите знать, что HTML5 больше не считает правильным использование элемента <cite>.

Имя человека не является названием произведения - даже если люди называют этого человека частью работы - и поэтому элемент не должен использоваться для разметки имен людей.

Answer 3

Мне кажется разумным, за исключением того, что "id" недействителен. Жетоны NAME не могут начинаться с цифры или содержать «+».

Плюс, если бы два человека говорили одновременно, у вас были бы неуникальные идентификаторы. Возможно, эти данные должны идти в другом атрибуте, например, в «заголовке» (чтобы вы могли навести курсор на точное время).

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 тег Address с элементом Anchor. К сожалению, названный элемент Address на самом деле предназначен для передачи контактной информации для автора, поэтому вы, вероятно, захотите указать ссылку на электронный адрес автора там.

Answer 5

Как сказал @bobince, id="2009-03-10T12:04:01+00:00" недействителен.

Вы должны изменить это:

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

К этому:

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

Более подробную информацию о теге time можно получить по адресу HTML5 Doctor и W3C :

Тег time в HTML5 предлагает новый элемент для однозначного кодирования даты и времени для машин, при этом отображая их понятным для человека способом.

Элемент time представляет собой либо время на 24-часовых часах, либо точную дату в григорианском календаре, возможно, со временем и смещением часового пояса.

...

Я согласен с решением для упорядоченного списка (ol), опубликованным @Robotsu, за исключением только что опубликованного тега времени и неверного address внутри тега cite!

Answer 6

Я бы использовал XML с XSLT для преобразования (стиля) данных.

Это имеет смысл семантически здесь, но у вас также есть разговоры в подходящем формате для архивирования (т.е. XML) - я предполагаю, что у вас будет какой-то журнал или «история».

Answer 7

Поскольку вы упоминаете микроформаты в вопросе, вы, несомненно, уже знакомы с микроформатами wiki . Содержит множество примеров для разных ситуаций.

Другой возможностью было бы заимствовать части SIOC , который среди прочего является онтологией для форумов - очень похож на чат.

Повторно используя существующие форматы, вы можете воспользоваться плагинами и инструментами, такими как Operator и, возможно, получить больше от вашего приложения бесплатно.

Answer 8

То, что вы предложили, уже очень хорошо. Если вы хотите сделать еще один шаг вперед и иметь возможность использовать множество вариантов презентации с одинаковой разметкой (за счет более тяжелого html), вы можете сделать что-то вроде:

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