html5.id.toc.preview format with
HTML5, IDs, Table-of-Contents, Link-preview


HITP (html5.id.toc.preview) is a FORMAT (method) for publishing WEBPAGES (digital-texts | ebooks) with these advantages:
1) html5: no need for special programs to read them, as all machines have the needed browser (= html reader). Also html5-elements structure the text for humans and machines.
2) id: anyone can refer to ANY PART of them, because all their html-elements have IDs.
3) toc: automatically created expandable table-of-contents makes reading easy.
4) preview: same domain link-preview makes reading fast.
Knowledge of html is a prerequisite to read the rest of this page.


• nam.Html5IdTocPreview,
• generic-specific-pair--webpage, {2013.09.01}
• html5.id.toc.preview-webpage,
• html5.id.toc.preview-page,
• html5IdTocPreview-webpage,
• hitp-webpage,
• hitp-webpage-application,
• hitp-web-page,
• hitp-page,
• title-value-pair-webpage,

• nam.hitp,
• wpgHitp,
• hitp,
• hitpwpg,


• hitp'browser,

• Hitp is tested on modern {2016} browsers on win10: Chrome, Firefox, Safari, Edge, IE11.


• hitp'code,

The code it is written in 3 computer-languages, because it is a web application:
html: for the structure of the information,
css: for its presentation,
JavaScript: for its processing.


• hitp'download,

Since version.2014.08.05.10.valuenames I published the code on GitHub.

To use the online files, use the files on the-project-page on GitHub.

• latest: hitp.html, hitp.css, hitp.js.


• hitp'html,
• hitp'code.html,

Html defines the-structure of a-hitp-webpage and stores the-information (the-content).


• hitp'html5,

We use HTML5-elements to create the structure of a hitp-page. Every hitp-page contains an ordered-set of title-value-pairs which are implemented with 1 header, 1 optional footer, and many section html5-elements.
• The header-element is the first body-element with 1 h1-element that serves the title of the document.
• The optional footer-element is the before last element without a heading-element.
• Every section-element includes 1 heading-element and other non heading-elements, mainly p-elements. Also a section-element includes other sections-elements with ordered-headings in the form h1, h2, h3, ... The last section-element has a h1-element with content 'Meta Info'.


• hitp-doc,
• hitp'html-file,
• hitp'file,
• hitp-file,

The body-html-element of this file contains the information we want to publish in a ORDERED-SET of 'TITLE-VALUE-PAIRS'.


• hitp'id,

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

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:
id, 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 is an examples of the simple code we have to add to reach our goal.
<p id="idYyyy">...
  <a class="clsHide" 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 (the-id-link-symbol).
Clicking on this symbol, s|he can see the ID of this text and s|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.
- idA4 (article)
- idA4P2 (paragraph)
- idP2 (Part)
- idP2C2 (Chapter)

NOTATION: the id of a heading is the id of its section-element plus H1, H2, etc.
This way we can link and preview the part of the doc with this heading.

Math formulas

• hitp'math,

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="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.


• hitp'css,
• hitp'code.css,

CSSs separate content from presentation.
We use a css-file for harmonization in the appearance of documents and for the-toc creation.
You need the following code to use it:
<link href="http://your-domain/hitp/hitp.css" rel="stylesheet" type="text/css" />
So, hitp.css and hitp.js is the code needed to create hitp pages, and is free (MIT license).


• hitp'css'class
• hitp'cls,

Like the IDs, the name of all css-class begin with 'cls'.
Below is the code of the classes I am using.

