feat: add missing semantic text elements

attrs/attrs.go

@@ -44,6 +44,7 @@ const (
 
 	// Semantic Text Attributes
 
+	Cite = "cite"
 	// Deprecated: Use Datetime instead
 	DateTime = "datetime"
 	Datetime = "datetime"

elements.go

@@ -348,11 +348,26 @@ func NoScript(attrs attrs.Props, children ...Node) *Element {
 
 // --- Semantic Text Content Elements ---
 
+// Abbr creates an <abbr> element.
+func Abbr(attrs attrs.Props, children ...Node) *Element {
+	return newElement("abbr", attrs, children...)
+}
+
 // Address creates an <address> element.
 func Address(attrs attrs.Props, children ...Node) *Element {
 	return newElement("address", attrs, children...)
 }
 
+// Cite creates a <cite> element.
+func Cite(attrs attrs.Props, children ...Node) *Element {
+	return newElement("cite", attrs, children...)
+}
+
+// Data creates a <data> element.
+func Data(attrs attrs.Props, children ...Node) *Element {
+	return newElement("data", attrs, children...)
+}
+
 // Details creates a <details> element.
 func Details(attrs attrs.Props, children ...Node) *Element {
 	return newElement("details", attrs, children...)
@@ -368,11 +383,31 @@ func Figure(attrs attrs.Props, children ...Node) *Element {
 	return newElement("figure", attrs, children...)
 }
 
+// Kbd creates a <kbd> element.
+func Kbd(attrs attrs.Props, children ...Node) *Element {
+	return newElement("kbd", attrs, children...)
+}
+
 // Mark creates a <mark> element.
 func Mark(attrs attrs.Props, children ...Node) *Element {
 	return newElement("mark", attrs, children...)
 }
 
+// Q creates a <q> element.
+func Q(attrs attrs.Props, children ...Node) *Element {
+	return newElement("q", attrs, children...)
+}
+
+// Samp creates a <samp> element.
+func Samp(attrs attrs.Props, children ...Node) *Element {
+	return newElement("samp", attrs, children...)
+}
+
+// Small creates a <small> element.
+func Small(attrs attrs.Props, children ...Node) *Element {
+	return newElement("small", attrs, children...)
+}
+
 // Summary creates a <summary> element.
 func Summary(attrs attrs.Props, children ...Node) *Element {
 	return newElement("summary", attrs, children...)
@@ -383,6 +418,11 @@ func Time(attrs attrs.Props, children ...Node) *Element {
 	return newElement("time", attrs, children...)
 }
 
+// Var creates a <var> element.
+func Var(attrs attrs.Props, children ...Node) *Element {
+	return newElement("var", attrs, children...)
+}
+
 // ========== Tables ==========
 
 // Table creates a <table> element.

elements_test.go

@@ -439,12 +439,24 @@ func TestNoScript(t *testing.T) {
 
 // --- Semantic Text Content Elements ---
 
+func TestAbbr(t *testing.T) {
+	expected := `<abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>`
+	el := Abbr(attrs.Props{attrs.Title: "Web Hypertext Application Technology Working Group"}, Text("WHATWG"))
+	assert.Equal(t, expected, el.Render())
+}
+
 func TestAddress(t *testing.T) {
 	expected := `<address>123 Example St.</address>`
 	el := Address(nil, Text("123 Example St."))
 	assert.Equal(t, expected, el.Render())
 }
 
+func TestCite(t *testing.T) {
+	expected := `<p>My favorite book is <cite>The Reality Dysfunction</cite> by Peter F. Hamilton.</p>`
+	el := P(nil, Text("My favorite book is "), Cite(nil, Text("The Reality Dysfunction")), Text(" by Peter F. Hamilton."))
+	assert.Equal(t, expected, el.Render())
+}
+
 func TestDetails(t *testing.T) {
 	expected := `<details><summary>More Info</summary><p>Details content here.</p></details>`
 	el := Details(nil, Summary(nil, Text("More Info")), P(nil, Text("Details content here.")))
@@ -463,6 +475,12 @@ func TestDetailsWithOpenTrue(t *testing.T) {
 	assert.Equal(t, expected, el.Render())
 }
 
+func TestData(t *testing.T) {
+	expected := `<data value="8">Eight</data>`
+	el := Data(attrs.Props{attrs.Value: "8"}, Text("Eight"))
+	assert.Equal(t, expected, el.Render())
+}
+
 func TestFigCaption(t *testing.T) {
 	expected := `<figcaption>Description of the figure.</figcaption>`
 	el := FigCaption(nil, Text("Description of the figure."))
@@ -475,12 +493,36 @@ func TestFigure(t *testing.T) {
 	assert.Equal(t, expected, el.Render())
 }
 
+func TestKbd(t *testing.T) {
+	expected := `<p>To make George eat an apple, select <kbd>File | Eat Apple...</kbd></p>`
+	el := P(nil, Text("To make George eat an apple, select "), Kbd(nil, Text("File | Eat Apple...")))
+	assert.Equal(t, expected, el.Render())
+}
+
 func TestMark(t *testing.T) {
 	expected := `<p>You must <mark>highlight</mark> this word.</p>`
 	el := P(nil, Text("You must "), Mark(nil, Text("highlight")), Text(" this word."))
 	assert.Equal(t, expected, el.Render())
 }
 
+func TestQ(t *testing.T) {
+	expected := `<p>The W3C's mission is <q cite="https://www.w3.org/Consortium/">To lead the World Wide Web to its full potential</q>.</p>`
+	el := P(nil, Text("The W3C's mission is "), Q(attrs.Props{attrs.Cite: "https://www.w3.org/Consortium/"}, Text("To lead the World Wide Web to its full potential")), Text("."))
+	assert.Equal(t, expected, el.Render())
+}
+
+func TestSamp(t *testing.T) {
+	expected := `<p>The computer said <samp>Too much cheese in tray two</samp> but I didn't know what that meant.</p>`
+	el := P(nil, Text("The computer said "), Samp(nil, Text("Too much cheese in tray two")), Text(" but I didn't know what that meant."))
+	assert.Equal(t, expected, el.Render())
+}
+
+func TestSmall(t *testing.T) {
+	expected := `<p>Single room <small>breakfast included, VAT not included</small></p>`
+	el := P(nil, Text("Single room "), Small(nil, Text("breakfast included, VAT not included")))
+	assert.Equal(t, expected, el.Render())
+}
+
 func TestSummary(t *testing.T) {
 	expected := `<details><summary>Summary Title</summary></details>`
 	el := Details(nil, Summary(nil, Text("Summary Title")))
@@ -489,7 +531,13 @@ func TestSummary(t *testing.T) {
 
 func TestTime(t *testing.T) {
 	expected := `<time datetime="2023-01-01T00:00:00Z">New Year's Day</time>`
-	el := Time(attrs.Props{attrs.DateTime: "2023-01-01T00:00:00Z"}, Text("New Year's Day"))
+	el := Time(attrs.Props{attrs.Datetime: "2023-01-01T00:00:00Z"}, Text("New Year's Day"))
+	assert.Equal(t, expected, el.Render())
+}
+
+func TestVar(t *testing.T) {
+	expected := `<p>After a few moment's thought, she wrote <var>E</var>.</p>`
+	el := P(nil, Text("After a few moment's thought, she wrote "), Var(nil, Text("E")), Text("."))
 	assert.Equal(t, expected, el.Render())
 }