ИМО, это на самом деле табличные данные. Первый столбец - динамик, второй столбец - текст.

Однако, если вы хотите быть модным и агрессивно избегать столов, я считаю, что то, что веб-знатоки диктуют в этом сезоне, согласуется с такой структурой:

<div class = "play">
  <div class = "line">
    <div class = "speaker">Jeff</div>
    <div class = "text">This sure is a nice website we've got now. </div>
  </div>
  <div class = "line">
    <div class = "speaker">Joel</div>
    <div class = "text">It certainly is. By the way, working at FogCreek rocks.</div>
  </div>
</div>

Затем вы контролируете, как это будет выглядеть, с помощью соответствующего CSS.

Если похоже, что вы в основном пишете XML и используете CSS, чтобы указать, как он выглядит, ну, это потому, что веб-знатоки считают, что вы должны делать это, AFAICT.

Я бы использовал заголовки и абзацы.

Со следующими стилями он будет оформлен так, как вы его представили:

.play h2 {
  float: left;
  clear: left;
  width: 100px;
  margin: 0;
}

.play p {
  margin-left: 100px;
}

<div class = "play">
  <h2>Jeff</h2>
  <p>This sure is a nice website we've got now.</p>

  <h2>Joel</h2>
  <p>It certainly is. By the way, working at FogCreek rocks.</p>

  <h2>Jeff</h2>
  <p>Of course it does. Have you played Rock Band yet? It's<br /> a lot of fun.</p>
</div>

Более правильным (семантически) и короче было бы использование списков определений:

dl {
  overflow: hidden;
}

dl dt {
  float: left;
  width: 30%;
}

dl dd {
  float: left;
  width: 70%;
}

<dl>
  <dt>Jeff</dt>
  <dd>This sure is a nice website we've got now.</dd>
  <dt>Joel</dt>
  <dd>It certainly is. By the way, working at FogCreek rocks.</dd>
  <dt>Jeff</dt>
  <dd>Of course it does. Have you played Rock Band yet? It's a lot of fun.</dd>
</dl>

Таблицы - это то, что вам нужно.

Все остальное, например возиться с <div> и css или XSLT, - это просто новое изобретение <table>, но с синтаксисом c ** p.

Я бы выбрал три или четыре стойки фиксированной ширины. (Для любой нетривиальной пьесы потребуются сценические постановки, спецэффекты, звуковые эффекты и т. д.).

Я поддерживаю ересь :-)

Всегда полезно рассмотреть CSS, прежде чем прибегать к таблицам, но часто таблицы действительно подходят лучше всего. Похоже так в данном случае.

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

Еще одна вещь - я предполагаю, что сначала вы будете хранить необработанные данные в каком-то другом формате - возможно, в базе данных, XML или другом структурированном тексте?

В любом случае, преобразование его в формат xml и преобразование его в html с помощью xslt может быть весьма полезным, когда дело доходит до игры с этим материалом.

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

Поэтому я предлагаю написать пьесу на чем-то, что лучше всего отражает ваши мысли (не обязательно в XML), а затем преобразовать это в HTML. Для своих работ я использую рекурсивный XML-анализатор, который может выпадать из-за синтаксического анализа XML для определенных элементов:

<content><<Hello,>> Forne smiled and thought: <<T Idiot.>></content>

Мой синтаксический анализатор вызовет собственный синтаксический анализатор для анализа содержимого <content>. В моем случае он создаст промежуточное XML-дерево:

<content><say>Hello,</say> <char>Forne</char> smiled and thought: <think>Idiot.</think></content>

Затем это дерево конвертируется в HTML, TeX, PDF и т. д.

[EDIT] Моя стратегия по созданию компактного языка работает следующим образом: я начинаю с XML. Через некоторое время я смотрю на XML и пытаюсь увидеть закономерности. Затем я думаю, как я мог бы выразить эти шаблоны более компактно: 1.) как XML, 2.) как XML-текст (с настраиваемой разметкой) и 3.) как что-то совершенно другое. Когда мне приходит в голову идея, я пишу парсер для нового формата.

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

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

