annotation dans html

Embedding Web Annotations in HTML

W3c working group note 23 february 2017.

Please check the errata for any errors or issues reported since publication.

This document is also available in this non-normative format: ePub

Copyright © 2017 W3C ® ( MIT , ERCIM , Keio , Beihang ). W3C liability , trademark and document use rules apply.

The Web Annotation Working Group has published three Recommendations for expressing annotations on the Web: the Web Annotation Data Model [ annotation-model ]; the Web Annotation Vocabulary [ annotation-vocab ]; and the Web Annotation Protocol [ annotation-protocol ]. These Recommendations define a serialization of the Model in a new, Web annotation-specific profile of JSON-LD [ json-ld ].

This Note describes and illustrates potential approaches for including annotations within HTML documents. Examples also are included illustrating the use within an HTML document of annotation Selectors as fragment identifiers. (The Working Group's Selectors and States Reference Note [ selectors-states ] defines the syntax used for Selectors as fragment identifiers.)

The approaches described in this document are incomplete and preliminary. They do not exhaust the full range of feasible options. The approaches discussed in this note have emerged from Working Group discussions and should be considered no more than initial starting points for further discussion, experimentation and development.

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

This document was published by the Web Annotation Working Group as a Working Group Note. If you wish to make comments regarding this document, please send them to [email protected] ( subscribe , archives ). All comments are welcome.

Publication as a Working Group Note does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy . W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy .

This document is governed by the 1 September 2015 W3C Process Document .

1. Introduction

According to the Web Annotation Data Model [ annotation-model ]:

"An annotation is considered to be a set of connected resources, typically including a body and target, and conveys that the body is related to the target.... This perspective results in a basic model with three parts, depicted below."

The Model goes on to define an extensible, interoperable framework for expressing such annotations in RDF-based vocabularies. The Model additionally defines a JSON-LD [ json-ld ] serialization of that framework. However, the Model does not prescribe a means for including an annotation within a Web page (HTML document)—even when the annotation targets all or part of the page itself or all or part of another, external Resource linked from the page.

For example, the quotation above is simply an HTML blockquote and contains no encoded reference to the quotation as it exists within the Web Annotation Data Model Recommendation [ annotation-model ], an HTML document.

This Note considers how a conformant expression of a Web Annotation or an annotation Selector that references a segment of an HTML document might usefully be embedded within the same or another HTML document. In addition to text embedded within the DOM, HTML documents often reference external resources such as images that are meant to be considered integral parts of an HTML Document when viewed on the Web, e.g., through the use of the HTML <img> element's src attribute. Approaches discussed in this Note would facilitate embedding in HTML an annotation targeting (in the context or scope of a Web page) an image or other similar Web page component resource external to an HTML document.

Pending further experimentation, use-case development, incubation and broader collaborative efforts, this Note stops short of proposing any new, annotation-specific extensions to HTML [ html ]. Nor does it propose any new, annotation-specific HTML elements or attributes. To address specific use cases, possible extensions of HTML have been discussed within the Web Annotation Working Group and elsewhere, e.g., an informal proposal for new note, notegroup, and noteref HTML elements to better handle footnote-style references within HTML documents [ html-notes ]. But for now this Note only considers approaches that can work out of the box today, without the need for an extension of HTML or the Web Annotation Vocabulary [ annotation-vocab ]. These approaches rely on existing mechanisms, e.g., RDFa, JSON-LD, fragment identifiers, to embed annotations and elements of annotations within HTML documents.

This document also neither addresses nor proposes user interface implementations. Some illustrations included have been drawn from demonstration or developmental implementations that include user interface features, but the focus of this Note is the inclusion of annotations in HTML, not interface design.

1.2 Motivation

The interest in embedding Web Annotations within HTML is motivated by several generic use cases that predate or have arisen over the course of the Web Annotation Working Group's existence, a few of which are listed here:

2. Annotations Embedded as JSON-LD

JSON-LD [ json-ld ] is the serialization format used in the Web Annotation Data Model [ annotation-model ]. HTML can accommodate this serialization format directly via the use of the HTML <script> element with its type attribute assigned the media type for a Web Annotation: application/ld+json;profile="http://www.w3.org/ns/anno.jsonld" .

The following three annotations are all embedded in a single HTML document. This document describes a digital image created by scanning a page from a Renaissance-era book; the object scanned was known as an emblem. A JPEG image of the emblem is linked from the HTML document using an <img> element. A transcription of the German language text of the emblem's motto (i.e., the emblem's caption) is included in the HTML document.

2.1 Annotating an HTML <div>

Use case for Example 1: Mara wants to annotate the transcription of the emblem motto with its Latin translation. The target of the annotation is the <div> node of the HTML document that has an id attribute with the value "mottoTranscription" . Because the target of the annotation is a node which has an id attribute, a CSS Selector is appropriate. The body of the annotation is the plain text of the Latin translation. To embed the body in the annotation, a TextualBody is used. To identify the annotation itself, an IRI [ rfc3987 ] is provided as the value of the annotation's id property. It is not required that this IRI be dereferenceable.

JSON-LD Example 1