hitpcls.clsCenter {
  text-align: center;

hitpcls.clsCenterBlock {
  display: block;
  margin-left: auto;
  margin-right: auto;

hitpcls.clsCenterInline {
  display: block;
  text-align: center;

hitpcls.clsBtn {
  border-radius: 5px;
  font-size: 12px;
  margin: 2px 0 5px 12px;

hitpcls.clsBtn:hover {
  background: #e0f2f7;
  color: red;

hitpcls.clsColorBlue {
  color: #0000ff;

hitpcls.clsColorGreen {
  color: #008000;

hitpcls.clsColorGreenBg {
  background-color: #008000;

hitpcls.clsColorRed {
  color: #ff0000;

hitpcls.clsColorYellow {
  color: #FFFF00;

hitpcls.clsColorYellowBg {
  background-color: #FFFF00;

hitpcls.clsEditor {
  background: transparent;
  color: #999999;

hitpcls.clsFontGrExt {
  font-family: "Palatino Linotype";

hitpcls.clsFontGrMg {
  font-family: MgPolNewTimes;
  font-size: 16px;

hitpcls.clsFontSerif {
  font-family: Serif, "Times New Roman", Georgia;

hitpcls.clsFontSansserif {
  font-family: SansSerif, "Microsoft Sans Serif", Arial, Dialog, Tahoma;

hitpcls.clsFontMonospaced {
  font-family: Monospaced, "Courier New", Courier;

hitpcls.clsFontScript {
  font-family: Script "Monotype Corsiva";

hitpcls.clsFontDecorative {
  font-family: Wingdings;

hitpcls.clsPagePb {
  display: block;
  text-align: right;
  color: green;

hitpcls.clsHide {
  //misc attributes that hide id-link (¶) and expose it by hovering.

hitpcls.clsSizeSmall {
  font-size: small;

hitpcls.clsSizeSmallX {
  font-size: x-small;

hitpcls.clsSizeMedium {
  font-size: large;

hitpcls.clsSizeLarge {
  font-size: large;
  font-weight: bold;

hitpcls.clsSizeLargeX {
  font-size: x-large;
  font-weight: bold;

hitpcls.clsB {
  font-weight: bold;

hitpcls.clsBU {
  font-weight: bold;
  text-decoration: underline;

hitpcls.clsU {
  text-decoration: underline;


• hitp'css-file,
• hitp'file.css,

You can download this file, or use the online one.


• hitp'js,
• htip'code.JavaScript,
• hitp'code.js,

JavaScript does the information processing on the page.
- creates the-toc and inserts into the page.
- makes the width of toc-container dynamic.
- adds preferences on the page.
- adds the site-structure.
- adds the page-path.
- ...


• hitp'js-file,
• hitp'file.js,

You can download this file, or use the online one.


• hitp'toc,
• hitp'toc-tree,

When you are reading text on a computer screen you are losing your reading-position.
Hitp-webpages automatically create the table-of-contents tree (toc) of the-content of the-page and show your reading-position.
HOW: you need to add the following code inside the head element:
<script src="http://your-domain/hitp/hitp.js"></script>

The attributes of my toc (hitp.js) are:
* It is expandable.
* There is two-way communication between the-toc and the-content.
- By clicking on the-toc, goes to that heading in the-content.
- By clicking|hovering on content, this content position is highlited in the-toc 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-content, the splitbar has a button that closes|opens the-toc with one click.
* The splitter changes width.

My previous approach was the creation of a Chrome extension, my Table-of-contents-crx which creates a toc on any page with headings only in Chrome.

Link preview (popup)

• hitp'link-preview,
• hitp'popup,
• hitp'preview,

Another functionality that facilitates reading is the addition of pop-ups (previews) on interal (same-origin)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 'clsPreview' on the links you want to trigger popups when the reader is hovering over them.
<a class="clsPreview" href="#idPreview">link-preview</a>


• hitp'components,

Every hitp-webpage is comprised of:
• one html-file with the main content,
• one css-file,
• one js-file,
• one optional directory with all other needed files such as pictures, audio, video, css, etc.
The name of the directory is the same with the name of the html-file plus the '.files' extension.

hitp directory

• hitp'dir,

This directory contains all the extra files needed for the hitp-file.
Its name is the name of the hitp-file plus '.files'.


• hitp'pagepath,
• hitp'page-path,

By setting a paragraph with id "idMetaWebpage_path", the program sets its content as the first paragraph in the left toc-container, showing where the page fits in the site's-structure.
NOTE: If the document does not contain this paragraph, the program sets the title-element as page-path.
I put this paragraph as the last paragraph of the meta-info--title-value-pair.


• hitp'page-structure,
• hitp'structure,

The information we want to publish is an ORDERED-SET of 'TITLE-VALUE-PAIRS'.

hitp title-value-pair

• hitp'title-value-pair,
• hitp-title-value-pair,
• title-value-pair,
• hitp'tvp,

The-information (content) of a-hitp-page is structured for humans and machines.
The representation method I use I call it: 'title-value-pair' method.
Its name describes the-methodology.
All content is an-ordered-set of pairs that contain a-hitp-title and a-hitp-value.

A-hitp-title-value-pair is implemented with the section, header or footer html-elements.

The-title-value-pairs of a-page create a-tree-structure.
Then each title-value-pair has a 'depth-level' value in this structure.
The-root has a-depth-level of zero.
The deepest node has a-dept-level of 6 because we use heading-html elements.

PROPOSAL: Because many documents use deeper depth-level than six (even though I do not think it is a good practice) I proposed on 2010.10.24 in public-html-comments@w3.org list to use all the single-digit numbers 0-9 as html headings.

header title-value-pair (required)

• hitp'header,
• hitp'header_pair,

It is the first title-value-pair.
It contains the title of the webpage.

It is a header html-element with parts one h1-element for the title.

0. This node is the ROOT in the tree-structure of the information published.

section title-value-pair (at least one)

• hitp'section,
• hitp'section_pair,

These are the title-value-pairs that contain mainly the published information.

It is a section html-element with parts ONE h-element for the title.
Its value can contains other section-tvps of lesser depth-level in a tree-structure.

It is a number 1, 2, 3, 4, 5, 6 indicating the heading html-element we use for its title AND the depth-level in the tree-structure of the information published.

footer title-value-pair (optional)

• hitp'footer,
• hitp'footer_pair,

It needed sometimes as the last part of the information published.

It is a footer html-element.
EXCEPTION: It may have no hitp-title. Then it is assumed 'Footer'.


meta-info title-value-pair (required)

• hitp'meta,
• hitp'meta_pair,

Usually the last tvp is meta-tvp with metadata about the hitp-webpage.

It is a section html-element.

• the author of the page.
• versioning info.
• page-path info.
• page visited info. etc.



• hitp'title,

A hitp-title is the 'name' (title) of a hitp-value-pair.
Denotes the type of information the hitp-value contains. In other words, the hitp-title is some generic-information and a hitp-value is a specific or instance of the hitp-title.

A hitp-title is implemented as a heading html-element OR as text that ends with ':' in the FIRST line of a paragraph. (IF we set '_' in the begining of a term we can distinguish it from same terms inside 'hitp-values').


• hitp'value,

A hitp-value contains structured (like an html list or table) or unstructured information (like sentences or phrases of a natural-language).
Recursively, it can contains other ordered-sets of title-value-pairs.

The main parts of hitp-values are html-paragraphs.
We can use and any other body-element except headings.
We can use div-elements to create substructures.


• hitp'index,

Html5.id.toc.preview-pages 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.


• hitp'concept-index,
• hitp'index.concept,

Every text describes 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 html5IdTocPreview text with a concept-index is the greek-constitution (in greek).


• hitp'concept-model,
• hitp'modelConcept,

Every text describes concepts and relations of concepts, which form a subjective MODEL (modelConcept) of reality.
More important than the-concept-index is the-modelConcept of the-text.
A crude example of a-modelConcept contains my hitp-page of the Keynes book 'The General Theory of Employment, Interest, and Money'.


• hitp'name-index,
• hitp'index.name,

Β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 a name-index.


• hitp'index.word,
• hitp'word-index,

The majority of programs today search a text for words and NOT names.
By pressing Ctrl+F or F3 you can search for words.


• hitp'license,

This webpage's work is FREE under the creative commons Attribution 3.0 Unported (CC BY 3.0) license.
The computer-code is under the MIT license, you can find it on GitHub.

Problem (issue)

• hitp'issue,
• hitp'problem,

overflow-x:visible, overflow-y:auto {2013.08.23}:
I needed this combination to display the site-menu, but I found that it does not work even in the new flexbox layout.
WORKAROUND: hovering on the menu, it displays only the left navigation container.

:after psudo-element {2013.08.23}:
Inherits properties from its dependent element, like 'underline' which we cannot change.
WORKAROUND: I hide it when I hover the main element, but have other problems.


location.href {2013.08.16}:
In contrast to Chrome, Firefox loses selected-text after setting value on 'location.href'.
WORKAROUND: first click to go to that location and then select-text from this location.

Back-Forward {2013.08.16}:
Clicking on buttons 'back', 'forward' shows the visited locations but does not go to that location.
WORKAROUND: click on the address-bar and hit enter.


• hitp'site-structure,

Every hitp-page, except of presenting its own structure, presents and its site-structure in a pull-down menu.

HOW: You have to add ONCE in the root-directory of the site the file 'hitpmenu.html' with the site-structure in the form of an unordered-html-list.
Of cource, modifying this file, all the hitp-pages will present the changes.


• hitp'example,
• hitp.specific,

This site presents many examples with our proposal.
Actually I'm writing the site with this proposal.
Reading the code of these examples and seeing its behavior, is the best way to understand what really we are proposing.
empty-page to edit on GitHub project page.

EVOLUTION of proposal

• hitp'evolution,
• hitp.evolution,

{version.2016.01.24.12}: Toc-Icons:
I changed the icons of the-toc-tree to images from characters, for compatibility.

{version.2015.10.26.11}: Preferences:
Users now can choose how they prefer to view hitp-pages:
- they can have or not the link-preview characteristic,
- they can see on the table-of-contents the position of the content they are reading by hovering or clicking on that content.

{version.2014.08.05.10}: TYPENAMES | VALUENAMES:
With 'valuename' I mean a NAME (identifier) of a VARIABLE (= a name-value pair), that denotes the VALUE (type) with which it is associated.
Now ALL the custom names of my code are valuenames, with its FIRST-CHARACTER to denote its value|type:
- aName denotes array.
- bName denotes boolean.
- fName denotes function.
- nName denotes number.
- oName denotes object.
- rName denotes regular-expression.
- sName denotes string.
- xName denotes mixed-values.
This method is a SIMPLE method to make JavaScript a type language!!! This way we increase the readability of the source code.
I published my new code, with the MIT license (= do whatever you want, only mention my work), on GitHub at https://github.com/synagonism/hitp.

{version.2014.08.02.9}: NO jQuery:
I rewrote the code, by removing jQuery. Everything now is vanilla JavaScript.
Fixed: preview popup location.

{version.2014.01.09.8}: Table-of-contents:
Hovering a piece of text, you see its position on ToC. To see the address of the text you click on ¶.
With the previous functionality, you had to click on text to see its position.

{version.2013.11.06.7}: Tabs:
The page-structure is set under a tab.

{version.2013.08.21.6}: Site-structure:
Now each hitp-webpage presents and its site-structure except of its own structure.

{version.2013.07.15.5}: ToC Algorithm:
I wrote a new smaller specific algorithm that creates the ToC of a hitp-page.
The previous was the one of html5-outliner-chrome-extension.
Also I enclosed the code in one literal object, the 'HITP'.
I allow gaps in headings like: h1, h2, h4 because existing docs use this pattern.

{version.2013.06.27.4}: Name:
I change the name of the proposal from html5.id.toc to html5.id.toc.preview (= html5IdTocPreview)
in order to include all its main attributes.
Abbreviation: ebkHitp, hitp.

{version.2013.04.14.3}: Link Preview:
HTML5.ID.TOC.PREVIEW: Another feature that facilitates reading-productivity.

{version.2013.04.01.2}: 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'.

{version.2011.02.17.1}: 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.


• hitp'versioning,

We can have a simple versioning paradigm on hitp-pages by setting the date on its file-name plus one or more numbers indicating how many times changes have occured, ie 'index.2013.05.15.3.html' (= version 3 of index.html on 2013.05.15).
Having and a file with only the file-name 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 you are reading.
Evolution is a continuous entity.
Every author 'subjectively' desides when to call a page 'version'.
The last version can hold and minor changes we do not think important to hold records on them.

Meta Info

• version.15.last.minor: index.html (2016.
• version.15.last.minorNo: index.2016.01.25.15.html (content)
• version.14.previous: index.2013.08.23.14.html (site-structure)
• version.13.previous: index.2013.08.20.13.html (name webpage)
• version.12.previous: index.2013.06.29.12.html (new-dir-hitp)
• version.11.previous: /hit/index.2013.06.26.html (new-name)
• version.10.previous: /hit/index.2013.06.18.html (no-doc.ready)
• version.9.previous: /hit/index.2013.06.01.html (synagonism.net)
• version.8.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.05.29.html (concept-index)
• version.7.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.05.15.html (math)
• version.6.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.04.14.html (link-preview)
• version.5.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.04.01.html (toc)
• version.4.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.03.31.html (counter)
• version.3.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.03.28.html (¶ right)
• version.2.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.01.16.html
• version.1.published: /gym-eleous.ioa.sch.gr/textid/index.2011.02.17.html
• Created: 2011.02.15

This page was visited times since 2013.05.30.

Page-path: hitp-webpage ∈ synagonism.net



comments powered by Disqus