Cách ngữ nghĩa nhất để đánh dấu một cuộc trò chuyện (hoặc phỏng vấn)?

Question

Tôi đang cố gắng tìm ra cách ngữ nghĩa nhất để đánh dấu một cái gì đó như thế này.

John: blah blah 
Paul: blah blah 
George: blah blah 
Ringo: blah blah 

hoặc

John: blah blah 
Paul: blah blah 
George: blah blah 
Ringo: blah blah 

Lý tưởng nhất là có muốn được CSS linh hoạt để làm một trong hai hoặc để phá vỡ nó thành một đoạn văn có hoặc không có những cái tên có thể nhìn thấy. Tôi đã xem xét sử dụng bộ chọn before: để thêm tên nhưng tôi cũng muốn chúng có thể liên kết được. Ví dụ, tôi muốn liên kết với hồ sơ twitter của Ringo nếu anh ta có một. Nó cũng nên đọc đúng trong screenreaders.

Answer 1

HTML5 đặc tả discusses this, các ý chính trong số đó là:

Các tác giả được khuyến khích để đánh dấu cuộc hội thoại bằng p các yếu tố và dấu chấm câu. Các tác giả cần đánh dấu loa cho mục đích tạo kiểu tóc được khuyến khích sử dụng span hoặc b. Các đoạn văn bản của chúng được bọc trong phần tử i có thể được sử dụng để đánh dấu các hướng của giai đoạn.

Vì vậy, cuối cùng, một cái gì đó như thế này:

<p><span>John:</span> blah blah</p> 

<p><span>Paul:</span> blah blah</p> 

<p><span>George:</span> blah blah</p> 

<p><span>Ringo:</span> blah blah</p> 

này sẽ cho phép phong cách theo cách bạn mô tả. Bạn có thể, tất nhiên, cũng thêm các thuộc tính class nếu cần thiết. Bản năng của bạn không được đặt tên trong CSS với bộ chọn :before là một công cụ tốt - thông tin này chắc chắn phải nằm trong đánh dấu.

Answer 2

hm.

Mẹo - sử dụng xml để đánh dấu. Nên làm cho nó dễ dàng hơn để làm việc với sau

cái gì đó như <voice speaker="John"></voice>

lẽ