While an HTML <script> node may itself have an id attribute, implementers are discouraged from using an HTML URL with fragment identifier to identify an annotation. An HTML fragment identifier is only intended to indicate and help navigate to a specific DOM node in an HTML document (see HTML5 Recommendation [ html5 ] Section 5.6.9, "Navigating to a fragment identifier"). A fragment identifier does not unambiguously identify the contents of this node as a separate resource.

2.2 Annotating a Web page image

Use case for Example 2 : Tim wants to tag the emblem image linked from the HTML document with an Iconclass descriptor. (Iconclass [ iconclass ] is a linked open data friendly, multilingual classification system for cultural content.) The body of this annotation is therefore an External Web Resource. To make clear that the image is being annotated within the context of the Web page describing the emblem, a SpecificResource with a scope property is used to express the target of the annotation.

JSON-LD Example 2

2.3 annotating the <body> of an html document.

Use case for Example 3 : Myung-Ja wants to link the description of this emblem with another digitized emblem at the University of Illinois. The other emblem, an external Web resource, is the body of the annotation. The motivation of the annotation is "linking". The entire <body> node of the HTML document serves as the target of this annotation. As with Example 1, a CSS Selector is used to express the target.

JSON-LD Example 3

While HTML <script> elements are allowed in both the <head> and the <body> elements, it is suggested to add embedded annotations to the <head> element when targeting the whole of the <body> element of an HTML document; this avoids any potential ambiguity that might arise from an annotation targeting itself.

3. Annotations Embedded as RDFa

TODO: Describe how dokieli embeds Web Annotations in HTML using RDFa. Include examples of annotations in RDFa. Otherwise keep relatively succint and focused on the annotation in RDFa, with less about the complete application Instead point to the application...

TODO: Summarize comparitive advantages of this approach, e.g., markup of the target with attributes, etc. ...

Another approach of embedding annotations into HTML is to use RDFa [ rdfa-primer ]. The advantage of using RDFa is that the annotation terms are mixed with the core HTML content, meaning that, for example, the text in the HTML source can be also re-used as an annotation textual body. In other words, a single resource may become both human visible as well as machine-readable. On the other hand, RDFa is an RDF serialization syntax: the RDF vocabulary described in [ annotation-vocab ] must thefore be used instead of the JSON-LD encoding used in the [ annotation-model ] document. This requirement may be problematic for some users.

This example is a significantly simplified version of a more complex application that uses an RDFa encoding of annotations within a framework for decentralised article authoring and annotation (see for further details ). The example shows one of the advantages of RDFa: the “Communities have various…” text, while readable when the corresponding HTML page is displayed, automatically provides the textual body of the annotation. The relative complexity of mixing complex RDFa structures with HTML makes it more suitable for automatic code generation (e.g., through authoring systems) rather than manual editing.

The example below relies on the fact that RDFa parsers use the RDFa Core Initial Context to understand the predefined prefixes.

Interpreting this HTML content yields, in [ turtle ]:

3.1 Mixing RDFa with embedded RDF content

The approach used in 2. Annotations Embedded as JSON-LD can be combined, within the same HTML content, with the usage of RDFa. It is also possible to use the same approach (namely using a <script> element with an appropriate media type) to include RDF using other serializations, for exaple Turtle (see Appendix A of the [ turtle ] specification for more details). I.e, it is possible to modify the dokieli example above as follows:

With an appropriate tools that understand both RDFa and the embedded Turtle the results is identical to Example 5 .

Care should be taken, however, that the exact details of what it means to mix both RDFa and embedded RDF contents within the same HTML file is not (yet) formally specified. Tools that do understand this type of mix usually parse the various syntaxes into separate RDF Graphs (see [ rdf11-concepts ]) which are then merged following the rules described in the RDF Semantics document [ rdf11-mt ]. This means that, for example, blank nodes are not shared, nor are namespace declarations among the different serializations.

4. Web Annotation-based Citation URLs

The Selectors and States Note [ selectors-states ] published by the Web Annotation Working Group includes information on encoding Web Annotation Selectors and State classes as IRI Fragment Identifiers . The following examples show how these URLs could be used to reference portions of a Specific Resource on the Web via IRIs:

4.1 Example using <blockquote> and <q> tags

In this example, the <blockquote> 's cite attribute is set to a typical HTML fragment identifier. The <q> tags use cite attribute values set to Web Annotation Selector Fragment Identifiers—which are convertable into Web Annotation Data Model [ annotation-model ] Selector statements. The <img> tag is also wrapped in a <q> as it's location is not directly contained in either of the previously quoted section. However, all of the quotations (within the <q> tags) exist within the #introduction section referenced by the surrounding <blockquote> .

The Selectors and States Note [ selectors-states ] explains that fragment identifiers are technically defined when the media type is specified. However in practice the utilization of fragment identifiers by publishers and developers ranges from browser state handling to anchoring highlights of quotations (as seen here).

Using these fragment identifiers as values of the cite attribute on <blockquote> and <q> tags provides a means for both specificity and future extensibility. Site authors as well as browser, server, and JavaScript developers may take advantage of these citations identifiers for re-anchoring selection or extracting (and verifying) quotations made within an HTML document which uses this method.

