Repository: maragudk/gomponents
Pull request #21 (2020-09-25 07:54:31)

Group element helpers in different files
According to the section at https://developer.mozilla.org/en-US/docs/Web/HTML/Element

codecov[bot]: # [Codecov](https://codecov.io/gh/maragudk/gomponents/pull/21?src=pr&el=h1) Report
> Merging [#21](https://codecov.io/gh/maragudk/gomponents/pull/21?src=pr&el=desc) into [master](https://codecov.io/gh/maragudk/gomponents/commit/77b64b13028d94a54491e606eed4dc759ec46dd2?el=desc) will **not change** coverage.
> The diff coverage is `100.00%`.

[![Impacted file tree graph](https://codecov.io/gh/maragudk/gomponents/pull/21/graphs/tree.svg?width=650&height=150&src=pr&token=JYN032TYAC)](https://codecov.io/gh/maragudk/gomponents/pull/21?src=pr&el=tree)

```diff
@@            Coverage Diff            @@
##            master       #21   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            5         9    +4     
  Lines          106       107    +1     
=========================================
+ Hits           106       107    +1     
```


| [Impacted Files](https://codecov.io/gh/maragudk/gomponents/pull/21?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [attr/form.go](https://codecov.io/gh/maragudk/gomponents/pull/21/diff?src=pr&el=tree#diff-YXR0ci9mb3JtLmdv) | `100.00% <ø> (ø)` | |
| [el/form.go](https://codecov.io/gh/maragudk/gomponents/pull/21/diff?src=pr&el=tree#diff-ZWwvZm9ybS5nbw==) | `100.00% <ø> (ø)` | |
| [el/content.go](https://codecov.io/gh/maragudk/gomponents/pull/21/diff?src=pr&el=tree#diff-ZWwvY29udGVudC5nbw==) | `100.00% <100.00%> (ø)` | |
| [el/document.go](https://codecov.io/gh/maragudk/gomponents/pull/21/diff?src=pr&el=tree#diff-ZWwvZG9jdW1lbnQuZ28=) | `100.00% <100.00%> (ø)` | |
| [el/inline.go](https://codecov.io/gh/maragudk/gomponents/pull/21/diff?src=pr&el=tree#diff-ZWwvaW5saW5lLmdv) | `100.00% <100.00%> (ø)` | |
| [el/media.go](https://codecov.io/gh/maragudk/gomponents/pull/21/diff?src=pr&el=tree#diff-ZWwvbWVkaWEuZ28=) | `100.00% <100.00%> (ø)` | |
| [el/section.go](https://codecov.io/gh/maragudk/gomponents/pull/21/diff?src=pr&el=tree#diff-ZWwvc2VjdGlvbi5nbw==) | `100.00% <100.00%> (ø)` | |
| ... and [2 more](https://codecov.io/gh/maragudk/gomponents/pull/21/diff?src=pr&el=tree-more) | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/maragudk/gomponents/pull/21?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/maragudk/gomponents/pull/21?src=pr&el=footer). Last update [77b64b1...749e2ef](https://codecov.io/gh/maragudk/gomponents/pull/21?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/attr/forms.go b/attr/form.go
similarity index 100%
rename from attr/forms.go
rename to attr/form.go
diff --git a/attr/forms_test.go b/attr/form_test.go
similarity index 100%
rename from attr/forms_test.go
rename to attr/form_test.go
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/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/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/forms.go b/el/form.go
similarity index 100%
rename from el/forms.go
rename to el/form.go
diff --git a/el/forms_test.go b/el/form_test.go
similarity index 100%
rename from el/forms_test.go
rename to el/form_test.go
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/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/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)...)
+}


Test patch:
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_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_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/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_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_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")))
+	})
+}