make djot divs generate arbitrary elements rather than just divs

this makes it possible to use elements like figure/figcaption

content/games/minecraft-zen.tree

@@ -414,7 +414,8 @@ tags = ["all", "games"]
         </style>
         ```
 
-        ::: games-minecraft-zen-boykisser-gallery
+        {.games-minecraft-zen-boykisser-gallery}
+        :::
 
         ![][pic:01JGSDKAQ870V71XV9SSNE50R8]
         obviously, there's one in my bedroom.

content/programming/tairu.tree

@@ -236,7 +236,8 @@ tags = ["all", "programming", "graphics", "javascript"]
       id = "01HQ162WWAS502000K8QZWVBDW"
     - we can split this tileset up into 16 individual tiles, each one 8 × 8 pixels; people choose various resolutions, I chose a fairly low one to hide my lack of artistic skill.
 
-    ::: horizontal-tile-strip
+    {.horizontal-tile-strip}
+    :::
     []{.metal .x-0 .y-0}
     []{.metal .x-1 .y-0}
     []{.metal .x-2 .y-0}
@@ -260,7 +261,8 @@ tags = ["all", "programming", "graphics", "javascript"]
     - the keen eyed among you have probably noticed that this is very similar to the case we had before with drawing procedural borders -
     except that instead of determining which borders to draw based on a tile's neighbors, this time we'll determine which _whole tile_ to draw based on its neighbors!
 
-    ::: horizontal-tile-strip
+    {.horizontal-tile-strip}
+    :::
     [[E]{.east} [S]{.south}]{.metal .x-0 .y-0}
     [[E]{.east} [S]{.south} [W]{.west}]{.metal .x-1 .y-0}
     [[S]{.south} [W]{.west}]{.metal .x-2 .y-0}
@@ -307,7 +309,8 @@ tags = ["all", "programming", "graphics", "javascript"]
           id = "01HQ162WWABANND0WGT933TBMV"
         - that means we'll need to arrange our tiles like so, where the leftmost tile is at index 0 (`0b0000`) and the rightmost tile is at index 15 (`0b1111`):
 
-        ::: horizontal-tile-strip
+        {.horizontal-tile-strip}
+        :::
         []{.metal .x-3 .y-3}
         [[E]{.east}]{.metal .x-0 .y-3}
         [[S]{.south}]{.metal .x-3 .y-0}

src/html/djot.rs

@@ -173,7 +173,14 @@ impl<'a> Writer<'a> {
                     Container::Table => out.push_str("<table"),
                     Container::TableRow { .. } => out.push_str("<tr"),
                     Container::Section { .. } => {}
-                    Container::Div { .. } => out.push_str("<div"),
+                    Container::Div { class } => {
+                        if !class.is_empty() {
+                            out.push('<');
+                            write_attr(class, out);
+                        } else {
+                            out.push_str("<div");
+                        }
+                    }
                     Container::Paragraph => {
                         if matches!(self.list_tightness.last(), Some(true)) {
                             return Ok(());
@@ -268,9 +275,6 @@ impl<'a> Writer<'a> {
                 }
 
                 if attrs.into_iter().any(|(a, _)| a == "class")
-                    || matches!(
-                        c,
-                        Container::Div { class } if !class.is_empty())
                     || matches!(c, |Container::Math { .. }| Container::List {
                         kind: ListKind::Task,
                         ..
@@ -303,15 +307,6 @@ impl<'a> Writer<'a> {
                         first_written = true;
                         class.parts().for_each(|part| write_attr(part, out));
                     }
-                    // div class goes after classes from attrs
-                    if let Container::Div { class } = c
-                        && !class.is_empty()
-                    {
-                        if first_written {
-                            out.push(' ');
-                        }
-                        out.push_str(class);
-                    }
                     out.push('"');
                 }
 
@@ -435,7 +430,15 @@ impl<'a> Writer<'a> {
                     Container::Table => out.push_str("</table>"),
                     Container::TableRow { .. } => out.push_str("</tr>"),
                     Container::Section { .. } => {}
-                    Container::Div { .. } => out.push_str("</div>"),
+                    Container::Div { class } => {
+                        if !class.is_empty() {
+                            out.push_str("</");
+                            write_attr(class, out);
+                            out.push('>');
+                        } else {
+                            out.push_str("</div>");
+                        }
+                    }
                     Container::Paragraph => {
                         if matches!(self.list_tightness.last(), Some(true)) {
                             return Ok(());