digital-book (text)
HTML5, IDs, Table-of-Contents, Link-preview

In this webpage we present a method of publishing HTML-TEXT (FREE | unprotected DIGITAL-BOOKS | ebooks) with these advantages:
1) no need for special programs to read it. All machines have the needed browser (= html reader).
2) anyone can refer to ANY PART of it, because all html-elements have IDs.
3) automatically created expandable table-of-contents makes reading easy.
4) link-preview makes reading fast.

The Proposal

The IDs

The core concept of our proposal is the addition of ID attributes on all elements of an HTML text.
For example:
<h1 id="idXxxx">...
<p id="idYyyy">...

That's all. Now we can refer to any part of the document!!!

The IDs must be unique.
You can use as ID whatever you want. We sugest to begin with "id" in order to be distinguished from other words in the text and do not contain spaces. For example:
idProp, idHeader, idIndex-income, ...

The IDs must be visible to the reader.
The reader, in order to refer to any part of the document, must know the ID of this part of the file. This can be done by adding a hidden element in this part of the file that will be visible when the mouse is over this text. But if this hidden-element is and a link-element, then the reader could copy the address of this part of the file from the address-bar of his browser. Here are some examples of the simple code we have to add to reach our goal.
<h1 id="idXxxx">...
  <a class="hide" href="#idXxxx">¶</a></h1>

<p id="idYyyy">...
  <a class="hide" href="#idYyyy">¶</a></p>

With this code, when the reader has the mouse over an HTML-element (a part text), at the end appears the ¶ symbol. Putting the mouse over this symbol, s|he can see the ID of this text and clicking on this symbol he can copy from the address-bar the address of this particular part of the text. The paragraph you are reading now has the feature we are talking about and you can experiment with it.
NEW {2013.04.04}: By clicking on a heading|paragraph goes to that element and the reader sees the address. This is done with javascript code. We could have and the "manual" way with the ¶ symbol in case the code does not work in old browsers and also with the apperance of the this symbol the reader understands the functionality of the html-element.

ID Patterns.
If the author of a doc uses patterns to write the IDs of a text-file, it helps the reader to quickly identifies the parts of the file. Example:
- idA4 (article)
- idA4P2 (paragraph)
- idP2 (Part)
- idP2T1 (Title)
- idP2T1C2 (Chapter)
- idP2T1C2S2 (Section)

The Table-of-Contents

The next important feature an HTML-text must have is heading-elements that correctly represent the structure of the text.
Using javascript, today browsers can automatically create the table-of-contents (toc) of the text which facilitates navigating and understanding the text. You have 2 choices: to use the code of this page that creates the toc on any browser OR to use specific plugins of specific browsers that do the job.

a) ToC on ANY browser: you need to add the following code inside the head element:
<script src=""></script>
<script src="hit.js"></script>

Also you must add the hit.js file in your directory or link it from this site.
The advantages of my toc are:
* It is expandable.
* There is two-way communication between the toc and the text.
- By clicking on the toc, goes to that heading and the user can copy the address of any section of an article.
- By clicking on a the text, in the toc is highlited this section and its parents are only expanded, giving to the reader the big picture of the position s|he is reading. Thus the toc improves the readability of big articles.
* If the user needs more space for the text, the splitbar has a button that closes|opens the toc with one click.
* The splitter changes width.
* By setting the "page-path" paragraph, as in this file at the end of the text, the javascript-code displays it at the begining of the toc. Thus the reader has always visible the position of the file in the structure of the site.
NOTE: the javascript code is FREE under the LGPLv3 license. I don't feel a js expert, I'm interesting in functionality. Please report improvements in the code.

b) ToC on SPECIFIC browser: I know these plugins:
* In Chrome, my TableOfContents extension.
* In Firefox, the HeadingsMap add-on.


HTML5 (not yet a final standard) introduced the <section> element. We are using it because shows more clearly the structure of text than the heading-elements alone.
NOTE: The proposed text-format works well AND without the section element. See this file without the section element.


CSSs separate content from presentation. We use a css-file for harmonization in the appearance of documents and for the toc creation.
You must have this file (together with toc.js) in your directory or link to it.

The Index

