From 3061f7a1119fc0a13ebad7b675db57117bcb8637 Mon Sep 17 00:00:00 2001
From: Chase Fleming <1666730+chasefleming@users.noreply.github.com>
Date: Sun, 28 Jan 2024 08:25:28 -0800
Subject: [PATCH 1/2] Add map and area elements

---
 attrs/attrs.go   |  9 +++++++--
 elements.go      | 12 ++++++++++++
 elements_test.go | 15 +++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/attrs/attrs.go b/attrs/attrs.go
index 86506a3..6458ce8 100644
--- a/attrs/attrs.go
+++ b/attrs/attrs.go
@@ -38,8 +38,9 @@ const (
 	Height = "height"
 	Width  = "width"
 	// Deprecated: Use Ismap instead
-	IsMap = "ismap"
-	Ismap = "ismap"
+	IsMap  = "ismap"
+	Ismap  = "ismap"
+	Usemap = "usemap"
 
 	// Semantic Text Attributes
 
@@ -90,6 +91,10 @@ const (
 
 	Open = "open"
 
+	// Area-Specific Attributes
+	Shape  = "shape"
+	Coords = "coords"
+
 	// Miscellaneous Attributes
 
 	DataPrefix = "data-" // Used for custom data attributes e.g., "data-custom"
diff --git a/elements.go b/elements.go
index c2b7fa6..95602e6 100644
--- a/elements.go
+++ b/elements.go
@@ -402,6 +402,18 @@ func Source(attrs attrs.Props, children ...Node) *Element {
 	return newElement("source", attrs, children...)
 }
 
+// ========== Image Map Elements ==========
+
+// Map creates a <map> element.
+func Map(attrs attrs.Props, children ...Node) *Element {
+	return newElement("map", attrs, children...)
+}
+
+// Area creates an <area> element.
+func Area(attrs attrs.Props) *Element {
+	return newElement("area", attrs)
+}
+
 // ========== Other ==========
 
 // None creates a NoneNode, representing a no-operation in rendering.
diff --git a/elements_test.go b/elements_test.go
index c81ce8b..35a79d5 100644
--- a/elements_test.go
+++ b/elements_test.go
@@ -523,6 +523,21 @@ func TestVideoWithSourceElementsAndFallbackText(t *testing.T) {
 	assert.Equal(t, expected, el.Render())
 }
 
+// ========== Image Map Elements ==========
+
+func TestMapAndArea(t *testing.T) {
+	expectedMap := `<map name="map-name"><area href="#area1" alt="Area 1" shape="rect" coords="34,44,270,350"></map>`
+	mapEl := Map(attrs.Props{attrs.Name: "map-name"},
+		Area(attrs.Props{
+			attrs.Href:   "#area1",
+			attrs.Alt:    "Area 1",
+			attrs.Shape:  "rect",
+			attrs.Coords: "34,44,270,350",
+		}),
+	)
+	assert.Equal(t, expectedMap, mapEl.Render())
+}
+
 // ========== Other ==========
 
 func TestNone(t *testing.T) {

From 013790f8a1df9730f3d46489981b2bcfb6ffc252 Mon Sep 17 00:00:00 2001
From: Chase Fleming <1666730+chasefleming@users.noreply.github.com>
Date: Sun, 28 Jan 2024 09:00:51 -0800
Subject: [PATCH 2/2] Order attributes for test

---
 elements_test.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elements_test.go b/elements_test.go
index 35a79d5..3da485b 100644
--- a/elements_test.go
+++ b/elements_test.go
@@ -526,7 +526,7 @@ func TestVideoWithSourceElementsAndFallbackText(t *testing.T) {
 // ========== Image Map Elements ==========
 
 func TestMapAndArea(t *testing.T) {
-	expectedMap := `<map name="map-name"><area href="#area1" alt="Area 1" shape="rect" coords="34,44,270,350"></map>`
+	expectedMap := `<map name="map-name"><area alt="Area 1" coords="34,44,270,350" href="#area1" shape="rect"></map>`
 	mapEl := Map(attrs.Props{attrs.Name: "map-name"},
 		Area(attrs.Props{
 			attrs.Href:   "#area1",