4.2 Example using an <a> tag

Using the same methods described above, <a> tags may also be used to express a desired highlight or reference. However, as mentioned above, the use of that fragment within the retrieved resource may vary.

A. Acknowledgements

The Web Annotation Working Group gratefully acknowledges the contributions of the Open Annotation Community Group . The output of the Community Group was fundamental to the current data model. In particular the editors would like to thank Herbert Van de Sompel of Los Alamos National Laboratory for his editorial contributions throughout the Community Group process.

The following people have been instrumental in providing thoughts, feedback, reviews, content, criticism and input in the creation of this specification:

B. References

B.1 informative references.

HTML Tutorial

Html graphics, html examples, html references, html comments.

HTML comments are not displayed in the browser, but they can help document your HTML source code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Note: Comments are not displayed by the browser, but they can help document your HTML source code.

Add Comments

With comments you can place notifications and reminders in your HTML code:

Hide Content

Comments can be used to hide content.

This can be helpful if you hide content temporarily:

You can also hide more than one line. Everything between the <!-- and the --> will be hidden from the display.

Hide a section of HTML code:

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

Advertisement

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Hide a part of a paragraph:

HTML Exercises

Test yourself with exercises.

Use the HTML comment tag to make a comment out of the "This is a comment" text.

Start the Exercise

Video: HTML Comments

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

• HTML - Commentaires

Les commentaires sont souvent utilisés dans des codes HTML. C'est pourquoi il est important de les indiquer au navigateur pour ne pas qu'il les affiche.

Il y a beaucoup de raisons pour ajouter un commentaire à l'intérieur d'un script html .

• Une note ou un rappel, a spécificité ou une clarification.
• Commentaires JavaScript
• Un élément inachevé

Le commentaire sera placé entre les balises "<!--" et "-->". De cette manière, nous serons capable de laisser une note pour se rappeler plus tard à quoi le code rapporte, ou si quelque chose doit toujours être introduit à cet endroit.

Ceci est un paragraphe entre deux lignes de commentaires html

Ceci est juste un exemple des choses que vous pouvez commenter dans un script. Le temps venu, vous apprendrez que ces commentaires sont très utiles pour une meilleure compréhension du code dans le futur.

N'importe quel texte, ou caractères, symboles ou n'importe quoi d'autre placé entre la balise d'ouverture "<!--" et la balise de fermeture "-->" ne sera pas montré par le navigateur.

HTML - Script inachevé

Les commentaires sont très utiles quand vous travaillez sur un script mais que vous le laissez inachevé. En le mettant entre deux balises (<!-- code -->) il sera interpreté comme un commentaire par le navigateur et donc ne sera pas montré.

Quand vous avez fini le code et que vous devrez le montrer tout ce que vous aurez à faire est d'effacer les deux balises et le navigateur montrera le script voulu.

HTML - Commentaires JavaScript

Les commentaires sont aussi utilisés en JavaScript. Nous parlerons davantage de cela dans un autre tutoriel cependant, dedié à ce sujet. Ces commentaires auront un but différent que celui d'informer cependant.

• HTML - Introduction à HTML
• HTML - Eléments: body, head, title
• HTML - Balises
• HTML - Attributs
• HTML - Paragraphes
• HTML - Titres et en-têtes
• HTML - Saut de ligne
• HTML - Règles horizontales
• HTML - Listes
• HTML - Formattage de Texte
• HTML - Codes de couleur
• HTML - Police & police de base
• HTML - Liens
• HTML - Entités & symboles
• HTML - E-mail (lien mailto)
• HTML - Images
• HTML - Liens image
• HTML - Formulaires
• HTML - Tableaux
• HTML - Bgcolor
• HTML - Arrière-plan
• HTML - Cadres
• HTML - Plans
• HTML - Balises meta
• HTML - Scripts Javascript
• HTML - Audio
• HTML - Vidéo

Étiquettes spéciales

• HTML - balise <body>
• HTML - balise <div>

Les balises de style

• HTML - Gras
• HTML - Italique
• HTML - Code d'ordinateur
• HTML - Preformatage
• HTML - Superscript
• HTML - Indice
• HTML - Barré

Formulaires HTML

• HTML - Balise input
• HTML - Champs de Texte
• HTML - Champ de mot de passe
• HTML - Case à cocher
• HTML - Boutons Radio
• HTML - Zones de texte
• HTML - Formulaire d'upload
• HTML - Menu Select
• HTML - Boutons de Soumission
• HTML - Boutons Reset
• HTML - Champs cachés
• Tableau de codes de couleurs HTML
• Tableau de symboles et caractères HTML
• Vérifier du code et des liens HTML / Code HTML valide
• Qu'est-ce qu'un favicon et comment l'utiliser
• La balise marquee, comment nous l'utilisons.

More CSS Tutorials

• CSS Colors and Backgrounds
• CSS Flexbox Layout Model
• CSS Transformations: 2D and 3D Effects
• CSS Web Page from Scratch