HTML5.ID.ToC-files (what we are proposing here) improve the functionality of the indexes of text-files because we have the capability to refer|link, from the index, to any part of the text (because we use IDs) and preview these parts.

Concept Index

Every text describes relations of CONCEPTS.
We can create the concept-index of every text, which is another method to represent the SAME information with the text.
With a concept-index the READER can have direct access to the concept s|he is interesting and from there to any RELATED other concept.
If a concept-entry has the definition and the related attributes of the concept, the reader will understand quickly the text.
An example of html5IdToc text with a concept-index is the greek-constitution (in greek).

Name Index

Βy setting as ID on each name|term-entry the pattern "idIndex-term", the reader will have very quick access to the entries.
un.sna.2008.html is an example with an index.

Link preview (popup)

Another functionality that facilitates reading is the addition of pop-ups (previews) on interal links with destination relatively small chunks of text. This is espacially usefull for footnotes, abbreviations, definitions, index items, paragraphs etc.
HOW: you only have to add the class 'popupTrigger' on the links you want to trigger popups when the reader is hovering over them.


By setting a paragraph with id "idMetaWebpage_path", the program sets its content as the first paragraph of the left splitter pane.
NOTE: If the document does not contain this paragraph, the program sets the title-element as page-path. I set this paragraph as the last paragraph of the document.


We can have a simple versioning paradigm with static pages by setting the date on its file name ie 'index.2013.05.15.html'. Having and a file without date but with the LAST version we can always have access to the last version. From internal links we can have access to previous dated versions. As example look this file.

Math formulas

Using MathJax we can have "beautiful math in all browsers". For example: x = b ± b 2 4 a c 2 a
1. we need to add the following code inside the head element:
<script src=""></script> and
2. create the math-code. An easy method is from the online site ShareMath.

The Examples

The site presents many examples with our proposal. Reading their code is the best way to understand what really we are proposing.


At the "Meta Info" section may exist the option to dowload the text in a zipped file. Unzip the file in a directory you want. Then double click the html file.
The exist in an html file and a directory with all other, IF needed, files such as pictures, audio, video. Also you need an internet connection to access javascript and css as described above. Of course you can dowload these online files once and then you can read the texts offline.

Evolution of proposal

{2013.04.14}: Link Preview:
Another feature that facilitates reading-productivity.

{2013.04.01}: Table of Contents:
HTML5.ID.ToC: Adding a few lines of javascript code the static-pages are becoming dynamic ('applications!') but this facilitates reading. This way the 'electronic-text' begins to have more advantantages than 'printed-text'. Other forms of 'electronic-text' which merely digitize printed-text are inferior to 'printed-text'.

{2011.02.17}: first publication:
HTML5-ID: the goal of my first try was to show a simple method of a text-format we can read in a ubiquitous web-browser that anyone can REFER to any part of it. The main types of texts I had in my mind were law-texts.


This webpage's work is FREE under
the creative commons
Attribution 3.0 Unported (CC BY 3.0) license.

Examples: Books

Keynes. 1936. The General Theory of Employment, Interest, and Money:
The classic book with footnote-preview.

Examples: Law-Text

see law-page.

Examples: Standards-Text


The System of National Accounts (SNA) is the internationally agreed standard set of recommendations on how to compile measures of economic activity. The SNA describes a coherent, consistent and integrated set of macroeconomic accounts in the context of a set of internationally agreed concepts, definitions, classifications and accounting rules.(
This example is a very big text with about 6,500 paragraphs and 1,700 headings and a big index with link-preview.

IFRS for SMEs 2009:


Meta Info

• version.last: index.html (minor 2013.06.18)
• version.this: index.2013.06.18.html (last no-doc.ready)
• version.previous: index.2013.06.01.html (
• version.previous: ( index.2013.05.29.html (concept-index)
• version.previous: ( index.2013.05.15.html (math)
• version.previous: ( index.2013.04.14.html (link-preview)
• version.previous: ( index.2013.04.01.html (toc)
• version.previous: ( index.2013.03.31.html (counter)
• version.previous: ( index.2013.03.28.html (¶ right)
• version.previous: ( index.2013.01.16.html
• version.published: ( index.2011.02.17.html
• Created: 2011.02.15

This page was visited times since 2013.05.30.

Page-path: text-format ∈