1 of 11

UK Legislation in HTML5

using the Akoma Ntoso data model

2 of 11

Original idea

to represent an Akoma Ntoso document in HTML rather than XML

3 of 11

Main principles

  • mimic the structure of the Akoma Ntoso XML whenever possible, but
  • always use the native HTML elements properly, and
  • achieve correct presentation in a browser using only CSS

4 of 11

Simple examples

  • Akoma Ntoso elements are mapped to semantically equivalent HTML elements whenever possible,
    • <quotedStructure> to <blockquote>
  • but a one-to-one mapping is not always possible.
    • citations in HTML require two elements: <cite><a href="...">...</a></cite>

5 of 11

HTML semantic elements used

article

section

ol, ul

blockquote, q

img, figure

table

​

math

time (for dates)

sup, b, i, etc.

abbr

cite

ins, del (for amendments)

​

6 of 11

<article> and <section>

<article> represents a complete, or self-contained, composition ... that is, in principle, independently distributable or reusable *

​

<section> represents a generic section of a document … a thematic grouping of content, typically with a heading *

​

<section>s can be nested, with <h2> headings

  • or <h3>, <h4> so long as they’re the same *

7 of 11

More about <section>

  • We use it for parts, chapters, cross-headings, sections and subsections, but not for paragraphs or subparagraphs.
  • Akoma Ntoso does not distinguish between hierarchical groupings above and below the section level,
  • but the HTML specification says the <section> element is for “a thematic grouping of content”, so it may be inappropriate below the subsection level.

8 of 11

Section structure

Akoma Ntoso

​

<section>

<num/>

<heading/>

<intro/>

<subsection/>

<subsection/>

<wrapUp/>

</section>

​

​

HTML5

​

<section class="section">

<h2>

<span class="num"></span>

<span class="heading"></span>

</h2>

<div class="intro"></div>

<section class="subsection"></section>

<div class="wrapUp"></div>

</section>

9 of 11

A sample document

All documents on leg.gov.uk are available in HTML with data.html extension

​

For example, the European Union (Withdrawal Agreement) Act 2020 is available at http://www.legislation.gov.uk/ukpga/2020/1/enacted/data.html

​

Corrected version available at https://storage.googleapis.com/akn2html/ukpga_2020_1_enacted.html

​

Validation at https://validator.w3.org/nu/?doc=https%3A%2F%2Fstorage.googleapis.com%2Fakn2html%2Fukpga_2020_1_enacted.html

10 of 11

Recognizable structure

The structure of legislation should be recognizable to general purpose HTML tools.

​

For example: https://gsnedders.html5.org/outliner/

​

https://gsnedders.html5.org/outliner/process.py?url=https%3A%2F%2Fstorage.googleapis.com%2Fakn2html%2Fukpga_2020_1_enacted.html

11 of 11

Metadata