The copy-editor of the web

Annotator is an open-source JavaScript library to easily add annotation functionality to any webpage. Annotations can have comments, tags, links, users, and more. Annotator is designed for easy extensibility so its a cinch to add a new feature or behaviour. Annotator also fosters an active developer community with contributors from four continents, building 3rd party plugins allowing the annotation of PDFs, EPUBs, videos, images, sound, and more.

Download: 1.2.x stable 2.x pre-release GitHub

Using Annotator

Adding annotation to any website is easy with Annotator. First, download the Annotator library, include it in your HTML.

Then, add the following javascript to initialize the annotator:

Full instructions are in the Usage section of the docs.

To setup the default suite of plugins include annotator.min.css and annotator-full.min.js and call the "setupPlugins" method via .annotator(). For example:

Annotator has a simple but powerful plugin architecture. Plug-ins can also be included for adding functionality such as user permissions , tags , filtering and formatting .

The Annotator community has developed more than twenty plugins, such as:

• Annotorious - image annotation
• Touch Plugin - support for touch devices (iOS, Android, etc.)
• Offline Plugin - work on documents while offline, using localStorage
• Share-annotator - share text and video annotations using social networks or email
• richText-annotator - rich media and rich text annotations using Tinymce

For a full list of 3rd party Annotator plugins visit our plugin page .

How do I help?

• Fix (or report) bugs: If you find an issue with The Annotator, have a look at our issue tracker , and file a bug. If you’re a developer, feel free to fork the project and submit a pull request.
• Write documentation: If you find gaps in the documentation , you can pitch in there too. The process is similar: fork the project, edit the RST docs, and submit a pull request.
• Write a plugin: If you’ve written a plugin, chances are your code will be useful to others. Please add a link to the wiki so people can find your stuff.
• If you want to learn more about developing your own plugin, please read our documentation about plugin development.

If you’re interested in our community, or you’re having trouble with something, please join our mailing list . Search (via gmane ):

Who is using it?

More than a dozen projects rely on Annotator for their digital annotation needs and many are open source. A few noteables include Hypothes.is , edX , Annotation Studio , and Peer Library . Please checkout our showcase page for a more complete list.

Adding annotation to your webpage using the Annotator is easy. Full instructions are in the Getting Started section of the docs, but it is just two short steps. First, you need to download the Annotator library (or link to the hosted version), include it on your page along with jQuery . Then add the following line to initialize the annotator.

Plug-ins can be included for adding functionality such as user accounts , tags , filtering and formatting .

To setup the default suite of plugins include annotator.min.css and annotator-full.min.js and call the "setupPlugins" method via .annotator() .

For example:

You'll need to store your data somewhere, luckily we've made this very simple to do using AnnotateIt , a hosted web service for storing annotations.

Alternatively if you'd like to integrate the annotator with your own storage system check out the Docs for more information on the annotation format and store plugin.

The Bookmarklet

The bookmarklet is a simple tool that allows you to add the annotator to any webpage and save your annotations to AnnotateIt. Check it out at http://annotateit.org/ .

Web Annotation

Article info.

• Resource Description Framework
• Hypothesis (Annotator)
• Annotator (JavaScript)
• Semantic Web

Article Versions

• 3 2022-02-15 11:48:10 3305,714 3,3305 By devbot5S Migrating blockquotes to markdown syntax
• 2 2018-06-25 12:36:05 714,24 2,714 By dineshpathak Adding content.
• 1 2017-03-11 06:08:06 1,24 By arvindpdmn Request for article
• Submitting ... You are editing an existing chat message. All Versions 2022-02-15 11:48:10 by devbot5S 2018-06-25 12:36:05 by dineshpathak 2017-03-11 06:08:06 by arvindpdmn All Sections Summary Discussion Sample Code References Milestones Tags See Also Further Reading
• 2018-06-25 12:43:39 - By dineshpathak First SVG image has overlapping text. It's not clickable in slideshow zoom. It's okay if opened in separate tab.

In traditional print media, it's common practice among readers to underline text, highlight sections or write comments in the margins. Such annotations allow readers to express their opinions. Web Annotation is a standard for creating similar annotations on the web for digital content. It's standardized by the W3C Web Annotation Working Group .

Since the early years of the Web, there have been many proprietary systems to enable online annotations. Web Annotation offers a standardized data model, vocabulary, protocol and embeddings to create, organize and share annotations. Web Annotation allows anyone to express their opinions freely without being censored by content authors or publishers. It reuses concepts and tools from Semantic Web.

Web content involves authors, content publishers and readers. To engage readers, content publishers enable comments on their site. However, they could moderate the comments and even delete them if they didn't like them. This control from publishers meant that the system was not truly open from a reader's perspective. In fact, some publishers don't even allow comments.

Published comments often appear at the end of the article and therefore remain disconnected from a particular line or paragraph to which the comment applies. There's also no distinction between a valuable comment and frivolous chit-chat. Readers also have no way to archive their comments or take their comments from one platform to another. Readers may be identified only loosely and there's no reputation model to say who's a more valuable commenter. The lack of a reputation model was one reason why project Dispute Finder failed.

