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>
or
<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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> <script src="toc.js"></script> <script> $(document).ready(function() { funTocMake_toc(); }); </script>
Also you must add the toc.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 ¶

HTML5 (not yet a final standard) introduced the <section> element. We are using it because shows more crearly 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. ¶

The CSS ¶

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 Links ¶

By setting IDs in all elements of a text, we can refer to any part of a document. Then we can use links in all places in a text we refer to another place inside a document or outside of it. Law-texts are full of references. Find the references it is difficult and sometimes impossible. If the references are "one click away", then reading law will become easier. ¶

The Index ¶

HTML5.ID.ToC-files (what we are proposing here) improve the functionality of the indexes of text-files.
First, by setting as ID on each index-entry the pattern "idIndex-term", the reader will have very quick access to the entries.
Second, by storing ALL the terms a text uses, the reader will understand the text easier.
Third, by setting the definition and related attributes of the concept of the term, the reader will understand quickly the text.
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. ¶

Page-path ¶

By setting a paragraph with id "idWebpage_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. ¶

Versioning ¶

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 = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$
HOW:
1. we need to add the following code inside the head element:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></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. ¶

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. ¶

License ¶

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

html5.id.toc digital-book (text)
HTML, IDs, Table-of-Contents, Link-preview ¶