<div class = "script">
<label for = "Jeff1">Jeff<label>
<div id = "Jeff1">
  <p>This sure is a nice website we've got now.</p>
</div>

<label for = "Joel1">Joel</label>
<div id = "Joel1">
  <p>It certainly is.</p>
  <p>By the way, working at FogCreek rocks.</p>
</div>

<label for = "Jeff2">Jeff</label>
<div id = "Jeff2">
  <p>Of course it does.</p>
  <p>Have you played Rock Band yet? It's a lot of fun.</p>
</div>

</div>

Это довольно красиво деградирует, и я думаю, что этот ярлык немного больше подходит для того, что вы пытаетесь сделать. А затем в вашей таблице стилей я бы сделал что-то вроде примера CSS Эрана Гальперина.

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

Мой любимый пример разметки чего-то подобного - это одно из XHTML-соединений Tantek http://tantek.com/presentations/2005/03/elementsofxhtml/ (проверьте бит разговора)

В итоге это выглядит так:

<ol>
  <li><cite>Jeff</cite>
    <blockquote><p>This sure is a nice website we've got now.</p><blockquote>
  </li>
  <li><cite>Joel</cite>
    <blockquote><p>It certainly is. By the way, working at FogCreek rocks.</p></blockquote>
  </li>
  ...etc...
</ol>

Не уверен, как вы разметите направления этапа и т. Д ... Может быть, вы в конечном итоге создадите новый микроформат :)

Кроме того, в этой разметке есть несколько идеальных хуков CSS с дискретными ссылками, в отличие от списка определений.

я бы сказал

<dialog>
  <dt>Jeff
  <dd>This sure is a nice website we've got now.
  <dt>Joel
  <dd>It certainly is. By the way, working at FogCreek rocks.
  <dt>Jeff
  <dd>Of course it does. Have you played Rock Band yet? It's a lot of fun.
</dialog>

как определено в HTML5.

Конечно, вам понадобится <script>document.createElement('dialog');</script>, чтобы заставить IE делать что-то разумное, и dialog { display:block; } в вашем CSS, чтобы заставить его работать полностью.

Вы не получите однозначного ответа на этот вопрос, поскольку в HTML есть много пробелов, один из которых заключается в следующем: в сети разбросано несколько очень солидных статей по его теме, и хорошее место для начала было бы Статья Брюса Лоусона от 2006 г..

Учитывая, что на этот вопрос нет ответа, лучшее, что мы можем сделать, это посмотреть, какие элементы доступны нам, и пойти на собственный компромисс, основанный на нашей (и сообществе) интерпретации руководящих принципов.

Мне лично нравится cite / blockquote и маршрут списка данных. Я знаю, что списки данных не имеют семантической разметки, но я искренне верю, что цель списков данных состоит не в том, чтобы перечислять определения данных исключительно в словарной манере, а в том, чтобы объединить данные в пары, где ul и ol не могут.

Я потратил много времени на размышления о семантике, и в одном я (как и большинство других специалистов в этой области) уверен, глядя на все вопросы разметки, - это то, что таблицы не являются ответом на 99,9% вопросов разметки ( если это не табличные данные, в которых вы можете использовать th, caption, тогда таблицы действительно следует исключить из вашего инвентаря). Тем не менее, я бы также сказал, что использование исключительно div также, вероятно, не является правильным ответом.

Я очень сомневаюсь, что голоса за этот вопрос будут отражать лучший подход, но, скорее всего, они будут отражать согласие с подходом, основанным на текущих знаниях избирателей и использовании HTML.

В этом случае я бы просто использовал элементы div с хорошими классами, описывающими домен. Вы можете спорить об использовании всех видов элементов HTML, которые дают лучшее семантическое значение намерения, но, например, в случае элемента диалог, то есть нет, предназначенного для написания диалогов между персонажами в пьесе, он, однако, предназначен для представления пользователю диалогового окна для взаимодействия. Но тот факт, что вы можете изменить и стилизовать этот элемент по своему желанию в CSS, - это замечательно, но я бы не рекомендовал это делать.