Before Web Annotation, solutions were proprietary and closed systems. They didn't partner with organizations such as W3C to take a standards-driven approach.

Annotations can be used to "provide a trace of use; third party commentary; information sharing; information filtering; semantic labeling of document content; and enhanced search". Annotations can help readers discover new content by subscribing to annotation feeds. They can also share annotations, thereby creating communities of common interests. Publishers can use annotations to add value to their content.

Many systems are using annotations for online collaboration. Examples include Kami and GoodReader . For greater insight, DocumentCloud promises to turn documents into data.

For engaging online communities in open discussions, RapGenius started in 2009 to annotate rap lyrics but later expanded to other topics and changed its name to Genius in 2014. Publisher John Wiley & Sons, Inc. and IIIF Consortium have adopted annotations. Mendeley (acquired by Elsevier) provides research management system that includes annotations.

To flag fake news, annotations can help in building an ecosystem for fact checking. Web Annotation can enable "decentralized, trustworthy mechanism for fact checking and public discussion". Beyond facts, Climate Feedback is using annotations for content reasoning and argumentation.

Since the early 1990s, many systems have come and gone to support annotations on the web. Hypothes.is has shared a list of annotation efforts . Among the more widely used services are Diigo, Mendeley, DocumentCloud, RapGenius, Good Reader and Notable PDF. A curated list of ten annotation tools from April 2017 includes zipBoard, UserSnap, PageProofer, JIRA Capture, BugHerd, Scrible, Hypothesis, Diigo, TrackDuck and Twiddla.

Mosaic browser that was released in 1993 had support for annotations. Third Voice was an annotation service during 1999-2001. Predating this, there have been other open-source annotation apps: CritSuite, JotBot, ComMentor and Xanadu. Angel-funded Fleck existed during 2006-2008. At the 2013 I Annotate Conference, many new services were presented: Domeo, Maphub, Pelagios, Authorea, dotdotdot, Hypothes.is.

• Proxy-based : A proxy server merges web content and annotations. Browsers see the merged content. CritLink and InterNote are examples.
• Browser-based : Original web content and annotations are merged at the browser end. This may be done via a browser plugin or by JavaScript served from the annotation server. Third Voice is an example of a plugin. JotBot uses a Java applet. Yawas uses internal DOM events to display annotations.

Proxy-based approach is restrictive since readers must access a IRI different from the original one. Browser-based approach is preferred. As examples, Hypothes.is and Pundit take the latter approach. It's expected that eventually browsers will natively support Web Annotation.

It's important to note that annotations are not necessarily stored at the publisher's server. They could be stored in a separate annotation server. Any third party can offer an annotation service that collects and organizes annotations. Such a service must be neutral to realize the ideals of an open collaborative web.

An annotation is a rooted directed graph that establishes relationships among resources. A resource can be either a Body or a Target . Annotations can have 0 or more bodies and 1 or more targets. Content of the body are "about" the target. An annotation, body or target may have its own properties and relationship such as creation or descriptive information.

Since resources are distributed on the web, they are identified using IRI . In some cases, Body is just textual content and may be included as part of the annotation. In such cases, separate IRI is not required for the Body.

We often want to select part of a resource and not the entire content at the IRI . This is called Segment (of Interest) . A Selector is used to extract the segment from a resource. For example, selectors are available to select some region of an image; an exact quote; content that matches a CSS or XPath rule; some text by its start and end positions; and so on.

• Web Annotation Data Model, REC : Describes the underlying Annotation Abstract Data Model as well as a JSON - LD serialization.
• Web Annotation Vocabulary, REC : The Vocabulary which underpins the Web Annotation Data Model.
• Web Annotation Protocol, REC : The HTTP API for publishing, syndicating, and distributing Web Annotation.
• Embedding Web Annotation in HTML , WG Note : Various ways annotations can be added to an HTML file using current specifications like JSON - LD or RDFa.
• Selectors and States, WG Note : An extract from Web Annotation Data Model to make the use of these classes easier and more broadly usable by other specifications.

Annotator is an open-source JavaScript library that can be added to any website and thus enable annotations on it. Annotator can also be extended with plugins . Annotorious is one such plugin for image annotation. Annotator is being used in many projects: Hypothes.is, Harvard's Open Video Annotation Project, EdX, MIT's Annotation Studio, WritingPod, Crunched Book and many more.

Hypothesis is based on Annotator and is also open source. While Annotator used to store annotations at annotateit.org , this service closed in March 2017. Hypothesis is also a service that stores annotations but you can deploy your own servers instead.

Pundit Annotator is based on AngularJS. It comes with open source client code. You can be download and install the server code.

Annotations may be considered as an extra layer of information on top of web content. To accelerate the development of a pervasive interoperable annotation layer, the Annotating All Knowledge Coalition identified what such a layer should contain.

An interoperable annotations layer should be standardized. It should be an open framework. Annotations should be as granular as possible: parts of an image, specific lines of text, etc. It should support discovery and linking of annotations across different content formats ( HTML or PDF). Likewise, content may have different versions and annotations should persist across versions.

