Markup for sociality.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Markup for sociality.


There are currently two markup types supported by SocietML: FB and MSG. To create a SocietML element, simply set the data-societml-type attribute to either fb or msg (case-insensitive) on a normal HTML element. This element will henceforth be referred to as the "parent element"; we recommend using <blockquote>.

Each markup type has its own syntax:


Type-FB represents a longform social-media post. The only permitted child nodes of a type-FB parent are text nodes and <a> elements.

There are several attributes that you should use to provide additional information. Set these on the root element:

  • data-societml-img gives the location of a profile picture for the post.
  • data-societml-name describes the author of the post. If not set, it defaults to "A Friend".
  • data-societml-namesrc sets the link to the author's profile page.
  • data-societml-via tells where the post came from.
  • data-societml-viasrc sets the link to the "via" page.
  • data-societml-datetime gives the date and time of the post. This should follow the syntax of the datetime attribute of the <time> element.

Line-breaks inside text nodes are preserved, and double-line-breaks create new paragraphs.

You can optionally include a link with a picture or preview information by setting data-societml-img and/or data-societml-title on an <a> element. If data-societml-title is set, a description may be added in the element's contents and an author may be included with data-societml-author. If no data-societml-title is set, this information is ignored and only the picture is displayed. Only one link can be given a preview per type-FB post.

Here is a sample type-FB SocietML element:

<blockquote data-societml-type="fb" data-societml-name="Concerned Friend" data-societml-img="" data-societml-datetime="2015-07-23T17:00:00-0700">
    Here's some text, and then a link: <a href=""></a>. That's all the formatting you can do with type-FB.
    Line-breaks are preserved.

    Two or more line-breaks produce a new paragraph.
    <a href="" data-societml-title="example title" data-societml-author="example author">
        Here is the preview content for the link.


Type-MSG represents messaging; for example in a text-message or chatroom setting. The only permitted child nodes of a type-MSG parent are <p> elements. The data-societml-name attribute represents the person talking; each person should be represented by exactly one data-societml-name attribute.

On the first <p> element with a given data-societml-name attribute, a few additional parameters may be set: data-societml-bg and data-societml-text. These associate background and text colours with the name in question. These can only be set the first time a name appears, and cannot be changed later.

The data-societml-datetime element can assign a date and/or time to each message. This should follow the syntax of the datetime attribute of the <time> element.

You can start a message with /me to write the message in first-person; give it a try!

Here is a sample type-MSG SocietML element:

<blockquote data-societml-type="msg">
    <p data-societml-name="Person 1" data-societml-bg="#E6E5EB" data-societml-text="black">Hey what's up?</p>
    <p data-societml-name="Person 2" data-societml-bg="#1289FD" data-societml-text="white">Not much yo.</p>
    <p data-societml-name="Person 1">Only specify data-societml-bg and data-societml-text the first time someone's name comes up.</p>
    <p>If data-societml-name is omitted it defaults to the previous one.</p>


The societml.js file contains a script to render SocietML elements. Load this script after the DOM content for the page has been loaded and it will process the page, rendering all SocietML markup.