Причина этого проста в том, что, если вы не будете осторожны, вы переопределите это поведение и внешний вид для каждого такого элемента. Допустим, это интерактивное приложение для драматургов, вы можете захотеть включить диалоговые окна в дополнение к «диалогу» в пьесе.

Предлагаю такое решение:

.character{
  display: block;
  float: left;
}

.line{
  margin-bottom: 20pt;
  width: 400px;
  margin-left: 50pt;
}

Со следующим HTML:

<div class = "character">Jeff</div>
<div class = "line">This sure is a nice website we've got now.</div>
<div class = "character">Joel</div>
<div class = "line"> It certainly is. By the way, working at FogCreek rocks.</div>
<div class = "character">Jeff</div>
<div class = "line">Of course it does. Have you played Rock Band yet? 
  <br/>It's a lot of fun.</div>

Запуск JSFiddle: https://jsfiddle.net/quz9cj2f/6/

Теперь вы можете реализовать стандартное форматирование воспроизведения, которое я взял отсюда: http://ptfaculty.gordonstate.edu/lking/CPF_play_formatting2.pdf

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.direction:before{
  margin-left: 2.75in;
  content: "(";
}
.direction:after{
  content: ")";
}
.line {
  margin-bottom: .3in;
}

С помощью этого HTML:

<div class = "play">
  <div class = "character">Jeff</div>
  <div class = "direction">JEFF is enthusiastic!</div>
  <div class = "line">This sure is a nice website we've got now.</div>
  <div class = "character">Joel</div>
  <div class = "direction">Jumping continuously</div>
  <div class = "line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class = "character">Jeff</div>
  <div class = "line">Of course it does. Have you played Rock Band yet?
    <br/>It's a lot of fun.</div>
</div>

Рабочий JSFiddle: https://jsfiddle.net/quz9cj2f/9/

Или вы можете пойти ва-банк и использовать селекторы атрибутов CSS и создать собственные атрибуты для метаинформации:

.play {
  font-family: courier;
}
.play{
  margin-top: 1in;
  margin-left: 1.5in;
  margin-right: 1in;
  margin-bottom: 1in;
}
.character {
  display: block;
  margin-left: 4in;
  text-transform: uppercase;
}
.line[direction]:before{
  margin-left: 2.75in;
  content: "(" attr(direction) ")";
  display: block;
}

.line {
  margin-bottom: .3in;
}

Теперь вы избавились от лишних элементов и добавили метаинформацию в виде атрибутов - теперь вы можете довольно легко преобразовать ее из какой-то красивой структуры данных из JSON, XML или других форматов обмена в этот:

<div class = "play">
  <div class = "character">Jeff</div>
  <div direction = "Enthusiastic" class = "line">This sure is a nice website we've got now.</div>
  <div class = "character">Joel</div>
  <div direction = "Shaking his head" class = "line"> It certainly is. By the way, working at FogCreek rocks.</div>
  <div class = "character">Jeff</div>
  <div class = "line">Of course it does. Have you played Rock Band yet?
    <br/>It's a lot of fun.</div>
</div>

https://jsfiddle.net/quz9cj2f/11/

Рекомендация HTML 5.2 для разговоры

authors are encouraged to mark up conversations using p elements and punctuation. Authors who need to mark the speaker for styling purposes are encouraged to use span or b. Paragraphs with their text wrapped in the i element can be used for marking up stage directions.

Пример разговора с минимальной разметкой

<article class=stage-script>
  <h1>Water Cooler Talk at FogCreek</h1>

  <p><b>Jeff</b> This sure is a nice website we've got now.

  <p><b>Joel</b> It certainly is. By the way, working at FogCreek rocks.

  <p><b>Jeff</b> Of course it does. Have you played Rock Band yet? It's a lot of fun.

  <p><i>Joel and Jeff walk into the sunset</i>
</article>

CSS для разговора

.stage-script > p > b:first-child {
    display: inline-block;
    width: 5em;
}
.stage-script > p > b:first-child::after {
    content: ':';
}