Annotations can be private or public. Identities should be managed. To allow discovery and sharing of annotations, standard identifiers should be used. Notifications should be possible, such as notifying publishers when their content is annotated.

Readers should be able to selectively choose which annotations they wish to see when reading content. Annotations should be portable across services. It should be possible to link to other resources or programmatically annotate. Further tools can enable tagging and filtering of annotations.

Interoperatibility is a challenge. Annotations created with one tool should be compatible with another. In other words, can we export annotations from one and import into another? When a browser has multiple tools installed, these tools should coexist in terms creating, editing and anchoring annotations. One study annotated a webpage with both Hypothesis and Pundit. It then found that the tools are incompatible and somewhat conflicting.

Tim Berners-Lee publishes his ideas about the World Wide Web and hypertext. This paper includes thoughts about annotations, some of which could be kept private. Thus, the idea of annotating web content is not something that came later.

The first widely distributed web browser Mosaic is released by Marc Andreessen and Eric Bina. Mosaic v1.1 includes client-side support for annotations. However, this is considered as a "nice-to-have" feature and is not developed further.

As a browser plugin, Third Voice is launched. It allows users to annotate any website and thereby have open discussions without being controlled by content publishers. However, this service gathers bad reputation for enabling "web graffiti". Getting users to download and install the plugin becomes a barrier. The service closes in April 2001.

Where Third Voice fails, W3C attempts with Annotea that's built into W3C's Amaya browser. W3C proposes to adopt and reuse concepts and tools from Semantic Web, such as RDF and XML .

Two groups, Annotation Ontology and the Open Annotation Collaboration , independently start work on annotation specifications. In 2011, they join together to form W3C Open Annotation Community Group .

Version 1.0.0 of Annotator is released. This is a JavaScript library for building annotation applications in browsers. Version 1.2.10 is released in February 2015.

As an open source non-profit platform, Hypothes.is is announced. It aims to be community moderated, neutral and transparent.

Open Annotation Community Group at W3C publishes a Community Draft titled Open Annotation Data Model . This specifies an RDF -based data model for exchanging annotations between applications. This is not a standard but forms the starting point for future standards.

What is today an annual event, the first I Annotate Conference is held in San Francisco. Dan Whatley of Hypothes.is introduces,

Annotation as the 3D printing of the web: the promise of decentralization of knowledge creation online.

Built on Annotator, Hypothesis application is launched as a Chrome extension. An alpha version was launched earlier in 2013. In April 2018, they achieve a milestone of 3 million annotations.

W3C Web Annotation Working Group publishes three Recommendations that define Web Annotation. In addition, two Working Group Notes are also published. This Working Group was formed in 2014.

Sample Code

