From 5da578cfdf717ff1465f729194c8192a00412881 Mon Sep 17 00:00:00 2001
From: Markus Wüstenberg
Date: Fri, 25 Sep 2020 09:57:47 +0200
Subject: Group element helpers in different files (#21)

According to the section at https://developer.mozilla.org/en-US/docs/Web/HTML/Element---
 attr/form.go        |  15 +++++
 attr/form_test.go   |  16 +++++
 attr/forms.go       |  15 -----
 attr/forms_test.go  |  16 -----
 el/content.go       |  25 ++++++++
 el/content_test.go  |  39 +++++++++++++
 el/document.go      |  69 ++++++++++++++++++++++
 el/document_test.go |  63 ++++++++++++++++++++
 el/elements.go      | 137 -------------------------------------------
 el/elements_test.go | 165 ----------------------------------------------------
 el/form.go          |  52 +++++++++++++++++
 el/form_test.go     |  58 ++++++++++++++++++
 el/forms.go         |  52 -----------------
 el/forms_test.go    |  58 ------------------
 el/inline.go        |  29 +++++++++
 el/inline_test.go   |  45 ++++++++++++++
 el/media.go         |   9 +++
 el/media_test.go    |  15 +++++
 el/section.go       |  29 +++++++++
 el/section_test.go  |  45 ++++++++++++++
 20 files changed, 509 insertions(+), 443 deletions(-)
 create mode 100644 attr/form.go
 create mode 100644 attr/form_test.go
 delete mode 100644 attr/forms.go
 delete mode 100644 attr/forms_test.go
 create mode 100644 el/content.go
 create mode 100644 el/content_test.go
 create mode 100644 el/document.go
 create mode 100644 el/document_test.go
 delete mode 100644 el/elements.go
 delete mode 100644 el/elements_test.go
 create mode 100644 el/form.go
 create mode 100644 el/form_test.go
 delete mode 100644 el/forms.go
 delete mode 100644 el/forms_test.go
 create mode 100644 el/inline.go
 create mode 100644 el/inline_test.go
 create mode 100644 el/media.go
 create mode 100644 el/media_test.go
 create mode 100644 el/section.go
 create mode 100644 el/section_test.go

diff --git a/attr/form.go b/attr/form.go
new file mode 100644
index 0000000..b3eec05
--- /dev/null
+++ b/attr/form.go
@@ -0,0 +1,15 @@
+package attr
+
+import (
+	g "github.com/maragudk/gomponents"
+)
+
+// Placeholder returns an attribute with name "placeholder" and the given value.
+func Placeholder(v string) g.Node {
+	return g.Attr("placeholder", v)
+}
+
+// Required returns an attribute with name "required".
+func Required() g.Node {
+	return g.Attr("required")
+}
diff --git a/attr/form_test.go b/attr/form_test.go
new file mode 100644
index 0000000..d222464
--- /dev/null
+++ b/attr/form_test.go
@@ -0,0 +1,16 @@
+package attr_test
+
+import (
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	"github.com/maragudk/gomponents/attr"
+)
+
+func TestForms(t *testing.T) {
+	t.Run("adds placeholder and required attributes", func(t *testing.T) {
+		e := g.El("input", attr.Placeholder("hat"), attr.Required())
+		assert.Equal(t, `<input placeholder="hat" required />`, e)
+	})
+}
diff --git a/attr/forms.go b/attr/forms.go
deleted file mode 100644
index b3eec05..0000000
--- a/attr/forms.go
+++ /dev/null
@@ -1,15 +0,0 @@
-package attr
-
-import (
-	g "github.com/maragudk/gomponents"
-)
-
-// Placeholder returns an attribute with name "placeholder" and the given value.
-func Placeholder(v string) g.Node {
-	return g.Attr("placeholder", v)
-}
-
-// Required returns an attribute with name "required".
-func Required() g.Node {
-	return g.Attr("required")
-}
diff --git a/attr/forms_test.go b/attr/forms_test.go
deleted file mode 100644
index d222464..0000000
--- a/attr/forms_test.go
+++ /dev/null
@@ -1,16 +0,0 @@
-package attr_test
-
-import (
-	"testing"
-
-	g "github.com/maragudk/gomponents"
-	"github.com/maragudk/gomponents/assert"
-	"github.com/maragudk/gomponents/attr"
-)
-
-func TestForms(t *testing.T) {
-	t.Run("adds placeholder and required attributes", func(t *testing.T) {
-		e := g.El("input", attr.Placeholder("hat"), attr.Required())
-		assert.Equal(t, `<input placeholder="hat" required />`, e)
-	})
-}
diff --git a/el/content.go b/el/content.go
new file mode 100644
index 0000000..5a4bce9
--- /dev/null
+++ b/el/content.go
@@ -0,0 +1,25 @@
+package el
+
+import (
+	g "github.com/maragudk/gomponents"
+)
+
+func Div(children ...g.Node) g.NodeFunc {
+	return g.El("div", children...)
+}
+
+func Ol(children ...g.Node) g.NodeFunc {
+	return g.El("ol", children...)
+}
+
+func Ul(children ...g.Node) g.NodeFunc {
+	return g.El("ul", children...)
+}
+
+func Li(children ...g.Node) g.NodeFunc {
+	return g.El("li", children...)
+}
+
+func P(children ...g.Node) g.NodeFunc {
+	return g.El("p", children...)
+}
diff --git a/el/content_test.go b/el/content_test.go
new file mode 100644
index 0000000..b31ad2d
--- /dev/null
+++ b/el/content_test.go
@@ -0,0 +1,39 @@
+package el_test
+
+import (
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	"github.com/maragudk/gomponents/el"
+)
+
+func TestDiv(t *testing.T) {
+	t.Run("returns a div element", func(t *testing.T) {
+		assert.Equal(t, `<div><span /></div>`, el.Div(el.Span()))
+	})
+}
+
+func TestOl(t *testing.T) {
+	t.Run("returns an ol element", func(t *testing.T) {
+		assert.Equal(t, `<ol><li /></ol>`, el.Ol(el.Li()))
+	})
+}
+
+func TestUl(t *testing.T) {
+	t.Run("returns a ul element", func(t *testing.T) {
+		assert.Equal(t, `<ul><li /></ul>`, el.Ul(el.Li()))
+	})
+}
+
+func TestLi(t *testing.T) {
+	t.Run("returns an li element", func(t *testing.T) {
+		assert.Equal(t, `<li>hat</li>`, el.Li(g.Text("hat")))
+	})
+}
+
+func TestP(t *testing.T) {
+	t.Run("returns a p element", func(t *testing.T) {
+		assert.Equal(t, `<p>hat</p>`, el.P(g.Text("hat")))
+	})
+}
diff --git a/el/document.go b/el/document.go
new file mode 100644
index 0000000..8520cd7
--- /dev/null
+++ b/el/document.go
@@ -0,0 +1,69 @@
+// Package el provides shortcuts and helpers to common HTML elements.
+// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element for a list of elements.
+package el
+
+import (
+	"strings"
+
+	g "github.com/maragudk/gomponents"
+)
+
+// Document returns an special kind of Node that prefixes its children with the string "<!doctype html>".
+func Document(children ...g.Node) g.NodeFunc {
+	return func() string {
+		var b strings.Builder
+		b.WriteString("<!doctype html>")
+		for _, c := range children {
+			b.WriteString(c.Render())
+		}
+		return b.String()
+	}
+}
+
+// HTML returns an element with name "html" and the given children.
+func HTML(children ...g.Node) g.NodeFunc {
+	return g.El("html", children...)
+}
+
+// Head returns an element with name "head" and the given children.
+func Head(children ...g.Node) g.NodeFunc {
+	return g.El("head", children...)
+}
+
+// Body returns an element with name "body" and the given children.
+func Body(children ...g.Node) g.NodeFunc {
+	return g.El("body", children...)
+}
+
+// Title returns an element with name "title" and a single Text child.
+func Title(title string) g.NodeFunc {
+	return g.El("title", g.Text(title))
+}
+
+func Meta(children ...g.Node) g.NodeFunc {
+	return g.El("meta", children...)
+}
+
+func Link(children ...g.Node) g.NodeFunc {
+	return g.El("link", children...)
+}
+
+func Style(children ...g.Node) g.NodeFunc {
+	return g.El("style", children...)
+}
+
+func Base(children ...g.Node) g.NodeFunc {
+	return g.El("base", children...)
+}
+
+func prepend(node g.Node, nodes []g.Node) []g.Node {
+	newNodes := []g.Node{node}
+	newNodes = append(newNodes, nodes...)
+	return newNodes
+}
+
+func prepend2(node1, node2 g.Node, nodes []g.Node) []g.Node {
+	newNodes := []g.Node{node1, node2}
+	newNodes = append(newNodes, nodes...)
+	return newNodes
+}
diff --git a/el/document_test.go b/el/document_test.go
new file mode 100644
index 0000000..c525f30
--- /dev/null
+++ b/el/document_test.go
@@ -0,0 +1,63 @@
+package el_test
+
+import (
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	"github.com/maragudk/gomponents/el"
+)
+
+func TestDocument(t *testing.T) {
+	t.Run("returns doctype and children", func(t *testing.T) {
+		assert.Equal(t, `<!doctype html><html />`, el.Document(g.El("html")))
+	})
+}
+
+func TestHTML(t *testing.T) {
+	t.Run("returns an html element", func(t *testing.T) {
+		assert.Equal(t, "<html><div /><span /></html>", el.HTML(g.El("div"), g.El("span")))
+	})
+}
+
+func TestHead(t *testing.T) {
+	t.Run("returns a head element", func(t *testing.T) {
+		assert.Equal(t, "<head><title /><link /></head>", el.Head(g.El("title"), g.El("link")))
+	})
+}
+
+func TestBody(t *testing.T) {
+	t.Run("returns a body element", func(t *testing.T) {
+		assert.Equal(t, "<body><div /><span /></body>", el.Body(g.El("div"), g.El("span")))
+	})
+}
+
+func TestTitle(t *testing.T) {
+	t.Run("returns a title element with text content", func(t *testing.T) {
+		assert.Equal(t, "<title>hat</title>", el.Title("hat"))
+	})
+}
+
+func TestMeta(t *testing.T) {
+	t.Run("returns a meta element", func(t *testing.T) {
+		assert.Equal(t, `<meta charset="utf-8" />`, el.Meta(g.Attr("charset", "utf-8")))
+	})
+}
+
+func TestLink(t *testing.T) {
+	t.Run("returns a link element", func(t *testing.T) {
+		assert.Equal(t, `<link rel="stylesheet" />`, el.Link(g.Attr("rel", "stylesheet")))
+	})
+}
+
+func TestStyle(t *testing.T) {
+	t.Run("returns a style element", func(t *testing.T) {
+		assert.Equal(t, `<style type="text/css" />`, el.Style(g.Attr("type", "text/css")))
+	})
+}
+
+func TestBase(t *testing.T) {
+	t.Run("returns a base element", func(t *testing.T) {
+		assert.Equal(t, `<base href="/hat/" />`, el.Base(g.Attr("href", "/hat/")))
+	})
+}
diff --git a/el/elements.go b/el/elements.go
deleted file mode 100644
index 31bba14..0000000
--- a/el/elements.go
+++ /dev/null
@@ -1,137 +0,0 @@
-// Package el provides shortcuts and helpers to common HTML elements.
-// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element for a list of elements.
-package el
-
-import (
-	"strings"
-
-	g "github.com/maragudk/gomponents"
-)
-
-// Document returns an special kind of Node that prefixes its children with the string "<!doctype html>".
-func Document(children ...g.Node) g.NodeFunc {
-	return func() string {
-		var b strings.Builder
-		b.WriteString("<!doctype html>")
-		for _, c := range children {
-			b.WriteString(c.Render())
-		}
-		return b.String()
-	}
-}
-
-// HTML returns an element with name "html" and the given children.
-func HTML(children ...g.Node) g.NodeFunc {
-	return g.El("html", children...)
-}
-
-// Head returns an element with name "head" and the given children.
-func Head(children ...g.Node) g.NodeFunc {
-	return g.El("head", children...)
-}
-
-// Body returns an element with name "body" and the given children.
-func Body(children ...g.Node) g.NodeFunc {
-	return g.El("body", children...)
-}
-
-// Title returns an element with name "title" and a single Text child.
-func Title(title string) g.NodeFunc {
-	return g.El("title", g.Text(title))
-}
-
-func Meta(children ...g.Node) g.NodeFunc {
-	return g.El("meta", children...)
-}
-
-func Link(children ...g.Node) g.NodeFunc {
-	return g.El("link", children...)
-}
-
-func Style(children ...g.Node) g.NodeFunc {
-	return g.El("style", children...)
-}
-
-func Div(children ...g.Node) g.NodeFunc {
-	return g.El("div", children...)
-}
-
-func Span(children ...g.Node) g.NodeFunc {
-	return g.El("span", children...)
-}
-
-func A(href string, children ...g.Node) g.NodeFunc {
-	return g.El("a", prepend(g.Attr("href", href), children)...)
-}
-
-func P(children ...g.Node) g.NodeFunc {
-	return g.El("p", children...)
-}
-
-func H1(text string, children ...g.Node) g.NodeFunc {
-	return g.El("h1", prepend(g.Text(text), children)...)
-}
-
-func H2(text string, children ...g.Node) g.NodeFunc {
-	return g.El("h2", prepend(g.Text(text), children)...)
-}
-
-func H3(text string, children ...g.Node) g.NodeFunc {
-	return g.El("h3", prepend(g.Text(text), children)...)
-}
-
-func H4(text string, children ...g.Node) g.NodeFunc {
-	return g.El("h4", prepend(g.Text(text), children)...)
-}
-
-func H5(text string, children ...g.Node) g.NodeFunc {
-	return g.El("h5", prepend(g.Text(text), children)...)
-}
-
-func H6(text string, children ...g.Node) g.NodeFunc {
-	return g.El("h6", prepend(g.Text(text), children)...)
-}
-
-func Ol(children ...g.Node) g.NodeFunc {
-	return g.El("ol", children...)
-}
-
-func Ul(children ...g.Node) g.NodeFunc {
-	return g.El("ul", children...)
-}
-
-func Li(children ...g.Node) g.NodeFunc {
-	return g.El("li", children...)
-}
-
-func B(text string, children ...g.Node) g.NodeFunc {
-	return g.El("b", prepend(g.Text(text), children)...)
-}
-
-func Strong(text string, children ...g.Node) g.NodeFunc {
-	return g.El("strong", prepend(g.Text(text), children)...)
-}
-
-func I(text string, children ...g.Node) g.NodeFunc {
-	return g.El("i", prepend(g.Text(text), children)...)
-}
-
-func Em(text string, children ...g.Node) g.NodeFunc {
-	return g.El("em", prepend(g.Text(text), children)...)
-}
-
-func Img(src, alt string, children ...g.Node) g.NodeFunc {
-	return g.El("img", prepend2(g.Attr("src", src), g.Attr("alt", alt), children)...)
-}
-
-func prepend(node g.Node, nodes []g.Node) []g.Node {
-	newNodes := []g.Node{node}
-	newNodes = append(newNodes, nodes...)
-	return newNodes
-}
-
-func prepend2(node1, node2 g.Node, nodes []g.Node) []g.Node {
-	newNodes := []g.Node{node1, node2}
-	newNodes = append(newNodes, nodes...)
-	return newNodes
-}
diff --git a/el/elements_test.go b/el/elements_test.go
deleted file mode 100644
index a5e8647..0000000
--- a/el/elements_test.go
+++ /dev/null
@@ -1,165 +0,0 @@
-package el_test
-
-import (
-	"testing"
-
-	g "github.com/maragudk/gomponents"
-	"github.com/maragudk/gomponents/assert"
-	"github.com/maragudk/gomponents/el"
-)
-
-func TestDocument(t *testing.T) {
-	t.Run("returns doctype and children", func(t *testing.T) {
-		assert.Equal(t, `<!doctype html><html />`, el.Document(g.El("html")))
-	})
-}
-
-func TestHTML(t *testing.T) {
-	t.Run("returns an html element", func(t *testing.T) {
-		assert.Equal(t, "<html><div /><span /></html>", el.HTML(g.El("div"), g.El("span")))
-	})
-}
-
-func TestHead(t *testing.T) {
-	t.Run("returns a head element", func(t *testing.T) {
-		assert.Equal(t, "<head><title /><link /></head>", el.Head(g.El("title"), g.El("link")))
-	})
-}
-
-func TestBody(t *testing.T) {
-	t.Run("returns a body element", func(t *testing.T) {
-		assert.Equal(t, "<body><div /><span /></body>", el.Body(g.El("div"), g.El("span")))
-	})
-}
-
-func TestTitle(t *testing.T) {
-	t.Run("returns a title element with text content", func(t *testing.T) {
-		assert.Equal(t, "<title>hat</title>", el.Title("hat"))
-	})
-}
-
-func TestMeta(t *testing.T) {
-	t.Run("returns a meta element", func(t *testing.T) {
-		assert.Equal(t, `<meta charset="utf-8" />`, el.Meta(g.Attr("charset", "utf-8")))
-	})
-}
-
-func TestLink(t *testing.T) {
-	t.Run("returns a link element", func(t *testing.T) {
-		assert.Equal(t, `<link rel="stylesheet" />`, el.Link(g.Attr("rel", "stylesheet")))
-	})
-}
-
-func TestStyle(t *testing.T) {
-	t.Run("returns a style element", func(t *testing.T) {
-		assert.Equal(t, `<style type="text/css" />`, el.Style(g.Attr("type", "text/css")))
-	})
-}
-
-func TestDiv(t *testing.T) {
-	t.Run("returns a div element", func(t *testing.T) {
-		assert.Equal(t, `<div><span /></div>`, el.Div(el.Span()))
-	})
-}
-
-func TestSpan(t *testing.T) {
-	t.Run("returns a span element", func(t *testing.T) {
-		assert.Equal(t, `<span>hat</span>`, el.Span(g.Text("hat")))
-	})
-}
-
-func TestA(t *testing.T) {
-	t.Run("returns an a element with a href attribute", func(t *testing.T) {
-		assert.Equal(t, `<a href="#">hat</a>`, el.A("#", g.Text("hat")))
-	})
-}
-
-func TestP(t *testing.T) {
-	t.Run("returns a p element", func(t *testing.T) {
-		assert.Equal(t, `<p>hat</p>`, el.P(g.Text("hat")))
-	})
-}
-
-func TestH1(t *testing.T) {
-	t.Run("returns an h1 element", func(t *testing.T) {
-		assert.Equal(t, `<h1 id="headline">hat</h1>`, el.H1("hat", g.Attr("id", "headline")))
-	})
-}
-
-func TestH2(t *testing.T) {
-	t.Run("returns an h2 element", func(t *testing.T) {
-		assert.Equal(t, `<h2 id="headline">hat</h2>`, el.H2("hat", g.Attr("id", "headline")))
-	})
-}
-
-func TestH3(t *testing.T) {
-	t.Run("returns an h3 element", func(t *testing.T) {
-		assert.Equal(t, `<h3 id="headline">hat</h3>`, el.H3("hat", g.Attr("id", "headline")))
-	})
-}
-
-func TestH4(t *testing.T) {
-	t.Run("returns an h4 element", func(t *testing.T) {
-		assert.Equal(t, `<h4 id="headline">hat</h4>`, el.H4("hat", g.Attr("id", "headline")))
-	})
-}
-
-func TestH5(t *testing.T) {
-	t.Run("returns an h5 element", func(t *testing.T) {
-		assert.Equal(t, `<h5 id="headline">hat</h5>`, el.H5("hat", g.Attr("id", "headline")))
-	})
-}
-
-func TestH6(t *testing.T) {
-	t.Run("returns an h6 element", func(t *testing.T) {
-		assert.Equal(t, `<h6 id="headline">hat</h6>`, el.H6("hat", g.Attr("id", "headline")))
-	})
-}
-
-func TestOl(t *testing.T) {
-	t.Run("returns an ol element", func(t *testing.T) {
-		assert.Equal(t, `<ol><li /></ol>`, el.Ol(el.Li()))
-	})
-}
-
-func TestUl(t *testing.T) {
-	t.Run("returns a ul element", func(t *testing.T) {
-		assert.Equal(t, `<ul><li /></ul>`, el.Ul(el.Li()))
-	})
-}
-
-func TestLi(t *testing.T) {
-	t.Run("returns an li element", func(t *testing.T) {
-		assert.Equal(t, `<li>hat</li>`, el.Li(g.Text("hat")))
-	})
-}
-
-func TestB(t *testing.T) {
-	t.Run("returns a b element", func(t *testing.T) {
-		assert.Equal(t, `<b id="text">hat</b>`, el.B("hat", g.Attr("id", "text")))
-	})
-}
-
-func TestStrong(t *testing.T) {
-	t.Run("returns a strong element", func(t *testing.T) {
-		assert.Equal(t, `<strong id="text">hat</strong>`, el.Strong("hat", g.Attr("id", "text")))
-	})
-}
-
-func TestI(t *testing.T) {
-	t.Run("returns an i element", func(t *testing.T) {
-		assert.Equal(t, `<i id="text">hat</i>`, el.I("hat", g.Attr("id", "text")))
-	})
-}
-
-func TestEm(t *testing.T) {
-	t.Run("returns an em element", func(t *testing.T) {
-		assert.Equal(t, `<em id="text">hat</em>`, el.Em("hat", g.Attr("id", "text")))
-	})
-}
-
-func TestImg(t *testing.T) {
-	t.Run("returns an img element with href and alt attributes", func(t *testing.T) {
-		assert.Equal(t, `<img src="hat.png" alt="hat" id="image" />`, el.Img("hat.png", "hat", g.Attr("id", "image")))
-	})
-}
diff --git a/el/form.go b/el/form.go
new file mode 100644
index 0000000..9ada591
--- /dev/null
+++ b/el/form.go
@@ -0,0 +1,52 @@
+package el
+
+import (
+	"fmt"
+
+	g "github.com/maragudk/gomponents"
+)
+
+// Button returns an element with name "button" and the given children.
+func Button(children ...g.Node) g.NodeFunc {
+	return g.El("button", children...)
+}
+
+// Form returns an element with name "form", the given action and method attributes, and the given children.
+func Form(action, method string, children ...g.Node) g.NodeFunc {
+	return g.El("form", prepend2(g.Attr("action", action), g.Attr("method", method), children)...)
+}
+
+// Input returns an element with name "input", the given type and name attributes, and the given children.
+// Note that "type" is a keyword in Go, so the parameter is called typ.
+func Input(typ, name string, children ...g.Node) g.NodeFunc {
+	return g.El("input", prepend2(g.Attr("type", typ), g.Attr("name", name), children)...)
+}
+
+// Label returns an element with name "label", the given for attribute, and the given children.
+// Note that "for" is a keyword in Go, so the parameter is called forr.
+func Label(forr string, children ...g.Node) g.NodeFunc {
+	return g.El("label", prepend(g.Attr("for", forr), children)...)
+}
+
+// Option returns an element with name "option", the given text content and value attribute, and the given children.
+func Option(text, value string, children ...g.Node) g.NodeFunc {
+	return g.El("option", prepend2(g.Attr("value", value), g.Text(text), children)...)
+}
+
+// Progress returns an element with name "progress", the given value and max attributes, and the given children.
+func Progress(value, max float64, children ...g.Node) g.NodeFunc {
+	return g.El("progress", prepend2(
+		g.Attr("value", fmt.Sprintf("%v", value)),
+		g.Attr("max", fmt.Sprintf("%v", max)),
+		children)...)
+}
+
+// Select returns an element with name "select", the given name attribute, and the given children.
+func Select(name string, children ...g.Node) g.NodeFunc {
+	return g.El("select", prepend(g.Attr("name", name), children)...)
+}
+
+// Textarea returns an element with name "textarea", the given name attribute, and the given children.
+func Textarea(name string, children ...g.Node) g.NodeFunc {
+	return g.El("textarea", prepend(g.Attr("name", name), children)...)
+}
diff --git a/el/form_test.go b/el/form_test.go
new file mode 100644
index 0000000..2f43036
--- /dev/null
+++ b/el/form_test.go
@@ -0,0 +1,58 @@
+package el_test
+
+import (
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	"github.com/maragudk/gomponents/el"
+)
+
+func TestButton(t *testing.T) {
+	t.Run("returns a button element", func(t *testing.T) {
+		assert.Equal(t, `<button />`, el.Button())
+	})
+}
+
+func TestForm(t *testing.T) {
+	t.Run("returns a form element with action and method attributes", func(t *testing.T) {
+		assert.Equal(t, `<form action="/" method="post" />`, el.Form("/", "post"))
+	})
+}
+
+func TestInput(t *testing.T) {
+	t.Run("returns an input element with attributes type and name", func(t *testing.T) {
+		assert.Equal(t, `<input type="text" name="hat" />`, el.Input("text", "hat"))
+	})
+}
+
+func TestLabel(t *testing.T) {
+	t.Run("returns a label element with attribute for", func(t *testing.T) {
+		assert.Equal(t, `<label for="hat">Hat</label>`, el.Label("hat", g.Text("Hat")))
+	})
+}
+
+func TestOption(t *testing.T) {
+	t.Run("returns an option element with attribute label and content", func(t *testing.T) {
+		assert.Equal(t, `<option value="hat">Hat</option>`, el.Option("Hat", "hat"))
+	})
+}
+
+func TestProgress(t *testing.T) {
+	t.Run("returns a progress element with attributes value and max", func(t *testing.T) {
+		assert.Equal(t, `<progress value="5.5" max="10" />`, el.Progress(5.5, 10))
+	})
+}
+
+func TestSelect(t *testing.T) {
+	t.Run("returns a select element with attribute name", func(t *testing.T) {
+		assert.Equal(t, `<select name="hat"><option value="partyhat">Partyhat</option></select>`,
+			el.Select("hat", el.Option("Partyhat", "partyhat")))
+	})
+}
+
+func TestTextarea(t *testing.T) {
+	t.Run("returns a textarea element with attribute name", func(t *testing.T) {
+		assert.Equal(t, `<textarea name="hat" />`, el.Textarea("hat"))
+	})
+}
diff --git a/el/forms.go b/el/forms.go
deleted file mode 100644
index 9ada591..0000000
--- a/el/forms.go
+++ /dev/null
@@ -1,52 +0,0 @@
-package el
-
-import (
-	"fmt"
-
-	g "github.com/maragudk/gomponents"
-)
-
-// Button returns an element with name "button" and the given children.
-func Button(children ...g.Node) g.NodeFunc {
-	return g.El("button", children...)
-}
-
-// Form returns an element with name "form", the given action and method attributes, and the given children.
-func Form(action, method string, children ...g.Node) g.NodeFunc {
-	return g.El("form", prepend2(g.Attr("action", action), g.Attr("method", method), children)...)
-}
-
-// Input returns an element with name "input", the given type and name attributes, and the given children.
-// Note that "type" is a keyword in Go, so the parameter is called typ.
-func Input(typ, name string, children ...g.Node) g.NodeFunc {
-	return g.El("input", prepend2(g.Attr("type", typ), g.Attr("name", name), children)...)
-}
-
-// Label returns an element with name "label", the given for attribute, and the given children.
-// Note that "for" is a keyword in Go, so the parameter is called forr.
-func Label(forr string, children ...g.Node) g.NodeFunc {
-	return g.El("label", prepend(g.Attr("for", forr), children)...)
-}
-
-// Option returns an element with name "option", the given text content and value attribute, and the given children.
-func Option(text, value string, children ...g.Node) g.NodeFunc {
-	return g.El("option", prepend2(g.Attr("value", value), g.Text(text), children)...)
-}
-
-// Progress returns an element with name "progress", the given value and max attributes, and the given children.
-func Progress(value, max float64, children ...g.Node) g.NodeFunc {
-	return g.El("progress", prepend2(
-		g.Attr("value", fmt.Sprintf("%v", value)),
-		g.Attr("max", fmt.Sprintf("%v", max)),
-		children)...)
-}
-
-// Select returns an element with name "select", the given name attribute, and the given children.
-func Select(name string, children ...g.Node) g.NodeFunc {
-	return g.El("select", prepend(g.Attr("name", name), children)...)
-}
-
-// Textarea returns an element with name "textarea", the given name attribute, and the given children.
-func Textarea(name string, children ...g.Node) g.NodeFunc {
-	return g.El("textarea", prepend(g.Attr("name", name), children)...)
-}
diff --git a/el/forms_test.go b/el/forms_test.go
deleted file mode 100644
index 2f43036..0000000
--- a/el/forms_test.go
+++ /dev/null
@@ -1,58 +0,0 @@
-package el_test
-
-import (
-	"testing"
-
-	g "github.com/maragudk/gomponents"
-	"github.com/maragudk/gomponents/assert"
-	"github.com/maragudk/gomponents/el"
-)
-
-func TestButton(t *testing.T) {
-	t.Run("returns a button element", func(t *testing.T) {
-		assert.Equal(t, `<button />`, el.Button())
-	})
-}
-
-func TestForm(t *testing.T) {
-	t.Run("returns a form element with action and method attributes", func(t *testing.T) {
-		assert.Equal(t, `<form action="/" method="post" />`, el.Form("/", "post"))
-	})
-}
-
-func TestInput(t *testing.T) {
-	t.Run("returns an input element with attributes type and name", func(t *testing.T) {
-		assert.Equal(t, `<input type="text" name="hat" />`, el.Input("text", "hat"))
-	})
-}
-
-func TestLabel(t *testing.T) {
-	t.Run("returns a label element with attribute for", func(t *testing.T) {
-		assert.Equal(t, `<label for="hat">Hat</label>`, el.Label("hat", g.Text("Hat")))
-	})
-}
-
-func TestOption(t *testing.T) {
-	t.Run("returns an option element with attribute label and content", func(t *testing.T) {
-		assert.Equal(t, `<option value="hat">Hat</option>`, el.Option("Hat", "hat"))
-	})
-}
-
-func TestProgress(t *testing.T) {
-	t.Run("returns a progress element with attributes value and max", func(t *testing.T) {
-		assert.Equal(t, `<progress value="5.5" max="10" />`, el.Progress(5.5, 10))
-	})
-}
-
-func TestSelect(t *testing.T) {
-	t.Run("returns a select element with attribute name", func(t *testing.T) {
-		assert.Equal(t, `<select name="hat"><option value="partyhat">Partyhat</option></select>`,
-			el.Select("hat", el.Option("Partyhat", "partyhat")))
-	})
-}
-
-func TestTextarea(t *testing.T) {
-	t.Run("returns a textarea element with attribute name", func(t *testing.T) {
-		assert.Equal(t, `<textarea name="hat" />`, el.Textarea("hat"))
-	})
-}
diff --git a/el/inline.go b/el/inline.go
new file mode 100644
index 0000000..f9ae39f
--- /dev/null
+++ b/el/inline.go
@@ -0,0 +1,29 @@
+package el
+
+import (
+	g "github.com/maragudk/gomponents"
+)
+
+func Span(children ...g.Node) g.NodeFunc {
+	return g.El("span", children...)
+}
+
+func A(href string, children ...g.Node) g.NodeFunc {
+	return g.El("a", prepend(g.Attr("href", href), children)...)
+}
+
+func B(text string, children ...g.Node) g.NodeFunc {
+	return g.El("b", prepend(g.Text(text), children)...)
+}
+
+func Strong(text string, children ...g.Node) g.NodeFunc {
+	return g.El("strong", prepend(g.Text(text), children)...)
+}
+
+func I(text string, children ...g.Node) g.NodeFunc {
+	return g.El("i", prepend(g.Text(text), children)...)
+}
+
+func Em(text string, children ...g.Node) g.NodeFunc {
+	return g.El("em", prepend(g.Text(text), children)...)
+}
diff --git a/el/inline_test.go b/el/inline_test.go
new file mode 100644
index 0000000..0873bc2
--- /dev/null
+++ b/el/inline_test.go
@@ -0,0 +1,45 @@
+package el_test
+
+import (
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	"github.com/maragudk/gomponents/el"
+)
+
+func TestSpan(t *testing.T) {
+	t.Run("returns a span element", func(t *testing.T) {
+		assert.Equal(t, `<span>hat</span>`, el.Span(g.Text("hat")))
+	})
+}
+
+func TestA(t *testing.T) {
+	t.Run("returns an a element with a href attribute", func(t *testing.T) {
+		assert.Equal(t, `<a href="#">hat</a>`, el.A("#", g.Text("hat")))
+	})
+}
+
+func TestB(t *testing.T) {
+	t.Run("returns a b element", func(t *testing.T) {
+		assert.Equal(t, `<b id="text">hat</b>`, el.B("hat", g.Attr("id", "text")))
+	})
+}
+
+func TestStrong(t *testing.T) {
+	t.Run("returns a strong element", func(t *testing.T) {
+		assert.Equal(t, `<strong id="text">hat</strong>`, el.Strong("hat", g.Attr("id", "text")))
+	})
+}
+
+func TestI(t *testing.T) {
+	t.Run("returns an i element", func(t *testing.T) {
+		assert.Equal(t, `<i id="text">hat</i>`, el.I("hat", g.Attr("id", "text")))
+	})
+}
+
+func TestEm(t *testing.T) {
+	t.Run("returns an em element", func(t *testing.T) {
+		assert.Equal(t, `<em id="text">hat</em>`, el.Em("hat", g.Attr("id", "text")))
+	})
+}
diff --git a/el/media.go b/el/media.go
new file mode 100644
index 0000000..4a19865
--- /dev/null
+++ b/el/media.go
@@ -0,0 +1,9 @@
+package el
+
+import (
+	g "github.com/maragudk/gomponents"
+)
+
+func Img(src, alt string, children ...g.Node) g.NodeFunc {
+	return g.El("img", prepend2(g.Attr("src", src), g.Attr("alt", alt), children)...)
+}
diff --git a/el/media_test.go b/el/media_test.go
new file mode 100644
index 0000000..0c078dd
--- /dev/null
+++ b/el/media_test.go
@@ -0,0 +1,15 @@
+package el_test
+
+import (
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	"github.com/maragudk/gomponents/el"
+)
+
+func TestImg(t *testing.T) {
+	t.Run("returns an img element with href and alt attributes", func(t *testing.T) {
+		assert.Equal(t, `<img src="hat.png" alt="hat" id="image" />`, el.Img("hat.png", "hat", g.Attr("id", "image")))
+	})
+}
diff --git a/el/section.go b/el/section.go
new file mode 100644
index 0000000..53e9890
--- /dev/null
+++ b/el/section.go
@@ -0,0 +1,29 @@
+package el
+
+import (
+	g "github.com/maragudk/gomponents"
+)
+
+func H1(text string, children ...g.Node) g.NodeFunc {
+	return g.El("h1", prepend(g.Text(text), children)...)
+}
+
+func H2(text string, children ...g.Node) g.NodeFunc {
+	return g.El("h2", prepend(g.Text(text), children)...)
+}
+
+func H3(text string, children ...g.Node) g.NodeFunc {
+	return g.El("h3", prepend(g.Text(text), children)...)
+}
+
+func H4(text string, children ...g.Node) g.NodeFunc {
+	return g.El("h4", prepend(g.Text(text), children)...)
+}
+
+func H5(text string, children ...g.Node) g.NodeFunc {
+	return g.El("h5", prepend(g.Text(text), children)...)
+}
+
+func H6(text string, children ...g.Node) g.NodeFunc {
+	return g.El("h6", prepend(g.Text(text), children)...)
+}
diff --git a/el/section_test.go b/el/section_test.go
new file mode 100644
index 0000000..5147e04
--- /dev/null
+++ b/el/section_test.go
@@ -0,0 +1,45 @@
+package el_test
+
+import (
+	"testing"
+
+	g "github.com/maragudk/gomponents"
+	"github.com/maragudk/gomponents/assert"
+	"github.com/maragudk/gomponents/el"
+)
+
+func TestH1(t *testing.T) {
+	t.Run("returns an h1 element", func(t *testing.T) {
+		assert.Equal(t, `<h1 id="headline">hat</h1>`, el.H1("hat", g.Attr("id", "headline")))
+	})
+}
+
+func TestH2(t *testing.T) {
+	t.Run("returns an h2 element", func(t *testing.T) {
+		assert.Equal(t, `<h2 id="headline">hat</h2>`, el.H2("hat", g.Attr("id", "headline")))
+	})
+}
+
+func TestH3(t *testing.T) {
+	t.Run("returns an h3 element", func(t *testing.T) {
+		assert.Equal(t, `<h3 id="headline">hat</h3>`, el.H3("hat", g.Attr("id", "headline")))
+	})
+}
+
+func TestH4(t *testing.T) {
+	t.Run("returns an h4 element", func(t *testing.T) {
+		assert.Equal(t, `<h4 id="headline">hat</h4>`, el.H4("hat", g.Attr("id", "headline")))
+	})
+}
+
+func TestH5(t *testing.T) {
+	t.Run("returns an h5 element", func(t *testing.T) {
+		assert.Equal(t, `<h5 id="headline">hat</h5>`, el.H5("hat", g.Attr("id", "headline")))
+	})
+}
+
+func TestH6(t *testing.T) {
+	t.Run("returns an h6 element", func(t *testing.T) {
+		assert.Equal(t, `<h6 id="headline">hat</h6>`, el.H6("hat", g.Attr("id", "headline")))
+	})
+}
-- 
cgit 1.4.1