diff --git a/crates/typst-html/src/rules.rs b/crates/typst-html/src/rules.rs
index 04a58ca47..677fbe270 100644
--- a/crates/typst-html/src/rules.rs
+++ b/crates/typst-html/src/rules.rs
@@ -14,8 +14,8 @@ use typst_library::model::{
     RefElem, StrongElem, TableCell, TableElem, TermsElem,
 };
 use typst_library::text::{
-    HighlightElem, LinebreakElem, OverlineElem, RawElem, RawLine, SpaceElem, StrikeElem,
-    SubElem, SuperElem, UnderlineElem,
+    HighlightElem, LinebreakElem, OverlineElem, RawElem, RawLine, SmallcapsElem,
+    SpaceElem, StrikeElem, SubElem, SuperElem, UnderlineElem,
 };
 use typst_library::visualize::ImageElem;
 
@@ -47,6 +47,7 @@ pub fn register(rules: &mut NativeRuleMap) {
     rules.register(Html, OVERLINE_RULE);
     rules.register(Html, STRIKE_RULE);
     rules.register(Html, HIGHLIGHT_RULE);
+    rules.register(Html, SMALLCAPS_RULE);
     rules.register(Html, RAW_RULE);
     rules.register(Html, RAW_LINE_RULE);
 
@@ -400,6 +401,20 @@ const STRIKE_RULE: ShowFn<StrikeElem> =
 const HIGHLIGHT_RULE: ShowFn<HighlightElem> =
     |elem, _, _| Ok(HtmlElem::new(tag::mark).with_body(Some(elem.body.clone())).pack());
 
+const SMALLCAPS_RULE: ShowFn<SmallcapsElem> = |elem, _, styles| {
+    Ok(HtmlElem::new(tag::span)
+        .with_attr(
+            attr::style,
+            if elem.all.get(styles) {
+                "font-variant-caps: all-small-caps"
+            } else {
+                "font-variant-caps: small-caps"
+            },
+        )
+        .with_body(Some(elem.body.clone()))
+        .pack())
+};
+
 const RAW_RULE: ShowFn<RawElem> = |elem, _, styles| {
     let lines = elem.lines.as_deref().unwrap_or_default();
 
diff --git a/tests/ref/html/html-deco.html b/tests/ref/html/html-deco.html
index 87f2ab4c8..e471686ac 100644
--- a/tests/ref/html/html-deco.html
+++ b/tests/ref/html/html-deco.html
@@ -7,5 +7,6 @@
   <body>
     <p><s>Struck</s> <mark>Highlighted</mark> <span style="text-decoration: underline">Underlined</span> <span style="text-decoration: overline">Overlined</span></p>
     <p><span style="text-decoration: overline"><span style="text-decoration: underline"><mark><s>Mixed</s></mark></span></span></p>
+    <p><span style="font-variant-caps: small-caps">Small Caps</span> <span style="font-variant-caps: all-small-caps">All Small Caps</span></p>
   </body>
 </html>
diff --git a/tests/suite/text/deco.typ b/tests/suite/text/deco.typ
index a1d287d9d..e44b682a0 100644
--- a/tests/suite/text/deco.typ
+++ b/tests/suite/text/deco.typ
@@ -91,3 +91,6 @@ We can also specify a customized value
 #overline[Overlined]
 
 #(strike, highlight, underline, overline).fold([Mixed], (it, f) => f(it))
+
+#smallcaps[Small Caps]
+#smallcaps(all: true)[All Small Caps]