• // Source: https://www.w3.org/TR/annotation-model/ // This JSON+LD example says that a PDF document is annotated // with an audio MP3 file. { "@context" : "http://www.w3.org/ns/anno.jsonld" , "id" : "http://example.org/anno2" , "type" : "Annotation" , "body" : { "id" : "http://example.org/analysis1.mp3" , "format" : "audio/mpeg" , "language" : "fr" } , "target" : { "id" : "http://example.gov/patent1.pdf" , "format" : "application/pdf" , "language" : [ "en" , "ar" ] , "textDirection" : "ltr" , "processingLanguage" : "en" } }   // Select a rectangular region of an image // #xywh=100,100,300,300 is the fragment selector { "@context" : "http://www.w3.org/ns/anno.jsonld" , "id" : "http://example.org/anno4" , "type" : "Annotation" , "body" : "http://example.org/description1" , "target" : { "id" : "http://example.com/image1#xywh=100,100,300,300" , "type" : "Image" , "format" : "image/jpeg" } }   // Source: https://www.infoworld.com/article/3263344/web-development/ \ // how-web-annotation-will-transform-content-management.html // Note: We have broken long strings into multiple lines for readability // but in fact this is not valid syntax in JSON! // Example shows the use of selectors XPathSelector and TextPositionSelector // Body itself is empty except for tagging it as EnterpriseAnnotation // Body is also not a separate IRI: it's embedded into the annotation itself { "body" : [ { "type" : "TextualBody" , "value" : "" , "format" : "text/markdown" } , { "type" : "TextualBody" , "purpose" : "tagging" , "value" : "EnterpriseAnnotation" } ] , "target" : [ { "source" : "https://www.aihw.gov.au/reports/cancer/ \ cancer-compendium-information-and-trends-by-cancer-type \ /report-contents/pancreatic-cancer-in-australia" , { "type" : "XPathSelector" , "value" : "/form[1]/div[4]/main[1]/div[3]/div[2]/div[1]/div[1]/div[1]/ \ div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/p[3]" , "refinedBy" : { "start" : 0 , "end" : 243 , "type" : "TextPositionSelector" } } , { "type" : "TextPositionSelector" , "end" : 15827 , "start" : 15584 } , { "exact" : "In 2013, there were 2,865 new cases of pancreatic cancer diagnosed in Australia \ (1,490 males and 1,374 females). In 2017, it is estimated that 3,271 new cases of pancreatic \ cancer will be diagnosed in Australia (1,722 males and 1,548 females)." , "prefix" : "only diagnosed cancer in 2017. \n \n " , "type" : "TextQuoteSelector" , "suffix" : " \n \n In 2013, the age-standardised " } ] } ] , "created" : "2017-11-28T18:56:04.889815+00:00" , "@context" : "http://www.w3.org/ns/anno.jsonld" , "creator" : "acct:[email protected]" , "type" : "Annotation" , "id" : "https://hypothes.is/a/yW9M1tRtEee1Q-typwRX4w" , "modified" : "2017-11-28T18:56:04.889815+00:00" }  
• Angell, Nate. 2018. "Meet the Hypothesis Team That Made 3 Million Annotations Possible." Hypothes.is Blog, April 30. Accessed 2018-06-22.
• Annotator. 2018a. "Home - Annotator - Annotating the Web." Accessed 2018-06-22.
• Annotator. 2018b. "Who's Using It?" Accessed 2018-06-22.
• C2 Wiki. 2013. "Web Annotation." August 31. Accessed 2018-06-22.
• Carpenter, Todd A. 2013. "iAnnotate — Whatever Happened to the Web as an Annotation System?" The Scholarly Kitchen, April 30. Accessed 2018-06-22.
• DLCS. 2016. "DLCS Delivery Architecture." Introduction to the DLCS, Digital Library Cloud Services, December 07. Updated 2017-03-13. Accessed 2018-06-25.
• Farley, Tim. 2011. "Hypothes.is could become a crucial tool for skeptics." Skeptical Software Tools, October 21. Accessed 2018-06-22.
• Genius Founders. 2014. "Introducing Genius.com." July 12. Accessed 2018-06-22.
• Herman, Ivan, Robert Sanderson, Paolo Ciccarese, and Benjamin Young, eds. 2017. "Selectors and States." W3C Reference Note, February 23. Accessed 2018-06-22.
• Hypothes.is. 2018a. "Historical Survey of Annotation Efforts." Accessed 2018-06-22.
• Hypothes.is. 2018b. "Our Principles." Accessed 2018-06-22.
• Hypothes.is. 2018c. "What is the difference between Hypothesis and AnnotatorJS?" Accessed 2018-06-22.
• Koivunen, Marja-Riitta, Dan Brickley, José Kahan, Eric Prud'Hommeaux, and Ralph R. Swick. 2000. "The W3C Collaborative Web Annotation Project ... or how to have fun while building an RDF infrastructure." W3C, May 12. Accessed 2018-06-22.
• Kumar, Aparna. 2001. "Third Voice Trails Off..." Wired, April 04. Accessed 2018-06-22.
• Lumpkin, Matt. 2013. "I annotate conference." Blog, April 10. Updated 2013-04-14. Accessed 2018-06-22.
• Martone, Maryann. 2016. "Attributes of an Interoperable Annotation." FORCE11, May 9. Accessed 2018-06-22.
• Martone, Maryann. 2017. "Annotating all Knowledge: Adventures in Interoperability." February 09. Accessed 2018-06-22.
• McDonald, Glenn. 2001. "A Standard for e-Comments." MIT Technology Review, July 16. Accessed 2018-06-22.
• Net7 GitHub. 2015. "net7/pundit2." October 29. Accessed 2018-06-22.
• Open Annotation GitHub. 2015. "annotator tags." July 3. Accessed 2018-06-22.
• Sanderson, Robert, and Timothy Cole. 2017. "Making it easier to share annotations on the web." W3C GitHub Blog, February 23. Accessed 2018-06-22.
• Sanderson, Robert, Paolo Ciccarese, and Herbert Van de Sompel. 2013. "Open Annotation Data Model." W3C Community Draft, February 08. Accessed 2018-06-22.
• Sanderson, Robert, Paolo Ciccarese, and Benjamin Young, eds. 2017. "Web Annotation Data Model." W3C Recommendation, February 23. Accessed 2018-06-22.
• Saxena, Rishabh. 2017. "Top 10 Website Annotation Tools." Mopinion, April 18. Accessed 2018-06-22.
• Udell, Jon. 2017. "How annotation layers define 'segments of interest' for new kinds of applications." Blog, February 08. Accessed 2018-06-22.
• Udell, Jon. 2018a. "How web annotation can help readers spot fact-checked claims." MisinfoCon, May 18. Accessed 2018-06-22.
• W3C. 2018a. "Web Annotation Working Group." Accessed 2018-06-22.
• W3C. 2018b. "Web Annotation Architecture." SVG document. Accessed 2018-06-22.
• Web Annotation WG. 2018. "Documents." Accessed 2018-06-22.
• Willyard, Cassandra. 2018. "At Climate Feedback, scientists encourage better science reporting. But who is listening?" Columbia Journalism Review, February 01. Accessed 2018-06-22.
• dwhly. 2011. "Hypothesis quick overview 2011-10-19." SlideShare, July 10. Accessed 2018-06-22.
• dwhly. 2014. "Launch!" Hypothes.is Blog, October 27. Accessed 2018-06-22.
• dwhly. 2017. "Annotation Is Now a Web Standard." Hypothes.is Blog, February 24. Accessed 2018-06-22.
• pbrantley. 2013. "I Annotate 2013: Our Take." Hypothes.is Blog, April 18. Accessed 2018-06-22.

