Bible Markup Pattern: A Proposal
(Also published at Godbit.)
What is the best way to mark up text from the Bible? I’ve been thinking about this question for more than a year, and in that time I have sought an answer, or at least a proposal.
If you’re impatient, here are the examples: Exodus 20, Psalm 23, Matthew 5, and Matthew 6:5–15.
Caveats
Please remember this article presents only a proposal for consideration. I am no theologian; nor am I a renowned expert on front-end code. Nor does every page of every site I’ve ever built have “best” markup, however I do make every effort to do so.
However, it seems to me that–of all texts in the world–it should be important to make an effort toward best practices in marking up the Bible.
Of course, I welcome corrections and commentary, any thoughts or additions.
Background
Some good work has been done on citation of online Bible quotes, including BibleRef and OpenBible.info. There are even some Wordpress plugins for BibleRef.
Bibleref is a simple approach to automatically identifying Bible references [in] web pages.
I use and recommend BibleRef, which is a foundational proposal that focuses directly on the citation, for example: <cite class="bibleref">2 Tim 3:16</cite>. All of the present examples use the BibleRef citation format.
But I wanted something more comprehensive, that would help with marking up entire biblical texts or even a whole Bible.
Bibleref is part of a general movement toward markup that expresses more semantic, rather than presentational, element.
So, my question is broader than citation format: what elements should we use,
as best practice?
What’s “Best”?
When considering what may be a “best” way to mark up the Bible, several requirements or principles come to mind.
First, it means using (X)HTML in a way that is valid, minimal, and semantic. In this case, the term “valid” means essentially “meeting the requirements set by the W3C of the specification selected by the Doctype of that document.”
“Minimal” refers to adding as few elements and attributes as reasonably possible to the text itself, while preserving its structure.
And for purposes of this article, “semantic” means a few things: using meaningful elements that match each portion of the text, and communicate its functional meaning. In other words, if some text is a primary heading, use an <h1> (heading) element; if it’s a paragraph, use a <p> (paragraph) element; if a block quote, use a <blockquote> element, etc.
The word “semantic” also mandates general web standards principles, including:
- no tables for layout,
- avoid inline styles,
- avoid frames,
- avoid numerous
<div>and<span>elements (especially those with class attributes that mimic other elements, like headings and paragraphs), - don’t require JavaScript or Flash.
CMS – Friendly
Another principle for my project is to recognize the ubiquity of the content management system. Most current content on the web is no longer in static web pages; rather, it is stored in a database and presented dynamically when someone asks for it.
So, the four examples I’ve prepared are all marked up using the excellent Textile syntax, the “humane Web text generator”.
Not a Microformat
I support and use Microformats, but it should be noted that this Bible markup pattern is not a Microformat, and for various reasons it probably never will be.
Current Practice
I did some research on how some publishers and versions are presented on the web, basically by looking at as many of these four examples in the four versions that were available on these five sites: Bible Gateway, English Standard Version, eBible, YouVersion, and WEB Bible.
The markup was about what you might expect from large sites with big content management systems. With very few exceptions, the markup of the pages were all invalid, not minimal, and not semantic.
However, they all at least declared a Doctype, and compared to many enormous commercial sites, most of the markup was rather clean. In fact, almost all used heading elements well, and used some arrangement of mainly paragraph elements with some class attributes. Depending on the content management system, my impression is that much of this Bible text markup could be much improved without undue effort.
Thing One, and Thing Two
Some informal study indicates there seem to be two basic semantic types or “genres” of biblical text.
The first type can be categorized as prose, and includes paragraphs, lists, and block quotes. The second type may be called verse, which includes poems, songs, and other lyrical matter.
I realize this may be gross over-simplification, but when constructing any taxonomy there is a tension in selecting the number of categories. In this case, I propose simply two categories, which adds semantic richness while being simple enough for this introductory article.
The two main genres in the Bible are narrative and poetry.
– Editors’ Preface to the ESV Literary Study Bible
Even a simple two-category taxonomy can yield powerful results: pick up a Bible and compare Genesis to Psalms, which contain mostly prose and verse respectively. It’s obvious they are presented differently, and this basic presentational character can be preserved in the markup.
Examples
As examples of this proposed Bible markup pattern, it seemed appropriate to use passages from both Old and New Testaments, including prose, block quotes, and verse.
I selected four texts as examples, which are posted on my blog: Exodus 20, Psalm 23, Matthew 5, and Matthew 6:5–15. These passages are also known as the Ten Commandments, the Beatitudes, the Lord’s Prayer, and … the Twenty-Third Psalm.
Each example is presented in a different version: Exodus 20 in the NIV, Psalm 23 in the ESV, Matthew 5 in the WEB, and Matthew 6:5–15 in the KJV.
Overview: The Method
- Bible: The first step is simple: a container element, such as a
<div>, gets a class attribute of “bible”.
- Headings: The second step is also easy: Headings use heading elements, such as
<h2>,<h3>, etc.
- Paragraphs: Put almost everything else in a paragraph.
- Block quotes: surround one or more paragraphs of a block quote in with
<blockquote>and</blockquote>tags.
- Verse numbers and Footnotes: At first, I thought it would be clever to use ordered lists for the verse numbers, but that only works if everyone begins all their Bible quotations from the beginning of a chapter. So, verse numbers are
<sup>elements. Similarly, footnote reference numbers are</sup><sup>elements with a class attribute of “footnote”.
- Verse, Poetry, etc.: As between “prose” and “verse,” I chose to make “prose” the default. If some or all of a passage is verse, then enclose that text with an element (such as a
<span>) with a class attribute of “verse”.
- Additional: There are a few additional aspects, including
divelements to enclose multi-paragraph “stanzas” of verse (see Psalm 23), and the markup of the footnotes.
The Styles
For ease of reference, the Bible style information is embedded in the head of the examples, so you can simply view the page source.
In actual use, they should be included in a separate CSS file with the other styles for that page. A sample CSS file of the Bible styles is available for download.
The Future
Some thoughts for the future:
- How to markup Selah or a closing Amen? Perhaps
class="affirmation"? - Initial caps for the chapter number, superseding the verse number of the first verse of that chapter?
- Perhaps a print stylesheet, for selecting a slightly different font stack, or sizing the printed text in points.
- And the one I’m almost afraid to ask, what about
class="wordsofchrist"?
Let the discussion begin….
This article is © Montgomery 2008. Some rights released with a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.