Search code examples
htmlchatsemantic-markup

Semantically mark up a chat

I'm beginner in HTML and I'm looking for a semantically correct way to mark up the author's nickname, author's picture and his message in a chat.

The chat has this shape:

Solution

  • WHATWG's living standard says:

    This specification does not define a specific element for marking up conversations, meeting minutes, chat transcripts, dialogues in screenplays, instant message logs, and other situations where different players take turns in discourse.

    Instead, 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.

    which, ugh, well, but there you go. You could see if there's a suitable microdata format and ARIA annotations, though.