Further Reading

• Udell, Jon. 2018b. "How web annotation will transform content management." InfoWorld, March 21. Accessed 2018-06-22.
• Perton, Marc. 2016. "With Web Annotation, You Can Comment on Any Page—But Should You?" Newsweek, April 30. Accessed 2018-06-22.

Article Stats

Author-wise stats for article edits.

• Browse Articles
• Community Outreach
• About Devopedia
• Author Guidelines
• FAQ & Help
• Forgot your password?
• Create an account

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

tools for annotating html pages

pkavumba/html-annotator

Contributors 2.

• JavaScript 97.4%

Annotated <figure>s in HTML5 and CSS

Written by Harry Roberts on CSS Wizardry .

A couple of things to note

I’ve never really been one for CSS experiments. They’re cool and all, but I prefer solving real problems with good ol’ CSS and markup. This is what this next thing was born from and I’m really pleased with the outcome! It’s image maps, meet annotations, meet HTML5’s <figure> element .

Basically, we all know HTML5 has given us some pretty awesome new elements to toy with and some of the more humble ones are <figure> and <figcaption> :

In this post I’ll show you how to turn that into an image-map style annotated image using really really semantic markup.

You’re probably familiar with Flickr’s notes which are shown upon hovering an image. Well functionally this is exactly like that (I’ve never actually looked at their markup but I imagine it’s nigh on identical). Where this differs is that it uses some super-rich and semantic markup and it can be used as a CSS plugin! Simply paste the CSS into your site’s stylesheet and start using HTML5 <figure> annotations.

This technique is a really good example of layers of code. Perfect HTML that works absolutely great on its own, totally semantic and well structured. It doesn’t need the CSS at all to function, the CSS just enhances it.

The HTML is lovely and simple. Before we go any further go back to the demo page and disable styles. Seeing this without styles should show you just how semantic and sensible the markup really is. It’s a perfect HTML layer that doesn’t even need CSS to make sense or work.

I’ve not included the whole page as all we really want to look at is this:

All we have here is a <figure> and <figcaption> with an image, a title and a list. The image is the subject of our figure and the list makes points about it. To associate these points with the image we simply have a <b> which we use to textually make the connection.

The CSS is fairly well commented but basically what we do is:

• Hide the <b> title.
• Absolutely position and stretch the <ul> over the image.
• Give the <li> s a width and (line-)height and hide the text off-screen.
• Add borders to the list items when we hover the <figure> .
• Remove the width from and give a border to the <li> s on hover, and reveal the text.

Firstly, the list items need positioning with inline styles in the markup. This is far more pragmatic than giving each <li> an ID and doing each one through an external CSS file.

Secondly, and more in depth, how do we get the the <figure> to wrap around and hug the image? We have four options.

• Leave it as-is, like I have here. This means that if you hover to the right of the image you are technically still inside the (block-level) <figure> and this will display the list item borders when your cursor isn’t actually over the image. This isn’t too bad, but a little unexpected…
• Float the <figure> left, which will force it to hug up to its largest child. The problem here is that you would have to clear:both; the subsequent element.
• Give the <figure> display:inline-block; , but this won’t work in IE7 and below.
• The final and, in my opinion, most pragmatic solution would be to simply add an inline width and height to the <figure> which is identical to the dimensions of your image, thus: <figure style="width:427px;height:640px;"> .

Decide which of those will suit your project best and put it to work. Simply pasting the CSS into your stylesheet and obeying the markup structure will allow you to annotate your figures in a much nicer fashion.

I have just put this on GitHub in a CSS plugin type fashion. Please feel free to download and poke through the code.

Did this help? We can do way more!

Hi there, I’m Harry Roberts . I am an award-winning Consultant Web Performance Engineer , designer , developer , writer , and speaker from the UK. I write , Tweet , speak , and share code about measuring and improving site-speed. You should hire me .

Follow @csswizardry

You can now find me on Mastodon .

• ITCSS – coming soon…

Next Appearance

Talk & workshop.

Infrequent updates, special offers, and exclusive content. Learn more…

I am available for hire to consult, advise, and develop with passionate product teams across the globe.

I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.

Suffering? Fix It Fast!

W eb A nnotator, an Annotation Tool for Web Pages

Xavier Tannier

Export citation

• Preformatted

Markdown (Informal)

[WebAnnotator, an Annotation Tool for Web Pages](http://www.lrec-conf.org/proceedings/lrec2012/pdf/148_Paper.pdf) (Tannier, LREC 2012)

• WebAnnotator, an Annotation Tool for Web Pages (Tannier, LREC 2012)
• Xavier Tannier. 2012. WebAnnotator, an Annotation Tool for Web Pages . In Proceedings of the Eighth International Conference on Language Resources and Evaluation (LREC'12) , pages 316–319, Istanbul, Turkey. European Language Resources Association (ELRA).