In this webpage we present a method of publishing HTML-text that anyone can refer to ANY PART of it, with also an automatically created expandable table-of-contents for easy reading. ¶
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:
idProposal, 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.
¶
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 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 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 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.
¶
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.
¶
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. ¶
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.
SNA2008.html is an example with an index.
¶
We can have a simple versioning paradigm with static pages by setting the date on its file name. 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. ¶
The site presents many examples with our proposal. Reading their code is the best way to understand what really we are proposing. ¶
UN-SNA-2008:
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.(http://unstats.un.org/unsd/nationalaccount/sna.asp)
¶