diff --git a/rules/alerting.go b/rules/alerting.go
index f28ffa289..39b5906e1 100644
--- a/rules/alerting.go
+++ b/rules/alerting.go
@@ -324,15 +324,15 @@ func (r *AlertingRule) HTMLSnippet(pathPrefix string) html_template.HTML {
 		alertNameLabel:        model.LabelValue(r.name),
 	}
 	s := fmt.Sprintf("ALERT <a href=%q>%s</a>", pathPrefix+strutil.GraphLinkForExpression(alertMetric.String()), r.name)
-	s += fmt.Sprintf("\n  IF <a href=%q>%s</a>", pathPrefix+strutil.GraphLinkForExpression(r.vector.String()), r.vector)
+	s += fmt.Sprintf("\n  IF <a href=%q>%s</a>", pathPrefix+strutil.GraphLinkForExpression(r.vector.String()), html_template.HTMLEscapeString(r.vector.String()))
 	if r.holdDuration > 0 {
 		s += fmt.Sprintf("\n  FOR %s", model.Duration(r.holdDuration))
 	}
 	if len(r.labels) > 0 {
-		s += fmt.Sprintf("\n  LABELS %s", r.labels)
+		s += fmt.Sprintf("\n  LABELS %s", html_template.HTMLEscapeString(r.labels.String()))
 	}
 	if len(r.annotations) > 0 {
-		s += fmt.Sprintf("\n  ANNOTATIONS %s", r.annotations)
+		s += fmt.Sprintf("\n  ANNOTATIONS %s", html_template.HTMLEscapeString(r.annotations.String()))
 	}
 	return html_template.HTML(s)
 }
diff --git a/rules/alerting_test.go b/rules/alerting_test.go
new file mode 100644
index 000000000..9cba73562
--- /dev/null
+++ b/rules/alerting_test.go
@@ -0,0 +1,26 @@
+package rules
+
+import (
+	"testing"
+
+	"github.com/prometheus/common/model"
+	"github.com/prometheus/prometheus/promql"
+)
+
+func TestAlertingRuleHTMLSnippet(t *testing.T) {
+	expr, err := promql.ParseExpr(`foo{html="<b>BOLD<b>"}`)
+	if err != nil {
+		t.Fatal(err)
+	}
+	rule := NewAlertingRule("testrule", expr, 0, model.LabelSet{"html": "<b>BOLD</b>"}, model.LabelSet{"html": "<b>BOLD</b>"})
+
+	const want = `ALERT <a href="/test/prefix/graph?g0.expr=ALERTS%7Balertname%3D%22testrule%22%7D&g0.tab=0">testrule</a>
+  IF <a href="/test/prefix/graph?g0.expr=foo%7Bhtml%3D%22%3Cb%3EBOLD%3Cb%3E%22%7D&g0.tab=0">foo{html=&#34;&lt;b&gt;BOLD&lt;b&gt;&#34;}</a>
+  LABELS {html=&#34;&lt;b&gt;BOLD&lt;/b&gt;&#34;}
+  ANNOTATIONS {html=&#34;&lt;b&gt;BOLD&lt;/b&gt;&#34;}`
+
+	got := rule.HTMLSnippet("/test/prefix")
+	if got != want {
+		t.Fatalf("incorrect HTML snippet; want:\n\n|%v|\n\ngot:\n\n|%v|", want, got)
+	}
+}
diff --git a/rules/recording.go b/rules/recording.go
index 258faf4b1..e40fbed5e 100644
--- a/rules/recording.go
+++ b/rules/recording.go
@@ -106,7 +106,7 @@ func (rule RecordingRule) HTMLSnippet(pathPrefix string) template.HTML {
 		`<a href="%s">%s</a>%s = <a href="%s">%s</a>`,
 		pathPrefix+strutil.GraphLinkForExpression(rule.name),
 		rule.name,
-		rule.labels,
+		template.HTMLEscapeString(rule.labels.String()),
 		pathPrefix+strutil.GraphLinkForExpression(ruleExpr),
-		ruleExpr))
+		template.HTMLEscapeString(ruleExpr)))
 }
diff --git a/rules/recording_test.go b/rules/recording_test.go
index 7dd32392c..36b5ac1dd 100644
--- a/rules/recording_test.go
+++ b/rules/recording_test.go
@@ -68,3 +68,18 @@ func TestRuleEval(t *testing.T) {
 		}
 	}
 }
+
+func TestRecordingRuleHTMLSnippet(t *testing.T) {
+	expr, err := promql.ParseExpr(`foo{html="<b>BOLD<b>"}`)
+	if err != nil {
+		t.Fatal(err)
+	}
+	rule := NewRecordingRule("testrule", expr, model.LabelSet{"html": "<b>BOLD</b>"})
+
+	const want = `<a href="/test/prefix/graph?g0.expr=testrule&g0.tab=0">testrule</a>{html=&#34;&lt;b&gt;BOLD&lt;/b&gt;&#34;} = <a href="/test/prefix/graph?g0.expr=foo%7Bhtml%3D%22%3Cb%3EBOLD%3Cb%3E%22%7D&g0.tab=0">foo{html=&#34;&lt;b&gt;BOLD&lt;b&gt;&#34;}</a>`
+
+	got := rule.HTMLSnippet("/test/prefix")
+	if got != want {
+		t.Fatalf("incorrect HTML snippet; want:\n\n%s\n\ngot:\n\n%s", want, got)
+	}
+}