diff --git a/src/1-one/output/api/html.js b/src/1-one/output/api/html.js
index 70a32cf..85a507f 100644
--- a/src/1-one/output/api/html.js
+++ b/src/1-one/output/api/html.js
@@ -60,11 +60,11 @@ const html = function (obj) {
   this.docs.forEach(terms => {
     for (let i = 0; i < terms.length; i += 1) {
       const t = terms[i]
-      // do a span tag
+      out += t.pre || ''
+      // do a span tag, inside the pre-punctuation
       if (Object.hasOwn(starts, t.id)) {
         out += starts[t.id].join('')
       }
-      out += t.pre || ''
       out += t.text || ''
       if (Object.hasOwn(ends, t.id)) {
         out += ends[t.id].join('')
diff --git a/tests/one/output/html.test.js b/tests/one/output/html.test.js
index c0eef7b..078b3ee 100644
--- a/tests/one/output/html.test.js
+++ b/tests/one/output/html.test.js
@@ -59,3 +59,19 @@ test('html-implicit', function (t) {
   t.equal(out, `he's cool`, here + 'implict')
   t.end()
 })
+
+test('html-punctuation', function (t) {
+  let doc = nlp(`This is a "test". Hello "World."`)
+  let html = doc.html({ '.red': '(test|world)' })
+  t.equal(html, `This is a "<span class="red">test</span>". Hello "<span class="red">World</span>."`, here + 'quotes')
+
+  doc = nlp(`he said "hello world" twice`)
+  html = doc.html({ '.red': 'hello world' })
+  t.equal(html, `he said "<span class="red">hello world</span>" twice`, here + 'quoted phrase')
+
+  doc = nlp(`my dog (spot) is cute`)
+  html = doc.html({ '.red': 'spot' })
+  t.equal(html, `my dog (<span class="red">spot</span>) is cute`, here + 'parentheses')
+
+  t.end()
+})