Merge pull request #400 from w3c/selector-fragement-uri-usage

Selector Fragment URI Usage in HTML Serialization Note

Author: iherman

serialization-html-note/index-respec.html

@@ -217,7 +217,20 @@
               publisher: "Spec-Ops",
               rawDate: "2016-04-26",
               status: "Unofficial Draft"
-            }            
+            },
+            "selectors-states": {
+              "authors": [
+                 "Ivan Herman",
+                 "Robert Sanderson",
+                 "Paolo Ciccarese",
+                 "Benjamin Young"
+              ],
+              title: "Selectors and States",
+              href: "http://w3c.github.io/web-annotation/selectors/",
+              publisher: "W3C",
+              rawDate: "2017-01-20",
+              status: "Reference Note"
+            }
           },          
           otherLinks: [
             {
@@ -389,7 +402,7 @@ Terminology
         section>
 
         <section>
-            <h3>Annotations Embedded in HTML as JSON-LDh3>
+            <h3>Annotations Embedded as JSON-LDh3>
             <p>JSON-LD [[json-ld]] is the serialization format specified in the Web Annotation Data Model [[annotation-model]].
               HTML can accommodate this serialization format directly via the use of the HTML <code><script>code> element with its
               <code>typecode> attribute assigned the media type for a Web Annotation: <code>application/ld+json;profile="http://www.w3.org/ns/anno.jsonld"code>
@@ -484,7 +497,7 @@ Example
         section>
 
         <section>
-            <h3>Annotations Embedded in HTML as RDFah3>
+            <h3>Annotations Embedded as RDFah3>
             <p>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...p>
@@ -522,7 +535,51 @@ Example
 </html>pre>
         section>
 
- 
+        <section>
+          <h3>Web Annotation-based Citation URLsh3>
+          <p>The Selectors and States Note [[selectors-states]] published by the Web Annotation Working Group includes information on encoding
+              <a data-cite="selectors-states#frags">Web Annotation Selectors and State classes as IRI Fragmenet Identifiersa>. The following
+              examples show how these URLs could be used to reference portions of a Specific Resource on the Web via IRIs:
+          p>
+
+          <h4>Example using <blockquote> and <q> tagsh4>
+
+          <pre class="example highlight" title="Example blockquote and q tags using the cite attribute">
+            <blockquote cite="https://www.w3.org/TR/annotation-model/">
+              <q cite="https://www.w3.org/TR/annotation-model/#selector(type=TextPositionSelector,start=8424,end=8270)">
+              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.</q>
+
+              <q cite="https://www.w3.org/TR/annotation-model/#selector(type=TextPositionSelector,start=8651,end=8576)">
+              This perspective results in a basic model with three parts, depicted below.</q>
+
+              <!-- TODO: how do we make this an annotation? -->
+              <img src="images/intro_model.png" alt="Basic Model: Annotation, Body and Target" width="400"/>
+            </blockquote>
+          pre>
+
+          <p>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).p>
+
+          <p>Using these fragement identifiers as values of the <code>citecode> attribute on <code><blockquote>code>
+          and <code><q>code> 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) quotions made within an HTML document which uses this method.p>
+
+          <h4>Example using an <a> tagh4>
+
+          <p>Using the same methods described above, <code><a>code> tags may also be used to express a desired highlight or reference. However,
+          as mentioned above, the use of that fragement within the retrieved resource may vary.p>
+
+          <pre class="example highlight" title="Example using an anchor tag">
+            <p>According to the Web Annotation Data Model spec
+            <a href="https://www.w3.org/TR/annotation-model/#selector(type=TextPositionSelector,start=8424,end=8270)">
+            an annotation is considered to be a set of what things?</a>
+            (click the link to find out!)</p>
+          pre>
+        section>
+
         <section>
             <h3>Annotations Embedded in HTML as ??? - space for an additional approachh3>
             <p>TODO: Describe how Web Annotations can be embedded in HTML using an additional approach?p>