diff --git a/Cargo.lock b/Cargo.lock
index 52e053ef460..26fef1c45bb 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -4767,6 +4767,7 @@ dependencies = [
  "rustversion",
  "syn 2.0.117",
  "trybuild",
+ "version_check",
  "yew",
 ]
 
diff --git a/Cargo.toml b/Cargo.toml
index d645f8348ff..ad7ec04e13c 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -30,6 +30,7 @@ unexpected_cfgs = { level = "warn", check-cfg = [
     "cfg(verbose_tests)",
     "cfg(yew_lints)",
     "cfg(nightly_yew)",
+    "cfg(yew_macro_nightly)",
     "cfg(wasm_bindgen_unstable_test_coverage)"
 ]}
 [workspace.dependencies]
diff --git a/examples/boids/src/main.rs b/examples/boids/src/main.rs
index bfec32fd6f3..c2edcba1b1d 100644
--- a/examples/boids/src/main.rs
+++ b/examples/boids/src/main.rs
@@ -66,11 +66,9 @@ impl Component for App {
         } = *self;
 
         html! {
-            <>
-                <h1 class="title">{ "Boids" }</h1>
-                <Simulation settings={settings.clone()} {generation} {paused} />
-                { self.view_panel(ctx.link()) }
-            </>
+            <h1 class="title">{ "Boids" }</h1>
+            <Simulation settings={settings.clone()} {generation} {paused} />
+            { self.view_panel(ctx.link()) }
         }
     }
 }
diff --git a/examples/counter_functional/src/main.rs b/examples/counter_functional/src/main.rs
index 54dcd2806d1..020319cf04e 100644
--- a/examples/counter_functional/src/main.rs
+++ b/examples/counter_functional/src/main.rs
@@ -15,11 +15,9 @@ fn App() -> Html {
     };
 
     html! {
-        <>
-            <p> {"current count: "} {*state} </p>
-            <button onclick={incr_counter}> {"+"} </button>
-            <button onclick={decr_counter}> {"-"} </button>
-        </>
+        <p> {"current count: "} {*state} </p>
+        <button onclick={incr_counter}> {"+"} </button>
+        <button onclick={decr_counter}> {"-"} </button>
     }
 }
 
diff --git a/examples/dyn_create_destroy_apps/src/counter.rs b/examples/dyn_create_destroy_apps/src/counter.rs
index 3154c19fa8d..4ff1aca1371 100644
--- a/examples/dyn_create_destroy_apps/src/counter.rs
+++ b/examples/dyn_create_destroy_apps/src/counter.rs
@@ -44,19 +44,17 @@ impl Component for CounterModel {
         let destroy_callback = ctx.props().destroy_callback.clone();
 
         html! {
-            <>
-                // Display the current value of the counter
-                <p class="counter">
-                    { "App has lived for " }
-                    { self.counter }
-                    { " ticks" }
-                </p>
+            // Display the current value of the counter
+            <p class="counter">
+                { "App has lived for " }
+                { self.counter }
+                { " ticks" }
+            </p>
 
-                // Add button to send a destroy command to the parent app
-                <button class="destroy" onclick={Callback::from(move |_| destroy_callback.emit(()))}>
-                    { "Destroy this app" }
-                </button>
-            </>
+            // Add button to send a destroy command to the parent app
+            <button class="destroy" onclick={Callback::from(move |_| destroy_callback.emit(()))}>
+                { "Destroy this app" }
+            </button>
         }
     }
 
diff --git a/examples/dyn_create_destroy_apps/src/main.rs b/examples/dyn_create_destroy_apps/src/main.rs
index 1dd0408f2ec..da5360fdd89 100644
--- a/examples/dyn_create_destroy_apps/src/main.rs
+++ b/examples/dyn_create_destroy_apps/src/main.rs
@@ -89,20 +89,18 @@ impl Component for App {
         // We will only render once, and then do the rest of the DOM changes
         // by mounting/destroying appinstances of CounterModel
         html! {
-            <>
-                <div class="panel">
-                    // Create button to create a new app
-                    <button
-                        class="create"
-                        onclick={ctx.link().callback(|_| Msg::SpawnCounterAppInstance)}
-                    >
-                        { "Spawn new CounterModel app" }
-                    </button>
-                </div>
-                // Create a container for all the app instances
-                <div ref={self.apps_container_ref.clone()}>
-                </div>
-            </>
+            <div class="panel">
+                // Create button to create a new app
+                <button
+                    class="create"
+                    onclick={ctx.link().callback(|_| Msg::SpawnCounterAppInstance)}
+                >
+                    { "Spawn new CounterModel app" }
+                </button>
+            </div>
+            // Create a container for all the app instances
+            <div ref={self.apps_container_ref.clone()}>
+            </div>
         }
     }
 }
diff --git a/examples/function_delayed_input/src/main.rs b/examples/function_delayed_input/src/main.rs
index aaa3a639995..d73de799161 100644
--- a/examples/function_delayed_input/src/main.rs
+++ b/examples/function_delayed_input/src/main.rs
@@ -68,13 +68,13 @@ fn App() -> Html {
               </form>
             </div>
             <div class="p-2 border border-black rounded">
-                <p>{
+                <p>
                     match &*search {
-                        Search::Idle => "Type something to search...".into(),
-                        Search::Fetching(query) => format!("Searching for: {}", query).into(),
+                        Search::Idle => "Type something to search...",
+                        Search::Fetching(query) => format!("Searching for: {}", query),
                         Search::Fetched(response) => response.clone(),
                     }
-                }</p>
+                </p>
             </div>
           </div>
       </div>
diff --git a/examples/function_memory_game/src/components/chessboard.rs b/examples/function_memory_game/src/components/chessboard.rs
index 5af83feb1ea..cfa8ffd7d6c 100644
--- a/examples/function_memory_game/src/components/chessboard.rs
+++ b/examples/function_memory_game/src/components/chessboard.rs
@@ -1,5 +1,4 @@
 use yew::prelude::*;
-use yew::{Properties, function_component, html};
 
 use crate::components::chessboard_card::ChessboardCard;
 use crate::state::{Card, RawCard};
@@ -9,15 +8,13 @@ pub struct Props {
     pub cards: Vec<Card>,
     pub on_flip: Callback<RawCard>,
 }
-#[function_component]
+#[component]
 pub fn Chessboard(props: &Props) -> Html {
     html! {
         <div class="chess-board">
-        { for props.cards.iter().map(|card|
-            html! {
-                <ChessboardCard card={card.clone()} on_flip={&props.on_flip} />
-            }
-        ) }
+        for card in &props.cards {
+            <ChessboardCard card={card.clone()} on_flip={&props.on_flip} />
+        }
         </div>
     }
 }
diff --git a/examples/function_memory_game/src/components/game_status_board.rs b/examples/function_memory_game/src/components/game_status_board.rs
index 1b6889ad32b..c58afeff295 100644
--- a/examples/function_memory_game/src/components/game_status_board.rs
+++ b/examples/function_memory_game/src/components/game_status_board.rs
@@ -12,28 +12,19 @@ pub struct Props {
 
 #[function_component]
 pub fn GameStatusBoard(props: &Props) -> Html {
-    let get_content = {
-        let onclick = props.on_reset.reform(move |e: MouseEvent| {
-            e.stop_propagation();
-            e.prevent_default();
-        });
-
+    html! {
+      <div class="game-status-container">
         match props.status {
-            Status::Ready => html! {
-                <span>{"Ready"}</span>
-            },
-            Status::Playing => html! {
-                <span>{"Playing"}</span>
-            },
-            Status::Passed => html! {
+            Status::Ready => <span>{"Ready"}</span>,
+            Status::Playing => <span>{"Playing"}</span>,
+            Status::Passed => {
+                let onclick = props.on_reset.reform(move |e: MouseEvent| {
+                    e.stop_propagation();
+                    e.prevent_default();
+                });
                 <button class="play-again-btn" {onclick}>{"Play again"}</button>
-            },
+            }
         }
-    };
-
-    html! {
-      <div class="game-status-container">
-        {get_content}
         <span class="sec-past">{ props.sec_past}{" s"}</span>
     </div>
     }
diff --git a/examples/function_router/src/app.rs b/examples/function_router/src/app.rs
index 8b7c5a574f4..97dfb126d32 100644
--- a/examples/function_router/src/app.rs
+++ b/examples/function_router/src/app.rs
@@ -94,24 +94,14 @@ pub fn ServerApp(props: &ServerAppProps) -> Html {
 }
 
 fn switch(routes: Route) -> Html {
-    match routes {
-        Route::Post { id } => {
-            html! { <Post seed={id} /> }
-        }
-        Route::Posts => {
-            html! { <PostList /> }
-        }
-        Route::Author { id } => {
-            html! { <Author seed={id} /> }
-        }
-        Route::Authors => {
-            html! { <AuthorList /> }
-        }
-        Route::Home => {
-            html! { <Home /> }
-        }
-        Route::NotFound => {
-            html! { <PageNotFound /> }
+    html! {
+        match routes {
+            Route::Post { id } => <Post seed={id} />,
+            Route::Posts => <PostList />,
+            Route::Author { id } => <Author seed={id} />,
+            Route::Authors => <AuthorList />,
+            Route::Home => <Home />,
+            Route::NotFound => <PageNotFound />,
         }
     }
 }
diff --git a/examples/function_router/src/components/pagination.rs b/examples/function_router/src/components/pagination.rs
index b217c4de036..e769902fad3 100644
--- a/examples/function_router/src/components/pagination.rs
+++ b/examples/function_router/src/components/pagination.rs
@@ -29,24 +29,22 @@ pub fn RelNavButtons(props: &Props) -> Html {
     } = props.clone();
 
     html! {
-        <>
-            <Link<Route, PageQuery>
-                classes={classes!("pagination-previous")}
-                disabled={page==1}
-                query={Some(PageQuery{page: page - 1})}
-                to={to.clone()}
-            >
-                { "Previous" }
-            </Link<Route, PageQuery>>
-            <Link<Route, PageQuery>
-                classes={classes!("pagination-next")}
-                disabled={page==total_pages}
-                query={Some(PageQuery{page: page + 1})}
-                {to}
-            >
-                { "Next page" }
-            </Link<Route, PageQuery>>
-        </>
+        <Link<Route, PageQuery>
+            classes={classes!("pagination-previous")}
+            disabled={page==1}
+            query={Some(PageQuery{page: page - 1})}
+            to={to.clone()}
+        >
+            { "Previous" }
+        </Link<Route, PageQuery>>
+        <Link<Route, PageQuery>
+            classes={classes!("pagination-next")}
+            disabled={page==total_pages}
+            query={Some(PageQuery{page: page + 1})}
+            {to}
+        >
+            { "Next page" }
+        </Link<Route, PageQuery>>
     }
 }
 
@@ -70,18 +68,13 @@ pub fn RenderLinks(props: &RenderLinksProps) -> Html {
     let mut range = range;
 
     if len > max_links {
-        let last_link =
-            html! {<RenderLink to_page={range.next_back().unwrap()} props={props.clone()} />};
-        // remove 1 for the ellipsis and 1 for the last link
-        let links = range
-            .take(max_links - 2)
-            .map(|page| html! {<RenderLink to_page={page} props={props.clone()} />});
+        let last_page = range.next_back().unwrap();
         html! {
-            <>
-                { for links }
-                <li><span class="pagination-ellipsis">{ ELLIPSIS }</span></li>
-                { last_link }
-            </>
+            for page in range.take(max_links - 2) {
+                <RenderLink to_page={page} props={props.clone()} />
+            }
+            <li><span class="pagination-ellipsis">{ ELLIPSIS }</span></li>
+            <RenderLink to_page={last_page} props={props.clone()} />
         }
     } else {
         html! {
@@ -140,11 +133,9 @@ pub fn Links(props: &Props) -> Html {
     let links_right = 2 * LINKS_PER_SIDE - links_left;
 
     html! {
-        <>
-            <RenderLinks range={ 1..page } len={pages_prev} max_links={links_left} props={props.clone()} />
-            <RenderLink to_page={page} props={props.clone()} />
-            <RenderLinks range={ page + 1..total_pages + 1 } len={pages_next} max_links={links_right} props={props.clone()} />
-        </>
+        <RenderLinks range={ 1..page } len={pages_prev} max_links={links_left} props={props.clone()} />
+        <RenderLink to_page={page} props={props.clone()} />
+        <RenderLinks range={ page + 1..total_pages + 1 } len={pages_next} max_links={links_right} props={props.clone()} />
     }
 }
 
diff --git a/examples/function_router/src/pages/author.rs b/examples/function_router/src/pages/author.rs
index 97cb2f4cd25..fa1a0ca2867 100644
--- a/examples/function_router/src/pages/author.rs
+++ b/examples/function_router/src/pages/author.rs
@@ -41,7 +41,9 @@ pub fn Author(props: &Props) -> Html {
                         <article class="tile is-child notification">
                             <p class="title">{ "Interests" }</p>
                             <div class="tags">
-                                { for author.keywords.iter().map(|tag| html! { <span class="tag is-info">{ tag }</span> }) }
+                                for tag in &author.keywords {
+                                    <span class="tag is-info">{ tag }</span>
+                                }
                             </div>
                         </article>
                     </div>
diff --git a/examples/function_router/src/pages/author_list.rs b/examples/function_router/src/pages/author_list.rs
index 82874be6218..aa8944d8511 100644
--- a/examples/function_router/src/pages/author_list.rs
+++ b/examples/function_router/src/pages/author_list.rs
@@ -11,16 +11,6 @@ const CAROUSEL_DELAY_MS: u32 = 15000;
 pub fn AuthorList() -> Html {
     let seeds = use_state(random_author_seeds);
 
-    let authors = seeds.iter().map(|&seed| {
-        html! {
-            <div class="tile is-parent">
-                <div class="tile is-child">
-                    <AuthorCard {seed} />
-                </div>
-            </div>
-        }
-    });
-
     let on_complete = {
         let seeds = seeds.clone();
 
@@ -50,7 +40,13 @@ pub fn AuthorList() -> Html {
             </p>
             <div class="section">
                 <div class="tile is-ancestor">
-                    { for authors }
+                    for seed in seeds.iter() {
+                        <div class="tile is-parent">
+                            <div class="tile is-child">
+                                <AuthorCard {seed} />
+                            </div>
+                        </div>
+                    }
                 </div>
                 <ProgressDelay duration_ms={CAROUSEL_DELAY_MS} on_complete={on_complete} />
             </div>
diff --git a/examples/function_router/src/pages/home.rs b/examples/function_router/src/pages/home.rs
index 949913b345a..f43d6528907 100644
--- a/examples/function_router/src/pages/home.rs
+++ b/examples/function_router/src/pages/home.rs
@@ -3,42 +3,40 @@ use yew::prelude::*;
 #[function_component]
 fn InfoTiles() -> Html {
     html! {
-        <>
-            <div class="tile is-parent">
-                <div class="tile is-child box">
-                    <p class="title">{ "What are yews?" }</p>
-                    <p class="subtitle">{ "Everything you need to know!" }</p>
+        <div class="tile is-parent">
+            <div class="tile is-child box">
+                <p class="title">{ "What are yews?" }</p>
+                <p class="subtitle">{ "Everything you need to know!" }</p>
 
-                    <div class="content">
-                        {r#"
-                            A yew is a small to medium-sized evergreen tree, growing 10 to 20 metres tall, with a trunk up to 2 metres in diameter.
-                            The bark is thin, scaly brown, coming off in small flakes aligned with the stem.
-                            The leaves are flat, dark green, 1 to 4 centimetres long and 2 to 3 millimetres broad, arranged spirally on the stem,
-                            but with the leaf bases twisted to align the leaves in two flat rows either side of the stem,
-                            except on erect leading shoots where the spiral arrangement is more obvious.
-                            The leaves are poisonous.
-                            "#}
-                    </div>
+                <div class="content">
+                    {r#"
+                        A yew is a small to medium-sized evergreen tree, growing 10 to 20 metres tall, with a trunk up to 2 metres in diameter.
+                        The bark is thin, scaly brown, coming off in small flakes aligned with the stem.
+                        The leaves are flat, dark green, 1 to 4 centimetres long and 2 to 3 millimetres broad, arranged spirally on the stem,
+                        but with the leaf bases twisted to align the leaves in two flat rows either side of the stem,
+                        except on erect leading shoots where the spiral arrangement is more obvious.
+                        The leaves are poisonous.
+                        "#}
                 </div>
             </div>
+        </div>
 
-            <div class="tile is-parent">
-                <div class="tile is-child box">
-                    <p class="title">{ "Who are we?" }</p>
+        <div class="tile is-parent">
+            <div class="tile is-child box">
+                <p class="title">{ "Who are we?" }</p>
 
-                    <div class="content">
-                        { "We're a small team of just 2" }
-                        <sup>{ 64 }</sup>
-                        { " members working tirelessly to bring you the low-effort yew content we all desperately crave." }
-                        <br />
-                        {r#"
-                                We put a ton of effort into fact-checking our posts.
-                                Some say they read like a Wikipedia article - what a compliment!
-                            "#}
-                    </div>
+                <div class="content">
+                    { "We're a small team of just 2" }
+                    <sup>{ 64 }</sup>
+                    { " members working tirelessly to bring you the low-effort yew content we all desperately crave." }
+                    <br />
+                    {r#"
+                            We put a ton of effort into fact-checking our posts.
+                            Some say they read like a Wikipedia article - what a compliment!
+                        "#}
                 </div>
             </div>
-        </>
+        </div>
     }
 }
 
diff --git a/examples/function_router/src/pages/post.rs b/examples/function_router/src/pages/post.rs
index a41d856e37b..dc12a0a769d 100644
--- a/examples/function_router/src/pages/post.rs
+++ b/examples/function_router/src/pages/post.rs
@@ -83,20 +83,16 @@ pub fn Post(props: &Props) -> Html {
     };
 
     let render_section = |section, show_hero| {
-        let hero = if show_hero {
-            render_section_hero(section)
-        } else {
-            html! {}
-        };
-        let paragraphs = section.paragraphs.iter().map(|paragraph| {
-            html! {
-                <p>{ paragraph }</p>
-            }
-        });
         html! {
             <section>
-                { hero }
-                <div>{ for paragraphs }</div>
+                if show_hero {
+                    render_section_hero(section)
+                }
+                <div>
+                    for paragraph in &section.paragraphs {
+                        <p>{ paragraph }</p>
+                    }
+                </div>
             </section>
         }
     };
@@ -121,36 +117,30 @@ pub fn Post(props: &Props) -> Html {
         html! {{for parts}}
     };
 
-    let keywords = post
-        .meta
-        .keywords
-        .iter()
-        .map(|keyword| html! { <span class="tag is-info">{ keyword }</span> });
-
     html! {
-        <>
-            <section class="hero is-medium is-light has-background">
-                <img alt="The hero's background" class="hero-background is-transparent" src={post.meta.image_url.clone()} />
-                <div class="hero-body">
-                    <div class="container">
-                        <h1 class="title">
-                            { &post.meta.title }
-                        </h1>
-                        <h2 class="subtitle">
-                            { "by " }
-                            <Link<Route> classes={classes!("has-text-weight-semibold")} to={Route::Author { id: post.meta.author.seed }}>
-                                { &post.meta.author.name }
-                            </Link<Route>>
-                        </h2>
-                        <div class="tags">
-                            { for keywords }
-                        </div>
+        <section class="hero is-medium is-light has-background">
+            <img alt="The hero's background" class="hero-background is-transparent" src={post.meta.image_url.clone()} />
+            <div class="hero-body">
+                <div class="container">
+                    <h1 class="title">
+                        { &post.meta.title }
+                    </h1>
+                    <h2 class="subtitle">
+                        { "by " }
+                        <Link<Route> classes={classes!("has-text-weight-semibold")} to={Route::Author { id: post.meta.author.seed }}>
+                            { &post.meta.author.name }
+                        </Link<Route>>
+                    </h2>
+                    <div class="tags">
+                        for keyword in &post.meta.keywords {
+                            <span class="tag is-info">{ keyword }</span>
+                        }
                     </div>
                 </div>
-            </section>
-            <div class="section container">
-                { view_content }
             </div>
-        </>
+        </section>
+        <div class="section container">
+            { view_content }
+        </div>
     }
 }
diff --git a/examples/function_todomvc/src/main.rs b/examples/function_todomvc/src/main.rs
index 9c5028fcd41..b5be763be0c 100644
--- a/examples/function_todomvc/src/main.rs
+++ b/examples/function_todomvc/src/main.rs
@@ -80,14 +80,13 @@ fn app() -> Html {
                     />
                     <label for="toggle-all" />
                     <ul class="todo-list">
-                        { for state.entries.iter().filter(|e| state.filter.fits(e)).cloned().map(|entry|
-                            html! {
-                                <EntryItem {entry}
-                                    ontoggle={&ontoggle}
-                                    onremove={&onremove}
-                                    onedit={&onedit}
-                                />
-                        }) }
+                        for entry in state.entries.iter().filter(|e| state.filter.fits(e)).cloned() {
+                            <EntryItem {entry}
+                                ontoggle={&ontoggle}
+                                onremove={&onremove}
+                                onedit={&onedit}
+                            />
+                        }
                     </ul>
                 </section>
                 <footer class={classes!("footer", hidden_class)}>
@@ -96,14 +95,12 @@ fn app() -> Html {
                         { " item(s) left" }
                     </span>
                     <ul class="filters">
-                        { for Filter::iter().map(|filter| {
-                            html! {
-                                <FilterItem {filter}
-                                    selected={state.filter == filter}
-                                    onset_filter={&onset_filter}
-                                />
-                            }
-                        }) }
+                        for filter in Filter::iter() {
+                            <FilterItem {filter}
+                                selected={state.filter == filter}
+                                onset_filter={&onset_filter}
+                            />
+                        }
                     </ul>
                     <button class="clear-completed" onclick={onclear_completed}>
                         { format!("Clear completed ({completed})") }
diff --git a/examples/function_todomvc/src/state.rs b/examples/function_todomvc/src/state.rs
index 77a9a4ee500..f0c972b09d2 100644
--- a/examples/function_todomvc/src/state.rs
+++ b/examples/function_todomvc/src/state.rs
@@ -45,7 +45,7 @@ impl Filter {
 
 impl IntoPropValue<Html> for Filter {
     fn into_prop_value(self) -> Html {
-        html! {<>{self.to_string()}</>}
+        html! {self.to_string()}
     }
 }
 
diff --git a/examples/futures/src/main.rs b/examples/futures/src/main.rs
index 09870521ea9..e6cf2158900 100644
--- a/examples/futures/src/main.rs
+++ b/examples/futures/src/main.rs
@@ -108,20 +108,20 @@ impl Component for App {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        match &self.markdown {
-            FetchState::NotFetching => html! {
-                <>
+        html! {
+            match &self.markdown {
+                FetchState::NotFetching => {
                     <button onclick={ctx.link().callback(|_| Msg::GetMarkdown)}>
                         { "Get Markdown" }
                     </button>
                     <button onclick={ctx.link().callback(|_| Msg::GetError)}>
                         { "Get using incorrect URL" }
                     </button>
-                </>
-            },
-            FetchState::Fetching => html! { "Fetching" },
-            FetchState::Success(data) => html! { markdown::render_markdown(data) },
-            FetchState::Failed(err) => html! { err },
+                }
+                FetchState::Fetching => "Fetching",
+                FetchState::Success(data) => markdown::render_markdown(data),
+                FetchState::Failed(err) => err
+            }
         }
     }
 }
diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs
index f330f061d16..faabe7f4bcd 100644
--- a/examples/game_of_life/src/main.rs
+++ b/examples/game_of_life/src/main.rs
@@ -86,23 +86,6 @@ impl Component for App {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let cell_rows = self
-            .conway
-            .cellules
-            .chunks(self.conway.width)
-            .enumerate()
-            .map(|(row, cellules)| {
-                let cells = cellules
-                    .iter()
-                    .enumerate()
-                    .map(|(col, _)| self.view_cellule(row, col, ctx.link()));
-                html! {
-                    <div class="game-row">
-                        { for cells }
-                    </div>
-                }
-            });
-
         html! {
             <div>
                 <section class="game-container">
@@ -112,7 +95,12 @@ impl Component for App {
                     </header>
                     <section class="game-area">
                         <div class="game-of-life">
-                            { for cell_rows }
+                            for (row, cellules) in self.conway.cellules.chunks(self.conway.width).enumerate() {
+                                let cells = cellules.iter().enumerate().map(|(col, _)| self.view_cellule(row, col, ctx.link()));
+                                <div class="game-row">
+                                    { for cells }
+                                </div>
+                            }
                         </div>
                         <div class="game-buttons">
                             <button class="game-button" onclick={ctx.link().callback(|_| Msg::Random)}>{ "Random" }</button>
diff --git a/examples/immutable/src/array.rs b/examples/immutable/src/array.rs
index d12d1cc84ae..23503fed3ac 100644
--- a/examples/immutable/src/array.rs
+++ b/examples/immutable/src/array.rs
@@ -8,15 +8,15 @@ struct FolksViewProps {
     folks: IArray<IString>,
 }
 
-#[function_component(FolksView)]
-fn folks_view(props: &FolksViewProps) -> Html {
+#[component]
+fn FolksView(props: &FolksViewProps) -> Html {
     html! {
-        <>
         <p>{"Hello to:"}</p>
         <ul>
-        { for props.folks.iter().map(|s| html!(<li>{s}</li>)) }
+        for s in props.folks.iter() {
+            <li>{s}</li>
+        }
         </ul>
-        </>
     }
 }
 
@@ -45,11 +45,9 @@ pub fn array_example() -> Html {
     };
 
     html! {
-        <>
         <h2>{"Input"}</h2>
         <input {onkeyup} />
         <h2>{"Output"}</h2>
         <FolksView folks={&*folks} />
-        </>
     }
 }
diff --git a/examples/immutable/src/main.rs b/examples/immutable/src/main.rs
index 6b2216241f6..adb0a63b500 100644
--- a/examples/immutable/src/main.rs
+++ b/examples/immutable/src/main.rs
@@ -11,16 +11,14 @@ use self::string::*;
 #[function_component]
 fn App() -> Html {
     html! {
-        <>
-            <h1>{ "IString Example" }</h1>
-            <StringExample />
-            <hr/>
-            <h1>{ "IArray Example" }</h1>
-            <ArrayExample />
-            <hr/>
-            <h1>{ "IMap Example" }</h1>
-            <MapExample />
-        </>
+        <h1>{ "IString Example" }</h1>
+        <StringExample />
+        <hr/>
+        <h1>{ "IArray Example" }</h1>
+        <ArrayExample />
+        <hr/>
+        <h1>{ "IMap Example" }</h1>
+        <MapExample />
     }
 }
 
diff --git a/examples/immutable/src/map.rs b/examples/immutable/src/map.rs
index 40342e0097c..7c996c91901 100644
--- a/examples/immutable/src/map.rs
+++ b/examples/immutable/src/map.rs
@@ -11,12 +11,12 @@ struct DisplayProps {
 #[function_component]
 fn Display(props: &DisplayProps) -> Html {
     html! {
-        <>
         <p>{"Hello to:"}</p>
         <ul>
-        { for props.values.iter().map(|(i, s)| html!(<li>{i}{" => "}{s}</li>)) }
+        for (i, s) in props.values.iter() {
+            <li>{i}{" => "}{s}</li>
+        }
         </ul>
-        </>
     }
 }
 
@@ -73,12 +73,10 @@ impl Component for MapExample {
         });
 
         html! {
-            <>
             <h2>{"Input"}</h2>
             <input {onkeyup} />
             <h2>{"Output"}</h2>
             <Display values={&self.values} />
-            </>
         }
     }
 }
diff --git a/examples/immutable/src/string.rs b/examples/immutable/src/string.rs
index 86e5df5cb1f..f177fc59598 100644
--- a/examples/immutable/src/string.rs
+++ b/examples/immutable/src/string.rs
@@ -52,12 +52,10 @@ impl Component for StringExample {
         });
 
         html! {
-            <>
             <h2>{"Input"}</h2>
             <input value={&self.name} {oninput} />
             <h2>{"Output"}</h2>
             <Display name={&self.name} />
-            </>
         }
     }
 }
diff --git a/examples/js_callback/src/main.rs b/examples/js_callback/src/main.rs
index fef7d3ac63f..ca639019172 100644
--- a/examples/js_callback/src/main.rs
+++ b/examples/js_callback/src/main.rs
@@ -14,10 +14,8 @@ static WASM_BINDGEN_SNIPPETS_PATH: OnceLock<String> = OnceLock::new();
 fn Important() -> Html {
     let msg = use_memo((), |_| bindings::hello());
     html! {
-        <>
-            <h2>{"Important"}</h2>
-            <p>{msg}</p>
-        </>
+        <h2>{"Important"}</h2>
+        <p>{msg}</p>
     }
 }
 
@@ -40,10 +38,8 @@ fn use_do_bye() -> SuspensionResult<String> {
 fn UnImportant() -> HtmlResult {
     let msg = use_do_bye()?;
     Ok(html! {
-        <>
-            <h2>{"Unimportant"}</h2>
-            <p>{msg}</p>
-        </>
+        <h2>{"Unimportant"}</h2>
+        <p>{msg}</p>
     })
 }
 
diff --git a/examples/keyed_list/src/main.rs b/examples/keyed_list/src/main.rs
index 0dd7b8cd941..09904ed58be 100644
--- a/examples/keyed_list/src/main.rs
+++ b/examples/keyed_list/src/main.rs
@@ -161,104 +161,100 @@ impl Component for App {
 impl App {
     fn action_view(&self, link: &Scope<Self>) -> Html {
         html! {
-            <>
-                { self.button_view(link) }
-                <div class="row">
-                    <div class="col">
-                        <p class="h5">
-                            { "Person type ratio (0=only tags <= ratio <= 1=only components): " }
-                            { self.build_component_ratio }
-                        </p>
-                        <input name="ratio" type="range" class="form-control-range" min="0.0" max="1.0" step="any"
-                            oninput={link.callback(|e: InputEvent| {
-                                let input: HtmlInputElement = e.target_unchecked_into();
-                                Msg::ChangeRatio(input.value_as_number())
-                            })}
-                        />
-                    </div>
+            { self.button_view(link) }
+            <div class="row">
+                <div class="col">
+                    <p class="h5">
+                        { "Person type ratio (0=only tags <= ratio <= 1=only components): " }
+                        { self.build_component_ratio }
+                    </p>
+                    <input name="ratio" type="range" class="form-control-range" min="0.0" max="1.0" step="any"
+                        oninput={link.callback(|e: InputEvent| {
+                            let input: HtmlInputElement = e.target_unchecked_into();
+                            Msg::ChangeRatio(input.value_as_number())
+                        })}
+                    />
                 </div>
-            </>
+            </div>
         }
     }
 
     fn button_view(&self, link: &Scope<Self>) -> Html {
         html! {
-            <>
-                <div class="row">
-                    <div class="col">
-                        <button class="btn_size alert alert-danger" onclick={link.callback(|_| Msg::DeleteEverybody)}>
-                            { "Delete everybody" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(1))}>
-                            { "Create 1" }
+            <div class="row">
+                <div class="col">
+                    <button class="btn_size alert alert-danger" onclick={link.callback(|_| Msg::DeleteEverybody)}>
+                        { "Delete everybody" }
                     </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(5))}>
-                            { "Create 5" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(100))}>
-                            { "Create 100" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(500))}>
-                            { "Create 500" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersonsPrepend(1))}>
-                            { "Prepend 1" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersonsPrepend(5))}>
-                            { "Prepend 5" }
-                        </button>
-                    </div>
                 </div>
-                <div class="row">
-                    <div class="col">
-                        <button class="btn_size alert alert-warning" onclick={link.callback(|_| Msg::ToggleKeyed)}>
-                            { if self.keyed { "Disable keys" } else { "Enable keys" } }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SwapRandom)}>
-                            { "Swap random" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::ReverseList)}>
-                            { "Reverse list" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortById)}>
-                            { "Sort by id" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortByName)}>
-                            { "Sort by name" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortByAge)}>
-                            { "Sort by age" }
-                        </button>
-                    </div>
-                    <div class="col">
-                        <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortByAddress)}>
-                            { "Sort by address" }
-                        </button>
-                    </div>
+                <div class="col">
+                    <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(1))}>
+                        { "Create 1" }
+                </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(5))}>
+                        { "Create 5" }
+                    </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(100))}>
+                        { "Create 100" }
+                    </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersons(500))}>
+                        { "Create 500" }
+                    </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersonsPrepend(1))}>
+                        { "Prepend 1" }
+                    </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-success" onclick={link.callback(|_| Msg::CreatePersonsPrepend(5))}>
+                        { "Prepend 5" }
+                    </button>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <button class="btn_size alert alert-warning" onclick={link.callback(|_| Msg::ToggleKeyed)}>
+                        { if self.keyed { "Disable keys" } else { "Enable keys" } }
+                    </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SwapRandom)}>
+                        { "Swap random" }
+                    </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::ReverseList)}>
+                        { "Reverse list" }
+                    </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortById)}>
+                        { "Sort by id" }
+                    </button>
                 </div>
-            </>
+                <div class="col">
+                    <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortByName)}>
+                        { "Sort by name" }
+                    </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortByAge)}>
+                        { "Sort by age" }
+                    </button>
+                </div>
+                <div class="col">
+                    <button class="btn_size alert alert-info" onclick={link.callback(|_| Msg::SortByAddress)}>
+                        { "Sort by address" }
+                    </button>
+                </div>
+            </div>
         }
     }
 
diff --git a/examples/nested_list/src/main.rs b/examples/nested_list/src/main.rs
index 510b941941c..af54f509a55 100644
--- a/examples/nested_list/src/main.rs
+++ b/examples/nested_list/src/main.rs
@@ -65,7 +65,7 @@ impl fmt::Display for Hovered {
 
 impl IntoPropValue<Html> for &Hovered {
     fn into_prop_value(self) -> Html {
-        html! {<>{self.to_string()}</>}
+        html! {self.to_string()}
     }
 }
 
diff --git a/examples/portals/src/main.rs b/examples/portals/src/main.rs
index fe119c859e1..eea67130ac8 100644
--- a/examples/portals/src/main.rs
+++ b/examples/portals/src/main.rs
@@ -49,15 +49,11 @@ impl Component for ShadowDOMHost {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let contents = match self.inner_host {
-            Some(ref inner_host) => create_portal(ctx.props().children.clone(), inner_host.clone()),
-            _ => {
-                html! { <></> }
-            }
-        };
         html! {
             <div ref={self.host_ref.clone()}>
-                {contents}
+                if let Some(inner_host) = &self.inner_host {
+                    create_portal(ctx.props().children.clone(), inner_host.clone())
+                }
             </div>
         }
     }
@@ -119,7 +115,6 @@ impl Component for App {
             self.title_element.clone(),
         );
         html! {
-            <>
             {self.style_html.clone()}
             {title}
             <p>{"This paragraph is colored red, and its style is mounted into "}<pre>{"document.head"}</pre>{" with a portal"}</p>
@@ -131,7 +126,6 @@ impl Component for App {
                 </ShadowDOMHost>
                 <p>{format!("The button has been clicked {} times. This is also reflected in the title of the tab!", self.counter)}</p>
             </div>
-            </>
         }
     }
 }
diff --git a/examples/router/src/components/pagination.rs b/examples/router/src/components/pagination.rs
index 6467d20de50..cfc3220423d 100644
--- a/examples/router/src/components/pagination.rs
+++ b/examples/router/src/components/pagination.rs
@@ -73,11 +73,9 @@ impl Pagination {
                 .take(max_links - 2)
                 .map(|page| self.render_link(page, props));
             html! {
-                <>
-                    { for links }
-                    <li><span class="pagination-ellipsis">{ ELLIPSIS }</span></li>
-                    { last_link }
-                </>
+                { for links }
+                <li><span class="pagination-ellipsis">{ ELLIPSIS }</span></li>
+                { last_link }
             }
         } else {
             html! {
@@ -104,11 +102,9 @@ impl Pagination {
         let links_right = 2 * LINKS_PER_SIDE - links_left;
 
         html! {
-            <>
-                { self.render_links(1..page, pages_prev, links_left, props) }
-                <li>{ self.render_link(page, props) }</li>
-                { self.render_links(page + 1..=total_pages, pages_next, links_right, props) }
-            </>
+            { self.render_links(1..page, pages_prev, links_left, props) }
+            <li>{ self.render_link(page, props) }</li>
+            { self.render_links(page + 1..=total_pages, pages_next, links_right, props) }
         }
     }
 
@@ -120,24 +116,22 @@ impl Pagination {
         } = props.clone();
 
         html! {
-            <>
-                <Link<Route, PageQuery>
-                    classes={classes!("pagination-previous")}
-                    disabled={page==1}
-                    query={Some(PageQuery{page: page - 1})}
-                    to={to.clone()}
-                >
-                    { "Previous" }
-                </Link<Route, PageQuery>>
-                <Link<Route, PageQuery>
-                    classes={classes!("pagination-next")}
-                    disabled={page==total_pages}
-                    query={Some(PageQuery{page: page + 1})}
-                    {to}
-                >
-                    { "Next page" }
-                </Link<Route, PageQuery>>
-            </>
+            <Link<Route, PageQuery>
+                classes={classes!("pagination-previous")}
+                disabled={page==1}
+                query={Some(PageQuery{page: page - 1})}
+                to={to.clone()}
+            >
+                { "Previous" }
+            </Link<Route, PageQuery>>
+            <Link<Route, PageQuery>
+                classes={classes!("pagination-next")}
+                disabled={page==total_pages}
+                query={Some(PageQuery{page: page + 1})}
+                {to}
+            >
+                { "Next page" }
+            </Link<Route, PageQuery>>
         }
     }
 }
diff --git a/examples/router/src/main.rs b/examples/router/src/main.rs
index 614e344300a..bd9dda3d1b3 100644
--- a/examples/router/src/main.rs
+++ b/examples/router/src/main.rs
@@ -123,24 +123,14 @@ impl App {
 }
 
 fn switch(routes: Route) -> Html {
-    match routes {
-        Route::Post { id } => {
-            html! { <Post seed={id} /> }
-        }
-        Route::Posts => {
-            html! { <PostList /> }
-        }
-        Route::Author { id } => {
-            html! { <Author seed={id} /> }
-        }
-        Route::Authors => {
-            html! { <AuthorList /> }
-        }
-        Route::Home => {
-            html! { <Home /> }
-        }
-        Route::NotFound => {
-            html! { <PageNotFound /> }
+    html! {
+        match routes {
+            Route::Post { id } => <Post seed={id} />,
+            Route::Posts => <PostList />,
+            Route::Author { id } => <Author seed={id} />,
+            Route::Authors => <AuthorList />,
+            Route::Home => <Home />,
+            Route::NotFound => <PageNotFound />,
         }
     }
 }
diff --git a/examples/router/src/pages/author.rs b/examples/router/src/pages/author.rs
index af13c95fcda..8e802228e73 100644
--- a/examples/router/src/pages/author.rs
+++ b/examples/router/src/pages/author.rs
@@ -42,7 +42,9 @@ impl Component for Author {
                             <article class="tile is-child notification">
                                 <p class="title">{ "Interests" }</p>
                                 <div class="tags">
-                                    { for author.keywords.iter().map(|tag| html! { <span class="tag is-info">{ tag }</span> }) }
+                                    for tag in &author.keywords {
+                                        <span class="tag is-info">{ tag }</span>
+                                    }
                                 </div>
                             </article>
                         </div>
diff --git a/examples/router/src/pages/author_list.rs b/examples/router/src/pages/author_list.rs
index da1406255f1..41c547275dd 100644
--- a/examples/router/src/pages/author_list.rs
+++ b/examples/router/src/pages/author_list.rs
@@ -34,16 +34,6 @@ impl Component for AuthorList {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let authors = self.seeds.iter().map(|&seed| {
-            html! {
-                <div class="tile is-parent">
-                    <div class="tile is-child">
-                        <AuthorCard {seed} />
-                    </div>
-                </div>
-            }
-        });
-
         html! {
             <div class="container">
                 <section class="hero">
@@ -65,7 +55,13 @@ impl Component for AuthorList {
                 </p>
                 <div class="section">
                     <div class="tile is-ancestor">
-                        { for authors }
+                        for seed in &self.seeds {
+                            <div class="tile is-parent">
+                                <div class="tile is-child">
+                                    <AuthorCard {seed} />
+                                </div>
+                            </div>
+                        }
                     </div>
                     <ProgressDelay duration_ms={CAROUSEL_DELAY_MS} on_complete={ctx.link().callback(|_| Msg::NextAuthors)} />
                 </div>
diff --git a/examples/router/src/pages/home.rs b/examples/router/src/pages/home.rs
index 3c605116413..4874d96616c 100644
--- a/examples/router/src/pages/home.rs
+++ b/examples/router/src/pages/home.rs
@@ -35,42 +35,40 @@ impl Component for Home {
 impl Home {
     fn view_info_tiles(&self) -> Html {
         html! {
-            <>
-                <div class="tile is-parent">
-                    <div class="tile is-child box">
-                        <p class="title">{ "What are yews?" }</p>
-                        <p class="subtitle">{ "Everything you need to know!" }</p>
+            <div class="tile is-parent">
+                <div class="tile is-child box">
+                    <p class="title">{ "What are yews?" }</p>
+                    <p class="subtitle">{ "Everything you need to know!" }</p>
 
-                        <div class="content">
-                            {r#"
-                            A yew is a small to medium-sized evergreen tree, growing 10 to 20 metres tall, with a trunk up to 2 metres in diameter.
-                            The bark is thin, scaly brown, coming off in small flakes aligned with the stem.
-                            The leaves are flat, dark green, 1 to 4 centimetres long and 2 to 3 millimetres broad, arranged spirally on the stem,
-                            but with the leaf bases twisted to align the leaves in two flat rows either side of the stem,
-                            except on erect leading shoots where the spiral arrangement is more obvious.
-                            The leaves are poisonous.
-                            "#}
-                        </div>
+                    <div class="content">
+                        {r#"
+                        A yew is a small to medium-sized evergreen tree, growing 10 to 20 metres tall, with a trunk up to 2 metres in diameter.
+                        The bark is thin, scaly brown, coming off in small flakes aligned with the stem.
+                        The leaves are flat, dark green, 1 to 4 centimetres long and 2 to 3 millimetres broad, arranged spirally on the stem,
+                        but with the leaf bases twisted to align the leaves in two flat rows either side of the stem,
+                        except on erect leading shoots where the spiral arrangement is more obvious.
+                        The leaves are poisonous.
+                        "#}
                     </div>
                 </div>
+            </div>
 
-                <div class="tile is-parent">
-                    <div class="tile is-child box">
-                        <p class="title">{ "Who are we?" }</p>
+            <div class="tile is-parent">
+                <div class="tile is-child box">
+                    <p class="title">{ "Who are we?" }</p>
 
-                        <div class="content">
-                            { "We're a small team of just 2" }
-                            <sup>{ 64 }</sup>
-                            { " members working tirelessly to bring you the low-effort yew content we all desperately crave." }
-                            <br />
-                            {r#"
-                                We put a ton of effort into fact-checking our posts.
-                                Some say they read like a Wikipedia article - what a compliment!
-                            "#}
-                        </div>
+                    <div class="content">
+                        { "We're a small team of just 2" }
+                        <sup>{ 64 }</sup>
+                        { " members working tirelessly to bring you the low-effort yew content we all desperately crave." }
+                        <br />
+                        {r#"
+                            We put a ton of effort into fact-checking our posts.
+                            Some say they read like a Wikipedia article - what a compliment!
+                        "#}
                     </div>
                 </div>
-            </>
+            </div>
         }
     }
 }
diff --git a/examples/router/src/pages/post.rs b/examples/router/src/pages/post.rs
index 526a10339a5..a0483b1a450 100644
--- a/examples/router/src/pages/post.rs
+++ b/examples/router/src/pages/post.rs
@@ -31,37 +31,31 @@ impl Component for Post {
     fn view(&self, _ctx: &Context<Self>) -> Html {
         let Self { post } = self;
 
-        let keywords = post
-            .meta
-            .keywords
-            .iter()
-            .map(|keyword| html! { <span class="tag is-info">{ keyword }</span> });
-
         html! {
-            <>
-                <section class="hero is-medium is-light has-background">
-                    <img alt="The hero's background" class="hero-background is-transparent" src={post.meta.image_url.clone()} />
-                    <div class="hero-body">
-                        <div class="container">
-                            <h1 class="title">
-                                { &post.meta.title }
-                            </h1>
-                            <h2 class="subtitle">
-                                { "by " }
-                                <Link<Route> classes={classes!("has-text-weight-semibold")} to={Route::Author { id: post.meta.author.seed }}>
-                                    { &post.meta.author.name }
-                                </Link<Route>>
-                            </h2>
-                            <div class="tags">
-                                { for keywords }
-                            </div>
+            <section class="hero is-medium is-light has-background">
+                <img alt="The hero's background" class="hero-background is-transparent" src={post.meta.image_url.clone()} />
+                <div class="hero-body">
+                    <div class="container">
+                        <h1 class="title">
+                            { &post.meta.title }
+                        </h1>
+                        <h2 class="subtitle">
+                            { "by " }
+                            <Link<Route> classes={classes!("has-text-weight-semibold")} to={Route::Author { id: post.meta.author.seed }}>
+                                { &post.meta.author.name }
+                            </Link<Route>>
+                        </h2>
+                        <div class="tags">
+                            for keyword in &post.meta.keywords {
+                                <span class="tag is-info">{ keyword }</span>
+                            }
                         </div>
                     </div>
-                </section>
-                <div class="section container">
-                    { self.view_content() }
                 </div>
-            </>
+            </section>
+            <div class="section container">
+                { self.view_content() }
+            </div>
         }
     }
 }
@@ -102,20 +96,16 @@ impl Post {
     }
 
     fn render_section(&self, section: &content::Section, show_hero: bool) -> Html {
-        let hero = if show_hero {
-            self.render_section_hero(section)
-        } else {
-            html! {}
-        };
-        let paragraphs = section.paragraphs.iter().map(|paragraph| {
-            html! {
-                <p>{ paragraph }</p>
-            }
-        });
         html! {
             <section>
-                { hero }
-                <div>{ for paragraphs }</div>
+                if show_hero {
+                    self.render_section_hero(section)
+                }
+                <div>
+                    for paragraph in &section.paragraphs {
+                        <p>{ paragraph }</p>
+                    }
+                </div>
             </section>
         }
     }
diff --git a/examples/timer/src/main.rs b/examples/timer/src/main.rs
index 742b1200c3f..790e2616eb6 100644
--- a/examples/timer/src/main.rs
+++ b/examples/timer/src/main.rs
@@ -122,27 +122,27 @@ impl Component for App {
     fn view(&self, ctx: &Context<Self>) -> Html {
         let has_job = self.timeout.is_some() || self.interval.is_some();
         html! {
-            <>
-                <div id="buttons">
-                    <button disabled={has_job} onclick={ctx.link().callback(|_| Msg::StartTimeout)}>
-                        { "Start Timeout" }
-                    </button>
-                    <button disabled={has_job} onclick={ctx.link().callback(|_| Msg::StartInterval)}>
-                        { "Start Interval" }
-                    </button>
-                    <button disabled={!has_job} onclick={ctx.link().callback(|_| Msg::Cancel)}>
-                        { "Cancel!" }
-                    </button>
+            <div id="buttons">
+                <button disabled={has_job} onclick={ctx.link().callback(|_| Msg::StartTimeout)}>
+                    { "Start Timeout" }
+                </button>
+                <button disabled={has_job} onclick={ctx.link().callback(|_| Msg::StartInterval)}>
+                    { "Start Interval" }
+                </button>
+                <button disabled={!has_job} onclick={ctx.link().callback(|_| Msg::Cancel)}>
+                    { "Cancel!" }
+                </button>
+            </div>
+            <div id="wrapper">
+                <div id="time">
+                    { &self.time }
                 </div>
-                <div id="wrapper">
-                    <div id="time">
-                        { &self.time }
-                    </div>
-                    <div id="messages">
-                        { for self.messages.iter().map(|message| html! { <p>{ message }</p> }) }
-                    </div>
+                <div id="messages">
+                    for message in self.messages.iter() {
+                        <p>{ message }</p>
+                    }
                 </div>
-            </>
+            </div>
         }
     }
 }
diff --git a/examples/timer_functional/src/main.rs b/examples/timer_functional/src/main.rs
index 61dfd46854a..d0b25a8bff0 100644
--- a/examples/timer_functional/src/main.rs
+++ b/examples/timer_functional/src/main.rs
@@ -171,19 +171,17 @@ fn App() -> Html {
     });
 
     html!(
-        <>
-            <div id="buttons">
-                <button disabled={has_job} onclick={on_add_timeout}>{ "Start Timeout" }</button>
-                <button disabled={has_job} onclick={on_add_interval}>{ "Start Interval" }</button>
-                <button disabled={!has_job} onclick={on_cancel}>{ "Cancel"}</button>
+        <div id="buttons">
+            <button disabled={has_job} onclick={on_add_timeout}>{ "Start Timeout" }</button>
+            <button disabled={has_job} onclick={on_add_interval}>{ "Start Interval" }</button>
+            <button disabled={!has_job} onclick={on_cancel}>{ "Cancel"}</button>
+        </div>
+        <div id="wrapper">
+            <Clock />
+            <div id="messages">
+                { messages }
             </div>
-            <div id="wrapper">
-                <Clock />
-                <div id="messages">
-                    { messages }
-                </div>
-            </div>
-        </>
+        </div>
     )
 }
 
diff --git a/examples/todomvc/src/state.rs b/examples/todomvc/src/state.rs
index d63af301f04..e1ecd48de04 100644
--- a/examples/todomvc/src/state.rs
+++ b/examples/todomvc/src/state.rs
@@ -120,6 +120,6 @@ impl Filter {
 
 impl IntoPropValue<Html> for Filter {
     fn into_prop_value(self) -> yew::Html {
-        html! { <>{self.to_string()}</> }
+        html! { self.to_string() }
     }
 }
diff --git a/examples/wasi_ssr_module/src/main.rs b/examples/wasi_ssr_module/src/main.rs
index 3e1bfec7f67..9302a528ce1 100644
--- a/examples/wasi_ssr_module/src/main.rs
+++ b/examples/wasi_ssr_module/src/main.rs
@@ -13,10 +13,8 @@ fn Content() -> Html {
     use yew_router::prelude::*;
 
     html! {
-        <>
-            <h1>{"Yew WASI SSR demo"}</h1>
-            <Switch<Route> render={switch} />
-        </>
+        <h1>{"Yew WASI SSR demo"}</h1>
+        <Switch<Route> render={switch} />
     }
 }
 
diff --git a/examples/wasi_ssr_module/src/router.rs b/examples/wasi_ssr_module/src/router.rs
index 979f95a8757..232427001c5 100644
--- a/examples/wasi_ssr_module/src/router.rs
+++ b/examples/wasi_ssr_module/src/router.rs
@@ -15,15 +15,11 @@ pub enum Route {
 }
 
 pub fn switch(routes: Route) -> Html {
-    match routes {
-        Route::Portal => {
-            html! { <h1>{"Hello"}</h1> }
-        }
-        Route::Thread { id } => {
-            html! { <h1>{format!("Thread id {}", id)}</h1> }
-        }
-        Route::NotFound => {
-            html! { <h1>{"Not found"}</h1> }
+    html! {
+        match routes {
+            Route::Portal => <h1>{"Hello"}</h1>,
+            Route::Thread { id } => <h1>{format!("Thread id {}", id)}</h1>,
+            Route::NotFound => <h1>{"Not found"}</h1>,
         }
     }
 }
diff --git a/examples/web_worker_fib/src/lib.rs b/examples/web_worker_fib/src/lib.rs
index 4b61c80b2a6..536903f3570 100644
--- a/examples/web_worker_fib/src/lib.rs
+++ b/examples/web_worker_fib/src/lib.rs
@@ -55,18 +55,16 @@ fn Main() -> Html {
     };
 
     html! {
-        <>
-            <h1>{ "Web worker demo" }</h1>
-            <p>{ "Submit a value to calculate, then increase the counter on the main thread!"} </p>
-            <p>{ "Large numbers will take some time!" }</p>
-            <h3>{ "Output: " } { &*output }</h3>
-            <br />
-            <input type="number" value={input_value.to_string()} max="50" oninput={on_input_change} />
-            <button onclick={calculate}>{ "submit" }</button>
-            <br /> <br />
-            <h3>{ "Main thread value: " } { *clicker_value }</h3>
-            <button onclick={inc_clicker}>{ "click!" }</button>
-        </>
+        <h1>{ "Web worker demo" }</h1>
+        <p>{ "Submit a value to calculate, then increase the counter on the main thread!"} </p>
+        <p>{ "Large numbers will take some time!" }</p>
+        <h3>{ "Output: " } { &*output }</h3>
+        <br />
+        <input type="number" value={input_value.to_string()} max="50" oninput={on_input_change} />
+        <button onclick={calculate}>{ "submit" }</button>
+        <br /> <br />
+        <h3>{ "Main thread value: " } { *clicker_value }</h3>
+        <button onclick={inc_clicker}>{ "click!" }</button>
     }
 }
 
diff --git a/examples/web_worker_prime/src/lib.rs b/examples/web_worker_prime/src/lib.rs
index 34a53380e17..e9be83c658a 100644
--- a/examples/web_worker_prime/src/lib.rs
+++ b/examples/web_worker_prime/src/lib.rs
@@ -41,16 +41,14 @@ fn Main() -> Html {
     );
 
     html! {
-        <>
-            <h1>{"Find Prime"}</h1>
-            <p>{"This page demonstrates how to calculate prime in a web worker."}</p>
-            if *started {
-                <button onclick={stop_prime_calc}>{"Stop"}</button>
-            } else {
-                <button onclick={start_prime_calc}>{"Start"}</button>
-            }
-            <div id="result">{result_s}</div>
-        </>
+        <h1>{"Find Prime"}</h1>
+        <p>{"This page demonstrates how to calculate prime in a web worker."}</p>
+        if *started {
+            <button onclick={stop_prime_calc}>{"Stop"}</button>
+        } else {
+            <button onclick={start_prime_calc}>{"Start"}</button>
+        }
+        <div id="result">{result_s}</div>
     }
 }
 
diff --git a/packages/yew-macro/Cargo.toml b/packages/yew-macro/Cargo.toml
index 5ecb8c6946c..09e10d941bf 100644
--- a/packages/yew-macro/Cargo.toml
+++ b/packages/yew-macro/Cargo.toml
@@ -15,6 +15,9 @@ rust-version.workspace = true
 [lib]
 proc-macro = true
 
+[build-dependencies]
+version_check = "0.9"
+
 [dependencies]
 proc-macro-error = "1"
 proc-macro2.workspace = true
diff --git a/packages/yew-macro/build.rs b/packages/yew-macro/build.rs
new file mode 100644
index 00000000000..b87a9b117ed
--- /dev/null
+++ b/packages/yew-macro/build.rs
@@ -0,0 +1,5 @@
+fn main() {
+    if version_check::is_feature_flaggable().unwrap_or(false) {
+        println!("cargo:rustc-cfg=yew_macro_nightly");
+    }
+}
diff --git a/packages/yew-macro/src/html_tree/html_block.rs b/packages/yew-macro/src/html_tree/html_block.rs
index f3a644ee7c4..dd63ff301b2 100644
--- a/packages/yew-macro/src/html_tree/html_block.rs
+++ b/packages/yew-macro/src/html_tree/html_block.rs
@@ -2,7 +2,8 @@ use proc_macro2::Delimiter;
 use quote::{ToTokens, quote, quote_spanned};
 use syn::buffer::Cursor;
 use syn::parse::{Parse, ParseStream};
-use syn::{braced, token};
+use syn::spanned::Spanned;
+use syn::{Expr, Stmt, braced, token};
 
 use super::{HtmlIterable, HtmlNode, ToNodeIterator};
 use crate::PeekValue;
@@ -30,13 +31,74 @@ impl Parse for HtmlBlock {
         let content = if HtmlIterable::peek(content.cursor()).is_some() {
             BlockContent::Iterable(Box::new(content.parse()?))
         } else {
-            BlockContent::Node(Box::new(content.parse()?))
+            let node: HtmlNode = content.parse()?;
+            if let HtmlNode::Expression(ref expr) = node {
+                check_deprecated_html_call(expr);
+            }
+            BlockContent::Node(Box::new(node))
         };
 
         Ok(HtmlBlock { content, brace })
     }
 }
 
+/// Check for deprecated `html!` usage patterns inside expression blocks.
+fn check_deprecated_html_call(expr: &Expr) {
+    // Pattern 1: { match expr { arm => html! { ... }, ... } }
+    if let Expr::Match(match_expr) = expr {
+        for arm in &match_expr.arms {
+            if let Some(span) = html_macro_call_span(&arm.body) {
+                super::emit_deprecated!(
+                    span,
+                    "Use bare elements in arms directly \n\nmatch value {\n    pattern => \
+                     <Element />,\n}"
+                );
+                return;
+            }
+        }
+    }
+
+    // Pattern 2: {{ let x = ...; html! { ... } }}
+    if let Expr::Block(block_expr) = expr {
+        if let Some(span) = block_expr
+            .block
+            .stmts
+            .last()
+            .and_then(stmt_tail_html_macro_span)
+        {
+            super::emit_deprecated!(
+                span,
+                "`html!` is not needed inside expression blocks. Use `let` bindings and bare \
+                 elements directly"
+            );
+        }
+    }
+}
+
+/// Check if a statement is a tail `html!`/`html_nested!` macro call (no trailing semicolon).
+fn stmt_tail_html_macro_span(stmt: &Stmt) -> Option<proc_macro2::Span> {
+    match stmt {
+        Stmt::Expr(expr, None) => html_macro_call_span(expr),
+        Stmt::Macro(stmt_mac) if stmt_mac.semi_token.is_none() => {
+            macro_path_html_span(&stmt_mac.mac.path)
+        }
+        _ => None,
+    }
+}
+
+pub(super) fn html_macro_call_span(expr: &Expr) -> Option<proc_macro2::Span> {
+    let m = match expr {
+        Expr::Macro(m) => m,
+        _ => return None,
+    };
+    macro_path_html_span(&m.mac.path)
+}
+
+fn macro_path_html_span(path: &syn::Path) -> Option<proc_macro2::Span> {
+    let ident = &path.segments.last()?.ident;
+    (ident == "html" || ident == "html_nested").then(|| path.span())
+}
+
 impl ToTokens for HtmlBlock {
     fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
         let HtmlBlock { content, .. } = self;
diff --git a/packages/yew-macro/src/html_tree/html_for.rs b/packages/yew-macro/src/html_tree/html_for.rs
index 41dabe4b9a3..a04de7de6bc 100644
--- a/packages/yew-macro/src/html_tree/html_for.rs
+++ b/packages/yew-macro/src/html_tree/html_for.rs
@@ -4,7 +4,7 @@ use syn::buffer::Cursor;
 use syn::parse::{Parse, ParseStream};
 use syn::spanned::Spanned;
 use syn::token::{For, In};
-use syn::{Expr, Pat, braced};
+use syn::{Expr, Local, Pat, Stmt, Token, braced};
 
 use super::{HtmlChildrenTree, ToNodeIterator};
 use crate::PeekValue;
@@ -22,6 +22,7 @@ fn is_contextless_pure(expr: &Expr) -> bool {
 pub struct HtmlFor {
     pat: Pat,
     iter: Expr,
+    let_stmts: Vec<Local>,
     body: HtmlChildrenTree,
 }
 
@@ -42,7 +43,17 @@ impl Parse for HtmlFor {
         let body_stream;
         braced!(body_stream in input);
 
-        let body = HtmlChildrenTree::parse_delimited(&body_stream)?;
+        let mut let_stmts = Vec::new();
+        while body_stream.peek(Token![let]) {
+            let stmt: Stmt = body_stream.parse()?;
+            match stmt {
+                Stmt::Local(local) => let_stmts.push(local),
+                _ => unreachable!("peeked Token![let] but parsed non-local statement"),
+            }
+        }
+
+        let body = HtmlChildrenTree::parse_delimited_with_nodes(&body_stream)?;
+        super::check_unnecessary_fragment(&body);
         // TODO: more concise code by using if-let guards (MSRV 1.95)
         for child in body.0.iter() {
             let HtmlTree::Element(element) = child else {
@@ -61,13 +72,23 @@ impl Parse for HtmlFor {
                 ));
             }
         }
-        Ok(Self { pat, iter, body })
+        Ok(Self {
+            pat,
+            iter,
+            let_stmts,
+            body,
+        })
     }
 }
 
 impl ToTokens for HtmlFor {
     fn to_tokens(&self, tokens: &mut TokenStream) {
-        let Self { pat, iter, body } = self;
+        let Self {
+            pat,
+            iter,
+            let_stmts,
+            body,
+        } = self;
         let acc = Ident::new("__yew_v", iter.span());
 
         let alloc_opt = body
@@ -111,7 +132,7 @@ impl ToTokens for HtmlFor {
             let mut #acc = ::std::vec::Vec::<::yew::virtual_dom::VNode>::new();
             ::std::iter::Iterator::for_each(
                 ::std::iter::IntoIterator::into_iter(#iter),
-                |#pat| { #alloc_opt; #(#body);* }
+                |#pat| { #(#let_stmts)* #alloc_opt; #(#body);* }
             );
             #vlist_gen
         }))
diff --git a/packages/yew-macro/src/html_tree/html_list.rs b/packages/yew-macro/src/html_tree/html_list.rs
index db8f411516b..41da6ea6d4d 100644
--- a/packages/yew-macro/src/html_tree/html_list.rs
+++ b/packages/yew-macro/src/html_tree/html_list.rs
@@ -15,6 +15,13 @@ pub struct HtmlList {
     close: HtmlListClose,
 }
 
+impl HtmlList {
+    /// Returns tokens spanning the opening `<>` tag, for use in diagnostics.
+    pub(super) fn open_spanned(&self) -> impl ToTokens + use<> {
+        self.open.to_spanned()
+    }
+}
+
 impl PeekValue<()> for HtmlList {
     fn peek(cursor: Cursor) -> Option<()> {
         HtmlListOpen::peek(cursor)
diff --git a/packages/yew-macro/src/html_tree/html_match.rs b/packages/yew-macro/src/html_tree/html_match.rs
new file mode 100644
index 00000000000..ce7e3a7242e
--- /dev/null
+++ b/packages/yew-macro/src/html_tree/html_match.rs
@@ -0,0 +1,218 @@
+use proc_macro2::{Delimiter, TokenStream};
+use quote::{ToTokens, quote, quote_spanned};
+use syn::buffer::Cursor;
+use syn::parse::{Parse, ParseStream};
+use syn::spanned::Spanned;
+use syn::{Expr, Local, Pat, Stmt, Token, braced, token};
+
+use super::HtmlChildrenTree;
+use super::html_block::html_macro_call_span;
+use super::html_node::HtmlNode;
+use crate::PeekValue;
+
+pub struct HtmlMatch {
+    match_token: Token![match],
+    expr: Box<Expr>,
+    _brace: token::Brace,
+    arms: Vec<HtmlMatchArm>,
+}
+
+struct HtmlMatchArm {
+    pat: Pat,
+    guard: Option<(Token![if], Box<Expr>)>,
+    fat_arrow_token: Token![=>],
+    body: HtmlMatchArmBody,
+    comma: Option<Token![,]>,
+}
+
+enum HtmlMatchArmBody {
+    Braced {
+        brace: token::Brace,
+        let_stmts: Vec<Local>,
+        children: HtmlChildrenTree,
+    },
+    Unbraced(Box<super::HtmlTree>),
+}
+
+impl PeekValue<()> for HtmlMatch {
+    fn peek(cursor: Cursor) -> Option<()> {
+        let (ident, _) = cursor.ident()?;
+        (ident == "match").then_some(())
+    }
+}
+
+impl Parse for HtmlMatch {
+    fn parse(input: ParseStream) -> syn::Result<Self> {
+        let match_token = input.parse::<Token![match]>()?;
+        let expr = Box::new(input.call(Expr::parse_without_eager_brace)?);
+
+        if let Expr::Block(syn::ExprBlock { block, .. }) = &*expr {
+            if block.stmts.is_empty() {
+                return Err(syn::Error::new(
+                    expr.span(),
+                    "missing expression for `match`",
+                ));
+            }
+        }
+
+        if input.is_empty() {
+            return Err(syn::Error::new(
+                expr.span(),
+                "this `match` expression has a scrutinee, but no body",
+            ));
+        }
+
+        let content;
+        let brace = braced!(content in input);
+
+        let mut arms = Vec::new();
+        while !content.is_empty() {
+            arms.push(content.parse::<HtmlMatchArm>()?);
+        }
+
+        if arms.is_empty() {
+            return Err(syn::Error::new(
+                brace.span.span(),
+                "`match` expression must have at least one arm",
+            ));
+        }
+
+        Ok(HtmlMatch {
+            match_token,
+            expr,
+            _brace: brace,
+            arms,
+        })
+    }
+}
+
+impl Parse for HtmlMatchArm {
+    fn parse(input: ParseStream) -> syn::Result<Self> {
+        let pat = Pat::parse_multi_with_leading_vert(input)?;
+
+        let guard = if input.peek(Token![if]) {
+            let if_token: Token![if] = input.parse()?;
+            let guard_expr = input.call(Expr::parse_without_eager_brace)?;
+            Some((if_token, Box::new(guard_expr)))
+        } else {
+            None
+        };
+
+        let fat_arrow_token: Token![=>] = input.parse()?;
+
+        let body = if input.cursor().group(Delimiter::Brace).is_some() {
+            let content;
+            let brace = braced!(content in input);
+            let mut let_stmts = Vec::new();
+            while content.peek(Token![let]) {
+                let stmt: Stmt = content.parse()?;
+                match stmt {
+                    Stmt::Local(local) => let_stmts.push(local),
+                    _ => unreachable!("peeked Token![let] but parsed non-local statement"),
+                }
+            }
+            let children = HtmlChildrenTree::parse_delimited_with_nodes(&content)?;
+            super::check_unnecessary_fragment(&children);
+            HtmlMatchArmBody::Braced {
+                brace,
+                let_stmts,
+                children,
+            }
+        } else {
+            HtmlMatchArmBody::Unbraced(Box::new(super::HtmlTree::parse_or_node(input)?))
+        };
+
+        check_arm_html_macro_call(&body);
+
+        let comma: Option<Token![,]> = input.parse()?;
+
+        Ok(HtmlMatchArm {
+            pat,
+            guard,
+            fat_arrow_token,
+            body,
+            comma,
+        })
+    }
+}
+
+impl ToTokens for HtmlMatchArmBody {
+    fn to_tokens(&self, tokens: &mut TokenStream) {
+        match self {
+            Self::Braced {
+                brace,
+                let_stmts,
+                children,
+            } => {
+                tokens.extend(quote_spanned! {brace.span.span()=>
+                    {
+                        #(#let_stmts)*
+                        ::yew::virtual_dom::VNode::VList(::std::rc::Rc::new(
+                            ::yew::virtual_dom::VList::with_children(
+                                #children, ::std::option::Option::None
+                            )
+                        ))
+                    }
+                });
+            }
+            Self::Unbraced(tree) => {
+                tokens.extend(quote_spanned! {tree.span()=>
+                    { ::std::convert::Into::<::yew::virtual_dom::VNode>::into(#tree) }
+                });
+            }
+        }
+    }
+}
+
+impl ToTokens for HtmlMatch {
+    fn to_tokens(&self, tokens: &mut TokenStream) {
+        let Self {
+            match_token,
+            expr,
+            arms,
+            ..
+        } = self;
+
+        let arms_tokens = arms.iter().map(|arm| {
+            let HtmlMatchArm {
+                pat,
+                guard,
+                fat_arrow_token,
+                body,
+                comma,
+            } = arm;
+            let guard_tokens = guard
+                .as_ref()
+                .map(|(if_token, guard_expr)| quote! { #if_token #guard_expr });
+            quote! {
+                #pat #guard_tokens #fat_arrow_token #body #comma
+            }
+        });
+
+        tokens.extend(quote_spanned! {match_token.span()=>
+            match #expr {
+                #(#arms_tokens)*
+            }
+        });
+    }
+}
+
+fn check_arm_html_macro_call(body: &HtmlMatchArmBody) {
+    let trees: Box<dyn Iterator<Item = &super::HtmlTree> + '_> = match body {
+        HtmlMatchArmBody::Braced { children, .. } => Box::new(children.0.iter()),
+        HtmlMatchArmBody::Unbraced(tree) => Box::new(std::iter::once(tree.as_ref())),
+    };
+    for tree in trees {
+        if let super::HtmlTree::Node(node) = tree {
+            if let HtmlNode::Expression(expr) = node.as_ref() {
+                if let Some(span) = html_macro_call_span(expr) {
+                    super::emit_deprecated!(
+                        span,
+                        "`html!` is not needed in `match` arms. Use bare elements directly"
+                    );
+                    return;
+                }
+            }
+        }
+    }
+}
diff --git a/packages/yew-macro/src/html_tree/html_node.rs b/packages/yew-macro/src/html_tree/html_node.rs
index 2b69cc09559..471dded38ec 100644
--- a/packages/yew-macro/src/html_tree/html_node.rs
+++ b/packages/yew-macro/src/html_tree/html_node.rs
@@ -1,9 +1,9 @@
 use proc_macro2::{Span, TokenStream};
 use quote::{ToTokens, quote, quote_spanned};
-use syn::Lit;
 use syn::buffer::Cursor;
 use syn::parse::{Parse, ParseStream, Result};
 use syn::spanned::Spanned;
+use syn::{Expr, Lit};
 
 use super::ToNodeIterator;
 use crate::PeekValue;
@@ -11,7 +11,7 @@ use crate::stringify::Stringify;
 
 pub enum HtmlNode {
     Literal(Box<Lit>),
-    Expression(Box<TokenStream>),
+    Expression(Box<Expr>),
 }
 
 impl Parse for HtmlNode {
diff --git a/packages/yew-macro/src/html_tree/mod.rs b/packages/yew-macro/src/html_tree/mod.rs
index ef92c215d88..0e08d94cbd8 100644
--- a/packages/yew-macro/src/html_tree/mod.rs
+++ b/packages/yew-macro/src/html_tree/mod.rs
@@ -1,3 +1,12 @@
+macro_rules! emit_deprecated {
+    ($($tt:tt)*) => {{
+        #[cfg(yew_macro_nightly)]
+        proc_macro_error::emit_warning!($($tt)*);
+        #[cfg(not(yew_macro_nightly))]
+        proc_macro_error::emit_error!($($tt)*);
+    }};
+}
+pub(crate) use emit_deprecated;
 use proc_macro2::{Delimiter, Ident, Span, TokenStream};
 use quote::{ToTokens, quote, quote_spanned};
 use syn::buffer::Cursor;
@@ -16,6 +25,7 @@ mod html_for;
 mod html_if;
 mod html_iterable;
 mod html_list;
+mod html_match;
 mod html_node;
 mod lint;
 mod tag;
@@ -32,6 +42,7 @@ use tag::TagTokens;
 
 use self::html_block::BlockContent;
 use self::html_for::HtmlFor;
+use self::html_match::HtmlMatch;
 
 pub enum HtmlType {
     Block,
@@ -40,6 +51,7 @@ pub enum HtmlType {
     Element,
     If,
     For,
+    Match,
     Empty,
 }
 
@@ -50,6 +62,8 @@ pub enum HtmlTree {
     Element(Box<HtmlElement>),
     If(Box<HtmlIf>),
     For(Box<HtmlFor>),
+    Match(Box<HtmlMatch>),
+    Node(Box<HtmlNode>),
     Empty,
 }
 
@@ -65,11 +79,22 @@ impl Parse for HtmlTree {
             HtmlType::List => Self::List(Box::new(input.parse()?)),
             HtmlType::If => Self::If(Box::new(input.parse()?)),
             HtmlType::For => Self::For(Box::new(input.parse()?)),
+            HtmlType::Match => Self::Match(Box::new(input.parse()?)),
         })
     }
 }
 
 impl HtmlTree {
+    /// Parse an HtmlTree, falling back to HtmlNode for bare literals/expressions.
+    pub(crate) fn parse_or_node(input: ParseStream) -> syn::Result<Self> {
+        if Self::peek_html_type(input).is_some() {
+            input.parse()
+        } else {
+            let node: HtmlNode = input.parse()?;
+            Ok(Self::Node(Box::new(node)))
+        }
+    }
+
     /// Determine the [`HtmlType`] before actually parsing it.
     /// Even though this method accepts a [`ParseStream`], it is forked and the original stream is
     /// not modified. Once a certain `HtmlType` can be deduced for certain, the function eagerly
@@ -86,6 +111,8 @@ impl HtmlTree {
             Some(HtmlType::If)
         } else if HtmlFor::peek(cursor).is_some() {
             Some(HtmlType::For)
+        } else if HtmlMatch::peek(cursor).is_some() {
+            Some(HtmlType::Match)
         } else if input.peek(Token![<]) {
             let _lt: Token![<] = input.parse().ok()?;
 
@@ -134,41 +161,48 @@ impl ToTokens for HtmlTree {
             Self::Block(block) => block.to_tokens(tokens),
             Self::If(block) => block.to_tokens(tokens),
             Self::For(block) => block.to_tokens(tokens),
+            Self::Match(block) => block.to_tokens(tokens),
+            Self::Node(node) => node.to_tokens(tokens),
         }
     }
 }
 
-pub enum HtmlRoot {
-    Tree(HtmlTree),
-    Node(Box<HtmlNode>),
+pub struct HtmlRoot {
+    children: HtmlChildrenTree,
 }
 
 impl Parse for HtmlRoot {
     fn parse(input: ParseStream) -> syn::Result<Self> {
-        let html_root = if HtmlTree::peek_html_type(input).is_some() {
-            Self::Tree(input.parse()?)
-        } else {
-            Self::Node(Box::new(input.parse()?))
-        };
-
-        if !input.is_empty() {
-            let stream: TokenStream = input.parse()?;
-            Err(syn::Error::new_spanned(
-                stream,
-                "only one root html element is allowed (hint: you can wrap multiple html elements \
-                 in a fragment `<></>`)",
-            ))
-        } else {
-            Ok(html_root)
-        }
+        let children = HtmlChildrenTree::parse_delimited_with_nodes(input)?;
+        check_unnecessary_fragment(&children);
+        Ok(Self { children })
     }
 }
 
 impl ToTokens for HtmlRoot {
     fn to_tokens(&self, tokens: &mut TokenStream) {
-        match self {
-            Self::Tree(tree) => tree.to_tokens(tokens),
-            Self::Node(node) => node.to_tokens(tokens),
+        match &self.children.0[..] {
+            [] => tokens.extend(quote! {
+                <::yew::virtual_dom::VNode as ::std::default::Default>::default()
+            }),
+            [single] => single.to_tokens(tokens),
+            _ => {
+                let children = &self.children;
+                let vlist = match children.fully_keyed() {
+                    Some(true) => quote! {
+                        ::yew::virtual_dom::VList::__macro_new(#children, ::std::option::Option::None, ::yew::virtual_dom::FullyKeyedState::KnownFullyKeyed)
+                    },
+                    Some(false) => quote! {
+                        ::yew::virtual_dom::VList::__macro_new(#children, ::std::option::Option::None, ::yew::virtual_dom::FullyKeyedState::KnownMissingKeys)
+                    },
+                    None => quote! {
+                        ::yew::virtual_dom::VList::with_children(#children, ::std::option::Option::None)
+                    },
+                };
+                tokens.extend(quote! {
+                    ::yew::virtual_dom::VNode::VList(::std::rc::Rc::new(#vlist))
+                });
+            }
         }
     }
 }
@@ -184,12 +218,11 @@ impl Parse for HtmlRootVNode {
 impl ToTokens for HtmlRootVNode {
     fn to_tokens(&self, tokens: &mut TokenStream) {
         let new_tokens = self.0.to_token_stream();
-        tokens.extend(
-            quote_spanned! {self.0.span().resolved_at(Span::mixed_site())=> {
-                #[allow(clippy::useless_conversion)]
-                <::yew::virtual_dom::VNode as ::std::convert::From<_>>::from(#new_tokens)
-            }},
-        );
+        let span = new_tokens.span();
+        tokens.extend(quote_spanned! {span.resolved_at(Span::mixed_site())=> {
+            #[allow(clippy::useless_conversion)]
+            <::yew::virtual_dom::VNode as ::std::convert::From<_>>::from(#new_tokens)
+        }});
     }
 }
 
@@ -210,7 +243,7 @@ impl ToNodeIterator for HtmlTree {
     fn to_node_iterator_stream(&self) -> Option<TokenStream> {
         match self {
             Self::Block(block) => block.to_node_iterator_stream(),
-            // everything else is just a single node.
+            Self::Node(node) => node.to_node_iterator_stream(),
             _ => None,
         }
     }
@@ -218,6 +251,7 @@ impl ToNodeIterator for HtmlTree {
     fn is_singular(&self) -> bool {
         match self {
             Self::Block(block) => block.is_singular(),
+            Self::Node(node) => node.is_singular(),
             _ => true,
         }
     }
@@ -285,11 +319,16 @@ impl HtmlChildrenTree {
         }
     }
 
-    fn parse_delimited(input: ParseStream) -> syn::Result<Self> {
+    pub fn parse_delimited_with_nodes(input: ParseStream) -> syn::Result<Self> {
         let mut children = HtmlChildrenTree::new();
 
         while !input.is_empty() {
-            children.parse_child(input)?;
+            if HtmlTree::peek_html_type(input).is_some() {
+                children.parse_child(input)?;
+            } else {
+                let node: HtmlNode = input.parse()?;
+                children.0.push(HtmlTree::Node(Box::new(node)));
+            }
         }
 
         Ok(children)
@@ -383,7 +422,15 @@ impl HtmlChildrenTree {
                         return Some(false);
                     }
                 }
-                HtmlTree::If(_) | HtmlTree::For(_) | HtmlTree::Empty => return Some(false),
+                HtmlTree::Node(node) => {
+                    return match node.as_ref() {
+                        HtmlNode::Literal(_) => Some(false),
+                        HtmlNode::Expression(_) => None,
+                    };
+                }
+                HtmlTree::If(_) | HtmlTree::For(_) | HtmlTree::Match(_) | HtmlTree::Empty => {
+                    return Some(false);
+                }
             }
         }
         Some(true)
@@ -398,6 +445,7 @@ impl ToTokens for HtmlChildrenTree {
 
 pub struct HtmlRootBraced {
     brace: token::Brace,
+    let_stmts: Vec<syn::Local>,
     children: HtmlChildrenTree,
 }
 
@@ -411,18 +459,51 @@ impl Parse for HtmlRootBraced {
     fn parse(input: ParseStream) -> syn::Result<Self> {
         let content;
         let brace = braced!(content in input);
-        let children = HtmlChildrenTree::parse_delimited(&content)?;
 
-        Ok(HtmlRootBraced { brace, children })
+        let mut let_stmts = Vec::new();
+        while content.peek(Token![let]) {
+            let stmt: syn::Stmt = content.parse()?;
+            match stmt {
+                syn::Stmt::Local(local) => let_stmts.push(local),
+                _ => unreachable!("peeked Token![let] but parsed non-local statement"),
+            }
+        }
+
+        let children = HtmlChildrenTree::parse_delimited_with_nodes(&content)?;
+        check_unnecessary_fragment(&children);
+
+        Ok(HtmlRootBraced {
+            brace,
+            let_stmts,
+            children,
+        })
+    }
+}
+
+/// Lint when a braced body contains a single keyless fragment, since the children
+/// can be placed directly in the body without the `<>...</>` wrapper.
+pub(super) fn check_unnecessary_fragment(children: &HtmlChildrenTree) {
+    if let [HtmlTree::List(list)] = &children.0[..] {
+        if list.open.props.key.is_none() {
+            emit_deprecated!(
+                list.open_spanned(),
+                "unnecessary `<>...</>`. Children can be placed directly in the body"
+            );
+        }
     }
 }
 
 impl ToTokens for HtmlRootBraced {
     fn to_tokens(&self, tokens: &mut TokenStream) {
-        let Self { brace, children } = self;
+        let Self {
+            brace,
+            let_stmts,
+            children,
+        } = self;
 
         tokens.extend(quote_spanned! {brace.span.span()=>
             {
+                #(#let_stmts)*
                 ::yew::virtual_dom::VNode::VList(::std::rc::Rc::new(
                     ::yew::virtual_dom::VList::with_children(#children, ::std::option::Option::None)
                 ))
diff --git a/packages/yew-macro/tests/derive_props/pass.rs b/packages/yew-macro/tests/derive_props/pass.rs
index c5495509c7a..4751ba4de72 100644
--- a/packages/yew-macro/tests/derive_props/pass.rs
+++ b/packages/yew-macro/tests/derive_props/pass.rs
@@ -265,10 +265,10 @@ mod value_into_some_value_in_props {
 
     #[::yew::component]
     fn Main() -> ::yew::html::Html {
-        ::yew::html! {<>
+        ::yew::html! {
             <Inner required=3 optional=5/>
             <Inner required={::std::option::Option::Some(6)}/>
-        </>}
+        }
     }
 }
 
diff --git a/packages/yew-macro/tests/html_macro/block-fail.rs b/packages/yew-macro/tests/html_macro/block-fail.rs
index 006fb018690..458d92e1776 100644
--- a/packages/yew-macro/tests/html_macro/block-fail.rs
+++ b/packages/yew-macro/tests/html_macro/block-fail.rs
@@ -1,18 +1,36 @@
 use yew::prelude::*;
 
 fn compile_fail() {
-    html! {
-        <>
-            { () }
-        </>
-    };
 
     let not_tree = || ();
     html! {
         <div>{ not_tree() }</div>
     };
     html! {
-        <>{ for (0..3).map(|_| not_tree()) }</>
+        <div>{ for (0..3).map(|_| not_tree()) }</div>
+    };
+}
+
+fn deprecated_match_with_html() {
+    let status: u8 = 0;
+
+    // Old pattern: match inside block with html! arms
+    html! {
+        <div>{
+            match status {
+                0 => html! { <span>{"loading"}</span> },
+                _ => html! { <span>{"done"}</span> },
+            }
+        }</div>
+    };
+}
+
+fn deprecated_block_with_html() {
+    let item = "test";
+
+    // Old pattern: nested block with html! as tail expression
+    html! {
+        <div>{{ let processed = item.to_uppercase(); html! { <span>{processed}</span> } }}</div>
     };
 }
 
diff --git a/packages/yew-macro/tests/html_macro/block-fail.stderr b/packages/yew-macro/tests/html_macro/block-fail.stderr
index f0891450adb..4b86390cfdb 100644
--- a/packages/yew-macro/tests/html_macro/block-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/block-fail.stderr
@@ -1,23 +1,24 @@
-error[E0277]: the trait bound `(): Into<NodeSeq<(), VNode>>` is not satisfied
- --> tests/html_macro/block-fail.rs:6:15
-  |
-6 |             { () }
-  |               ^^
-  |               |
-  |               the trait `std::fmt::Display` is not implemented for `()`
-  |               required by a bound introduced by this call
-  |
-  = note: required for `()` to implement `ToString`
-  = note: required for `VNode` to implement `From<()>`
-  = note: required for `()` to implement `Into<VNode>`
-  = note: 2 redundant requirements hidden
-  = note: required for `()` to implement `Into<NodeSeq<(), VNode>>`
+error: Use bare elements in arms directly
+
+       match value {
+           pattern => <Element />,
+       }
+  --> tests/html_macro/block-fail.rs:21:22
+   |
+21 |                 0 => html! { <span>{"loading"}</span> },
+   |                      ^^^^
+
+error: `html!` is not needed inside expression blocks. Use `let` bindings and bare elements directly
+  --> tests/html_macro/block-fail.rs:33:54
+   |
+33 |         <div>{{ let processed = item.to_uppercase(); html! { <span>{processed}</span> } }}</div>
+   |                                                      ^^^^
 
 error[E0277]: the trait bound `(): Into<VNode>` is not satisfied
-  --> tests/html_macro/block-fail.rs:15:17
+  --> tests/html_macro/block-fail.rs:10:20
    |
-15 |         <>{ for (0..3).map(|_| not_tree()) }</>
-   |                 ^^^^^^ the trait `std::fmt::Display` is not implemented for `()`
+10 |         <div>{ for (0..3).map(|_| not_tree()) }</div>
+   |                    ^^^^^^ the trait `std::fmt::Display` is not implemented for `()`
    |
    = note: required for `()` to implement `ToString`
    = note: required for `VNode` to implement `From<()>`
diff --git a/packages/yew-macro/tests/html_macro/block-pass.rs b/packages/yew-macro/tests/html_macro/block-pass.rs
index 6a5bd15c632..e634f1ff06c 100644
--- a/packages/yew-macro/tests/html_macro/block-pass.rs
+++ b/packages/yew-macro/tests/html_macro/block-pass.rs
@@ -37,9 +37,9 @@ pub struct u8;
 pub struct usize;
 
 fn main() {
-    _ = ::yew::html! { <>{ "Hi" }</> };
-    _ = ::yew::html! { <>{ ::std::format!("Hello") }</> };
-    _ = ::yew::html! { <>{ ::std::string::ToString::to_string("Hello") }</> };
+    _ = ::yew::html! { { "Hi" } };
+    _ = ::yew::html! { { ::std::format!("Hello") } };
+    _ = ::yew::html! { { ::std::string::ToString::to_string("Hello") } };
 
     let msg = "Hello";
     _ = ::yew::html! { <div>{ msg }</div> };
diff --git a/packages/yew-macro/tests/html_macro/component-any-children-pass.rs b/packages/yew-macro/tests/html_macro/component-any-children-pass.rs
index 6ae61e69935..c9ac6eac0d9 100644
--- a/packages/yew-macro/tests/html_macro/component-any-children-pass.rs
+++ b/packages/yew-macro/tests/html_macro/component-any-children-pass.rs
@@ -161,39 +161,33 @@ fn compile_pass() {
     _ = ::yew::html! { <Child int=1 r#fn=1 /> };
 
     _ = ::yew::html! {
-        <>
-            <Child int=1 />
-            <scoped::Child int=1 />
-        </>
+        <Child int=1 />
+        <scoped::Child int=1 />
     };
 
     let props = <<Child as ::yew::Component>::Properties as ::std::default::Default>::default();
     let node_ref = <::yew::NodeRef as ::std::default::Default>::default();
     _ = ::yew::html! {
-        <>
-            <Child ..::std::clone::Clone::clone(&props) />
-            <Child int={1} ..props />
-            <Child r#ref={::std::clone::Clone::clone(&node_ref)} int={2} ..::yew::props!(Child::Properties { int: 5 }) />
-            <Child int=3 r#ref={::std::clone::Clone::clone(&node_ref)} ..::yew::props!(Child::Properties { int: 5 }) />
-            <Child r#ref={::std::clone::Clone::clone(&node_ref)} ..::yew::props!(Child::Properties { int: 5 }) />
-            <Child r#ref={&node_ref} ..<<Child as ::yew::Component>::Properties as ::std::default::Default>::default() />
-            <Child r#ref={node_ref} ..<<Child as ::yew::Component>::Properties as ::std::default::Default>::default() />
-        </>
+        <Child ..::std::clone::Clone::clone(&props) />
+        <Child int={1} ..props />
+        <Child r#ref={::std::clone::Clone::clone(&node_ref)} int={2} ..::yew::props!(Child::Properties { int: 5 }) />
+        <Child int=3 r#ref={::std::clone::Clone::clone(&node_ref)} ..::yew::props!(Child::Properties { int: 5 }) />
+        <Child r#ref={::std::clone::Clone::clone(&node_ref)} ..::yew::props!(Child::Properties { int: 5 }) />
+        <Child r#ref={&node_ref} ..<<Child as ::yew::Component>::Properties as ::std::default::Default>::default() />
+        <Child r#ref={node_ref} ..<<Child as ::yew::Component>::Properties as ::std::default::Default>::default() />
     };
 
     _ = ::yew::html! {
-        <>
-            <Child int=1 string="child" />
-            <Child int=1 />
-            <Child int={1+1} />
-            <Child int=1 vec={::std::vec![1]} />
-            <Child string={<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child")} int=1 />
-
-            <Child opt_str="child" int=1 />
-            <Child opt_str={<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child")} int=1 />
-            <Child opt_str={::std::option::Option::Some("child")} int=1 />
-            <Child opt_str={::std::option::Option::Some(<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child"))} int=1 />
-        </>
+        <Child int=1 string="child" />
+        <Child int=1 />
+        <Child int={1+1} />
+        <Child int=1 vec={::std::vec![1]} />
+        <Child string={<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child")} int=1 />
+
+        <Child opt_str="child" int=1 />
+        <Child opt_str={<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child")} int=1 />
+        <Child opt_str={::std::option::Option::Some("child")} int=1 />
+        <Child opt_str={::std::option::Option::Some(<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child"))} int=1 />
     };
 
     let name_expr = "child";
@@ -208,73 +202,65 @@ fn compile_pass() {
     };
 
     _ = ::yew::html! {
-        <>
-            <Child int=1 />
-            <Child int=1 optional_callback={::std::option::Option::Some(<::yew::Callback<()> as ::std::convert::From<_>>::from(|_| ()))} />
-            <Child int=1 optional_callback={<::yew::Callback<()> as ::std::convert::From<_>>::from(|_| ())} />
-            <Child int=1 optional_callback={::std::option::Option::None::<::yew::Callback<_>>} />
-        </>
+        <Child int=1 />
+        <Child int=1 optional_callback={::std::option::Option::Some(<::yew::Callback<()> as ::std::convert::From<_>>::from(|_| ()))} />
+        <Child int=1 optional_callback={<::yew::Callback<()> as ::std::convert::From<_>>::from(|_| ())} />
+        <Child int=1 optional_callback={::std::option::Option::None::<::yew::Callback<_>>} />
     };
 
     let node_ref = <::yew::NodeRef as ::std::default::Default>::default();
     _ = ::yew::html! {
-        <>
-            <Child int=1 r#ref={node_ref} />
-        </>
+        <Child int=1 r#ref={node_ref} />
     };
 
     let int = 1;
     let node_ref = <::yew::NodeRef as ::std::default::Default>::default();
     _ = ::yew::html! {
-        <>
-            <Child {int} r#ref={node_ref} />
-        </>
+        <Child {int} r#ref={node_ref} />
     };
 
     let props = <<Container as ::yew::Component>::Properties as ::std::default::Default>::default();
     let child_props =
         <<Child as ::yew::Component>::Properties as ::std::default::Default>::default();
     _ = ::yew::html! {
-        <>
-            <Container int=1 />
-            <Container int=1></Container>
-
-            <Container ..::std::clone::Clone::clone(&props)>
-                <div>{ "hello world" }</div>
-            </Container>
-
-            <Container int=1 ..::std::clone::Clone::clone(&props)>
-                <div>{ "hello world" }</div>
-            </Container>
-
-            <Container int=1 ..::std::clone::Clone::clone(&props)>
-                <Child int=2 opt_str="hello" ..::std::clone::Clone::clone(&child_props) />
-            </Container>
-
-            <Container int=1 ..::std::clone::Clone::clone(&props)>
-                <Child int=2 vec={::std::vec![0]} ..::std::clone::Clone::clone(&child_props) />
-            </Container>
-
-
-            <Container int=1 ..props>
-                <Child int=2 string="hello" ..child_props />
-            </Container>
-
-            <Container int=1>
-                <Child int=2 />
-            </Container>
-
-            <scoped::Container int=1>
-                <scoped::Container int=2/>
-            </scoped::Container>
-
-            <Container int=1 children={::yew::html::ChildrenRenderer::new(
-                ::std::vec![::yew::html!{ "::std::string::String" }]
-            )} />
-            <Container int=1 header={::yew::html!{
-                <Child int=2 />
-            }} />
-        </>
+        <Container int=1 />
+        <Container int=1></Container>
+
+        <Container ..::std::clone::Clone::clone(&props)>
+            <div>{ "hello world" }</div>
+        </Container>
+
+        <Container int=1 ..::std::clone::Clone::clone(&props)>
+            <div>{ "hello world" }</div>
+        </Container>
+
+        <Container int=1 ..::std::clone::Clone::clone(&props)>
+            <Child int=2 opt_str="hello" ..::std::clone::Clone::clone(&child_props) />
+        </Container>
+
+        <Container int=1 ..::std::clone::Clone::clone(&props)>
+            <Child int=2 vec={::std::vec![0]} ..::std::clone::Clone::clone(&child_props) />
+        </Container>
+
+
+        <Container int=1 ..props>
+            <Child int=2 string="hello" ..child_props />
+        </Container>
+
+        <Container int=1>
+            <Child int=2 />
+        </Container>
+
+        <scoped::Container int=1>
+            <scoped::Container int=2/>
+        </scoped::Container>
+
+        <Container int=1 children={::yew::html::ChildrenRenderer::new(
+            ::std::vec![::yew::html!{ "::std::string::String" }]
+        )} />
+        <Container int=1 header={::yew::html!{
+            <Child int=2 />
+        }} />
     };
 
     let variants = || -> ::std::vec::Vec<ChildrenVariants> {
@@ -291,32 +277,30 @@ fn compile_pass() {
     };
 
     _ = ::yew::html! {
-        <>
+        {
+            ::std::iter::Iterator::collect::<::yew::virtual_dom::VNode>(
+                ::std::iter::Iterator::filter(
+                    ::std::iter::IntoIterator::into_iter(variants()),
+                    |c| match c {
+                        ChildrenVariants::Child(_) => true,
+                        _ => false,
+                    }
+                )
+            )
+        }
+        <div>
             {
                 ::std::iter::Iterator::collect::<::yew::virtual_dom::VNode>(
                     ::std::iter::Iterator::filter(
                         ::std::iter::IntoIterator::into_iter(variants()),
                         |c| match c {
-                            ChildrenVariants::Child(_) => true,
+                            ChildrenVariants::AltChild(_) => true,
                             _ => false,
                         }
                     )
                 )
             }
-            <div>
-                {
-                    ::std::iter::Iterator::collect::<::yew::virtual_dom::VNode>(
-                        ::std::iter::Iterator::filter(
-                            ::std::iter::IntoIterator::into_iter(variants()),
-                            |c| match c {
-                                ChildrenVariants::AltChild(_) => true,
-                                _ => false,
-                            }
-                        )
-                    )
-                }
-            </div>
-        </>
+        </div>
     };
 
     _ = ::yew::html_nested! { 1 };
diff --git a/packages/yew-macro/tests/html_macro/component-fail.rs b/packages/yew-macro/tests/html_macro/component-fail.rs
index 5aa53ae2e79..b1873705f3a 100644
--- a/packages/yew-macro/tests/html_macro/component-fail.rs
+++ b/packages/yew-macro/tests/html_macro/component-fail.rs
@@ -99,7 +99,6 @@ fn compile_fail() {
     html! { <Child string="abc" /> };
     html! { </Child> };
     html! { <Child><Child></Child> };
-    html! { <Child></Child><Child></Child> };
     html! { <Child>{ "Not allowed" }</Child> };
 
     let num = 1;
@@ -126,11 +125,6 @@ fn compile_fail() {
         </ChildContainer>
     };
 
-    html_nested! {
-        <span>{ 1 }</span>
-        <span>{ 2 }</span>
-    };
-
     html! { <Child {std::f64::consts::PI} /> };
     html! { <Child {7 + 6} /> };
     html! { <Child {children.len()} /> };
diff --git a/packages/yew-macro/tests/html_macro/component-fail.stderr b/packages/yew-macro/tests/html_macro/component-fail.stderr
index b4eff99ee95..c173b14503a 100644
--- a/packages/yew-macro/tests/html_macro/component-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/component-fail.stderr
@@ -313,12 +313,6 @@ error: this opening tag has no corresponding closing tag
 101 |     html! { <Child><Child></Child> };
     |             ^^^^^^^
 
-error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
-   --> tests/html_macro/component-fail.rs:102:28
-    |
-102 |     html! { <Child></Child><Child></Child> };
-    |                            ^^^^^^^^^^^^^^^
-
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Path {
            attrs: [],
            qself: None,
@@ -328,66 +322,60 @@ error: the property value must be either a literal or enclosed in braces. Consid
                    PathSegment {
                        ident: Ident {
                            ident: "num",
-                           span: #0 bytes(3894..3897),
+                           span: #0 bytes(3848..3851),
                        },
                        arguments: PathArguments::None,
                    },
                ],
            },
        }
-   --> tests/html_macro/component-fail.rs:106:24
+   --> tests/html_macro/component-fail.rs:105:24
     |
-106 |     html! { <Child int=num ..props /> };
+105 |     html! { <Child int=num ..props /> };
     |                        ^^^
 
 error: cannot specify the `children` prop when the component already has children
-   --> tests/html_macro/component-fail.rs:124:26
+   --> tests/html_macro/component-fail.rs:123:26
     |
-124 |         <ChildContainer {children}>
+123 |         <ChildContainer {children}>
     |                          ^^^^^^^^
 
-error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
-   --> tests/html_macro/component-fail.rs:131:9
-    |
-131 |         <span>{ 2 }</span>
-    |         ^^^^^^^^^^^^^^^^^^
-
 error: only simple identifiers are allowed in the shorthand property syntax
-   --> tests/html_macro/component-fail.rs:134:21
+   --> tests/html_macro/component-fail.rs:128:21
     |
-134 |     html! { <Child {std::f64::consts::PI} /> };
+128 |     html! { <Child {std::f64::consts::PI} /> };
     |                     ^^^^^^^^^^^^^^^^^^^^
 
 error: missing label for property value. If trying to use the shorthand property syntax, only identifiers may be used
-   --> tests/html_macro/component-fail.rs:135:21
+   --> tests/html_macro/component-fail.rs:129:21
     |
-135 |     html! { <Child {7 + 6} /> };
+129 |     html! { <Child {7 + 6} /> };
     |                     ^^^^^
 
 error: missing label for property value. If trying to use the shorthand property syntax, only identifiers may be used
-   --> tests/html_macro/component-fail.rs:136:21
+   --> tests/html_macro/component-fail.rs:130:21
     |
-136 |     html! { <Child {children.len()} /> };
+130 |     html! { <Child {children.len()} /> };
     |                     ^^^^^^^^^^^^^^
 
 error: only an expression may be assigned as a property
-   --> tests/html_macro/component-fail.rs:147:34
+   --> tests/html_macro/component-fail.rs:141:34
     |
-147 |     html! { <HtmlInProps header={macro_rules! declare { }} /> };
+141 |     html! { <HtmlInProps header={macro_rules! declare { }} /> };
     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^
 
 error: mismatched closing tags: expected `A`, found `B`
-   --> tests/html_macro/component-fail.rs:177:22
+   --> tests/html_macro/component-fail.rs:171:22
     |
-177 |     let _ = html! { <A></B> };
+171 |     let _ = html! { <A></B> };
     |                      ^^^^^
 
 error: expected a valid closing tag for component
        note: found opening tag `<A>`
        help: try `</A>`
-   --> tests/html_macro/component-fail.rs:178:24
+   --> tests/html_macro/component-fail.rs:172:24
     |
-178 |     let _ = html! { <A></> };
+172 |     let _ = html! { <A></> };
     |                        ^^^
 
 error[E0425]: cannot find value `blah` in this scope
@@ -594,36 +582,36 @@ note: required by a bound in `yew::html::component::properties::__macro::PreBuil
    = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0609]: no field `children` on type `ChildProperties`
-   --> tests/html_macro/component-fail.rs:103:14
+   --> tests/html_macro/component-fail.rs:102:14
     |
-103 |     html! { <Child>{ "Not allowed" }</Child> };
+102 |     html! { <Child>{ "Not allowed" }</Child> };
     |              ^^^^^ unknown field
     |
     = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0599]: no method named `children` found for struct `ChildPropertiesBuilder` in the current scope
-   --> tests/html_macro/component-fail.rs:103:14
+   --> tests/html_macro/component-fail.rs:102:14
     |
 4   | #[derive(Clone, Properties, PartialEq)]
     |                 ---------- method `children` not found for this struct
 ...
-103 |     html! { <Child>{ "Not allowed" }</Child> };
+102 |     html! { <Child>{ "Not allowed" }</Child> };
     |              ^^^^^ method not found in `ChildPropertiesBuilder`
     |
     = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0609]: no field `children` on type `ChildProperties`
-   --> tests/html_macro/component-fail.rs:110:10
+   --> tests/html_macro/component-fail.rs:109:10
     |
-110 |         <Child ..ChildProperties { string: "hello".to_owned(), int: 5 }>
+109 |         <Child ..ChildProperties { string: "hello".to_owned(), int: 5 }>
     |          ^^^^^ unknown field
     |
     = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0277]: not all required properties have been provided for `ChildContainerProperties`
-   --> tests/html_macro/component-fail.rs:115:14
+   --> tests/html_macro/component-fail.rs:114:14
     |
-115 |     html! { <ChildContainer /> };
+114 |     html! { <ChildContainer /> };
     |              ^^^^^^^^^^^^^^ missing required properties
     |
     = help: the trait `HasAllProps<ChildContainerProperties, (_,)>` is not implemented for `CheckChildContainerPropertiesAll<AssertAllProps>`
@@ -639,9 +627,9 @@ note: required by a bound in `yew::html::component::properties::__macro::PreBuil
     = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0277]: not all required properties have been provided for `ChildContainerProperties`
-   --> tests/html_macro/component-fail.rs:116:14
+   --> tests/html_macro/component-fail.rs:115:14
     |
-116 |     html! { <ChildContainer></ChildContainer> };
+115 |     html! { <ChildContainer></ChildContainer> };
     |              ^^^^^^^^^^^^^^ missing required properties
     |
     = help: the trait `HasAllProps<ChildContainerProperties, (_,)>` is not implemented for `CheckChildContainerPropertiesAll<AssertAllProps>`
@@ -657,9 +645,9 @@ note: required by a bound in `yew::html::component::properties::__macro::PreBuil
     = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0277]: the trait bound `yew::virtual_dom::VText: IntoPropValue<ChildrenRenderer<VChild<Child>>>` is not satisfied
-   --> tests/html_macro/component-fail.rs:117:31
+   --> tests/html_macro/component-fail.rs:116:31
     |
-117 |     html! { <ChildContainer>{ "Not allowed" }</ChildContainer> };
+116 |     html! { <ChildContainer>{ "Not allowed" }</ChildContainer> };
     |              --------------   ^^^^^^^^^^^^^ the trait `IntoPropValue<ChildrenRenderer<VChild<Child>>>` is not implemented for `yew::virtual_dom::VText`
     |              |
     |              required by a bound introduced by this call
@@ -678,17 +666,17 @@ note: required by a bound in `ChildContainerPropertiesBuilder::children`
     = note: this error originates in the derive macro `Properties` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0277]: the trait bound `VChild<Child>: From<yew::virtual_dom::VList>` is not satisfied
-   --> tests/html_macro/component-fail.rs:118:29
+   --> tests/html_macro/component-fail.rs:117:29
     |
-118 |     html! { <ChildContainer><></></ChildContainer> };
+117 |     html! { <ChildContainer><></></ChildContainer> };
     |                             ^ the trait `From<yew::virtual_dom::VList>` is not implemented for `VChild<Child>`
     |
     = note: required for `yew::virtual_dom::VList` to implement `Into<VChild<Child>>`
 
 error[E0277]: the trait bound `VNode: IntoPropValue<ChildrenRenderer<VChild<Child>>>` is not satisfied
-   --> tests/html_macro/component-fail.rs:119:30
+   --> tests/html_macro/component-fail.rs:118:30
     |
-119 |     html! { <ChildContainer><other /></ChildContainer> };
+118 |     html! { <ChildContainer><other /></ChildContainer> };
     |              --------------  ^^^^^ the trait `IntoPropValue<ChildrenRenderer<VChild<Child>>>` is not implemented for `VNode`
     |              |
     |              required by a bound introduced by this call
@@ -707,9 +695,9 @@ note: required by a bound in `ChildContainerPropertiesBuilder::children`
     = note: this error originates in the derive macro `Properties` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 warning: unused variable: `props`
-   --> tests/html_macro/component-fail.rs:144:16
+   --> tests/html_macro/component-fail.rs:138:16
     |
-144 | fn HtmlInProps(props: &HtmlInPropsProperties) -> Html { let _ = (); unimplemented!() }
+138 | fn HtmlInProps(props: &HtmlInPropsProperties) -> Html { let _ = (); unimplemented!() }
     |                ^^^^^ help: if this is intentional, prefix it with an underscore: `_props`
     |
     = note: `#[warn(unused_variables)]` on by default
diff --git a/packages/yew-macro/tests/html_macro/component-pass.rs b/packages/yew-macro/tests/html_macro/component-pass.rs
index 62c2b90fc92..6113e3fff0f 100644
--- a/packages/yew-macro/tests/html_macro/component-pass.rs
+++ b/packages/yew-macro/tests/html_macro/component-pass.rs
@@ -169,39 +169,33 @@ fn compile_pass() {
     _ = ::yew::html! { <Child int=1 r#fn=1 /> };
 
     _ = ::yew::html! {
-        <>
-            <Child int=1 />
-            <scoped::Child int=1 />
-        </>
+        <Child int=1 />
+        <scoped::Child int=1 />
     };
 
     let props = <<Child as ::yew::Component>::Properties as ::std::default::Default>::default();
     let node_ref = <::yew::NodeRef as ::std::default::Default>::default();
     _ = ::yew::html! {
-        <>
-            <Child ..::std::clone::Clone::clone(&props) />
-            <Child int={1} ..props />
-            <Child r#ref={::std::clone::Clone::clone(&node_ref)} int={2} ..::yew::props!(Child::Properties { int: 5 }) />
-            <Child int=3 r#ref={::std::clone::Clone::clone(&node_ref)} ..::yew::props!(Child::Properties { int: 5 }) />
-            <Child r#ref={::std::clone::Clone::clone(&node_ref)} ..::yew::props!(Child::Properties { int: 5 }) />
-            <Child r#ref={&node_ref} ..<<Child as ::yew::Component>::Properties as ::std::default::Default>::default() />
-            <Child r#ref={node_ref} ..<<Child as ::yew::Component>::Properties as ::std::default::Default>::default() />
-        </>
+        <Child ..::std::clone::Clone::clone(&props) />
+        <Child int={1} ..props />
+        <Child r#ref={::std::clone::Clone::clone(&node_ref)} int={2} ..::yew::props!(Child::Properties { int: 5 }) />
+        <Child int=3 r#ref={::std::clone::Clone::clone(&node_ref)} ..::yew::props!(Child::Properties { int: 5 }) />
+        <Child r#ref={::std::clone::Clone::clone(&node_ref)} ..::yew::props!(Child::Properties { int: 5 }) />
+        <Child r#ref={&node_ref} ..<<Child as ::yew::Component>::Properties as ::std::default::Default>::default() />
+        <Child r#ref={node_ref} ..<<Child as ::yew::Component>::Properties as ::std::default::Default>::default() />
     };
 
     _ = ::yew::html! {
-        <>
-            <Child int=1 string="child" />
-            <Child int=1 />
-            <Child int={1+1} />
-            <Child int=1 vec={::std::vec![1]} />
-            <Child string={<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child")} int=1 />
-
-            <Child opt_str="child" int=1 />
-            <Child opt_str={<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child")} int=1 />
-            <Child opt_str={::std::option::Option::Some("child")} int=1 />
-            <Child opt_str={::std::option::Option::Some(<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child"))} int=1 />
-        </>
+        <Child int=1 string="child" />
+        <Child int=1 />
+        <Child int={1+1} />
+        <Child int=1 vec={::std::vec![1]} />
+        <Child string={<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child")} int=1 />
+
+        <Child opt_str="child" int=1 />
+        <Child opt_str={<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child")} int=1 />
+        <Child opt_str={::std::option::Option::Some("child")} int=1 />
+        <Child opt_str={::std::option::Option::Some(<::std::string::String as ::std::convert::From<&'static ::std::primitive::str>>::from("child"))} int=1 />
     };
 
     let name_expr = "child";
@@ -216,82 +210,72 @@ fn compile_pass() {
     };
 
     _ = ::yew::html! {
-        <>
-            <Child int=1 />
-            <Child int=1 optional_callback={::std::option::Option::Some(<::yew::Callback<()> as ::std::convert::From<_>>::from(|_| ()))} />
-            <Child int=1 optional_callback={<::yew::Callback<()> as ::std::convert::From<_>>::from(|_| ())} />
-            <Child int=1 optional_callback={::std::option::Option::None::<::yew::Callback<_>>} />
-        </>
+        <Child int=1 />
+        <Child int=1 optional_callback={::std::option::Option::Some(<::yew::Callback<()> as ::std::convert::From<_>>::from(|_| ()))} />
+        <Child int=1 optional_callback={<::yew::Callback<()> as ::std::convert::From<_>>::from(|_| ())} />
+        <Child int=1 optional_callback={::std::option::Option::None::<::yew::Callback<_>>} />
     };
 
     let node_ref = <::yew::NodeRef as ::std::default::Default>::default();
     _ = ::yew::html! {
-        <>
-            <Child int=1 r#ref={node_ref} />
-        </>
+        <Child int=1 r#ref={node_ref} />
     };
 
     let int = 1;
     let node_ref = <::yew::NodeRef as ::std::default::Default>::default();
     _ = ::yew::html! {
-        <>
-            <Child {int} r#ref={node_ref} />
-        </>
+        <Child {int} r#ref={node_ref} />
     };
 
     let props = <<Container as ::yew::Component>::Properties as ::std::default::Default>::default();
     let child_props =
         <<Child as ::yew::Component>::Properties as ::std::default::Default>::default();
     _ = ::yew::html! {
-        <>
-            <Container int=1 />
-            <Container int=1></Container>
-
-            <Container ..::std::clone::Clone::clone(&props)>
-                <div>{ "hello world" }</div>
-            </Container>
-
-            <Container int=1 ..::std::clone::Clone::clone(&props)>
-                <div>{ "hello world" }</div>
-            </Container>
-
-            <Container int=1 ..::std::clone::Clone::clone(&props)>
-                <Child int=2 opt_str="hello" ..::std::clone::Clone::clone(&child_props) />
-            </Container>
-
-            <Container int=1 ..::std::clone::Clone::clone(&props)>
-                <Child int=2 vec={::std::vec![0]} ..::std::clone::Clone::clone(&child_props) />
-            </Container>
-
-
-            <Container int=1 ..props>
-                <Child int=2 string="hello" ..child_props />
-            </Container>
-
-            <Container int=1>
-                <Child int=2 />
-            </Container>
-
-            <scoped::Container int=1>
-                <scoped::Container int=2/>
-            </scoped::Container>
-
-            <Container int=1 children={::yew::html::ChildrenRenderer::new(
-                ::std::vec![::yew::html!{ "::std::string::String" }]
-            )} />
-            <Container int=1 header={::yew::html!{
-                <Child int=2 />
-            }} />
-        </>
+        <Container int=1 />
+        <Container int=1></Container>
+
+        <Container ..::std::clone::Clone::clone(&props)>
+            <div>{ "hello world" }</div>
+        </Container>
+
+        <Container int=1 ..::std::clone::Clone::clone(&props)>
+            <div>{ "hello world" }</div>
+        </Container>
+
+        <Container int=1 ..::std::clone::Clone::clone(&props)>
+            <Child int=2 opt_str="hello" ..::std::clone::Clone::clone(&child_props) />
+        </Container>
+
+        <Container int=1 ..::std::clone::Clone::clone(&props)>
+            <Child int=2 vec={::std::vec![0]} ..::std::clone::Clone::clone(&child_props) />
+        </Container>
+
+
+        <Container int=1 ..props>
+            <Child int=2 string="hello" ..child_props />
+        </Container>
+
+        <Container int=1>
+            <Child int=2 />
+        </Container>
+
+        <scoped::Container int=1>
+            <scoped::Container int=2/>
+        </scoped::Container>
+
+        <Container int=1 children={::yew::html::ChildrenRenderer::new(
+            ::std::vec![::yew::html!{ "::std::string::String" }]
+        )} />
+        <Container int=1 header={::yew::html!{
+            <Child int=2 />
+        }} />
     };
 
     _ = ::yew::html! {
-        <>
-            <ChildContainer int=1 />
-            <ChildContainer int=1></ChildContainer>
-            <ChildContainer int=1><Child int = 2 /></ChildContainer>
-            <ChildContainer int=1><Child int = 2 /><Child int = 2 /></ChildContainer>
-        </>
+        <ChildContainer int=1 />
+        <ChildContainer int=1></ChildContainer>
+        <ChildContainer int=1><Child int = 2 /></ChildContainer>
+        <ChildContainer int=1><Child int = 2 /><Child int = 2 /></ChildContainer>
     };
 
     _ = ::yew::html! {
@@ -342,32 +326,30 @@ fn compile_pass() {
     };
 
     _ = ::yew::html! {
-        <>
+        {
+            ::std::iter::Iterator::collect::<::yew::virtual_dom::VNode>(
+                ::std::iter::Iterator::filter(
+                    ::std::iter::IntoIterator::into_iter(variants()),
+                    |c| match c {
+                        ChildrenVariants::Child(_) => true,
+                        _ => false,
+                    }
+                )
+            )
+        }
+        <div>
             {
                 ::std::iter::Iterator::collect::<::yew::virtual_dom::VNode>(
                     ::std::iter::Iterator::filter(
                         ::std::iter::IntoIterator::into_iter(variants()),
                         |c| match c {
-                            ChildrenVariants::Child(_) => true,
+                            ChildrenVariants::AltChild(_) => true,
                             _ => false,
                         }
                     )
                 )
             }
-            <div>
-                {
-                    ::std::iter::Iterator::collect::<::yew::virtual_dom::VNode>(
-                        ::std::iter::Iterator::filter(
-                            ::std::iter::IntoIterator::into_iter(variants()),
-                            |c| match c {
-                                ChildrenVariants::AltChild(_) => true,
-                                _ => false,
-                            }
-                        )
-                    )
-                }
-            </div>
-        </>
+        </div>
     };
 
     _ = ::yew::html_nested! { 1 };
@@ -405,12 +387,10 @@ impl ::yew::Component for HtmlPassedAsPropContainer {
 
     fn view(&self, _ctx: &::yew::Context<Self>) -> ::yew::Html {
         ::yew::html! {
-            <>
             <HtmlPassedAsProp value={::yew::html!()} />
             <HtmlPassedAsProp value="string literal" />
             <HtmlPassedAsProp value={::std::format!("string")} />
             <HtmlPassedAsProp value={::yew::AttrValue::Static("attr value")} />
-            </>
         }
     }
 }
diff --git a/packages/yew-macro/tests/html_macro/custom-type-in-block-fail.rs b/packages/yew-macro/tests/html_macro/custom-type-in-block-fail.rs
index b13a51bf5e2..f465effbb5f 100644
--- a/packages/yew-macro/tests/html_macro/custom-type-in-block-fail.rs
+++ b/packages/yew-macro/tests/html_macro/custom-type-in-block-fail.rs
@@ -14,7 +14,7 @@ struct Print {
 
 impl ::std::convert::From<Print> for ::yew::virtual_dom::VNode {
     fn from(val: Print) -> Self {
-        ::yew::html! {<>{"Hello "}{val.text}</>}
+        ::yew::html! {{"Hello "}{val.text}}
     }
 }
 
diff --git a/packages/yew-macro/tests/html_macro/element-fail.rs b/packages/yew-macro/tests/html_macro/element-fail.rs
index bba8dd1fbb9..d6a85d4861d 100644
--- a/packages/yew-macro/tests/html_macro/element-fail.rs
+++ b/packages/yew-macro/tests/html_macro/element-fail.rs
@@ -17,8 +17,6 @@ fn compile_fail() {
     html! { <div></span> };
     html! { <tag-a></tag-b> };
 
-    // multiple root
-    html! { <div></div><div></div> };
     // invalid child content
     html! { <div>Invalid</div> };
 
diff --git a/packages/yew-macro/tests/html_macro/element-fail.stderr b/packages/yew-macro/tests/html_macro/element-fail.stderr
index 27811e719d3..71c27037b2f 100644
--- a/packages/yew-macro/tests/html_macro/element-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/element-fail.stderr
@@ -28,7 +28,7 @@ error: this closing tag has no corresponding opening tag
 13 |     html! { <div></span></div> };
    |                  ^^^^^^^
 
-error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
+error: this closing tag has no corresponding opening tag
   --> tests/html_macro/element-fail.rs:14:20
    |
 14 |     html! { <img /></img> };
@@ -46,106 +46,100 @@ error: this closing tag has no corresponding opening tag
 18 |     html! { <tag-a></tag-b> };
    |                    ^^^^^^^^
 
-error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
-  --> tests/html_macro/element-fail.rs:21:24
-   |
-21 |     html! { <div></div><div></div> };
-   |                        ^^^^^^^^^^^
-
 error: expected a valid html element
-  --> tests/html_macro/element-fail.rs:23:18
+  --> tests/html_macro/element-fail.rs:21:18
    |
-23 |     html! { <div>Invalid</div> };
+21 |     html! { <div>Invalid</div> };
    |                  ^^^^^^^
 
 error: `attr` can only be specified once but is given here again
-  --> tests/html_macro/element-fail.rs:26:27
+  --> tests/html_macro/element-fail.rs:24:27
    |
-26 |     html! { <input attr=1 attr=2 /> };
+24 |     html! { <input attr=1 attr=2 /> };
    |                           ^^^^
 
 error: `value` can only be specified once but is given here again
-  --> tests/html_macro/element-fail.rs:27:32
+  --> tests/html_macro/element-fail.rs:25:32
    |
-27 |     html! { <input value="123" value="456" /> };
+25 |     html! { <input value="123" value="456" /> };
    |                                ^^^^^
 
 error: `kind` can only be specified once but is given here again
-  --> tests/html_macro/element-fail.rs:28:36
+  --> tests/html_macro/element-fail.rs:26:36
    |
-28 |     html! { <input kind="checkbox" kind="submit" /> };
+26 |     html! { <input kind="checkbox" kind="submit" /> };
    |                                    ^^^^
 
 error: `checked` can only be specified once but is given here again
-  --> tests/html_macro/element-fail.rs:29:33
+  --> tests/html_macro/element-fail.rs:27:33
    |
-29 |     html! { <input checked=true checked=false /> };
+27 |     html! { <input checked=true checked=false /> };
    |                                 ^^^^^^^
 
 error: `disabled` can only be specified once but is given here again
-  --> tests/html_macro/element-fail.rs:30:34
+  --> tests/html_macro/element-fail.rs:28:34
    |
-30 |     html! { <input disabled=true disabled=false /> };
+28 |     html! { <input disabled=true disabled=false /> };
    |                                  ^^^^^^^^
 
 error: `selected` can only be specified once but is given here again
-  --> tests/html_macro/element-fail.rs:31:35
+  --> tests/html_macro/element-fail.rs:29:35
    |
-31 |     html! { <option selected=true selected=false /> };
+29 |     html! { <option selected=true selected=false /> };
    |                                   ^^^^^^^^
 
 error: `class` can only be specified once but is given here again
-  --> tests/html_macro/element-fail.rs:32:32
+  --> tests/html_macro/element-fail.rs:30:32
    |
-32 |     html! { <div class="first" class="second" /> };
+30 |     html! { <div class="first" class="second" /> };
    |                                ^^^^^
 
 error: `ref` can only be specified once
-  --> tests/html_macro/element-fail.rs:33:29
+  --> tests/html_macro/element-fail.rs:31:29
    |
-33 |     html! { <input ref={()} ref={()} /> };
+31 |     html! { <input ref={()} ref={()} /> };
    |                             ^^^
 
 error: `ref` can only be specified once
-  --> tests/html_macro/element-fail.rs:63:29
+  --> tests/html_macro/element-fail.rs:61:29
    |
-63 |     html! { <input ref={()} ref={()} /> };
+61 |     html! { <input ref={()} ref={()} /> };
    |                             ^^^
 
 error: the tag `<input>` is a void element and cannot have children (hint: rewrite this as `<input />`)
-  --> tests/html_macro/element-fail.rs:66:13
+  --> tests/html_macro/element-fail.rs:64:13
    |
-66 |     html! { <input type="text"></input> };
+64 |     html! { <input type="text"></input> };
    |             ^^^^^^^^^^^^^^^^^^^
 
 error: the tag `<textarea>` is a void element and cannot have children (hint: to provide value to it, rewrite it as `<textarea value={x} />`. If you wish to set the default value, rewrite it as `<textarea defaultvalue={x} />`)
-  --> tests/html_macro/element-fail.rs:68:13
+  --> tests/html_macro/element-fail.rs:66:13
    |
-68 |     html! { <textarea>{"default value"}</textarea> }
+66 |     html! { <textarea>{"default value"}</textarea> }
    |             ^^^^^^^^^^
 
 error: the tag `<iNpUt>` is a void element and cannot have children (hint: rewrite this as `<iNpUt />`)
-  --> tests/html_macro/element-fail.rs:70:13
+  --> tests/html_macro/element-fail.rs:68:13
    |
-70 |     html! { <iNpUt type="text"></iNpUt> };
+68 |     html! { <iNpUt type="text"></iNpUt> };
    |             ^^^^^^^^^^^^^^^^^^^
 
 error: this dynamic tag is missing an expression block defining its value
-  --> tests/html_macro/element-fail.rs:73:14
+  --> tests/html_macro/element-fail.rs:71:14
    |
-73 |     html! { <@></@> };
+71 |     html! { <@></@> };
    |              ^
 
 error: this dynamic tag is missing an expression block defining its value
-  --> tests/html_macro/element-fail.rs:74:14
+  --> tests/html_macro/element-fail.rs:72:14
    |
-74 |     html! { <@/> };
+72 |     html! { <@/> };
    |              ^
 
 error: dynamic closing tags must not have a body (hint: replace it with just `</@>`)
-  --> tests/html_macro/element-fail.rs:77:27
+  --> tests/html_macro/element-fail.rs:75:27
    |
-77 |     html! { <@{"test"}></@{"test"}> };
+75 |     html! { <@{"test"}></@{"test"}> };
    |                           ^^^^^^^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Tuple {
@@ -153,9 +147,9 @@ error: the property value must be either a literal or enclosed in braces. Consid
            paren_token: Paren,
            elems: [],
        }
-  --> tests/html_macro/element-fail.rs:82:24
+  --> tests/html_macro/element-fail.rs:80:24
    |
-82 |     html! { <input ref=() /> };
+80 |     html! { <input ref=() /> };
    |                        ^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Tuple {
@@ -163,9 +157,9 @@ error: the property value must be either a literal or enclosed in braces. Consid
            paren_token: Paren,
            elems: [],
        }
-  --> tests/html_macro/element-fail.rs:83:24
+  --> tests/html_macro/element-fail.rs:81:24
    |
-83 |     html! { <input ref=() ref=() /> };
+81 |     html! { <input ref=() ref=() /> };
    |                        ^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Call {
@@ -179,7 +173,7 @@ error: the property value must be either a literal or enclosed in braces. Consid
                        PathSegment {
                            ident: Ident {
                                ident: "Some",
-                               span: #0 bytes(2628..2632),
+                               span: #0 bytes(2569..2573),
                            },
                            arguments: PathArguments::None,
                        },
@@ -196,9 +190,9 @@ error: the property value must be either a literal or enclosed in braces. Consid
                },
            ],
        }
-  --> tests/html_macro/element-fail.rs:84:28
+  --> tests/html_macro/element-fail.rs:82:28
    |
-84 |     html! { <input onfocus=Some(5) /> };
+82 |     html! { <input onfocus=Some(5) /> };
    |                            ^^^^^^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Path {
@@ -210,16 +204,16 @@ error: the property value must be either a literal or enclosed in braces. Consid
                    PathSegment {
                        ident: Ident {
                            ident: "NotToString",
-                           span: #0 bytes(2668..2679),
+                           span: #0 bytes(2609..2620),
                        },
                        arguments: PathArguments::None,
                    },
                ],
            },
        }
-  --> tests/html_macro/element-fail.rs:85:27
+  --> tests/html_macro/element-fail.rs:83:27
    |
-85 |     html! { <input string=NotToString /> };
+83 |     html! { <input string=NotToString /> };
    |                           ^^^^^^^^^^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Call {
@@ -233,7 +227,7 @@ error: the property value must be either a literal or enclosed in braces. Consid
                        PathSegment {
                            ident: Ident {
                                ident: "Some",
-                               span: #0 bytes(2707..2711),
+                               span: #0 bytes(2648..2652),
                            },
                            arguments: PathArguments::None,
                        },
@@ -251,7 +245,7 @@ error: the property value must be either a literal or enclosed in braces. Consid
                            PathSegment {
                                ident: Ident {
                                    ident: "NotToString",
-                                   span: #0 bytes(2712..2723),
+                                   span: #0 bytes(2653..2664),
                                },
                                arguments: PathArguments::None,
                            },
@@ -260,9 +254,9 @@ error: the property value must be either a literal or enclosed in braces. Consid
                },
            ],
        }
-  --> tests/html_macro/element-fail.rs:86:22
+  --> tests/html_macro/element-fail.rs:84:22
    |
-86 |     html! { <a media=Some(NotToString) /> };
+84 |     html! { <a media=Some(NotToString) /> };
    |                      ^^^^^^^^^^^^^^^^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Call {
@@ -276,7 +270,7 @@ error: the property value must be either a literal or enclosed in braces. Consid
                        PathSegment {
                            ident: Ident {
                                ident: "Some",
-                               span: #0 bytes(2751..2755),
+                               span: #0 bytes(2692..2696),
                            },
                            arguments: PathArguments::None,
                        },
@@ -293,9 +287,9 @@ error: the property value must be either a literal or enclosed in braces. Consid
                },
            ],
        }
-  --> tests/html_macro/element-fail.rs:87:21
+  --> tests/html_macro/element-fail.rs:85:21
    |
-87 |     html! { <a href=Some(5) /> };
+85 |     html! { <a href=Some(5) /> };
    |                     ^^^^^^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Tuple {
@@ -303,9 +297,9 @@ error: the property value must be either a literal or enclosed in braces. Consid
            paren_token: Paren,
            elems: [],
        }
-  --> tests/html_macro/element-fail.rs:88:25
+  --> tests/html_macro/element-fail.rs:86:25
    |
-88 |     html! { <input type=() /> };
+86 |     html! { <input type=() /> };
    |                         ^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Tuple {
@@ -313,9 +307,9 @@ error: the property value must be either a literal or enclosed in braces. Consid
            paren_token: Paren,
            elems: [],
        }
-  --> tests/html_macro/element-fail.rs:89:26
+  --> tests/html_macro/element-fail.rs:87:26
    |
-89 |     html! { <input value=() /> };
+87 |     html! { <input value=() /> };
    |                          ^^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::Path {
@@ -327,31 +321,31 @@ error: the property value must be either a literal or enclosed in braces. Consid
                    PathSegment {
                        ident: Ident {
                            ident: "NotToString",
-                           span: #0 bytes(2858..2869),
+                           span: #0 bytes(2799..2810),
                        },
                        arguments: PathArguments::None,
                    },
                ],
            },
        }
-  --> tests/html_macro/element-fail.rs:90:27
+  --> tests/html_macro/element-fail.rs:88:27
    |
-90 |     html! { <input string=NotToString /> };
+88 |     html! { <input string=NotToString /> };
    |                           ^^^^^^^^^^^
 
 error[E0308]: mismatched types
-  --> tests/html_macro/element-fail.rs:36:28
+  --> tests/html_macro/element-fail.rs:34:28
    |
-36 |     html! { <input checked=1 /> };
+34 |     html! { <input checked=1 /> };
    |     -----------------------^-----
    |     |                      |
    |     |                      expected `bool`, found integer
    |     arguments to this enum variant are incorrect
    |
 help: the type constructed contains `{integer}` due to the type of the argument passed
-  --> tests/html_macro/element-fail.rs:36:5
+  --> tests/html_macro/element-fail.rs:34:5
    |
-36 |     html! { <input checked=1 /> };
+34 |     html! { <input checked=1 /> };
    |     ^^^^^^^^^^^^^^^^^^^^^^^-^^^^^
    |                            |
    |                            this argument influences the type of `{{root}}`
@@ -360,9 +354,9 @@ note: tuple variant defined here
    = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0308]: mismatched types
-  --> tests/html_macro/element-fail.rs:37:29
+  --> tests/html_macro/element-fail.rs:35:29
    |
-37 |     html! { <input checked={Some(false)} /> };
+35 |     html! { <input checked={Some(false)} /> };
    |     ------------------------^^^^^^^^^^^------
    |     |                       |
    |     |                       expected `bool`, found `Option<bool>`
@@ -371,9 +365,9 @@ error[E0308]: mismatched types
    = note: expected type `bool`
               found enum `Option<bool>`
 help: the type constructed contains `Option<bool>` due to the type of the argument passed
-  --> tests/html_macro/element-fail.rs:37:5
+  --> tests/html_macro/element-fail.rs:35:5
    |
-37 |     html! { <input checked={Some(false)} /> };
+35 |     html! { <input checked={Some(false)} /> };
    |     ^^^^^^^^^^^^^^^^^^^^^^^^-----------^^^^^^
    |                             |
    |                             this argument influences the type of `{{root}}`
@@ -382,13 +376,13 @@ note: tuple variant defined here
    = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)
 help: use `Option::is_some` to test if the `Option` has a value
    |
-37 |     html! { <input checked={Some(false).is_some()} /> };
+35 |     html! { <input checked={Some(false).is_some()} /> };
    |                                        ++++++++++
 
 error[E0308]: mismatched types
-  --> tests/html_macro/element-fail.rs:38:29
+  --> tests/html_macro/element-fail.rs:36:29
    |
-38 |     html! { <input disabled=1 /> };
+36 |     html! { <input disabled=1 /> };
    |                             ^
    |                             |
    |                             expected `bool`, found integer
@@ -401,22 +395,22 @@ note: function defined here
    |        ^^^^^^^^^^^^^
 
 error[E0308]: mismatched types
-  --> tests/html_macro/element-fail.rs:39:30
+  --> tests/html_macro/element-fail.rs:37:30
    |
-39 |     html! { <input disabled={Some(true)} /> };
+37 |     html! { <input disabled={Some(true)} /> };
    |                              ^^^^^^^^^^ expected `bool`, found `Option<bool>`
    |
    = note: expected type `bool`
               found enum `Option<bool>`
 help: use `Option::is_some` to test if the `Option` has a value
    |
-39 |     html! { <input disabled={Some(true).is_some()} /> };
+37 |     html! { <input disabled={Some(true).is_some()} /> };
    |                                        ++++++++++
 
 error[E0308]: mismatched types
-  --> tests/html_macro/element-fail.rs:40:30
+  --> tests/html_macro/element-fail.rs:38:30
    |
-40 |     html! { <option selected=1 /> };
+38 |     html! { <option selected=1 /> };
    |                              ^
    |                              |
    |                              expected `bool`, found integer
@@ -429,9 +423,9 @@ note: function defined here
    |        ^^^^^^^^^^^^^
 
 error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not satisfied
-  --> tests/html_macro/element-fail.rs:43:26
+  --> tests/html_macro/element-fail.rs:41:26
    |
-43 |     html! { <input type={()} /> };
+41 |     html! { <input type={()} /> };
    |                          ^^ the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `()`
    |
    = help: the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `()`
@@ -439,9 +433,9 @@ error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::
    = help: for that trait implementation, expected `VNode`, found `Option<implicit_clone::unsync::string::IString>`
 
 error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not satisfied
-  --> tests/html_macro/element-fail.rs:44:27
+  --> tests/html_macro/element-fail.rs:42:27
    |
-44 |     html! { <input value={()} /> };
+42 |     html! { <input value={()} /> };
    |                           ^^ the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `()`
    |
    = help: the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `()`
@@ -449,9 +443,9 @@ error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::
    = help: for that trait implementation, expected `VNode`, found `Option<implicit_clone::unsync::string::IString>`
 
 error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not satisfied
-  --> tests/html_macro/element-fail.rs:45:22
+  --> tests/html_macro/element-fail.rs:43:22
    |
-45 |     html! { <a href={()} /> };
+43 |     html! { <a href={()} /> };
    |                      ^^ the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `()`
    |
    = help: the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `()`
@@ -459,9 +453,9 @@ error[E0277]: the trait bound `(): IntoPropValue<Option<implicit_clone::unsync::
    = help: for that trait implementation, expected `VNode`, found `Option<implicit_clone::unsync::string::IString>`
 
 error[E0277]: the trait bound `NotToString: IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not satisfied
-  --> tests/html_macro/element-fail.rs:46:28
+  --> tests/html_macro/element-fail.rs:44:28
    |
-46 |     html! { <input string={NotToString} /> };
+44 |     html! { <input string={NotToString} /> };
    |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `NotToString`
    |
    = help: the following other types implement trait `IntoPropValue<T>`:
@@ -476,9 +470,9 @@ error[E0277]: the trait bound `NotToString: IntoPropValue<Option<implicit_clone:
            and $N others
 
 error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not satisfied
-  --> tests/html_macro/element-fail.rs:47:23
+  --> tests/html_macro/element-fail.rs:45:23
    |
-47 |     html! { <a media={Some(NotToString)} /> };
+45 |     html! { <a media={Some(NotToString)} /> };
    |                       ----^^^^^^^^^^^^^
    |                       |
    |                       the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `Option<NotToString>`
@@ -496,9 +490,9 @@ error[E0277]: the trait bound `Option<NotToString>: IntoPropValue<Option<implici
            and $N others
 
 error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not satisfied
-  --> tests/html_macro/element-fail.rs:48:22
+  --> tests/html_macro/element-fail.rs:46:22
    |
-48 |     html! { <a href={Some(5)} /> };
+46 |     html! { <a href={Some(5)} /> };
    |                      ----^^^
    |                      |
    |                      the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `Option<{integer}>`
@@ -516,9 +510,9 @@ error[E0277]: the trait bound `Option<{integer}>: IntoPropValue<Option<implicit_
            and $N others
 
 error[E0277]: the trait bound `{integer}: IntoEventCallback<MouseEvent>` is not satisfied
-  --> tests/html_macro/element-fail.rs:51:28
+  --> tests/html_macro/element-fail.rs:49:28
    |
-51 |     html! { <input onclick=1 /> };
+49 |     html! { <input onclick=1 /> };
    |     -----------------------^-----
    |     |                      |
    |     |                      the trait `Fn(MouseEvent)` is not implemented for `{integer}`
@@ -546,9 +540,9 @@ note: required by a bound in `yew::html::onclick::Wrapper::__macro_new`
    = note: this error originates in the macro `impl_action` which comes from the expansion of the macro `impl_short` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0277]: the trait bound `yew::Callback<String>: IntoEventCallback<MouseEvent>` is not satisfied
-  --> tests/html_macro/element-fail.rs:52:29
+  --> tests/html_macro/element-fail.rs:50:29
    |
-52 |     html! { <input onclick={Callback::from(|a: String| ())} /> };
+50 |     html! { <input onclick={Callback::from(|a: String| ())} /> };
    |     ------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^------
    |     |                       |
    |     |                       the trait `Fn(MouseEvent)` is not implemented for `yew::Callback<String>`
@@ -574,9 +568,9 @@ note: required by a bound in `yew::html::onclick::Wrapper::__macro_new`
    = note: this error originates in the macro `impl_action` which comes from the expansion of the macro `impl_short` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0277]: the trait bound `Option<{integer}>: IntoEventCallback<FocusEvent>` is not satisfied
-  --> tests/html_macro/element-fail.rs:53:29
+  --> tests/html_macro/element-fail.rs:51:29
    |
-53 |     html! { <input onfocus={Some(5)} /> };
+51 |     html! { <input onfocus={Some(5)} /> };
    |     ------------------------^^^^^^^------
    |     |                       |
    |     |                       the trait `IntoEventCallback<FocusEvent>` is not implemented for `Option<{integer}>`
@@ -601,9 +595,9 @@ note: required by a bound in `yew::html::onfocus::Wrapper::__macro_new`
    = note: this error originates in the macro `impl_action` which comes from the expansion of the macro `impl_short` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0277]: the trait bound `(): IntoPropValue<yew::NodeRef>` is not satisfied
-  --> tests/html_macro/element-fail.rs:56:25
+  --> tests/html_macro/element-fail.rs:54:25
    |
-56 |     html! { <input ref={()} /> };
+54 |     html! { <input ref={()} /> };
    |                         ^^
    |                         |
    |                         the trait `IntoPropValue<yew::NodeRef>` is not implemented for `()`
@@ -614,9 +608,9 @@ error[E0277]: the trait bound `(): IntoPropValue<yew::NodeRef>` is not satisfied
    = help: for that trait implementation, expected `VNode`, found `yew::NodeRef`
 
 error[E0277]: the trait bound `Option<yew::NodeRef>: IntoPropValue<yew::NodeRef>` is not satisfied
-  --> tests/html_macro/element-fail.rs:57:25
+  --> tests/html_macro/element-fail.rs:55:25
    |
-57 |     html! { <input ref={Some(NodeRef::default())} /> };
+55 |     html! { <input ref={Some(NodeRef::default())} /> };
    |                         ----^^^^^^^^^^^^^^^^^^^^
    |                         |
    |                         the trait `IntoPropValue<yew::NodeRef>` is not implemented for `Option<yew::NodeRef>`
@@ -634,9 +628,9 @@ error[E0277]: the trait bound `Option<yew::NodeRef>: IntoPropValue<yew::NodeRef>
            and $N others
 
 error[E0277]: the trait bound `yew::Callback<String>: IntoEventCallback<MouseEvent>` is not satisfied
-  --> tests/html_macro/element-fail.rs:58:29
+  --> tests/html_macro/element-fail.rs:56:29
    |
-58 |     html! { <input onclick={Callback::from(|a: String| ())} /> };
+56 |     html! { <input onclick={Callback::from(|a: String| ())} /> };
    |     ------------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^------
    |     |                       |
    |     |                       the trait `Fn(MouseEvent)` is not implemented for `yew::Callback<String>`
@@ -662,9 +656,9 @@ note: required by a bound in `yew::html::onclick::Wrapper::__macro_new`
    = note: this error originates in the macro `impl_action` which comes from the expansion of the macro `impl_short` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0277]: the trait bound `NotToString: IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not satisfied
-  --> tests/html_macro/element-fail.rs:60:28
+  --> tests/html_macro/element-fail.rs:58:28
    |
-60 |     html! { <input string={NotToString} /> };
+58 |     html! { <input string={NotToString} /> };
    |                            ^^^^^^^^^^^ the trait `IntoPropValue<Option<implicit_clone::unsync::string::IString>>` is not implemented for `NotToString`
    |
    = help: the following other types implement trait `IntoPropValue<T>`:
@@ -679,9 +673,9 @@ error[E0277]: the trait bound `NotToString: IntoPropValue<Option<implicit_clone:
            and $N others
 
 error[E0277]: the trait bound `(): IntoPropValue<yew::NodeRef>` is not satisfied
-  --> tests/html_macro/element-fail.rs:62:25
+  --> tests/html_macro/element-fail.rs:60:25
    |
-62 |     html! { <input ref={()} /> };
+60 |     html! { <input ref={()} /> };
    |                         ^^
    |                         |
    |                         the trait `IntoPropValue<yew::NodeRef>` is not implemented for `()`
@@ -692,9 +686,9 @@ error[E0277]: the trait bound `(): IntoPropValue<yew::NodeRef>` is not satisfied
    = help: for that trait implementation, expected `VNode`, found `yew::NodeRef`
 
 error[E0277]: the trait bound `implicit_clone::unsync::string::IString: From<{integer}>` is not satisfied
-  --> tests/html_macro/element-fail.rs:79:16
+  --> tests/html_macro/element-fail.rs:77:16
    |
-79 |     html! { <@{55}></@> };
+77 |     html! { <@{55}></@> };
    |                ^^ the trait `From<{integer}>` is not implemented for `implicit_clone::unsync::string::IString`
    |
    = help: the following other types implement trait `From<T>`:
diff --git a/packages/yew-macro/tests/html_macro/for-fail.rs b/packages/yew-macro/tests/html_macro/for-fail.rs
index e40eece597b..44c2dd4efb0 100644
--- a/packages/yew-macro/tests/html_macro/for-fail.rs
+++ b/packages/yew-macro/tests/html_macro/for-fail.rs
@@ -21,4 +21,9 @@ fn main() {
     _ = ::yew::html!{for _ in 0 .. 10 {
         <div key={smth::KEY} />
     }};
+
+    // Unnecessary fragment in for body
+    _ = ::yew::html!{for _ in 0 .. 5 {
+        <><span>{"a"}</span><span>{"b"}</span></>
+    }};
 }
diff --git a/packages/yew-macro/tests/html_macro/for-fail.stderr b/packages/yew-macro/tests/html_macro/for-fail.stderr
index e0f8c8b943f..c4b9453d1d5 100644
--- a/packages/yew-macro/tests/html_macro/for-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/for-fail.stderr
@@ -36,6 +36,12 @@ error: duplicate key for a node in a `for`-loop
 22 |         <div key={smth::KEY} />
    |                   ^^^^
 
+error: unnecessary `<>...</>`. Children can be placed directly in the body
+  --> tests/html_macro/for-fail.rs:27:9
+   |
+27 |         <><span>{"a"}</span><span>{"b"}</span></>
+   |         ^^
+
 error[E0267]: `break` inside of a closure
   --> tests/html_macro/for-fail.rs:14:16
    |
diff --git a/packages/yew-macro/tests/html_macro/for-pass.rs b/packages/yew-macro/tests/html_macro/for-pass.rs
index d371a9d4e39..69b315f04f9 100644
--- a/packages/yew-macro/tests/html_macro/for-pass.rs
+++ b/packages/yew-macro/tests/html_macro/for-pass.rs
@@ -72,5 +72,50 @@ fn main() {
                 }}
             </div>
         }
-    }
+    };
+
+    // Single let binding in for body
+    _ = ::yew::html!{
+        for i in 0 .. 10 {
+            let doubled = i * 2;
+            <span>{doubled}</span>
+        }
+    };
+
+    // Multiple let bindings
+    _ = ::yew::html!{
+        for i in 0 .. 10 {
+            let doubled = i * 2;
+            let label = "item";
+            <span>{label}</span>
+            <span>{doubled}</span>
+        }
+    };
+
+    // Let with pattern destructuring
+    _ = ::yew::html!{
+        for (a, b) in ::std::iter::Iterator::map(0..5, |i| (i, i * 2)) {
+            let sum = a + b;
+            <span>{sum}</span>
+        }
+    };
+
+    // Let with type annotation
+    _ = ::yew::html!{
+        for i in 0..10 {
+            let x: ::std::primitive::i32 = i * 3;
+            <span>{x}</span>
+        }
+    };
+
+    // Let binding with multiple bare children
+    _ = ::yew::html!{
+        for i in 0..5 {
+            let doubled = i * 2;
+            let label = "val";
+            <span>{label}</span>
+            <span>{doubled}</span>
+            <hr/>
+        }
+    };
 }
diff --git a/packages/yew-macro/tests/html_macro/html-if-fail.rs b/packages/yew-macro/tests/html_macro/html-if-fail.rs
index d1722636f73..06faedf4c52 100644
--- a/packages/yew-macro/tests/html_macro/html-if-fail.rs
+++ b/packages/yew-macro/tests/html_macro/html-if-fail.rs
@@ -9,4 +9,12 @@ fn compile_fail() {
     html! { if true {} else if true {} else };
 }
 
+fn unnecessary_fragment() {
+    // Fragment in if body
+    html! { if true { <><div/><div/></> } };
+
+    // Fragment in else body
+    html! { if true { <div/> } else { <><span/><span/></> } };
+}
+
 fn main() {}
diff --git a/packages/yew-macro/tests/html_macro/html-if-fail.stderr b/packages/yew-macro/tests/html_macro/html-if-fail.stderr
index 4d20890640e..7e7e087a52c 100644
--- a/packages/yew-macro/tests/html_macro/html-if-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/html-if-fail.stderr
@@ -28,6 +28,18 @@ error: expected block or `if` after `else`
 9 |     html! { if true {} else if true {} else };
   |                                        ^^^^
 
+error: unnecessary `<>...</>`. Children can be placed directly in the body
+  --> tests/html_macro/html-if-fail.rs:14:23
+   |
+14 |     html! { if true { <><div/><div/></> } };
+   |                       ^^
+
+error: unnecessary `<>...</>`. Children can be placed directly in the body
+  --> tests/html_macro/html-if-fail.rs:17:39
+   |
+17 |     html! { if true { <div/> } else { <><span/><span/></> } };
+   |                                       ^^
+
 error[E0308]: mismatched types
  --> tests/html_macro/html-if-fail.rs:5:16
   |
diff --git a/packages/yew-macro/tests/html_macro/html-if-pass.rs b/packages/yew-macro/tests/html_macro/html-if-pass.rs
index 59ce730dcbf..1ddf71c905b 100644
--- a/packages/yew-macro/tests/html_macro/html-if-pass.rs
+++ b/packages/yew-macro/tests/html_macro/html-if-pass.rs
@@ -4,14 +4,12 @@ fn compile_pass_lit() {
     _ = ::yew::html! { if true {} };
     _ = ::yew::html! { if true { <div/> } };
     _ = ::yew::html! { if true { <div/><div/> } };
-    _ = ::yew::html! { if true { <><div/><div/></> } };
-    _ = ::yew::html! { if true { { ::yew::html! {} } } };
-    _ = ::yew::html! { if true { { { let _x = 42; ::yew::html! {} } } } };
+    _ = ::yew::html! { if true { <div/><div/> } };
     _ = ::yew::html! { if true {} else {} };
     _ = ::yew::html! { if true {} else if true {} };
     _ = ::yew::html! { if true {} else if true {} else {} };
     _ = ::yew::html! { if let ::std::option::Option::Some(text) = ::std::option::Option::Some("text") { <span>{ text }</span> } };
-    _ = ::yew::html! { <><div/>if true {}<div/></> };
+    _ = ::yew::html! { <div/>if true {}<div/> };
     _ = ::yew::html! { <div>if true {}</div> };
 }
 
@@ -21,15 +19,133 @@ fn compile_pass_expr() {
     _ = ::yew::html! { if condition {} };
     _ = ::yew::html! { if condition { <div/> } };
     _ = ::yew::html! { if condition { <div/><div/> } };
-    _ = ::yew::html! { if condition { <><div/><div/></> } };
-    _ = ::yew::html! { if condition { { ::yew::html! {} } } };
-    _ = ::yew::html! { if condition { { { let _x = 42; ::yew::html! {} } } } };
+    _ = ::yew::html! { if condition { <div/><div/> } };
     _ = ::yew::html! { if condition {} else {} };
     _ = ::yew::html! { if condition {} else if condition {} };
     _ = ::yew::html! { if condition {} else if condition {} else {} };
     _ = ::yew::html! { if let ::std::option::Option::Some(text) = ::std::option::Option::Some("text") { <span>{ text }</span> } };
-    _ = ::yew::html! { <><div/>if condition {}<div/></> };
+    _ = ::yew::html! { <div/>if condition {}<div/> };
     _ = ::yew::html! { <div>if condition {}</div> };
 }
 
+fn compile_pass_bare_nodes() {
+    let bar = "bar_val";
+
+    // Bare string literal in if body
+    _ = ::yew::html! { if true { "hello" } };
+
+    // Bare variable in if body
+    _ = ::yew::html! { if true { bar } };
+
+    // Bare expression in if body
+    _ = ::yew::html! { if true { ::std::format!("bar: {}", bar) } };
+
+    // Bare literal in else body
+    _ = ::yew::html! { if true { "foo" } else { "bar" } };
+
+    // Bare expression in else body
+    _ = ::yew::html! { if true { "foo" } else { ::std::format!("bar: {}", bar) } };
+
+    // Bare literal in else-if chain
+    _ = ::yew::html! { if true { "a" } else if true { "b" } else { "c" } };
+}
+
+fn compile_pass_let_bindings() {
+    let bar = "bar_val";
+
+    // Let binding in if body
+    _ = ::yew::html! {
+        if true {
+            let bar_pretty = ::std::format!("bar is: {}", bar);
+            <span>{bar_pretty}</span>
+        }
+    };
+
+    // Multiple let bindings
+    _ = ::yew::html! {
+        if true {
+            let a = 1;
+            let b = 2;
+            <span>{a + b}</span>
+        }
+    };
+
+    // Let binding in else body
+    _ = ::yew::html! {
+        if true {
+            <span>{"yes"}</span>
+        } else {
+            let msg = "no";
+            <span>{msg}</span>
+        }
+    };
+
+    // Let binding with type annotation
+    _ = ::yew::html! {
+        if true {
+            let x: ::std::primitive::i32 = 42;
+            <span>{x}</span>
+        }
+    };
+
+    // Let binding with bare literal body
+    _ = ::yew::html! {
+        if true {
+            let msg = "computed";
+            msg
+        }
+    };
+
+    // Let binding with multiple children
+    _ = ::yew::html! {
+        if true {
+            let bar_pretty = ::std::format!("bar is: {}", bar);
+            <p>{bar_pretty}</p>
+            <p>{"repeat:"}</p>
+        }
+    };
+
+    // Let binding with multiple bare children (no fragment wrapper)
+    _ = ::yew::html! {
+        if true {
+            let msg = "hello";
+            <p>{msg}</p>
+            <p>{"world"}</p>
+        }
+    };
+
+    // Multiple children in else body
+    _ = ::yew::html! {
+        if true {
+            <span>{"a"}</span>
+        } else {
+            <span>{"b"}</span>
+            <span>{"c"}</span>
+        }
+    };
+
+    // Let binding + multiple children in else body
+    _ = ::yew::html! {
+        if true {
+            <span>{"yes"}</span>
+        } else {
+            let msg = "no";
+            <span>{msg}</span>
+            <span>{"really"}</span>
+        }
+    };
+
+    // Multiple children in else-if body
+    _ = ::yew::html! {
+        if true {
+            <span>{"a"}</span>
+        } else if true {
+            <span>{"b"}</span>
+            <span>{"c"}</span>
+        } else {
+            <span>{"d"}</span>
+        }
+    };
+}
+
 fn main() {}
diff --git a/packages/yew-macro/tests/html_macro/html-match-fail.rs b/packages/yew-macro/tests/html_macro/html-match-fail.rs
new file mode 100644
index 00000000000..d6f6b5a1981
--- /dev/null
+++ b/packages/yew-macro/tests/html_macro/html-match-fail.rs
@@ -0,0 +1,36 @@
+use yew::prelude::*;
+
+fn main() {
+    // Missing scrutinee
+    html! { match {} };
+
+    // Missing body
+    html! { match 42 };
+
+    // Empty match (no arms)
+    html! { match 42 {} };
+
+    // html! in unbraced match arm
+    html! {
+        match 1 {
+            1 => html! { <h1>{"Hello"}</h1> },
+            _ => <h1>{"Goodbye"}</h1>,
+        }
+    };
+
+    // html! in braced match arm with let binding
+    html! {
+        match 1 {
+            1 => { let a = 1; html! { <h1>{a}</h1> } },
+            _ => <h1>{"Goodbye"}</h1>,
+        }
+    };
+
+    // Unnecessary fragment in braced match arm
+    html! {
+        match 1 {
+            1 => { <><h1>{"Hello"}</h1><p>{"World"}</p></> }
+            _ => <h1>{"Goodbye"}</h1>,
+        }
+    };
+}
diff --git a/packages/yew-macro/tests/html_macro/html-match-fail.stderr b/packages/yew-macro/tests/html_macro/html-match-fail.stderr
new file mode 100644
index 00000000000..3a13154b94b
--- /dev/null
+++ b/packages/yew-macro/tests/html_macro/html-match-fail.stderr
@@ -0,0 +1,35 @@
+error: missing expression for `match`
+ --> tests/html_macro/html-match-fail.rs:5:19
+  |
+5 |     html! { match {} };
+  |                   ^^
+
+error: this `match` expression has a scrutinee, but no body
+ --> tests/html_macro/html-match-fail.rs:8:19
+  |
+8 |     html! { match 42 };
+  |                   ^^
+
+error: `match` expression must have at least one arm
+  --> tests/html_macro/html-match-fail.rs:11:22
+   |
+11 |     html! { match 42 {} };
+   |                      ^^
+
+error: `html!` is not needed in `match` arms. Use bare elements directly
+  --> tests/html_macro/html-match-fail.rs:16:18
+   |
+16 |             1 => html! { <h1>{"Hello"}</h1> },
+   |                  ^^^^
+
+error: `html!` is not needed in `match` arms. Use bare elements directly
+  --> tests/html_macro/html-match-fail.rs:24:31
+   |
+24 |             1 => { let a = 1; html! { <h1>{a}</h1> } },
+   |                               ^^^^
+
+error: unnecessary `<>...</>`. Children can be placed directly in the body
+  --> tests/html_macro/html-match-fail.rs:32:20
+   |
+32 |             1 => { <><h1>{"Hello"}</h1><p>{"World"}</p></> }
+   |                    ^^
diff --git a/packages/yew-macro/tests/html_macro/html-match-pass.rs b/packages/yew-macro/tests/html_macro/html-match-pass.rs
new file mode 100644
index 00000000000..2c7e8ab6be9
--- /dev/null
+++ b/packages/yew-macro/tests/html_macro/html-match-pass.rs
@@ -0,0 +1,315 @@
+#![no_implicit_prelude]
+
+// Shadow primitives
+#[allow(non_camel_case_types)]
+pub struct bool;
+#[allow(non_camel_case_types)]
+pub struct char;
+#[allow(non_camel_case_types)]
+pub struct f32;
+#[allow(non_camel_case_types)]
+pub struct f64;
+#[allow(non_camel_case_types)]
+pub struct i128;
+#[allow(non_camel_case_types)]
+pub struct i16;
+#[allow(non_camel_case_types)]
+pub struct i32;
+#[allow(non_camel_case_types)]
+pub struct i64;
+#[allow(non_camel_case_types)]
+pub struct i8;
+#[allow(non_camel_case_types)]
+pub struct isize;
+#[allow(non_camel_case_types)]
+pub struct str;
+#[allow(non_camel_case_types)]
+pub struct u128;
+#[allow(non_camel_case_types)]
+pub struct u16;
+#[allow(non_camel_case_types)]
+pub struct u32;
+#[allow(non_camel_case_types)]
+pub struct u64;
+#[allow(non_camel_case_types)]
+pub struct u8;
+#[allow(non_camel_case_types)]
+pub struct usize;
+
+fn main() {
+    let status: ::std::primitive::u8 = 1;
+
+    // Simple match with two arms
+    _ = ::yew::html! {
+        match status {
+            0 => { <span>{"loading"}</span> }
+            _ => { <span>{"done"}</span> }
+        }
+    };
+
+    // Match with if guard
+    _ = ::yew::html! {
+        match status {
+            x if x > 5 => { <span>{"big"}</span> }
+            _ => { <span>{"small"}</span> }
+        }
+    };
+
+    // Match with OR-patterns
+    _ = ::yew::html! {
+        match status {
+            0 | 1 => { <span>{"low"}</span> }
+            _ => { <span>{"high"}</span> }
+        }
+    };
+
+    // Match with pattern destructuring
+    let pair: (::std::primitive::i32, ::std::primitive::i32) = (1, 2);
+    _ = ::yew::html! {
+        match pair {
+            (0, _) => { <span>{"zero first"}</span> }
+            (_, 0) => { <span>{"zero second"}</span> }
+            _ => { <span>{"other"}</span> }
+        }
+    };
+
+    // Match inside element children
+    _ = ::yew::html! {
+        <div>
+            match status {
+                0 => { <span>{"zero"}</span> }
+                _ => { <span>{"nonzero"}</span> }
+            }
+        </div>
+    };
+
+    // Match at root
+    _ = ::yew::html! {
+        match status {
+            0 => { <span>{"a"}</span> }
+            _ => { <span>{"b"}</span> }
+        }
+    };
+
+    // Match with trailing commas
+    _ = ::yew::html! {
+        match status {
+            0 => { <span>{"zero"}</span> },
+            _ => { <span>{"other"}</span> },
+        }
+    };
+
+    // Match with empty arm body
+    _ = ::yew::html! {
+        match status {
+            0 => {}
+            _ => { <span>{"fallback"}</span> }
+        }
+    };
+
+    // Match with multiple children in arm body
+    _ = ::yew::html! {
+        match status {
+            0 => { <span>{"a"}</span><span>{"b"}</span> }
+            _ => { <div>{"c"}</div> }
+        }
+    };
+
+    // this fails. but the message is cryptic
+    // _ = ::yew::html! {
+    //     match status {
+    //         0 => <span>{"a"}</span><span>{"b"}</span>
+    //         _ => { <div>{"c"}</div> }
+    //     }
+    // };
+
+
+    // no trailing comma needed.
+    _ = ::yew::html! {
+        match status {
+            0 => <><span>{"a"}</span><span>{"b"}</span></>
+            _ => <div>{"c"}</div>
+        }
+    };
+
+    // no trailing comma needed.
+    _ = ::yew::html! {
+        match status {
+            0 => <span>{"a"}</span>
+            _ => <div>{"c"}</div>
+        }
+    };
+
+    // Match with if-let style via Option
+    let opt: ::std::option::Option<::std::primitive::i32> = ::std::option::Option::Some(42);
+    _ = ::yew::html! {
+        match opt {
+            ::std::option::Option::Some(val) => { <span>{val}</span> }
+            ::std::option::Option::None => { <span>{"none"}</span> }
+        }
+    };
+
+    // Match alongside other elements
+    _ = ::yew::html! {
+        <div>{"before"}</div>
+        match status {
+            0 => { <span>{"zero"}</span> }
+            _ => { <span>{"other"}</span> }
+        }
+        <div>{"after"}</div>
+    };
+
+    // Unbraced single element arm
+    _ = ::yew::html! {
+        match status {
+            0 => <span>{"zero"}</span>,
+            _ => <div>{"other"}</div>,
+        }
+    };
+
+    // Mixed braced and unbraced arms
+    _ = ::yew::html! {
+        match status {
+            0 => <span>{"zero"}</span>,
+            _ => { <div>{"other"}</div><div>{"more"}</div> }
+        }
+    };
+
+    // Unbraced self-closing component-style element
+    _ = ::yew::html! {
+        match status {
+            0 => <br/>,
+            _ => <hr/>,
+        }
+    };
+
+    // Let bindings in braced arm body
+    _ = ::yew::html! {
+        match opt {
+            ::std::option::Option::Some(val) => {
+                let doubled = val * 2;
+                <span>{doubled}</span>
+            }
+            ::std::option::Option::None => { <span>{"none"}</span> }
+        }
+    };
+
+    // Multiple let bindings in arm body
+    _ = ::yew::html! {
+        match opt {
+            ::std::option::Option::Some(val) => {
+                let doubled = val * 2;
+                let label = "value";
+                <span>{label}</span>
+                <span>{doubled}</span>
+            }
+            ::std::option::Option::None => { <span>{"none"}</span> }
+        }
+    };
+
+    // Let binding with type annotation in arm body
+    _ = ::yew::html! {
+        match status {
+            0 => {
+                let x: ::std::primitive::i32 = 42;
+                <span>{x}</span>
+            }
+            _ => <span>{"other"}</span>,
+        }
+    };
+
+    // For loop in unbraced match arm (VList -> VNode via Into)
+    _ = ::yew::html! {
+        match status {
+            0 => for _ in 0..3_u8 { <span>{"repeated"}</span> },
+            _ => <span>{"other"}</span>,
+        }
+    };
+
+    // If expression in unbraced match arm
+    _ = ::yew::html! {
+        match status {
+            0 => if status == 0 { <span>{"zero"}</span> },
+            _ => <span>{"other"}</span>,
+        }
+    };
+
+    // Nested match in unbraced match arm
+    _ = ::yew::html! {
+        match status {
+            0 => match status {
+                0 => { <span>{"inner-zero"}</span> }
+                _ => { <span>{"inner-other"}</span> }
+            },
+            _ => <span>{"outer-other"}</span>,
+        }
+    };
+
+    // Unbraced bare string literal
+    _ = ::yew::html! {
+        match status {
+            0 => "zero",
+            _ => "other",
+        }
+    };
+
+    // Unbraced bare expression (format! macro)
+    _ = ::yew::html! {
+        match status {
+            0 => ::std::format!("status is {}", status),
+            _ => "other",
+        }
+    };
+
+    // Bare string literal in braced match arm body
+    _ = ::yew::html! {
+        match status {
+            0 => { "zero" }
+            _ => { "other" }
+        }
+    };
+
+    // Bare numeric literal in braced match arm body
+    _ = ::yew::html! {
+        match status {
+            0 => { 42 }
+            _ => { 0 }
+        }
+    };
+
+    // Bare expression (format! macro) in braced match arm body
+    _ = ::yew::html! {
+        match status {
+            0 => { ::std::format!("status is {}", status) }
+            _ => { "other" }
+        }
+    };
+
+    // Bare literal alongside HTML elements in match arm body
+    _ = ::yew::html! {
+        match status {
+            0 => {
+                "prefix "
+                <span>{"content"}</span>
+            }
+            _ => { "other" }
+        }
+    };
+
+    // Bare variable reference in braced match arm body
+    let msg = "hello";
+    _ = ::yew::html! {
+        match status {
+            0 => { msg }
+            _ => { "other" }
+        }
+    };
+
+    // Unbraced bare variable reference
+    _ = ::yew::html! {
+        match status {
+            0 => msg,
+            _ => "other",
+        }
+    };
+}
diff --git a/packages/yew-macro/tests/html_macro/iterable-fail.rs b/packages/yew-macro/tests/html_macro/iterable-fail.rs
index 1ad8c465f1e..28d99aa77af 100644
--- a/packages/yew-macro/tests/html_macro/iterable-fail.rs
+++ b/packages/yew-macro/tests/html_macro/iterable-fail.rs
@@ -13,10 +13,10 @@ fn compile_fail() {
     html! { {for empty.iter()} };
 
     html! {
-        <>
+        <div>
             <div/>
             { for () }
-        </>
+        </div>
     };
 }
 
diff --git a/packages/yew-macro/tests/html_macro/iterable-fail.stderr b/packages/yew-macro/tests/html_macro/iterable-fail.stderr
index 55426e52477..2a6596e2ba7 100644
--- a/packages/yew-macro/tests/html_macro/iterable-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/iterable-fail.stderr
@@ -75,10 +75,10 @@ error[E0277]: `()` is not an iterator
   --> tests/html_macro/iterable-fail.rs:15:5
    |
 15 | /     html! {
-16 | |         <>
+16 | |         <div>
 17 | |             <div/>
 18 | |             { for () }
-19 | |         </>
+19 | |         </div>
 20 | |     };
    | |_____^ `()` is not an iterator
    |
diff --git a/packages/yew-macro/tests/html_macro/iterable-pass.rs b/packages/yew-macro/tests/html_macro/iterable-pass.rs
index 752222c4fc8..1c9654dfeae 100644
--- a/packages/yew-macro/tests/html_macro/iterable-pass.rs
+++ b/packages/yew-macro/tests/html_macro/iterable-pass.rs
@@ -51,13 +51,13 @@ fn main() {
     let empty = empty_vec();
     _ = ::yew::html! { {for empty} };
 
-    _ = ::yew::html! {<>
+    _ = ::yew::html! {
         {for empty_vec()}
-    </>};
-    _ = ::yew::html! {<>
+    };
+    _ = ::yew::html! {
         {for ::std::iter::IntoIterator::into_iter(empty_vec())}
-    </>};
-    _ = ::yew::html! {<>
+    };
+    _ = ::yew::html! {
         {for ::std::iter::Iterator::map(0..3, |num| { ::yew::html! { <span>{ num }</span> } })}
-    </>};
+    };
 }
diff --git a/packages/yew-macro/tests/html_macro/list-fail.rs b/packages/yew-macro/tests/html_macro/list-fail.rs
index dde892f87f8..1886c7f9aad 100644
--- a/packages/yew-macro/tests/html_macro/list-fail.rs
+++ b/packages/yew-macro/tests/html_macro/list-fail.rs
@@ -10,8 +10,6 @@ fn compile_fail() {
     html! { </> };
     html! { </></> };
 
-    // multiple root nodes
-    html! { <></><></> };
     // invalid child content
     html! { <>invalid</> };
     // no key value
@@ -23,6 +21,16 @@ fn compile_fail() {
     html! { <key="first key" key="second key" /> };
     // invalid prop
     html! { <some_attr="test"></> };
+
+    // unnecessary root-level fragment
+    html! { <></> };
+    html! { <><div/></> };
+    html! {
+        <>
+            <span>{ "a" }</span>
+            <span>{ "b" }</span>
+        </>
+    };
 }
 
 fn main() {}
diff --git a/packages/yew-macro/tests/html_macro/list-fail.stderr b/packages/yew-macro/tests/html_macro/list-fail.stderr
index 7bed9347ec2..a3936e5cd01 100644
--- a/packages/yew-macro/tests/html_macro/list-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/list-fail.stderr
@@ -28,22 +28,16 @@ error: this closing fragment has no corresponding opening fragment
 11 |     html! { </></> };
    |             ^^^
 
-error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
-  --> tests/html_macro/list-fail.rs:14:18
-   |
-14 |     html! { <></><></> };
-   |                  ^^^^^
-
 error: expected a valid html element
-  --> tests/html_macro/list-fail.rs:16:15
+  --> tests/html_macro/list-fail.rs:14:15
    |
-16 |     html! { <>invalid</> };
+14 |     html! { <>invalid</> };
    |               ^^^^^^^
 
 error: expected an expression following this equals sign
-  --> tests/html_macro/list-fail.rs:18:17
+  --> tests/html_macro/list-fail.rs:16:17
    |
-18 |     html! { <key=></> };
+16 |     html! { <key=></> };
    |                 ^
 
 error: the property value must be either a literal or enclosed in braces. Consider adding braces around your expression.: Expr::MethodCall {
@@ -57,25 +51,43 @@ error: the property value must be either a literal or enclosed in braces. Consid
            dot_token: Dot,
            method: Ident {
                ident: "to_string",
-               span: #0 bytes(404..413),
+               span: #0 bytes(351..360),
            },
            turbofish: None,
            paren_token: Paren,
            args: [],
        }
-  --> tests/html_macro/list-fail.rs:20:18
+  --> tests/html_macro/list-fail.rs:18:18
    |
-20 |     html! { <key="key".to_string()></key> };
+18 |     html! { <key="key".to_string()></key> };
    |                  ^^^^^^^^^^^^^^^^^
 
 error: only a single `key` prop is allowed on a fragment
-  --> tests/html_macro/list-fail.rs:23:30
+  --> tests/html_macro/list-fail.rs:21:30
    |
-23 |     html! { <key="first key" key="second key" /> };
+21 |     html! { <key="first key" key="second key" /> };
    |                              ^^^
 
 error: fragments only accept the `key` prop
-  --> tests/html_macro/list-fail.rs:25:14
+  --> tests/html_macro/list-fail.rs:23:14
    |
-25 |     html! { <some_attr="test"></> };
+23 |     html! { <some_attr="test"></> };
    |              ^^^^^^^^^
+
+error: unnecessary `<>...</>`. Children can be placed directly in the body
+  --> tests/html_macro/list-fail.rs:26:13
+   |
+26 |     html! { <></> };
+   |             ^^
+
+error: unnecessary `<>...</>`. Children can be placed directly in the body
+  --> tests/html_macro/list-fail.rs:27:13
+   |
+27 |     html! { <><div/></> };
+   |             ^^
+
+error: unnecessary `<>...</>`. Children can be placed directly in the body
+  --> tests/html_macro/list-fail.rs:29:9
+   |
+29 |         <>
+   |         ^^
diff --git a/packages/yew-macro/tests/html_macro/list-pass.rs b/packages/yew-macro/tests/html_macro/list-pass.rs
index 380e4792d1a..693d72d10f7 100644
--- a/packages/yew-macro/tests/html_macro/list-pass.rs
+++ b/packages/yew-macro/tests/html_macro/list-pass.rs
@@ -38,15 +38,16 @@ pub struct usize;
 
 fn main() {
     _ = ::yew::html! {};
-    _ = ::yew::html! { <></> };
+    // keyed root fragments are still allowed
     _ = ::yew::html! {
-        <>
-            <></>
-            <></>
+        <key={::std::string::ToString::to_string("key")}>
         </>
     };
+    // nested fragments as children of another fragment are still allowed
     _ = ::yew::html! {
-        <key={::std::string::ToString::to_string("key")}>
+        <key="outer">
+            <></>
+            <></>
         </>
     };
 
@@ -54,5 +55,5 @@ fn main() {
         ::yew::html! { <span>{ "Hello" }</span> },
         ::yew::html! { <span>{ "World" }</span> },
     ];
-    _ = ::yew::html! { <>{ children }</> };
+    _ = ::yew::html! { { for children } };
 }
diff --git a/packages/yew-macro/tests/html_macro/multi-root-pass.rs b/packages/yew-macro/tests/html_macro/multi-root-pass.rs
new file mode 100644
index 00000000000..f09cd91dad8
--- /dev/null
+++ b/packages/yew-macro/tests/html_macro/multi-root-pass.rs
@@ -0,0 +1,63 @@
+#![no_implicit_prelude]
+
+fn main() {
+    // multi-root with elements
+    _ = ::yew::html! {
+        <span>{ "a" }</span>
+        <span>{ "b" }</span>
+    };
+
+    // multi-root with mixed literal and element
+    _ = ::yew::html! {
+        "prefix"
+        <span>{ "b" }</span>
+    };
+
+    // multi-root with `if` expression and elements
+    _ = ::yew::html! {
+        <span>{ "a" }</span>
+        if true {
+            <span>{ "b" }</span>
+        }
+    };
+
+    // multi-root with `for` expression and elements
+    _ = ::yew::html! {
+        <span>{ "header" }</span>
+        for x in 0..3 {
+            <span>{ x }</span>
+        }
+    };
+
+    // multi-root with `match` expression
+    let n: i32 = 0;
+    _ = ::yew::html! {
+        <span>{ "header" }</span>
+        match n {
+            0 => <span>{ "zero" }</span>,
+            _ => <span>{ "other" }</span>,
+        }
+    };
+
+    // multi-root in `html_nested!`
+    let _nested: ::yew::virtual_dom::VNode = ::yew::html_nested! {
+        <span>{ "1" }</span>
+        <span>{ "2" }</span>
+    };
+
+    // empty html!
+    _ = ::yew::html! {};
+
+    // single-root still works
+    _ = ::yew::html! { <div/> };
+
+    // single bare literal still works
+    _ = ::yew::html! { "single literal" };
+
+    // multi-root of bare literals
+    _ = ::yew::html! {
+        "a"
+        "b"
+        "c"
+    };
+}
diff --git a/packages/yew-macro/tests/html_macro/node-fail.rs b/packages/yew-macro/tests/html_macro/node-fail.rs
index bd370cbff2d..588722bd273 100644
--- a/packages/yew-macro/tests/html_macro/node-fail.rs
+++ b/packages/yew-macro/tests/html_macro/node-fail.rs
@@ -1,7 +1,6 @@
 use yew::prelude::*;
 
 fn compile_fail() {
-    html! { "valid" "invalid" };
     html! { <span>{ "valid" "invalid" }</span> };
     html! { () };
     html! { invalid };
diff --git a/packages/yew-macro/tests/html_macro/node-fail.stderr b/packages/yew-macro/tests/html_macro/node-fail.stderr
index b2dd0a286c3..99f8c15b85c 100644
--- a/packages/yew-macro/tests/html_macro/node-fail.stderr
+++ b/packages/yew-macro/tests/html_macro/node-fail.stderr
@@ -1,39 +1,33 @@
-error: only one root html element is allowed (hint: you can wrap multiple html elements in a fragment `<></>`)
- --> tests/html_macro/node-fail.rs:4:21
-  |
-4 |     html! { "valid" "invalid" };
-  |                     ^^^^^^^^^
-
 error: unexpected token, expected `}`
- --> tests/html_macro/node-fail.rs:5:29
+ --> tests/html_macro/node-fail.rs:4:29
   |
-5 |     html! { <span>{ "valid" "invalid" }</span> };
+4 |     html! { <span>{ "valid" "invalid" }</span> };
   |                             ^^^^^^^^^
 
 error: byte-strings can't be converted to HTML text
                                 note: remove the `b` prefix or convert this to a `String`
-  --> tests/html_macro/node-fail.rs:11:14
+  --> tests/html_macro/node-fail.rs:10:14
    |
-11 |     html! {  b"str" };
+10 |     html! {  b"str" };
    |              ^^^^^^
 
 error: byte-strings can't be converted to HTML text
                                 note: remove the `b` prefix or convert this to a `String`
-  --> tests/html_macro/node-fail.rs:13:22
+  --> tests/html_macro/node-fail.rs:12:22
    |
-13 |     html! {  <span>{ b"str" }</span> };
+12 |     html! {  <span>{ b"str" }</span> };
    |                      ^^^^^^
 
 error[E0425]: cannot find value `invalid` in this scope
- --> tests/html_macro/node-fail.rs:7:13
+ --> tests/html_macro/node-fail.rs:6:13
   |
-7 |     html! { invalid };
+6 |     html! { invalid };
   |             ^^^^^^^ not found in this scope
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
- --> tests/html_macro/node-fail.rs:6:13
+ --> tests/html_macro/node-fail.rs:5:13
   |
-6 |     html! { () };
+5 |     html! { () };
   |             ^^ `()` cannot be formatted with the default formatter
   |
   = help: the trait `std::fmt::Display` is not implemented for `()`
@@ -53,9 +47,9 @@ error[E0277]: `()` doesn't implement `std::fmt::Display`
   = note: this error originates in the macro `html` (in Nightly builds, run with -Z macro-backtrace for more info)
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
-  --> tests/html_macro/node-fail.rs:17:9
+  --> tests/html_macro/node-fail.rs:16:9
    |
-17 |         not_node()
+16 |         not_node()
    |         ^^^^^^^^ `()` cannot be formatted with the default formatter
    |
    = help: the trait `std::fmt::Display` is not implemented for `()`
diff --git a/packages/yew-router/tests/basename.rs b/packages/yew-router/tests/basename.rs
index 23886e9009a..bd5b2847282 100644
--- a/packages/yew-router/tests/basename.rs
+++ b/packages/yew-router/tests/basename.rs
@@ -42,10 +42,8 @@ fn no(props: &NoProps) -> Html {
     let location = use_location().unwrap();
 
     html! {
-        <>
-            <div id="result-params">{ route }</div>
-            <div id="result-query">{ location.query::<Query>().unwrap().foo }</div>
-        </>
+        <div id="result-params">{ route }</div>
+        <div id="result-query">{ location.query::<Query>().unwrap().foo }</div>
     }
 }
 
@@ -80,16 +78,12 @@ fn component() -> Html {
 
         match routes {
             Routes::Home => html! {
-                <>
-                    <div id="result">{"Home"}</div>
-                    <button onclick={replace_route}>{"replace a route"}</button>
-                </>
+                <div id="result">{"Home"}</div>
+                <button onclick={replace_route}>{"replace a route"}</button>
             },
             Routes::No { id } => html! {
-                <>
-                    <No id={id} />
-                    <button onclick={push_route}>{"push a route"}</button>
-                </>
+                <No id={id} />
+                <button onclick={push_route}>{"push a route"}</button>
             },
             Routes::NotFound => html! { <div id="result">{"404"}</div> },
         }
diff --git a/packages/yew-router/tests/browser_router.rs b/packages/yew-router/tests/browser_router.rs
index 7880ed09e56..66818229c70 100644
--- a/packages/yew-router/tests/browser_router.rs
+++ b/packages/yew-router/tests/browser_router.rs
@@ -42,10 +42,8 @@ fn no(props: &NoProps) -> Html {
     let location = use_location().unwrap();
 
     html! {
-        <>
-            <div id="result-params">{ route }</div>
-            <div id="result-query">{ location.query::<Query>().unwrap().foo }</div>
-        </>
+        <div id="result-params">{ route }</div>
+        <div id="result-query">{ location.query::<Query>().unwrap().foo }</div>
     }
 }
 
@@ -80,16 +78,12 @@ fn component() -> Html {
 
         match routes {
             Routes::Home => html! {
-                <>
-                    <div id="result">{"Home"}</div>
-                    <button onclick={replace_route}>{"replace a route"}</button>
-                </>
+                <div id="result">{"Home"}</div>
+                <button onclick={replace_route}>{"replace a route"}</button>
             },
             Routes::No { id } => html! {
-                <>
-                    <No id={id} />
-                    <button onclick={push_route}>{"push a route"}</button>
-                </>
+                <No id={id} />
+                <button onclick={push_route}>{"push a route"}</button>
             },
             Routes::NotFound => html! { <div id="result">{"404"}</div> },
         }
diff --git a/packages/yew-router/tests/hash_router.rs b/packages/yew-router/tests/hash_router.rs
index 881c93a8ed5..1bef40940fe 100644
--- a/packages/yew-router/tests/hash_router.rs
+++ b/packages/yew-router/tests/hash_router.rs
@@ -42,10 +42,8 @@ fn no(props: &NoProps) -> Html {
     let location = use_location().unwrap();
 
     html! {
-        <>
-            <div id="result-params">{ route }</div>
-            <div id="result-query">{ location.query::<Query>().unwrap().foo }</div>
-        </>
+        <div id="result-params">{ route }</div>
+        <div id="result-query">{ location.query::<Query>().unwrap().foo }</div>
     }
 }
 
@@ -80,16 +78,12 @@ fn component() -> Html {
 
         match routes {
             Routes::Home => html! {
-                <>
-                    <div id="result">{"Home"}</div>
-                    <button onclick={replace_route}>{"replace a route"}</button>
-                </>
+                <div id="result">{"Home"}</div>
+                <button onclick={replace_route}>{"replace a route"}</button>
             },
             Routes::No { id } => html! {
-                <>
-                    <No id={id} />
-                    <button onclick={push_route}>{"push a route"}</button>
-                </>
+                <No id={id} />
+                <button onclick={push_route}>{"push a route"}</button>
             },
             Routes::NotFound => html! { <div id="result">{"404"}</div> },
         }
diff --git a/packages/yew-router/tests/url_encoded_routes.rs b/packages/yew-router/tests/url_encoded_routes.rs
index e77655a3440..46bc606a510 100644
--- a/packages/yew-router/tests/url_encoded_routes.rs
+++ b/packages/yew-router/tests/url_encoded_routes.rs
@@ -24,12 +24,10 @@ enum AppRoute {
 fn Comp() -> Html {
     let switch = move |routes: AppRoute| match routes {
         AppRoute::Root => html! {
-            <>
-                <h1>{ "Root" }</h1>
-                <Link<AppRoute> to={AppRoute::Search { query: "a/b".to_string() }}>
-                    {"Click me"}
-                </Link<AppRoute>>
-            </>
+            <h1>{ "Root" }</h1>
+            <Link<AppRoute> to={AppRoute::Search { query: "a/b".to_string() }}>
+                {"Click me"}
+            </Link<AppRoute>>
         },
         AppRoute::Search { query } => html! {
             <p id="q">{ query }</p>
diff --git a/packages/yew/src/dom_bundle/bcomp.rs b/packages/yew/src/dom_bundle/bcomp.rs
index 6d305bce569..a28dbb15c44 100644
--- a/packages/yew/src/dom_bundle/bcomp.rs
+++ b/packages/yew/src/dom_bundle/bcomp.rs
@@ -422,7 +422,7 @@ mod layout_tests {
 
         fn view(&self, ctx: &Context<Self>) -> Html {
             html! {
-                <>{ ctx.props().children.clone() }</>
+                { ctx.props().children.clone() }
             }
         }
     }
diff --git a/packages/yew/src/dom_bundle/blist.rs b/packages/yew/src/dom_bundle/blist.rs
index e5e99c28e27..05d99dde83b 100644
--- a/packages/yew/src/dom_bundle/blist.rs
+++ b/packages/yew/src/dom_bundle/blist.rs
@@ -563,15 +563,13 @@ mod layout_tests {
         let layout1 = TestLayout {
             name: "1",
             node: html! {
+                {"a"}
+                {"b"}
                 <>
-                    {"a"}
-                    {"b"}
-                    <>
-                        {"c"}
-                        {"d"}
-                    </>
-                    {"e"}
+                    {"c"}
+                    {"d"}
                 </>
+                {"e"}
             },
             expected: "abcde",
         };
@@ -579,13 +577,11 @@ mod layout_tests {
         let layout2 = TestLayout {
             name: "2",
             node: html! {
-                <>
-                    {"a"}
-                    {"b"}
-                    <></>
-                    {"e"}
-                    {"f"}
-                </>
+                {"a"}
+                {"b"}
+                <></>
+                {"e"}
+                {"f"}
             },
             expected: "abef",
         };
@@ -593,12 +589,10 @@ mod layout_tests {
         let layout3 = TestLayout {
             name: "3",
             node: html! {
-                <>
-                    {"a"}
-                    <></>
-                    {"b"}
-                    {"e"}
-                </>
+                {"a"}
+                <></>
+                {"b"}
+                {"e"}
             },
             expected: "abe",
         };
@@ -606,15 +600,13 @@ mod layout_tests {
         let layout4 = TestLayout {
             name: "4",
             node: html! {
+                {"a"}
                 <>
-                    {"a"}
-                    <>
-                        {"c"}
-                        {"d"}
-                    </>
-                    {"b"}
-                    {"e"}
+                    {"c"}
+                    {"d"}
                 </>
+                {"b"}
+                {"e"}
             },
             expected: "acdbe",
         };
@@ -683,7 +675,7 @@ mod layout_tests_keys {
         }
 
         fn view(&self, ctx: &Context<Self>) -> Html {
-            html! { <>{ for ctx.props().children.iter() }</> }
+            html! { { for ctx.props().children.iter() } }
         }
     }
 
@@ -695,18 +687,16 @@ mod layout_tests_keys {
         layouts.push(TestLayout {
             name: "All VNode types as children",
             node: html! {
-                <>
-                    {"a"}
-                    <span key="vtag"></span>
-                    {"c"}
-                    {"d"}
-                    <Comp id=0 key="vchild" />
-                    <key="vlist">
-                        {"foo"}
-                        {"bar"}
-                    </>
-                    {VNode::VRef(vref_node)}
+                {"a"}
+                <span key="vtag"></span>
+                {"c"}
+                {"d"}
+                <Comp id=0 key="vchild" />
+                <key="vlist">
+                    {"foo"}
+                    {"bar"}
                 </>
+                {VNode::VRef(vref_node)}
             },
             expected: "a<span></span>cd<p>0</p>foobar<i></i>",
         });
@@ -715,25 +705,21 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Inserting into VList first child - before",
                 node: html! {
-                    <>
-                        <key="VList">
-                            <i key="i"></i>
-                        </>
-                        <p key="p"></p>
+                    <key="VList">
+                        <i key="i"></i>
                     </>
+                    <p key="p"></p>
                 },
                 expected: "<i></i><p></p>",
             },
             TestLayout {
                 name: "Inserting into VList first child - after",
                 node: html! {
-                    <>
-                        <key="VList">
-                            <i key="i"></i>
-                            <e key="e"></e>
-                        </>
-                        <p key="p"></p>
+                    <key="VList">
+                        <i key="i"></i>
+                        <e key="e"></e>
                     </>
+                    <p key="p"></p>
                 },
                 expected: "<i></i><e></e><p></p>",
             },
@@ -743,20 +729,16 @@ mod layout_tests_keys {
             TestLayout {
                 name: "No matches - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
                 },
                 expected: "<i></i><e></e>",
             },
             TestLayout {
                 name: "No matches - after",
                 node: html! {
-                    <>
-                        <a key="a"></a>
-                        <p key="p"></p>
-                    </>
+                    <a key="a"></a>
+                    <p key="p"></p>
                 },
                 expected: "<a></a><p></p>",
             },
@@ -766,21 +748,17 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Append - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
                 },
                 expected: "<i></i><e></e>",
             },
             TestLayout {
                 name: "Append - after",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                        <p key="p"></p>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
+                    <p key="p"></p>
                 },
                 expected: "<i></i><e></e><p></p>",
             },
@@ -790,21 +768,17 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Prepend - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
                 },
                 expected: "<i></i><e></e>",
             },
             TestLayout {
                 name: "Prepend - after",
                 node: html! {
-                    <>
-                        <p key="p"></p>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                    </>
+                    <p key="p"></p>
+                    <i key="i"></i>
+                    <e key="e"></e>
                 },
                 expected: "<p></p><i></i><e></e>",
             },
@@ -814,21 +788,17 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Delete first - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                        <p key="p"></p>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
+                    <p key="p"></p>
                 },
                 expected: "<i></i><e></e><p></p>",
             },
             TestLayout {
                 name: "Delete first - after",
                 node: html! {
-                    <>
-                        <e key="e"></e>
-                        <p key="p"></p>
-                    </>
+                    <e key="e"></e>
+                    <p key="p"></p>
                 },
                 expected: "<e></e><p></p>",
             },
@@ -838,21 +808,17 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Delete last - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                        <p key="p"></p>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
+                    <p key="p"></p>
                 },
                 expected: "<i></i><e></e><p></p>",
             },
             TestLayout {
                 name: "Delete last - after",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
                 },
                 expected: "<i></i><e></e>",
             },
@@ -862,22 +828,18 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Delete last and change node type - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                        <p key="p"></p>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
+                    <p key="p"></p>
                 },
                 expected: "<i></i><e></e><p></p>",
             },
             TestLayout {
                 name: "Delete last - after",
                 node: html! {
-                    <>
-                        <List key="i"><i/></List>
-                        <List key="e"><e/></List>
-                        <List key="a"><a/></List>
-                    </>
+                    <List key="i"><i/></List>
+                    <List key="e"><e/></List>
+                    <List key="a"><a/></List>
                 },
                 expected: "<i></i><e></e><a></a>",
             },
@@ -887,24 +849,20 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Delete middle - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                        <p key="p"></p>
-                        <a key="a"></a>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
+                    <p key="p"></p>
+                    <a key="a"></a>
                 },
                 expected: "<i></i><e></e><p></p><a></a>",
             },
             TestLayout {
                 name: "Delete middle - after",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e2"></e>
-                        <p key="p2"></p>
-                        <a key="a"></a>
-                    </>
+                    <i key="i"></i>
+                    <e key="e2"></e>
+                    <p key="p2"></p>
+                    <a key="a"></a>
                 },
                 expected: "<i></i><e></e><p></p><a></a>",
             },
@@ -914,24 +872,20 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Delete middle and change node type - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                        <p key="p"></p>
-                        <a key="a"></a>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
+                    <p key="p"></p>
+                    <a key="a"></a>
                 },
                 expected: "<i></i><e></e><p></p><a></a>",
             },
             TestLayout {
                 name: "Delete middle and change node type- after",
                 node: html! {
-                    <>
-                        <List key="i2"><i/></List>
-                        <e key="e"></e>
-                        <List key="p"><p/></List>
-                        <List key="a2"><a/></List>
-                    </>
+                    <List key="i2"><i/></List>
+                    <e key="e"></e>
+                    <List key="p"><p/></List>
+                    <List key="a2"><a/></List>
                 },
                 expected: "<i></i><e></e><p></p><a></a>",
             },
@@ -941,24 +895,20 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Reverse - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <e key="e"></e>
-                        <p key="p"></p>
-                        <u key="u"></u>
-                    </>
+                    <i key="i"></i>
+                    <e key="e"></e>
+                    <p key="p"></p>
+                    <u key="u"></u>
                 },
                 expected: "<i></i><e></e><p></p><u></u>",
             },
             TestLayout {
                 name: "Reverse - after",
                 node: html! {
-                    <>
-                        <u key="u"></u>
-                        <p key="p"></p>
-                        <e key="e"></e>
-                        <i key="i"></i>
-                    </>
+                    <u key="u"></u>
+                    <p key="p"></p>
+                    <e key="e"></e>
+                    <i key="i"></i>
                 },
                 expected: "<u></u><p></p><e></e><i></i>",
             },
@@ -968,29 +918,25 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Reverse and change node type - before",
                 node: html! {
-                    <>
-                        <i key="i"></i>
-                        <key="i1"></>
-                        <key="i2"></>
-                        <key="i3"></>
-                        <e key="e"></e>
-                        <key="yo">
-                            <p key="p"></p>
-                        </>
-                        <u key="u"></u>
+                    <i key="i"></i>
+                    <key="i1"></>
+                    <key="i2"></>
+                    <key="i3"></>
+                    <e key="e"></e>
+                    <key="yo">
+                        <p key="p"></p>
                     </>
+                    <u key="u"></u>
                 },
                 expected: "<i></i><e></e><p></p><u></u>",
             },
             TestLayout {
                 name: "Reverse and change node type - after",
                 node: html! {
-                    <>
-                        <List key="u"><u/></List>
-                        <List key="p"><p/></List>
-                        <List key="e"><e/></List>
-                        <List key="i"><i/></List>
-                    </>
+                    <List key="u"><u/></List>
+                    <List key="p"><p/></List>
+                    <List key="e"><e/></List>
+                    <List key="i"><i/></List>
                 },
                 expected: "<u></u><p></p><e></e><i></i>",
             },
@@ -1000,26 +946,22 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap 1&2 - before",
                 node: html! {
-                    <>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <u key="5"></u>
-                    </>
+                    <i key="1"></i>
+                    <e key="2"></e>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <u key="5"></u>
                 },
                 expected: "<i></i><e></e><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 1&2 - after",
                 node: html! {
-                    <>
-                        <e key="2"></e>
-                        <i key="1"></i>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <u key="5"></u>
-                    </>
+                    <e key="2"></e>
+                    <i key="1"></i>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <u key="5"></u>
                 },
                 expected: "<e></e><i></i><p></p><a></a><u></u>",
             },
@@ -1029,26 +971,22 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap 1&2 and change node type - before",
                 node: html! {
-                    <>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <u key="5"></u>
-                    </>
+                    <i key="1"></i>
+                    <e key="2"></e>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <u key="5"></u>
                 },
                 expected: "<i></i><e></e><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 1&2 and change node type - after",
                 node: html! {
-                    <>
-                        <List key="2"><e/></List>
-                        <List key="1"><i/></List>
-                        <List key="3"><p/></List>
-                        <List key="4"><a/></List>
-                        <List key="5"><u/></List>
-                    </>
+                    <List key="2"><e/></List>
+                    <List key="1"><i/></List>
+                    <List key="3"><p/></List>
+                    <List key="4"><a/></List>
+                    <List key="5"><u/></List>
                 },
                 expected: "<e></e><i></i><p></p><a></a><u></u>",
             },
@@ -1058,19 +996,17 @@ mod layout_tests_keys {
             TestLayout {
                 name: "test - before",
                 node: html! {
-                    <>
-                        <key="1">
-                            <e key="e"></e>
-                            <p key="p"></p>
-                            <a key="a"></a>
-                            <u key="u"></u>
-                        </>
-                        <key="2">
-                            <e key="e"></e>
-                            <p key="p"></p>
-                            <a key="a"></a>
-                            <u key="u"></u>
-                        </>
+                    <key="1">
+                        <e key="e"></e>
+                        <p key="p"></p>
+                        <a key="a"></a>
+                        <u key="u"></u>
+                    </>
+                    <key="2">
+                        <e key="e"></e>
+                        <p key="p"></p>
+                        <a key="a"></a>
+                        <u key="u"></u>
                     </>
                 },
                 expected: "<e></e><p></p><a></a><u></u><e></e><p></p><a></a><u></u>",
@@ -1078,12 +1014,10 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap 4&5 - after",
                 node: html! {
-                    <>
-                        <e key="1"></e>
-                        <key="2">
-                            <p key="p"></p>
-                            <i key="i"></i>
-                        </>
+                    <e key="1"></e>
+                    <key="2">
+                        <p key="p"></p>
+                        <i key="i"></i>
                     </>
                 },
                 expected: "<e></e><p></p><i></i>",
@@ -1094,26 +1028,22 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap 4&5 - before",
                 node: html! {
-                    <>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <u key="5"></u>
-                    </>
+                    <i key="1"></i>
+                    <e key="2"></e>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <u key="5"></u>
                 },
                 expected: "<i></i><e></e><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 4&5 - after",
                 node: html! {
-                    <>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <p key="3"></p>
-                        <u key="5"></u>
-                        <a key="4"></a>
-                    </>
+                    <i key="1"></i>
+                    <e key="2"></e>
+                    <p key="3"></p>
+                    <u key="5"></u>
+                    <a key="4"></a>
                 },
                 expected: "<i></i><e></e><p></p><u></u><a></a>",
             },
@@ -1123,26 +1053,22 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap 1&5 - before",
                 node: html! {
-                    <>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <u key="5"></u>
-                    </>
+                    <i key="1"></i>
+                    <e key="2"></e>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <u key="5"></u>
                 },
                 expected: "<i></i><e></e><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 1&5 - after",
                 node: html! {
-                    <>
-                        <u key="5"></u>
-                        <e key="2"></e>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <i key="1"></i>
-                    </>
+                    <u key="5"></u>
+                    <e key="2"></e>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <i key="1"></i>
                 },
                 expected: "<u></u><e></e><p></p><a></a><i></i>",
             },
@@ -1152,26 +1078,22 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Move 2 after 4 - before",
                 node: html! {
-                    <>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <u key="5"></u>
-                    </>
+                    <i key="1"></i>
+                    <e key="2"></e>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <u key="5"></u>
                 },
                 expected: "<i></i><e></e><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Move 2 after 4 - after",
                 node: html! {
-                    <>
-                        <i key="1"></i>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <e key="2"></e>
-                        <u key="5"></u>
-                    </>
+                    <i key="1"></i>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <e key="2"></e>
+                    <u key="5"></u>
                 },
                 expected: "<i></i><p></p><a></a><e></e><u></u>",
             },
@@ -1181,26 +1103,22 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap 1,2 <-> 3,4 - before",
                 node: html! {
-                    <>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <u key="5"></u>
-                    </>
+                    <i key="1"></i>
+                    <e key="2"></e>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <u key="5"></u>
                 },
                 expected: "<i></i><e></e><p></p><a></a><u></u>",
             },
             TestLayout {
                 name: "Swap 1,2 <-> 3,4 - after",
                 node: html! {
-                    <>
-                        <p key="3"></p>
-                        <a key="4"></a>
-                        <i key="1"></i>
-                        <e key="2"></e>
-                        <u key="5"></u>
-                    </>
+                    <p key="3"></p>
+                    <a key="4"></a>
+                    <i key="1"></i>
+                    <e key="2"></e>
+                    <u key="5"></u>
                 },
                 expected: "<p></p><a></a><i></i><e></e><u></u>",
             },
@@ -1210,15 +1128,13 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap lists - before",
                 node: html! {
-                    <>
-                        <key="1">
-                            <i></i>
-                            <e></e>
-                        </>
-                        <key="2">
-                            <a></a>
-                            <u></u>
-                        </>
+                    <key="1">
+                        <i></i>
+                        <e></e>
+                    </>
+                    <key="2">
+                        <a></a>
+                        <u></u>
                     </>
                 },
                 expected: "<i></i><e></e><a></a><u></u>",
@@ -1226,15 +1142,13 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap lists - after",
                 node: html! {
-                    <>
-                        <key="2">
-                            <a></a>
-                            <u></u>
-                        </>
-                        <key="1">
-                            <i></i>
-                            <e></e>
-                        </>
+                    <key="2">
+                        <a></a>
+                        <u></u>
+                    </>
+                    <key="1">
+                        <i></i>
+                        <e></e>
                     </>
                 },
                 expected: "<a></a><u></u><i></i><e></e>",
@@ -1245,16 +1159,14 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap lists with in-between - before",
                 node: html! {
-                    <>
-                        <key="1">
-                            <i></i>
-                            <e></e>
-                        </>
-                        <p key="between"></p>
-                        <key="2">
-                            <a></a>
-                            <u></u>
-                        </>
+                    <key="1">
+                        <i></i>
+                        <e></e>
+                    </>
+                    <p key="between"></p>
+                    <key="2">
+                        <a></a>
+                        <u></u>
                     </>
                 },
                 expected: "<i></i><e></e><p></p><a></a><u></u>",
@@ -1262,16 +1174,14 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Swap lists with in-between - after",
                 node: html! {
-                    <>
-                        <key="2">
-                            <a></a>
-                            <u></u>
-                        </>
-                        <p key="between"></p>
-                        <key="1">
-                            <i></i>
-                            <e></e>
-                        </>
+                    <key="2">
+                        <a></a>
+                        <u></u>
+                    </>
+                    <p key="between"></p>
+                    <key="1">
+                        <i></i>
+                        <e></e>
                     </>
                 },
                 expected: "<a></a><u></u><p></p><i></i><e></e>",
@@ -1282,21 +1192,17 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Insert VComp front - before",
                 node: html! {
-                    <>
-                        <u key=1></u>
-                        <a key=2></a>
-                    </>
+                    <u key=1></u>
+                    <a key=2></a>
                 },
                 expected: "<u></u><a></a>",
             },
             TestLayout {
                 name: "Insert VComp front - after",
                 node: html! {
-                    <>
-                        <Comp id=0 key="comp"/>
-                        <u key=1></u>
-                        <a key=2></a>
-                    </>
+                    <Comp id=0 key="comp"/>
+                    <u key=1></u>
+                    <a key=2></a>
                 },
                 expected: "<p>0</p><u></u><a></a>",
             },
@@ -1306,21 +1212,17 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Insert VComp middle - before",
                 node: html! {
-                    <>
-                        <u key=1></u>
-                        <a key=2></a>
-                    </>
+                    <u key=1></u>
+                    <a key=2></a>
                 },
                 expected: "<u></u><a></a>",
             },
             TestLayout {
                 name: "Insert VComp middle - after",
                 node: html! {
-                    <>
-                        <u key=1></u>
-                        <Comp id=0 key="comp"/>
-                        <a key=2></a>
-                    </>
+                    <u key=1></u>
+                    <Comp id=0 key="comp"/>
+                    <a key=2></a>
                 },
                 expected: "<u></u><p>0</p><a></a>",
             },
@@ -1330,21 +1232,17 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Insert VComp back - before",
                 node: html! {
-                    <>
-                        <u key=1></u>
-                        <a key=2></a>
-                    </>
+                    <u key=1></u>
+                    <a key=2></a>
                 },
                 expected: "<u></u><a></a>",
             },
             TestLayout {
                 name: "Insert VComp back - after",
                 node: html! {
-                    <>
-                        <u key=1></u>
-                        <a key=2></a>
-                        <Comp id=0 key="comp"/>
-                    </>
+                    <u key=1></u>
+                    <a key=2></a>
+                    <Comp id=0 key="comp"/>
                 },
                 expected: "<u></u><a></a><p>0</p>",
             },
@@ -1354,22 +1252,18 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Reverse VComp children - before",
                 node: html! {
-                    <>
-                        <Comp id=1 key="comp-1"/>
-                        <Comp id=2 key="comp-2"/>
-                        <Comp id=3 key="comp-3"/>
-                    </>
+                    <Comp id=1 key="comp-1"/>
+                    <Comp id=2 key="comp-2"/>
+                    <Comp id=3 key="comp-3"/>
                 },
                 expected: "<p>1</p><p>2</p><p>3</p>",
             },
             TestLayout {
                 name: "Reverse VComp children - after",
                 node: html! {
-                    <>
-                        <Comp id=3 key="comp-3"/>
-                        <Comp id=2 key="comp-2"/>
-                        <Comp id=1 key="comp-1"/>
-                    </>
+                    <Comp id=3 key="comp-3"/>
+                    <Comp id=2 key="comp-2"/>
+                    <Comp id=1 key="comp-1"/>
                 },
                 expected: "<p>3</p><p>2</p><p>1</p>",
             },
@@ -1379,22 +1273,18 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Reverse VComp children with children - before",
                 node: html! {
-                    <>
-                        <List key="comp-1"><p>{"11"}</p><p>{"12"}</p></List>
-                        <List key="comp-2"><p>{"21"}</p><p>{"22"}</p></List>
-                        <List key="comp-3"><p>{"31"}</p><p>{"32"}</p></List>
-                    </>
+                    <List key="comp-1"><p>{"11"}</p><p>{"12"}</p></List>
+                    <List key="comp-2"><p>{"21"}</p><p>{"22"}</p></List>
+                    <List key="comp-3"><p>{"31"}</p><p>{"32"}</p></List>
                 },
                 expected: "<p>11</p><p>12</p><p>21</p><p>22</p><p>31</p><p>32</p>",
             },
             TestLayout {
                 name: "Reverse VComp children with children - after",
                 node: html! {
-                    <>
-                        <List key="comp-3"><p>{"31"}</p><p>{"32"}</p></List>
-                        <List key="comp-2"><p>{"21"}</p><p>{"22"}</p></List>
-                        <List key="comp-1"><p>{"11"}</p><p>{"12"}</p></List>
-                    </>
+                    <List key="comp-3"><p>{"31"}</p><p>{"32"}</p></List>
+                    <List key="comp-2"><p>{"21"}</p><p>{"22"}</p></List>
+                    <List key="comp-1"><p>{"11"}</p><p>{"12"}</p></List>
                 },
                 expected: "<p>31</p><p>32</p><p>21</p><p>22</p><p>11</p><p>12</p>",
             },
@@ -1431,28 +1321,24 @@ mod layout_tests_keys {
             TestLayout {
                 name: "Reorder VComp children with children - before",
                 node: html! {
-                    <>
-                        <List key="comp-1"><p>{"1"}</p></List>
-                        <List key="comp-3"><p>{"3"}</p></List>
-                        <List key="comp-5"><p>{"5"}</p></List>
-                        <List key="comp-2"><p>{"2"}</p></List>
-                        <List key="comp-4"><p>{"4"}</p></List>
-                        <List key="comp-6"><p>{"6"}</p></List>
-                    </>
+                    <List key="comp-1"><p>{"1"}</p></List>
+                    <List key="comp-3"><p>{"3"}</p></List>
+                    <List key="comp-5"><p>{"5"}</p></List>
+                    <List key="comp-2"><p>{"2"}</p></List>
+                    <List key="comp-4"><p>{"4"}</p></List>
+                    <List key="comp-6"><p>{"6"}</p></List>
                 },
                 expected: "<p>1</p><p>3</p><p>5</p><p>2</p><p>4</p><p>6</p>",
             },
             TestLayout {
                 name: "Reorder VComp children with children - after",
                 node: html! {
-                    <>
-                        <Comp id=6 key="comp-6"/>
-                        <Comp id=5 key="comp-5"/>
-                        <Comp id=4 key="comp-4"/>
-                        <Comp id=3 key="comp-3"/>
-                        <Comp id=2 key="comp-2"/>
-                        <Comp id=1 key="comp-1"/>
-                    </>
+                    <Comp id=6 key="comp-6"/>
+                    <Comp id=5 key="comp-5"/>
+                    <Comp id=4 key="comp-4"/>
+                    <Comp id=3 key="comp-3"/>
+                    <Comp id=2 key="comp-2"/>
+                    <Comp id=1 key="comp-1"/>
                 },
                 expected: "<p>6</p><p>5</p><p>4</p><p>3</p><p>2</p><p>1</p>",
             },
@@ -1496,10 +1382,8 @@ mod layout_tests_keys {
         layouts.push(TestLayout {
             name: "A list with duplicate keys",
             node: html! {
-                <>
-                    <i key="vtag" />
-                    <i key="vtag" />
-                </>
+                <i key="vtag" />
+                <i key="vtag" />
             },
             expected: "<i></i><i></i>",
         });
@@ -1532,7 +1416,7 @@ mod node_identity_tests {
         let slot = DomSlot::at(end.into());
 
         let items: Vec<Html> = vec![];
-        let vnode = html! { <><div id="stable"/>{for items}</> };
+        let vnode = html! { <div id="stable"/>{for items} };
         let mut bundle = Bundle::new();
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
@@ -1542,7 +1426,7 @@ mod node_identity_tests {
         assert_eq!(div_node.node_name(), "DIV");
 
         let items: Vec<Html> = vec![html! { <span/> }];
-        let vnode = html! { <><div id="stable"/>{for items}</> };
+        let vnode = html! { <div id="stable"/>{for items} };
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
         assert_eq!(
@@ -1570,7 +1454,7 @@ mod node_identity_tests {
         let slot = DomSlot::at(end.into());
 
         let items: Vec<Html> = vec![];
-        let vnode = html! { <><div id="stable"/>{items}</> };
+        let vnode = html! { <div id="stable"/>{items} };
         let mut bundle = Bundle::new();
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
@@ -1580,7 +1464,7 @@ mod node_identity_tests {
         assert_eq!(div_node.node_name(), "DIV");
 
         let items: Vec<Html> = vec![html! { <span/> }];
-        let vnode = html! { <><div id="stable"/>{items}</> };
+        let vnode = html! { <div id="stable"/>{items} };
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
         assert_eq!(
@@ -1608,7 +1492,7 @@ mod node_identity_tests {
         let slot = DomSlot::at(end.into());
 
         let maybe: Option<Html> = None;
-        let vnode = html! { <><div id="stable"/>{maybe}</> };
+        let vnode = html! { <div id="stable"/>{maybe} };
         let mut bundle = Bundle::new();
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
@@ -1618,7 +1502,7 @@ mod node_identity_tests {
         assert_eq!(div_node.node_name(), "DIV");
 
         let maybe: Option<Html> = Some(html! { <span/> });
-        let vnode = html! { <><div id="stable"/>{maybe}</> };
+        let vnode = html! { <div id="stable"/>{maybe} };
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
         assert_eq!(
@@ -1645,7 +1529,7 @@ mod node_identity_tests {
         parent.append_child(&end).unwrap();
         let slot = DomSlot::at(end.into());
 
-        let vnode = html! { <><div/><span/></> };
+        let vnode = html! { <div/><span/> };
         let mut bundle = Bundle::new();
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
@@ -1656,7 +1540,7 @@ mod node_identity_tests {
         let span_node = div_node.next_sibling().unwrap();
         assert_eq!(span_node.node_name(), "SPAN");
 
-        let vnode = html! { <><div/><span/><p/></> };
+        let vnode = html! { <div/><span/><p/> };
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
         assert_eq!(parent.inner_html(), "<div></div><span></span><p></p>END");
@@ -1683,7 +1567,7 @@ mod node_identity_tests {
         parent.append_child(&end).unwrap();
         let slot = DomSlot::at(end.into());
 
-        let vnode = html! { <><div/><span/><p/></> };
+        let vnode = html! { <div/><span/><p/> };
         let mut bundle = Bundle::new();
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
@@ -1692,7 +1576,7 @@ mod node_identity_tests {
         let div_node = parent.first_child().unwrap();
         let span_node = div_node.next_sibling().unwrap();
 
-        let vnode = html! { <><div/><span/></> };
+        let vnode = html! { <div/><span/> };
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
         assert_eq!(parent.inner_html(), "<div></div><span></span>END");
@@ -1719,7 +1603,7 @@ mod node_identity_tests {
         parent.append_child(&end).unwrap();
         let slot = DomSlot::at(end.into());
 
-        let vnode = html! { <><i key="i"/><e key="e"/></> };
+        let vnode = html! { <i key="i"/><e key="e"/> };
         let mut bundle = Bundle::new();
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
@@ -1728,7 +1612,7 @@ mod node_identity_tests {
         let i_node = parent.first_child().unwrap();
         let e_node = i_node.next_sibling().unwrap();
 
-        let vnode = html! { <><p key="p"/><i key="i"/><e key="e"/></> };
+        let vnode = html! { <p key="p"/><i key="i"/><e key="e"/> };
         bundle.reconcile(&root, &scope, &parent, slot.clone(), vnode);
         scheduler::start_now();
         assert_eq!(parent.inner_html(), "<p></p><i></i><e></e>END");
diff --git a/packages/yew/src/dom_bundle/bportal.rs b/packages/yew/src/dom_bundle/bportal.rs
index 9a8ea52716d..cf9aa851b33 100644
--- a/packages/yew/src/dom_bundle/bportal.rs
+++ b/packages/yew/src/dom_bundle/bportal.rs
@@ -184,7 +184,7 @@ mod layout_tests {
                     {VNode::VRef(first_target.clone().into())}
                     {VNode::VRef(second_target.clone().into())}
                     {VNode::VPortal(Rc::new(VPortal::new(
-                        html! { <> {"PORTAL"} <b /> </> },
+                        html! { {"PORTAL"} <b /> },
                         second_target.clone(),
                     )))}
                     {"AFTER"}
diff --git a/packages/yew/src/dom_bundle/btag/listeners.rs b/packages/yew/src/dom_bundle/btag/listeners.rs
index e28e26bdc15..b91a3442911 100644
--- a/packages/yew/src/dom_bundle/btag/listeners.rs
+++ b/packages/yew/src/dom_bundle/btag/listeners.rs
@@ -597,16 +597,14 @@ mod tests {
                 let portal_target = ctx.props().wrapped.host.clone();
                 let onclick = ctx.link().callback(|_| Message::Action);
                 html! {
-                    <>
-                        <div onclick={onclick}>
-                            {create_portal(html! {
-                                <a ref={&ctx.props().state_ref}>
-                                    {state.action}
-                                </a>
-                            }, portal_target.clone())}
-                        </div>
-                        {VNode::VRef(portal_target.into())}
-                    </>
+                    <div onclick={onclick}>
+                        {create_portal(html! {
+                            <a ref={&ctx.props().state_ref}>
+                                {state.action}
+                            </a>
+                        }, portal_target.clone())}
+                    </div>
+                    {VNode::VRef(portal_target.into())}
                 }
             }
         }
diff --git a/packages/yew/src/dom_bundle/btag/mod.rs b/packages/yew/src/dom_bundle/btag/mod.rs
index a8c7dc04514..11733c7d8d0 100644
--- a/packages/yew/src/dom_bundle/btag/mod.rs
+++ b/packages/yew/src/dom_bundle/btag/mod.rs
@@ -978,15 +978,11 @@ mod tests {
 
         let test_ref = NodeRef::default();
         let before = html! {
-            <>
-                <div ref={&test_ref} id="before" />
-            </>
+            <div ref={&test_ref} id="before" />
         };
         let after = html! {
-            <>
-                <h6 />
-                <div ref={&test_ref} id="after" />
-            </>
+            <h6 />
+            <div ref={&test_ref} id="after" />
         };
         // The point of this diff is to first render the "after" div and then detach the "before"
         // div, while both should be bound to the same node ref
@@ -1145,45 +1141,26 @@ mod layout_tests {
 
 #[cfg(test)]
 mod tests_without_browser {
+    use std::rc::Rc;
+
     use crate::html;
-    use crate::virtual_dom::VNode;
+    use crate::virtual_dom::{VList, VNode};
+
+    fn vlist(children: Vec<VNode>) -> VNode {
+        VNode::VList(Rc::new(VList::with_children(children, None)))
+    }
 
     #[test]
     fn html_if_bool() {
         assert_eq!(
-            html! {
-                if true {
-                    <div class="foo" />
-                }
-            },
-            html! {
-                <>
-                    <div class="foo" />
-                </>
-            },
+            html! { if true { <div class="foo" /> } },
+            vlist(vec![html! { <div class="foo" /> }]),
         );
         assert_eq!(
-            html! {
-                if false {
-                    <div class="foo" />
-                } else {
-                    <div class="bar" />
-                }
-            },
-            html! {
-                <><div class="bar" /></>
-            },
-        );
-        assert_eq!(
-            html! {
-                if false {
-                    <div class="foo" />
-                }
-            },
-            html! {
-                <></>
-            },
+            html! { if false { <div class="foo" /> } else { <div class="bar" /> } },
+            vlist(vec![html! { <div class="bar" /> }]),
         );
+        assert_eq!(html! { if false { <div class="foo" /> } }, vlist(vec![]),);
 
         // non-root tests
         assert_eq!(
@@ -1237,40 +1214,16 @@ mod tests_without_browser {
         let option_foo = Some("foo");
         let none: Option<&'static str> = None;
         assert_eq!(
-            html! {
-                if let Some(class) = option_foo {
-                    <div class={class} />
-                }
-            },
-            html! {
-                <>
-                    <div class={Some("foo")} />
-                </>
-            },
+            html! { if let Some(class) = option_foo { <div class={class} /> } },
+            vlist(vec![html! { <div class={Some("foo")} /> }]),
         );
         assert_eq!(
-            html! {
-                if let Some(class) = none {
-                    <div class={class} />
-                } else {
-                    <div class="bar" />
-                }
-            },
-            html! {
-                <>
-                    <div class="bar" />
-                </>
-            },
+            html! { if let Some(class) = none { <div class={class} /> } else { <div class="bar" /> } },
+            vlist(vec![html! { <div class="bar" /> }]),
         );
         assert_eq!(
-            html! {
-                if let Some(class) = none {
-                    <div class={class} />
-                }
-            },
-            html! {
-                <></>
-            },
+            html! { if let Some(class) = none { <div class={class} /> } },
+            vlist(vec![]),
         );
 
         // non-root tests
diff --git a/packages/yew/src/dom_bundle/btext.rs b/packages/yew/src/dom_bundle/btext.rs
index d6d017e890f..fa5fd882016 100644
--- a/packages/yew/src/dom_bundle/btext.rs
+++ b/packages/yew/src/dom_bundle/btext.rs
@@ -202,10 +202,8 @@ mod layout_tests {
         let layout3 = TestLayout {
             name: "3",
             node: html! {
-                <>
-                    {"a"}
-                    {"b"}
-                </>
+                {"a"}
+                {"b"}
             },
             expected: "ab",
         };
@@ -213,10 +211,8 @@ mod layout_tests {
         let layout4 = TestLayout {
             name: "4",
             node: html! {
-                <>
-                    {"b"}
-                    {"a"}
-                </>
+                {"b"}
+                {"a"}
             },
             expected: "ba",
         };
diff --git a/packages/yew/src/functional/hooks/use_callback.rs b/packages/yew/src/functional/hooks/use_callback.rs
index 71077e06e13..ce0bd94169f 100644
--- a/packages/yew/src/functional/hooks/use_callback.rs
+++ b/packages/yew/src/functional/hooks/use_callback.rs
@@ -25,7 +25,7 @@ use crate::functional::{hook, use_memo};
 ///     let greeting = props.callback.emit("Yew".to_string());
 ///
 ///     html! {
-///         <>{ &greeting }</>
+///         { &greeting }
 ///     }
 /// }
 ///
diff --git a/packages/yew/src/functional/hooks/use_effect.rs b/packages/yew/src/functional/hooks/use_effect.rs
index c2ad54ba41c..2f65f6d3f66 100644
--- a/packages/yew/src/functional/hooks/use_effect.rs
+++ b/packages/yew/src/functional/hooks/use_effect.rs
@@ -203,7 +203,7 @@ where
 ///     });
 ///
 ///     html! {
-///         <>{"Am I loading? - "}{is_loading}</>
+///         {"Am I loading? - "}{is_loading}
 ///     }
 /// }
 /// ```
diff --git a/packages/yew/src/functional/hooks/use_reducer.rs b/packages/yew/src/functional/hooks/use_reducer.rs
index d606d931df2..e48910d7932 100644
--- a/packages/yew/src/functional/hooks/use_reducer.rs
+++ b/packages/yew/src/functional/hooks/use_reducer.rs
@@ -404,12 +404,10 @@ where
 ///     };
 ///
 ///     html! {
-///         <>
-///             <div id="result">{ counter.counter }</div>
+///         <div id="result">{ counter.counter }</div>
 ///
-///             <button onclick={double_onclick}>{ "Double" }</button>
-///             <button onclick={square_onclick}>{ "Square" }</button>
-///         </>
+///         <button onclick={double_onclick}>{ "Double" }</button>
+///         <button onclick={square_onclick}>{ "Square" }</button>
 ///     }
 /// }
 /// ```
diff --git a/packages/yew/src/html/component/marker.rs b/packages/yew/src/html/component/marker.rs
index c6ebca71c60..a2265eda066 100644
--- a/packages/yew/src/html/component/marker.rs
+++ b/packages/yew/src/html/component/marker.rs
@@ -37,7 +37,7 @@ use crate::html::{BaseComponent, ChildrenProps, Html};
 /// # fn Provider(props: &ChildrenProps) -> Html {
 /// #     let children = props.children.clone();
 /// #
-/// #     html! { <>{children}</> }
+/// #     html! { {children} }
 /// # }
 /// # type Provider1 = Provider;
 /// # type Provider2 = Provider;
@@ -94,7 +94,7 @@ use crate::html::{BaseComponent, ChildrenProps, Html};
 /// # fn Provider(props: &ChildrenProps) -> Html {
 /// #     let children = props.children.clone();
 /// #
-/// #     html! { <>{children}</> }
+/// #     html! { {children} }
 /// # }
 /// # type Provider1 = Provider;
 /// # type Provider2 = Provider;
diff --git a/packages/yew/src/suspense/component.rs b/packages/yew/src/suspense/component.rs
index e317a8e3083..324be4ec7a8 100644
--- a/packages/yew/src/suspense/component.rs
+++ b/packages/yew/src/suspense/component.rs
@@ -108,7 +108,9 @@ mod feat_csr_ssr {
 
         fn view(&self, ctx: &Context<Self>) -> Html {
             let BaseSuspenseProps { children, fallback } = (*ctx.props()).clone();
-            let children = html! {<>{children}</>};
+            let children = VNode::VList(::std::rc::Rc::new(
+                crate::virtual_dom::VList::with_children(vec![children], None),
+            ));
 
             match fallback {
                 Some(fallback) => {
diff --git a/packages/yew/src/virtual_dom/vlist.rs b/packages/yew/src/virtual_dom/vlist.rs
index 7d841e37353..83dd92cc512 100644
--- a/packages/yew/src/virtual_dom/vlist.rs
+++ b/packages/yew/src/virtual_dom/vlist.rs
@@ -389,11 +389,9 @@ mod ssr_tests {
         #[component]
         fn Comp() -> Html {
             html! {
-                <>
-                    <Child name="Jane" />
-                    <Child name="John" />
-                    <Child name="Josh" />
-                </>
+                <Child name="Jane" />
+                <Child name="John" />
+                <Child name="Josh" />
             }
         }
 
diff --git a/packages/yew/tests/hydration.rs b/packages/yew/tests/hydration.rs
index 16d62b253a7..be29a2056ea 100644
--- a/packages/yew/tests/hydration.rs
+++ b/packages/yew/tests/hydration.rs
@@ -638,18 +638,14 @@ async fn hydration_node_ref_works() {
         }
     }
 
-    #[component(List)]
-    fn list(props: &ListProps) -> Html {
+    #[component]
+    fn List(props: &ListProps) -> Html {
         let elems = 0..props.size;
 
         html! {
-            <>
-            { for elems.map(|_|
-                html! {
-                    <Test2/>
-                }
-            )}
-            </>
+            for _ in elems{
+                <Test2/>
+            }
         }
     }
 
@@ -693,18 +689,14 @@ async fn hydration_node_ref_works() {
 
 #[wasm_bindgen_test]
 async fn hydration_list_order_works() {
-    #[component(App)]
-    pub fn app() -> Html {
+    #[component]
+    pub fn App() -> Html {
         let elems = 0..10;
 
         html! {
-            <>
-            { for elems.map(|number|
-                html! {
-                    <ToSuspendOrNot {number}/>
-                }
-            )}
-            </>
+            for number in elems{
+                <ToSuspendOrNot {number}/>
+            }
         }
     }
 
@@ -773,8 +765,8 @@ async fn hydration_list_order_works() {
 
 #[wasm_bindgen_test]
 async fn hydration_suspense_no_flickering() {
-    #[component(App)]
-    pub fn app() -> Html {
+    #[component]
+    pub fn App() -> Html {
         let fallback = html! { <h1>{"Loading..."}</h1> };
         html! {
             <Suspense {fallback}>
@@ -788,16 +780,16 @@ async fn hydration_suspense_no_flickering() {
         number: u32,
     }
 
-    #[component(SuspendedNumber)]
-    fn suspended_number(props: &NumberProps) -> HtmlResult {
+    #[component]
+    fn SuspendedNumber(props: &NumberProps) -> HtmlResult {
         use_suspend()?;
 
         Ok(html! {
             <Number ..{props.clone()}/>
         })
     }
-    #[component(Number)]
-    fn number(props: &NumberProps) -> Html {
+    #[component]
+    fn Number(props: &NumberProps) -> Html {
         html! {
             <div>
                 {props.number.to_string()}
@@ -805,16 +797,14 @@ async fn hydration_suspense_no_flickering() {
         }
     }
 
-    #[component(Suspended)]
-    fn suspended() -> HtmlResult {
+    #[component]
+    fn Suspended() -> HtmlResult {
         use_suspend()?;
 
         Ok(html! {
-            { for (0..10).map(|number|
-                html! {
-                    <SuspendedNumber {number}/>
-                }
-            )}
+            for number in 0..10 {
+                <SuspendedNumber {number}/>
+            }
         })
     }
 
@@ -1044,16 +1034,14 @@ async fn hydrate_empty() {
     }
     #[component]
     fn Empty() -> Html {
-        html! { <></> }
+        html! {}
     }
     #[component]
     fn App() -> Html {
         html! {
-            <>
-                <Updating />
-                <Empty />
-                <Updating />
-            </>
+            <Updating />
+            <Empty />
+            <Updating />
         }
     }
     let s = ServerRenderer::<App>::new().render().await;
@@ -1092,17 +1080,13 @@ async fn hydrate_flicker() {
         if is_first {
             trigger.set(true);
             html! {
-                <>
-                    <InnerComp key="1" text="1" />
-                    <InnerComp key="2" text="2" />
-                </>
+                <InnerComp key="1" text="1" />
+                <InnerComp key="2" text="2" />
             }
         } else {
             html! {
-                <>
-                    <InnerComp key="2" text="2" />
-                    <InnerComp key="1" text="1" />
-                </>
+                <InnerComp key="2" text="2" />
+                <InnerComp key="1" text="1" />
             }
         }
     }
diff --git a/packages/yew/tests/layout.rs b/packages/yew/tests/layout.rs
index b84b23af670..a6ecc8f5e48 100644
--- a/packages/yew/tests/layout.rs
+++ b/packages/yew/tests/layout.rs
@@ -32,7 +32,7 @@ async fn change_nested_after_append() {
         if *delayed_trigger {
             html! { <div>{"failure"}</div> }
         } else {
-            html! { <><i></i><span id="result">{"success"}</span></> }
+            html! { <i></i><span id="result">{"success"}</span> }
         }
     }
 
@@ -55,12 +55,10 @@ async fn change_nested_after_append() {
         }
 
         html! {
-            <>
-                <Top />
-                if *show_bottom {
-                    <div>{"<div>Bottom</div>"}</div>
-                }
-            </>
+            <Top />
+            if *show_bottom {
+                <div>{"<div>Bottom</div>"}</div>
+            }
         }
     }
 
diff --git a/packages/yew/tests/raw_html.rs b/packages/yew/tests/raw_html.rs
index 49b850263c3..1f54c48d875 100644
--- a/packages/yew/tests/raw_html.rs
+++ b/packages/yew/tests/raw_html.rs
@@ -87,12 +87,10 @@ macro_rules! create_update_html_test {
                 };
                 let raw = Html::from_html_unchecked(AttrValue::from(*raw_html));
                 html! {
-                    <>
-                        <div id="raw-container">
-                            {raw}
-                        </div>
-                        <button id="click-me-btn" {onclick}>{"Click me"}</button>
-                    </>
+                    <div id="raw-container">
+                        {raw}
+                    </div>
+                    <button id="click-me-btn" {onclick}>{"Click me"}</button>
                 }
             }
             use std::time::Duration;
@@ -171,12 +169,10 @@ async fn change_vnode_types_from_other_to_vraw() {
             }
         };
         html! {
-            <>
-                <div id="raw-container">
-                    {(*node).clone()}
-                </div>
-                <button id="click-me-btn" {onclick}>{"Click me"}</button>
-            </>
+            <div id="raw-container">
+                {(*node).clone()}
+            </div>
+            <button id="click-me-btn" {onclick}>{"Click me"}</button>
         }
     }
     use std::time::Duration;
@@ -219,12 +215,10 @@ async fn change_vnode_types_from_vraw_to_other() {
             move |_| node.set(html!("text"))
         };
         html! {
-            <>
-                <div id="raw-container">
-                    {(*node).clone()}
-                </div>
-                <button id="click-me-btn" {onclick}>{"Click me"}</button>
-            </>
+            <div id="raw-container">
+                {(*node).clone()}
+            </div>
+            <button id="click-me-btn" {onclick}>{"Click me"}</button>
         }
     }
     use std::time::Duration;
diff --git a/packages/yew/tests/suspense.rs b/packages/yew/tests/suspense.rs
index b3b430de768..f75b909b6f1 100644
--- a/packages/yew/tests/suspense.rs
+++ b/packages/yew/tests/suspense.rs
@@ -790,7 +790,7 @@ async fn test_duplicate_suspension() {
         use_future(|| async {
             scheduler::flush().await;
         })?;
-        Ok(html! { <>{props.children.clone()}</> })
+        Ok(html! { {props.children.clone()} })
     }
 
     #[component]
diff --git a/packages/yew/tests/use_context.rs b/packages/yew/tests/use_context.rs
index f519f9c3a0d..aa3add3c07c 100644
--- a/packages/yew/tests/use_context.rs
+++ b/packages/yew/tests/use_context.rs
@@ -170,12 +170,10 @@ async fn use_context_update_works() {
         let counter = use_mut_ref(|| 0);
         *counter.borrow_mut() += 1;
         html! {
-            <>
-                <div id={props.id.clone()}>
-                    { format!("total: {}", counter.borrow()) }
-                </div>
-                { props.children.clone() }
-            </>
+            <div id={props.id.clone()}>
+                { format!("total: {}", counter.borrow()) }
+            </div>
+            { props.children.clone() }
         }
     }
 
@@ -194,12 +192,10 @@ async fn use_context_update_works() {
         let ctx = use_context::<Rc<MyContext>>().expect("context not passed down");
 
         html! {
-            <>
-                <div>{ format!("magic: {}\n", props.magic) }</div>
-                <div id={props.id.clone()}>
-                    { format!("current: {}, total: {}", ctx.0, counter.borrow()) }
-                </div>
-            </>
+            <div>{ format!("magic: {}\n", props.magic) }</div>
+            <div id={props.id.clone()}>
+                { format!("current: {}, total: {}", ctx.0, counter.borrow()) }
+            </div>
         }
     }
 
diff --git a/packages/yew/tests/use_reducer.rs b/packages/yew/tests/use_reducer.rs
index 138fb50a8bc..39522dd0320 100644
--- a/packages/yew/tests/use_reducer.rs
+++ b/packages/yew/tests/use_reducer.rs
@@ -102,13 +102,11 @@ async fn use_reducer_eq_works() {
         let add_content_b = Callback::from(move |_| content.dispatch("B".to_string()));
 
         html! {
-            <>
-                <div>
-                    {"This component has been rendered: "}<span id="result">{render_count}</span>{" Time(s)."}
-                </div>
-                <button onclick={add_content_a} id="add-a">{"Add A to Content"}</button>
-                <button onclick={add_content_b} id="add-b">{"Add B to Content"}</button>
-            </>
+            <div>
+                {"This component has been rendered: "}<span id="result">{render_count}</span>{" Time(s)."}
+            </div>
+            <button onclick={add_content_a} id="add-a">{"Add A to Content"}</button>
+            <button onclick={add_content_b} id="add-b">{"Add B to Content"}</button>
         }
     }
 
@@ -213,13 +211,11 @@ async fn use_reducer_does_not_rerender_when_rc_is_reused() {
         let change_state = Callback::from(move |_| state.dispatch(SometimesChangeAction::Change));
 
         html! {
-            <>
-                <div>
-                    {"This component has been rendered: "}<span id="result">{render_count}</span>{" Time(s)."}
-                </div>
-                <button onclick={keep_state} id="keep-state">{"Keep State"}</button>
-                <button onclick={change_state} id="change-state">{"Change State"}</button>
-            </>
+            <div>
+                {"This component has been rendered: "}<span id="result">{render_count}</span>{" Time(s)."}
+            </div>
+            <button onclick={keep_state} id="keep-state">{"Keep State"}</button>
+            <button onclick={change_state} id="change-state">{"Change State"}</button>
         }
     }
 
diff --git a/packages/yew/tests/use_state.rs b/packages/yew/tests/use_state.rs
index c3be1d852b8..1dbe17ce423 100644
--- a/packages/yew/tests/use_state.rs
+++ b/packages/yew/tests/use_state.rs
@@ -439,15 +439,13 @@ async fn toggle_conditional_with_empty_component_no_crash() {
         };
 
         html! {
-            <>
-                if *toggled {
-                    <span></span>
-                }
-                <Empty />
-                if !*toggled { <div>{"old"}</div> }
-                <button id="toggle-btn" {onclick}>{"Toggle"}</button>
-                <div id="result">{ if *toggled { "toggled" } else { "initial" } }</div>
-            </>
+            if *toggled {
+                <span></span>
+            }
+            <Empty />
+            if !*toggled { <div>{"old"}</div> }
+            <button id="toggle-btn" {onclick}>{"Toggle"}</button>
+            <div id="result">{ if *toggled { "toggled" } else { "initial" } }</div>
         }
     }
 
diff --git a/tools/benchmark-ssr/src/main.rs b/tools/benchmark-ssr/src/main.rs
index 3c5beb900ec..d8a9f8e74b0 100644
--- a/tools/benchmark-ssr/src/main.rs
+++ b/tools/benchmark-ssr/src/main.rs
@@ -148,12 +148,10 @@ async fn bench_concurrent_task() -> Duration {
     #[function_component]
     fn Parent() -> Html {
         html! {
-            <>
-                <Comp />
-                <Comp />
-                <Comp />
-                <Comp />
-            </>
+            <Comp />
+            <Comp />
+            <Comp />
+            <Comp />
         }
     }
 
diff --git a/website/docs/advanced-topics/children.mdx b/website/docs/advanced-topics/children.mdx
index 159d81651c7..666e15cc320 100644
--- a/website/docs/advanced-topics/children.mdx
+++ b/website/docs/advanced-topics/children.mdx
@@ -74,11 +74,9 @@ fn Text(props: &TextProps) -> Html {
 fn App() -> Html {
     let s = String::from("world");
     html! {
-        <>
-            <Text>{"hello"}</Text>
-            <Text>{s}</Text>
-            <Text>{ format!("year {}", 2024) }</Text>
-        </>
+        <Text>{"hello"}</Text>
+        <Text>{s}</Text>
+        <Text>{ format!("year {}", 2024) }</Text>
     }
 }
 ```
diff --git a/website/docs/advanced-topics/server-side-rendering.mdx b/website/docs/advanced-topics/server-side-rendering.mdx
index b52c9873309..623d3c4c560 100644
--- a/website/docs/advanced-topics/server-side-rendering.mdx
+++ b/website/docs/advanced-topics/server-side-rendering.mdx
@@ -231,9 +231,7 @@ fn App() -> Html {
     use yew_router::prelude::*;
 
     html! {
-        <>
-            <h1>{"Yew WASI SSR demo"}</h1>
-        </>
+        <h1>{"Yew WASI SSR demo"}</h1>
     }
 }
 
diff --git a/website/docs/concepts/basic-web-technologies/html.mdx b/website/docs/concepts/basic-web-technologies/html.mdx
index cf3ed1b896b..1ba8c0d9bba 100644
--- a/website/docs/concepts/basic-web-technologies/html.mdx
+++ b/website/docs/concepts/basic-web-technologies/html.mdx
@@ -4,9 +4,6 @@ description: 'It is HTML but not quite!'
 comment: 'Keep this file as short and simple as possible. Its purpose is to ease the reader into components in Yew instead of providing proper API docs'
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 You can write expressions resembling HTML with the `html!` macro. Behind the scenes, Yew turns
 it into rust code representing the DOM to generate.
 
@@ -39,41 +36,15 @@ let combined_html: Html = html! {
 };
 ```
 
-One major rule comes with the use of `html!` - you can only return 1 wrapping node.
-To render a list of multiple elements, `html!` allows fragments. Fragments are tags
-without a name, that produce no HTML element by themselves.
-
-<Tabs>
-<TabItem value="Invalid" label="Invalid">
+`html!` also accepts any number of root nodes, so you can render a list of multiple elements directly:
 
-```rust , compile_fail
+```rust
 use yew::html;
 
-// error: only one root HTML element allowed
 html! {
-
     <div></div>
     <p></p>
-
-};
-```
-
-</TabItem>
-<TabItem value="Valid" label="Valid">
-
-```rust
-use yew::html;
-
-// fixed: using HTML fragments
-html! {
-    <>
-        <div></div>
-        <p></p>
-    </>
 };
 ```
 
-</TabItem>
-</Tabs>
-
 We will introduce Yew and HTML further in depth in [more HTML](concepts/html/introduction.mdx).
diff --git a/website/docs/concepts/function-components/properties.mdx b/website/docs/concepts/function-components/properties.mdx
index 625bbf7c440..73cc96b0b05 100644
--- a/website/docs/concepts/function-components/properties.mdx
+++ b/website/docs/concepts/function-components/properties.mdx
@@ -61,7 +61,7 @@ pub struct Props {
 
 #[component]
 fn HelloWorld(&Props { is_loading }: &Props) -> Html {
-    html! { <>{"Am I loading? - "}{is_loading}</> }
+    html! { {"Am I loading? - "}{is_loading} }
 }
 
 // Then supply the prop
@@ -166,7 +166,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name} </>}
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -210,7 +210,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name}</> }
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -261,7 +261,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name}</> }
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -300,7 +300,7 @@ fn Greetings(
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{message}{" "}{name}</> }
+        html! { {message}{" "}{name} }
     }
 }
 
diff --git a/website/docs/concepts/html/components.mdx b/website/docs/concepts/html/components.mdx
index 28cca9f3c18..39ccd8920df 100644
--- a/website/docs/concepts/html/components.mdx
+++ b/website/docs/concepts/html/components.mdx
@@ -27,7 +27,7 @@ struct Props {
 fn MyComponentWithProps(props: &Props) -> Html {
     let Props { user_first_name, user_last_name } = props;
     html! {
-        <>{"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}</>
+        {"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}
     }
 }
 
@@ -37,19 +37,17 @@ let props = Props {
 };
 
 html!{
-    <>
-        // No properties
-        <MyComponent />
+    // No properties
+    <MyComponent />
 
-        // With Properties
-        <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />
+    // With Properties
+    <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />
 
-        // With the whole set of props provided at once
-        <MyComponentWithProps ..props.clone() />
+    // With the whole set of props provided at once
+    <MyComponentWithProps ..props.clone() />
 
-        // With Properties from a variable and specific values overridden
-        <MyComponentWithProps user_last_name="Elm" ..props />
-    </>
+    // With Properties from a variable and specific values overridden
+    <MyComponentWithProps user_last_name="Elm" ..props />
 };
 ```
 
diff --git a/website/docs/concepts/html/conditional-rendering.mdx b/website/docs/concepts/html/conditional-rendering.mdx
index 6e5bfaae4be..f1f935a6347 100644
--- a/website/docs/concepts/html/conditional-rendering.mdx
+++ b/website/docs/concepts/html/conditional-rendering.mdx
@@ -1,6 +1,6 @@
 ---
 title: 'Conditional rendering'
-description: 'Rendering nodes conditionally in html!'
+description: 'Rendering nodes conditionally with if, if let, and match in html!'
 ---
 
 import Tabs from '@theme/Tabs'
@@ -69,5 +69,90 @@ html! {
 };
 ```
 
+  </TabItem>
+  <TabItem value="if-let-bindings" label="Let bindings">
+
+Braced bodies support `let` bindings before html children, as well as multiple children directly:
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    if condition {
+        let label = format!("count: {count}");
+        <h2>{"Result"}</h2>
+        <span>{label}</span>
+    } else {
+        "nothing"
+    }
+};
+```
+
+`let` bindings must appear before any html children and cannot be interleaved with them.
+
   </TabItem>
 </Tabs>
+
+## Match blocks
+
+`match` expressions work directly in `html!`, following the same pattern as `if`/`else`:
+
+<Tabs>
+  <TabItem value="match" label="match">
+
+```rust
+use yew::prelude::*;
+
+let value: Option<String> = Some("hello".into());
+
+html! {
+    match value {
+        Some(text) => <p>{text}</p>,
+        None => <p>{"Nothing here"}</p>,
+    }
+};
+```
+
+  </TabItem>
+  <TabItem value="match-guards" label="If guards">
+
+```rust
+use yew::prelude::*;
+
+let value: i32 = 42;
+
+html! {
+    match value {
+        x if x > 10 => <p>{"Big"}</p>,
+        x if x > 0 => <p>{"Small"}</p>,
+        _ => <p>{"Non-positive"}</p>,
+    }
+};
+```
+
+  </TabItem>
+  <TabItem value="match-let" label="Let bindings">
+
+Braced arm bodies support `let` bindings and multiple children:
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    match data {
+        Some(item) => {
+            let label = format!("Item: {}", item.name);
+            let class = if item.important { "highlight" } else { "normal" };
+            <p class={class}>{label}</p>
+        }
+        None => <p>{"No data"}</p>,
+    }
+};
+```
+
+  </TabItem>
+</Tabs>
+
+Arms with a single element can omit braces. Arms with multiple children or `let` bindings require braces.
+
+`match` supports all standard Rust patterns including OR-patterns (`A | B`), destructuring, and `if` guards. Exhaustiveness is checked by the Rust compiler.
diff --git a/website/docs/concepts/html/events.mdx b/website/docs/concepts/html/events.mdx
index 21c99d63208..b8c62ad24fa 100644
--- a/website/docs/concepts/html/events.mdx
+++ b/website/docs/concepts/html/events.mdx
@@ -161,24 +161,22 @@ fn MyComponent() -> Html {
     });
 
     html! {
-        <>
-            <label for="cautious-input">
-                { "My cautious input:" }
-                <input onchange={on_cautious_change}
-                    id="cautious-input"
-                    type="text"
-                    value={input_value.clone()}
-                />
-            </label>
-            <label for="dangerous-input">
-                { "My dangerous input:" }
-                <input onchange={on_dangerous_change}
-                    id="dangerous-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="cautious-input">
+            { "My cautious input:" }
+            <input onchange={on_cautious_change}
+                id="cautious-input"
+                type="text"
+                value={input_value.clone()}
+            />
+        </label>
+        <label for="dangerous-input">
+            { "My dangerous input:" }
+            <input onchange={on_dangerous_change}
+                id="dangerous-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -245,24 +243,22 @@ fn MyComponent() -> Html {
     });
 
     html! {
-        <>
-            <label for="cautious-input">
-                { "My cautious input:" }
-                <input onchange={on_cautious_change}
-                    id="cautious-input"
-                    type="text"
-                    value={input_value.clone()}
-                />
-            </label>
-            <label for="dangerous-input">
-                { "My dangerous input:" }
-                <input onchange={on_dangerous_change}
-                    id="dangerous-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="cautious-input">
+            { "My cautious input:" }
+            <input onchange={on_cautious_change}
+                id="cautious-input"
+                type="text"
+                value={input_value.clone()}
+            />
+        </label>
+        <label for="dangerous-input">
+            { "My dangerous input:" }
+            <input onchange={on_dangerous_change}
+                id="dangerous-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -302,18 +298,16 @@ fn MyComponent() -> Html {
     };
 
     html! {
-        <>
-            <label for="my-input">
-                { "My input:" }
-                //highlight-next-line
-                <input ref={input_node_ref}
-                    {onchange}
-                    id="my-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="my-input">
+            { "My input:" }
+            //highlight-next-line
+            <input ref={input_node_ref}
+                {onchange}
+                id="my-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -346,16 +340,14 @@ fn MyComponent() -> Html {
     //highlight-end
 
     html! {
-        <>
-            <label for="my-input">
-                { "My input:" }
-                <input ref={input_node_ref}
-                    {onchange}
-                    id="my-input"
-                    type="text"
-                />
-            </label>
-        </>
+        <label for="my-input">
+            { "My input:" }
+            <input ref={input_node_ref}
+                {onchange}
+                id="my-input"
+                type="text"
+            />
+        </label>
     }
 }
 ```
diff --git a/website/docs/concepts/html/fragments.mdx b/website/docs/concepts/html/fragments.mdx
index 21a6ca3388a..d407dabfc71 100644
--- a/website/docs/concepts/html/fragments.mdx
+++ b/website/docs/concepts/html/fragments.mdx
@@ -2,42 +2,33 @@
 title: 'Fragments'
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
-The `html!` macro always requires a single root node. To get around this restriction, you
-can use an "empty tag" (these are also called "fragments").
-
-<Tabs>
-<TabItem value="Valid" label="Valid">
+The `html!` macro accepts multiple root nodes directly. You do **not** need a
+fragment wrapper (`<>...</>`) at the root:
 
 ```rust
 use yew::prelude::*;
 
 html! {
-    <>
-        <div></div>
-        <p></p>
-    </>
+    <div></div>
+    <p></p>
 };
-
 ```
 
-</TabItem>
+## Keyed fragments
 
-<TabItem value="Invalid" label="Invalid">
+The only legitimate use of fragment syntax is a **keyed** fragment.
 
-```rust, compile_fail
+```rust
 use yew::prelude::*;
 
-// error: only one root html element allowed
-
 html! {
-    <div></div>
-    <p></p>
+    // .. siblings ..
+    <key="group-a">
+        <span>{"a1"}</span>
+        <span>{"a2"}</span>
+    </>
+    // .. siblings ..
 };
-
 ```
 
-</TabItem>
-</Tabs>
+Keyed fragments helps with reconciliation performance and node persistence in some cases.
diff --git a/website/docs/concepts/html/introduction.mdx b/website/docs/concepts/html/introduction.mdx
index c6a2b424597..01e3d7874b0 100644
--- a/website/docs/concepts/html/introduction.mdx
+++ b/website/docs/concepts/html/introduction.mdx
@@ -13,11 +13,10 @@ The `html!` macro allows you to write HTML and SVG code declaratively. It is sim
 
 **Important notes**
 
-1. The `html!` macro only accepts one root html node (you can counteract this by using
-   [fragments](./fragments.mdx) or [iterators](./../html/lists.mdx))
-2. An empty `html! {}` invocation is valid and will not render anything
-3. Literals must always be quoted and wrapped in braces: `html! { <p>{ "Hello, World" }</p> }`
-4. The `html!` macro will make all tag names lowercase. To use upper case characters (which are required for some SVG elements) use [dynamic tag names](concepts/html/elements.mdx#dynamic-tag-names): `html! { <@{"myTag"}></@> }`
+1. The `html!` macro accepts any number of root nodes, including zero. An empty
+   `html! {}` invocation is valid and will not render anything.
+2. Literals must always be quoted and wrapped in braces: `html! { <p>{ "Hello, World" }</p> }`
+3. The `html!` macro will make all tag names lowercase. To use upper case characters (which are required for some SVG elements) use [dynamic tag names](concepts/html/elements.mdx#dynamic-tag-names): `html! { <@{"myTag"}></@> }`
 
 :::note
 The `html!` macro can reach the default recursion limit of the compiler. If you encounter compilation errors,
@@ -224,13 +223,11 @@ It is also possible to use Rust style comments as part of the HTML structure:
 use yew::prelude::*;
 
 html! {
-  <>
-    <h1>{ "My heading" }</h1>
-    // here comes the content
-    <main>
-      { "…" }
-    </main>
-  </>
+  <h1>{ "My heading" }</h1>
+  // here comes the content
+  <main>
+    { "…" }
+  </main>
 };
 ```
 
@@ -238,8 +235,7 @@ Comments will be dropped during the parsing process and will not end up in the f
 
 ## Conditional Rendering
 
-Markup can be rendered conditionally by using Rust's conditional structures. ' +
-'Currently only `if` and `if let` are supported.
+Markup can be rendered conditionally by using Rust's `if`, `if let`, and `match` expressions directly inside `html!`.
 
 ```rust
 use yew::prelude::*;
diff --git a/website/docs/concepts/html/lists.mdx b/website/docs/concepts/html/lists.mdx
index 849c773aa79..abb2ce30da6 100644
--- a/website/docs/concepts/html/lists.mdx
+++ b/website/docs/concepts/html/lists.mdx
@@ -23,6 +23,20 @@ html! {
         <span>{i}</span>
     }
 };
+```
+
+`for` loop bodies also support `let` bindings before the html children:
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    for item in items {
+        let label = format!("{}: {}", item.id, item.name);
+        let class = if item.active { "active" } else { "inactive" };
+        <div class={class}>{label}</div>
+    }
+};
 ```
 
   </TabItem>
diff --git a/website/docs/concepts/html/literals-and-expressions.mdx b/website/docs/concepts/html/literals-and-expressions.mdx
index df1fa4dc3e6..c9d8c2cf317 100644
--- a/website/docs/concepts/html/literals-and-expressions.mdx
+++ b/website/docs/concepts/html/literals-and-expressions.mdx
@@ -17,17 +17,26 @@ use yew::prelude::*;
 
 let text = "lorem ipsum";
 html!{
-    <>
-        <div>{text}</div>
-        <div>{"dolor sit"}</div>
-        <span>{42}</span>
-    </>
+    <div>{text}</div>
+    <div>{"dolor sit"}</div>
+    <span>{42}</span>
 };
 ```
 
 ## Expressions
 
-You can insert expressions in your HTML using `{}` blocks, as long as they resolve to `Html`
+You can insert expressions in your HTML using `{}` blocks, as long as they resolve to `Html`:
+
+```rust
+use yew::prelude::*;
+
+let name = "Yew";
+html! {
+  <div>{ format!("Hello, {name}!") }</div>
+};
+```
+
+For conditional rendering, use `if`/`else` and `match` directly in `html!` instead of wrapping them in expression blocks with nested `html!` calls:
 
 ```rust
 use yew::prelude::*;
@@ -36,20 +45,14 @@ let show_link = true;
 
 html! {
   <div>
-    {
-      if show_link {
-        html! {
-          <a href="https://example.com">{"Link"}</a>
-        }
-      } else {
-        html! {}
-      }
+    if show_link {
+      <a href="https://example.com">{"Link"}</a>
     }
   </div>
 };
 ```
 
-It often makes sense to extract these expressions into functions or closures to optimize for readability:
+It often makes sense to extract complex logic into functions or closures:
 
 ```rust
 use yew::prelude::*;
diff --git a/website/docs/concepts/router.mdx b/website/docs/concepts/router.mdx
index 6572705e0cd..6d1f78f1263 100644
--- a/website/docs/concepts/router.mdx
+++ b/website/docs/concepts/router.mdx
@@ -277,11 +277,9 @@ pub fn nav_items() -> Html {
     };
 
     html! {
-        <>
-            {go_home_button}
-            {go_to_first_post_button}
-            {go_to_secure_button}
-        </>
+        {go_home_button}
+        {go_to_first_post_button}
+        {go_to_secure_button}
     }
 }
 ```
diff --git a/website/docs/tutorial/index.mdx b/website/docs/tutorial/index.mdx
index 03483af2d97..5cefaf1b9d1 100644
--- a/website/docs/tutorial/index.mdx
+++ b/website/docs/tutorial/index.mdx
@@ -158,8 +158,7 @@ into a representation compatible with `html!`. If you are comfortable writing si
 writing marking inside `html!`. It is important to note that the macro does differ from HTML in a few ways:
 
 1. Expressions must be wrapped in curly braces (`{ }`)
-2. There must only be one root node. If you want to have multiple elements without wrapping them in a container,
-   an empty tag/fragment (`<> ... </>`) is used
+2. You may return any number of root nodes; they are grouped automatically.
 3. Elements must be closed properly.
 
 We want to build a layout that looks something like this in raw HTML:
@@ -185,27 +184,25 @@ We want to build a layout that looks something like this in raw HTML:
 Now, let's convert this HTML into `html!`. Type (or copy/paste) the following snippet into the body of `app` function
 such that the value of `html!` is returned by the function
 
-```rust {3-21}
+```rust {3-19}
 #[component]
 fn App() -> Html {
 -   html! {
 -       <h1>{ "Hello World" }</h1>
 -   }
 +   html! {
-+       <>
-+           <h1>{ "RustConf Explorer" }</h1>
-+           <div>
-+               <h3>{ "Videos to watch" }</h3>
-+               <p>{ "John Doe: Building and breaking things" }</p>
-+               <p>{ "Jane Smith: The development process" }</p>
-+               <p>{ "Matt Miller: The Web 7.0" }</p>
-+               <p>{ "Tom Jerry: Mouseless development" }</p>
-+           </div>
-+           <div>
-+               <h3>{ "John Doe: Building and breaking things" }</h3>
-+               <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
-+           </div>
-+       </>
++       <h1>{ "RustConf Explorer" }</h1>
++       <div>
++           <h3>{ "Videos to watch" }</h3>
++           <p>{ "John Doe: Building and breaking things" }</p>
++           <p>{ "Jane Smith: The development process" }</p>
++           <p>{ "Matt Miller: The Web 7.0" }</p>
++           <p>{ "Tom Jerry: Mouseless development" }</p>
++       </div>
++       <div>
++           <h3>{ "John Doe: Building and breaking things" }</h3>
++           <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
++       </div>
 +   }
 }
 ```
@@ -266,22 +263,20 @@ fn App() -> Html {
 
 To display them, we can use a `for` loop right in the macro in place of the hardcoded HTML:
 
-```rust {6-12}
+```rust {5-11}
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{ "Videos to watch" }</h3>
--               <p>{ "John Doe: Building and breaking things" }</p>
--               <p>{ "Jane Smith: The development process" }</p>
--               <p>{ "Matt Miller: The Web 7.0" }</p>
--               <p>{ "Tom Jerry: Mouseless development" }</p>
-+               for video in &videos {
-+                   <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
-+               }
-            </div>
-            // ...
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{ "Videos to watch" }</h3>
+-           <p>{ "John Doe: Building and breaking things" }</p>
+-           <p>{ "Jane Smith: The development process" }</p>
+-           <p>{ "Matt Miller: The Web 7.0" }</p>
+-           <p>{ "Tom Jerry: Mouseless development" }</p>
++           for video in &videos {
++               <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
++           }
+        </div>
+        // ...
     }
 ```
 
@@ -333,22 +328,20 @@ The struct used for props must implement `Properties` by deriving it.
 
 Now, we can update our `App` component to make use of `VideosList` component.
 
-```rust {9-12}
+```rust {8-11}
 #[component]
 fn App() -> Html {
     // ...
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{ "Videos to watch" }</h3>
--               for video in &videos {
--                   <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
--               }
-+               <VideosList {videos} />
-            </div>
-            // ...
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{ "Videos to watch" }</h3>
+-           for video in &videos {
+-               <p key={video.id}>{format!("{}: {}", video.speaker, video.title)}</p>
+-           }
++           <VideosList {videos} />
+        </div>
+        // ...
     }
 }
 ```
@@ -430,21 +423,19 @@ Now, modify the `App` component to display `VideoDetails` component whenever a v
 +   };
 
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{ "Videos to watch" }</h3>
--               <VideosList {videos} />
-+               <VideosList {videos} on_click={on_video_select} />
-            </div>
-+           if let Some(video) = &*selected_video {
-+               <VideoDetails video={video.clone()} />
-+           }
--           <div>
--               <h3>{ "John Doe: Building and breaking things" }</h3>
--               <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
--           </div>
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{ "Videos to watch" }</h3>
+-           <VideosList {videos} />
++           <VideosList {videos} on_click={on_video_select} />
+        </div>
++       if let Some(video) = &*selected_video {
++           <VideoDetails video={video.clone()} />
++       }
+-       <div>
+-           <h3>{ "John Doe: Building and breaking things" }</h3>
+-           <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
+-       </div>
     }
 }
 ```
@@ -563,15 +554,13 @@ fn App() -> Html {
     // ...
 
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{ "Videos to watch" }</h3>
--               <VideosList {videos} on_click={on_video_select} />
-+               <VideosList videos={(*videos).clone()} on_click={on_video_select} />
-            </div>
-            // ...
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{ "Videos to watch" }</h3>
+-           <VideosList {videos} on_click={on_video_select} />
++           <VideosList videos={(*videos).clone()} on_click={on_video_select} />
+        </div>
+        // ...
     }
 }
 ```
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx
index 3aa76e92589..cfd8a3a8ccf 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx
@@ -66,11 +66,9 @@ fn Text(props: &TextProps) -> Html {
 fn App() -> Html {
     let s = String::from("world");
     html! {
-        <>
-            <Text>{"hello"}</Text>
-            <Text>{s}</Text>
-            <Text>{ format!("year {}", 2024) }</Text>
-        </>
+        <Text>{"hello"}</Text>
+        <Text>{s}</Text>
+        <Text>{ format!("year {}", 2024) }</Text>
     }
 }
 ```
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx
index 6496ca5962c..900b7bc0709 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx
@@ -155,9 +155,7 @@ fn App() -> Html {
     use yew_router::prelude::*;
 
     html! {
-        <>
-            <h1>{"Yew WASI SSR demo"}</h1>
-        </>
+        <h1>{"Yew WASI SSR demo"}</h1>
     }
 }
 
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx
index 1747d272b0d..4def7a0b262 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx
@@ -4,9 +4,6 @@ description: 'これはHTMLですが、完全にそうではありません！'
 comment: 'ファイルを短く簡潔に保つようにしてください。これは、読者がYewのコンポーネントをより簡単に理解できるようにするためであり、正確なAPIドキュメントを提供するためではありません。'
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 `html!` マクロを使用して、HTML に似た式を記述できます。Yew はバックグラウンドでそれを DOM を表現する Rust コードに変換します。
 
 ```rust
@@ -37,39 +34,15 @@ let combined_html: Html = html! {
 };
 ```
 
-`html!` を使用する際の重要なルールの 1 つは、1 つのラッピングノードしか返せないということです。複数の要素のリストをレンダリングするために、`html!` は空のタグ（フラグメント）の使用を許可しています。空のタグは名前のないタグで、それ自体は HTML 要素を生成しません。
-
-<Tabs>
-<TabItem value="Invalid" label="Invalid">
+`html!` は任意の数のルートノードを受け入れるため、複数の要素のリストを直接レンダリングできます:
 
-```rust , compile_fail
+```rust
 use yew::html;
 
-// エラー：ルート HTML 要素は1つだけ許可されています
 html! {
-
     <div></div>
     <p></p>
-
-};
-```
-
-</TabItem>
-<TabItem value="Valid" label="Valid">
-
-```rust
-use yew::html;
-
-// 修正：HTML 空のタグを使用してラップする
-html! {
-    <>
-        <div></div>
-        <p></p>
-    </>
 };
 ```
 
-</TabItem>
-</Tabs>
-
 詳細については、[HTML の詳細](concepts/html/introduction.mdx)を参照してください。
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx
index a00b99e1fde..edc291b435d 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx
@@ -58,7 +58,7 @@ pub struct Props {
 
 #[component]
 fn HelloWorld(&Props { is_loading }: &Props) -> Html {
-    html! { <>{"Am I loading? - "}{is_loading}</> }
+    html! { {"Am I loading? - "}{is_loading} }
 }
 
 // そしてプロパティを提供します
@@ -163,7 +163,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name} </>}
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -207,7 +207,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name}</> }
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -256,7 +256,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name}</> }
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -293,7 +293,7 @@ fn Greetings(
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{message}{" "}{name}</> }
+        html! { {message}{" "}{name} }
     }
 }
 
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/components.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/components.mdx
index 435495a5d77..e67627e9446 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/components.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/components.mdx
@@ -27,7 +27,7 @@ struct Props {
 fn MyComponentWithProps(props: &Props) -> Html {
     let Props { user_first_name, user_last_name } = props;
     html! {
-        <>{"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}</>
+        {"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}
     }
 }
 
@@ -37,19 +37,17 @@ let props = Props {
 };
 
 html!{
-    <>
-        // プロパティなし
-        <MyComponent />
+    // プロパティなし
+    <MyComponent />
 
-        // プロパティを使用
-        <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />
+    // プロパティを使用
+    <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />
 
-        // すべてのプロパティを一度に提供
-        <MyComponentWithProps ..props.clone() />
+    // すべてのプロパティを一度に提供
+    <MyComponentWithProps ..props.clone() />
 
-        // 変数のプロパティを使用し、特定の値を上書き
-        <MyComponentWithProps user_last_name="Elm" ..props />
-    </>
+    // 変数のプロパティを使用し、特定の値を上書き
+    <MyComponentWithProps user_last_name="Elm" ..props />
 };
 ```
 
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx
index 423c73d26ec..0d5c3e726ad 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx
@@ -1,6 +1,6 @@
 ---
 title: '条件レンダリング'
-description: 'HTMLで条件付きノードをレンダリングする！'
+description: 'html! で if、if let、match を使った条件付きレンダリング'
 ---
 
 import Tabs from '@theme/Tabs'
@@ -69,5 +69,90 @@ html! {
 };
 ```
 
+  </TabItem>
+  <TabItem value="if-let-bindings" label="let バインディング">
+
+ブレース付き本体では、html 子要素の前に `let` バインディングを使用でき、複数の子要素を直接記述できます：
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    if condition {
+        let label = format!("count: {count}");
+        <h2>{"Result"}</h2>
+        <span>{label}</span>
+    } else {
+        "nothing"
+    }
+};
+```
+
+`let` バインディングはすべての html 子要素の前に記述する必要があり、交互に配置することはできません。
+
   </TabItem>
 </Tabs>
+
+## Match ブロック
+
+`match` 式は `html!` 内で直接使用でき、`if`/`else` と同じパターンに従います：
+
+<Tabs>
+  <TabItem value="match" label="match">
+
+```rust
+use yew::prelude::*;
+
+let value: Option<String> = Some("hello".into());
+
+html! {
+    match value {
+        Some(text) => <p>{text}</p>,
+        None => <p>{"Nothing here"}</p>,
+    }
+};
+```
+
+  </TabItem>
+  <TabItem value="match-guards" label="if ガード">
+
+```rust
+use yew::prelude::*;
+
+let value: i32 = 42;
+
+html! {
+    match value {
+        x if x > 10 => <p>{"Big"}</p>,
+        x if x > 0 => <p>{"Small"}</p>,
+        _ => <p>{"Non-positive"}</p>,
+    }
+};
+```
+
+  </TabItem>
+  <TabItem value="match-let" label="let バインディング">
+
+ブレース付きのアーム本体では、`let` バインディングと複数の子要素を使用できます：
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    match data {
+        Some(item) => {
+            let label = format!("Item: {}", item.name);
+            let class = if item.important { "highlight" } else { "normal" };
+            <p class={class}>{label}</p>
+        }
+        None => <p>{"No data"}</p>,
+    }
+};
+```
+
+  </TabItem>
+</Tabs>
+
+単一要素のアームはブレースを省略できます。複数の子要素や `let` バインディングを持つアームにはブレースが必要です。
+
+`match` は OR パターン（`A | B`）、分割代入、`if` ガードを含む、すべての標準的な Rust パターンをサポートします。網羅性は Rust コンパイラによってチェックされます。
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/events.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/events.mdx
index 3679c90138f..fd5f832b11d 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/events.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/events.mdx
@@ -134,24 +134,22 @@ fn MyComponent() -> Html {
     });
 
     html! {
-        <>
-            <label for="cautious-input">
-                { "My cautious input:" }
-                <input onchange={on_cautious_change}
-                    id="cautious-input"
-                    type="text"
-                    value={input_value.clone()}
-                />
-            </label>
-            <label for="dangerous-input">
-                { "My dangerous input:" }
-                <input onchange={on_dangerous_change}
-                    id="dangerous-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="cautious-input">
+            { "My cautious input:" }
+            <input onchange={on_cautious_change}
+                id="cautious-input"
+                type="text"
+                value={input_value.clone()}
+            />
+        </label>
+        <label for="dangerous-input">
+            { "My dangerous input:" }
+            <input onchange={on_dangerous_change}
+                id="dangerous-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -205,24 +203,22 @@ fn MyComponent() -> Html {
     });
 
     html! {
-        <>
-            <label for="cautious-input">
-                { "My cautious input:" }
-                <input onchange={on_cautious_change}
-                    id="cautious-input"
-                    type="text"
-                    value={input_value.clone()}
-                />
-            </label>
-            <label for="dangerous-input">
-                { "My dangerous input:" }
-                <input onchange={on_dangerous_change}
-                    id="dangerous-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="cautious-input">
+            { "My cautious input:" }
+            <input onchange={on_cautious_change}
+                id="cautious-input"
+                type="text"
+                value={input_value.clone()}
+            />
+        </label>
+        <label for="dangerous-input">
+            { "My dangerous input:" }
+            <input onchange={on_dangerous_change}
+                id="dangerous-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -259,18 +255,16 @@ fn MyComponent() -> Html {
     };
 
     html! {
-        <>
-            <label for="my-input">
-                { "My input:" }
-                //highlight-next-line
-                <input ref={input_node_ref}
-                    {onchange}
-                    id="my-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="my-input">
+            { "My input:" }
+            //highlight-next-line
+            <input ref={input_node_ref}
+                {onchange}
+                id="my-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -301,16 +295,14 @@ fn MyComponent() -> Html {
     //highlight-end
 
     html! {
-        <>
-            <label for="my-input">
-                { "My input:" }
-                <input ref={input_node_ref}
-                    {onchange}
-                    id="my-input"
-                    type="text"
-                />
-            </label>
-        </>
+        <label for="my-input">
+            { "My input:" }
+            <input ref={input_node_ref}
+                {onchange}
+                id="my-input"
+                type="text"
+            />
+        </label>
     }
 }
 ```
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx
index f2de8e133ef..0f623095700 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx
@@ -2,41 +2,32 @@
 title: '空のタグ (Fragments)'
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
-`html!` マクロは常にルートノードを必要とします。この制限を回避するために、「空のタグ」（または fragments）を使用できます。
-
-<Tabs>
-<TabItem value="Valid" label="Valid">
+`html!` マクロは複数のルートノードを直接受け入れます。ルートレベルでフラグメントラッパー (`<>...</>`) は**不要**です:
 
 ```rust
 use yew::prelude::*;
 
 html! {
-    <>
-        <div></div>
-        <p></p>
-    </>
+    <div></div>
+    <p></p>
 };
-
 ```
 
-</TabItem>
+## キー付きフラグメント
 
-<TabItem value="Invalid" label="Invalid">
+フラグメント構文の唯一の正当な用途は、**キー付き**フラグメントです。
 
-```rust, compile_fail
+```rust
 use yew::prelude::*;
 
-// エラー: ルート HTML 要素は1つだけ許可されます
-
 html! {
-    <div></div>
-    <p></p>
+    // .. siblings ..
+    <key="group-a">
+        <span>{"a1"}</span>
+        <span>{"a2"}</span>
+    </>
+    // .. siblings ..
 };
-
 ```
 
-</TabItem>
-</Tabs>
+キー付きフラグメントは、場合によっては差分処理のパフォーマンスとノードの永続化に役立ちます。
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx
index fa8ee0418f1..dd12121ab3c 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx
@@ -12,10 +12,9 @@ import TabItem from '@theme/TabItem'
 
 **重要な注意点**
 
-1. `html! {}` マクロは 1 つのルート HTML ノードしか受け入れません（これを回避するには、[fragments](./fragments.mdx) または [iterators](./../html/lists.mdx) を使用できます）
-2. 空の `html! {}` 呼び出しは有効で、何もレンダリングしません
-3. リテラルは常に引用符で囲み、中括弧で囲む必要があります：`html! { <p>{ "Hello, World" }</p> }`
-4. `html!` マクロはすべてのタグ名を小文字に変換します。大文字の文字（特定の SVG 要素に必要な文字）を使用するには、[動的タグ名](concepts/html/elements.mdx#dynamic-tag-names) を使用してください：`html! { <@{"myTag"}></@> }`
+1. `html!` マクロは、0 を含む任意の数のルートノードを受け入れます。空の `html! {}` 呼び出しは有効で、何もレンダリングしません。
+2. リテラルは常に引用符で囲み、中括弧で囲む必要があります：`html! { <p>{ "Hello, World" }</p> }`
+3. `html!` マクロはすべてのタグ名を小文字に変換します。大文字の文字（特定の SVG 要素に必要な文字）を使用するには、[動的タグ名](concepts/html/elements.mdx#dynamic-tag-names) を使用してください：`html! { <@{"myTag"}></@> }`
 
 :::note
 `html!` マクロはコンパイラのデフォルトの再帰制限に達する可能性があります。コンパイル エラーが発生した場合は、クレートのルートに `#![recursion_limit="1024"]` のような属性を追加して問題を解決してください。
@@ -204,7 +203,7 @@ html! { <div { String::from("hx-on:click") }={ "alert('Clicked!')" } /> };
 
 ## 条件付きレンダリング
 
-Rust の条件構造を使用して、条件付きでマークアップをレンダリングできます。現在、`if` と `if let` のみがサポートされています。
+Rust の `if`、`if let`、`match` 式を `html!` 内で直接使用して、条件付きでマークアップをレンダリングできます。
 
 ```rust
 use yew::prelude::*;
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx
index caffea891bd..fdfc25dc5f6 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx
@@ -23,6 +23,20 @@ html! {
         <span>{i}</span>
     }
 };
+```
+
+`for` ループ本体では、html 子要素の前に `let` バインディングも使用できます：
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    for item in items {
+        let label = format!("{}: {}", item.id, item.name);
+        let class = if item.active { "active" } else { "inactive" };
+        <div class={class}>{label}</div>
+    }
+};
 ```
 
   </TabItem>
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx
index 232700aad52..04c57901187 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx
@@ -17,17 +17,26 @@ use yew::prelude::*;
 
 let text = "lorem ipsum";
 html!{
-    <>
-        <div>{text}</div>
-        <div>{"dolor sit"}</div>
-        <span>{42}</span>
-    </>
+    <div>{text}</div>
+    <div>{"dolor sit"}</div>
+    <span>{42}</span>
 };
 ```
 
 ## 式
 
-`{}` ブロックを使用して、HTML 内に式を挿入できます。それらが `Html` に解決される限り。
+`{}` ブロックを使用して、HTML 内に式を挿入できます。それらが `Html` に解決される限り：
+
+```rust
+use yew::prelude::*;
+
+let name = "Yew";
+html! {
+  <div>{ format!("Hello, {name}!") }</div>
+};
+```
+
+条件付きレンダリングには、式ブロック内でネストされた `html!` 呼び出しを使用するのではなく、`html!` 内で直接 `if`/`else` と `match` を使用してください：
 
 ```rust
 use yew::prelude::*;
@@ -36,20 +45,14 @@ let show_link = true;
 
 html! {
   <div>
-    {
-      if show_link {
-        html! {
-          <a href="https://example.com">{"Link"}</a>
-        }
-      } else {
-        html! {}
-      }
+    if show_link {
+      <a href="https://example.com">{"Link"}</a>
     }
   </div>
 };
 ```
 
-通常、これらの式を関数やクロージャに抽出して、可読性を最適化することが意味があります：
+通常、複雑なロジックを関数やクロージャに抽出することが有意義です：
 
 ```rust
 use yew::prelude::*;
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/router.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/router.mdx
index 9466ca67825..3322b4fe41a 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/router.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/concepts/router.mdx
@@ -210,9 +210,7 @@ pub fn my_component() -> Html {
     let onclick = Callback::from(move |_| navigator.push(&Route::Home));
 
     html! {
-        <>
-            <button {onclick}>{"Click to go home"}</button>
-        </>
+        <button {onclick}>{"Click to go home"}</button>
     }
 }
 ```
@@ -257,11 +255,9 @@ pub fn nav_items() -> Html {
     };
 
     html! {
-        <>
-            {go_home_button}
-            {go_to_first_post_button}
-            {go_to_secure_button}
-        </>
+        {go_home_button}
+        {go_to_first_post_button}
+        {go_to_secure_button}
     }
 }
 ```
diff --git a/website/i18n/ja/docusaurus-plugin-content-docs/current/tutorial/index.mdx b/website/i18n/ja/docusaurus-plugin-content-docs/current/tutorial/index.mdx
index 1b3bbb4bdff..becd86a285e 100644
--- a/website/i18n/ja/docusaurus-plugin-content-docs/current/tutorial/index.mdx
+++ b/website/i18n/ja/docusaurus-plugin-content-docs/current/tutorial/index.mdx
@@ -143,7 +143,7 @@ Yew は Rust のプロシージャルマクロを利用しており、JSX（Java
 私たちのウェブサイトがどのように見えるかについての良いアイデアが既にあるので、単純にドラフトを `html!` と互換性のある表現に変換することができます。シンプルな HTML を書くことに慣れているなら、`html!` でマークアップを書くのに問題はないはずです。このマクロは HTML といくつかの違いがあることに注意してください：
 
 1. 式は中括弧（`{ }`）で囲む必要があります。
-2. ルートノードは1つだけでなければなりません。コンテナにラップせずに複数の要素を持ちたい場合は、空のタグ/フラグメント（`<> ... </>`）を使用できます。
+2. ルートノードは任意の数を返すことができ、自動的にまとめられます。
 3. 要素は正しく閉じる必要があります。
 
 レイアウトを構築したいので、元の HTML は次のようになります：
@@ -170,20 +170,18 @@ Yew は Rust のプロシージャルマクロを利用しており、JSX（Java
 
 ```rust ,ignore
 html! {
-    <>
-        <h1>{ "RustConf Explorer" }</h1>
-        <div>
-            <h3>{"Videos to watch"}</h3>
-            <p>{ "John Doe: Building and breaking things" }</p>
-            <p>{ "Jane Smith: The development process" }</p>
-            <p>{ "Matt Miller: The Web 7.0" }</p>
-            <p>{ "Tom Jerry: Mouseless development" }</p>
-        </div>
-        <div>
-            <h3>{ "John Doe: Building and breaking things" }</h3>
-            <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
-        </div>
-    </>
+    <h1>{ "RustConf Explorer" }</h1>
+    <div>
+        <h3>{"Videos to watch"}</h3>
+        <p>{ "John Doe: Building and breaking things" }</p>
+        <p>{ "Jane Smith: The development process" }</p>
+        <p>{ "Matt Miller: The Web 7.0" }</p>
+        <p>{ "Tom Jerry: Mouseless development" }</p>
+    </div>
+    <div>
+        <h3>{ "John Doe: Building and breaking things" }</h3>
+        <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
+    </div>
 }
 ```
 
@@ -253,20 +251,18 @@ let videos = videos.iter().map(|video| html! {
 
 最後に、データから作成された `Html` を使用してハードコーディングされたビデオリストを置き換える必要があります：
 
-```rust ,ignore {6-10}
+```rust ,ignore {5-9}
 html! {
-    <>
-        <h1>{ "RustConf Explorer" }</h1>
-        <div>
-            <h3>{ "Videos to watch" }</h3>
--           <p>{ "John Doe: Building and breaking things" }</p>
--           <p>{ "Jane Smith: The development process" }</p>
--           <p>{ "Matt Miller: The Web 7.0" }</p>
--           <p>{ "Tom Jerry: Mouseless development" }</p>
-+           { videos }
-        </div>
-        // ...
-    </>
+    <h1>{ "RustConf Explorer" }</h1>
+    <div>
+        <h3>{ "Videos to watch" }</h3>
+-       <p>{ "John Doe: Building and breaking things" }</p>
+-       <p>{ "Jane Smith: The development process" }</p>
+-       <p>{ "Matt Miller: The Web 7.0" }</p>
+-       <p>{ "Tom Jerry: Mouseless development" }</p>
++       { videos }
+    </div>
+    // ...
 }
 ```
 
@@ -326,7 +322,7 @@ struct Video {
 
 次に、`VideosList` コンポーネントを使用するように `App` コンポーネントを更新できます。
 
-```rust ,ignore {4-7,13-14}
+```rust ,ignore {4-7,12-13}
 #[component(App)]
 fn app() -> Html {
     // ...
@@ -335,15 +331,13 @@ fn app() -> Html {
 -    }).collect::<Html>();
 -
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{"Videos to watch"}</h3>
--               { videos }
-+               <VideosList videos={videos} />
-            </div>
-            // ...
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{"Videos to watch"}</h3>
+-           { videos }
++           <VideosList videos={videos} />
+        </div>
+        // ...
     }
 }
 ```
@@ -428,19 +422,17 @@ fn app() -> Html {
 +    });
 
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{"Videos to watch"}</h3>
--               <VideosList videos={videos} />
-+               <VideosList videos={videos} on_click={on_video_select.clone()} />
-            </div>
-+            { for details }
--            <div>
--                <h3>{ "John Doe: Building and breaking things" }</h3>
--                <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
--            </div>
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{"Videos to watch"}</h3>
+-           <VideosList videos={videos} />
++           <VideosList videos={videos} on_click={on_video_select.clone()} />
+        </div>
++       { for details }
+-       <div>
+-           <h3>{ "John Doe: Building and breaking things" }</h3>
+-           <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
+-       </div>
     }
 }
 ```
@@ -527,15 +519,13 @@ fn app() -> Html {
     // ...
 
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{"Videos to watch"}</h3>
--                <VideosList videos={videos} on_click={on_video_select.clone()} />
-+                <VideosList videos={(*videos).clone()} on_click={on_video_select.clone()} />
-            </div>
-            { for details }
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{"Videos to watch"}</h3>
+-           <VideosList videos={videos} on_click={on_video_select.clone()} />
++           <VideosList videos={(*videos).clone()} on_click={on_video_select.clone()} />
+        </div>
+        { for details }
     }
 }
 ```
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx
index 1434321e9ea..c0f46a89663 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx
@@ -66,11 +66,9 @@ fn Text(props: &TextProps) -> Html {
 fn App() -> Html {
     let s = String::from("world");
     html! {
-        <>
-            <Text>{"hello"}</Text>
-            <Text>{s}</Text>
-            <Text>{ format!("year {}", 2024) }</Text>
-        </>
+        <Text>{"hello"}</Text>
+        <Text>{s}</Text>
+        <Text>{ format!("year {}", 2024) }</Text>
     }
 }
 ```
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx
index f19269b66de..580644d3ade 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx
@@ -155,9 +155,7 @@ fn App() -> Html {
     use yew_router::prelude::*;
 
     html! {
-        <>
-            <h1>{"Yew WASI SSR demo"}</h1>
-        </>
+        <h1>{"Yew WASI SSR demo"}</h1>
     }
 }
 
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx
index 84bc3aa19c4..6bd0b2e18d3 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx
@@ -4,9 +4,6 @@ description: '这是 HTML，但不完全是！'
 comment: '尽量保持文件简短和简单。它的目的是让读者更容易地了解 Yew 中的组件，而不是提供正确的 API 文档'
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 你可以使用 `html!` 宏编写类似 HTML 的表达式。Yew 会在后台将其转换为表达 DOM 的 Rust 代码。
 
 ```rust
@@ -37,39 +34,15 @@ let combined_html: Html = html! {
 };
 ```
 
-使用 `html!` 有一个重要的规则 - 您只能返回一个包装节点。为了渲染多个元素的列表，`html!` 允许使用空标签（Fragments）。空标签是没有名称的标签，它们本身不会产生 HTML 元素。
-
-<Tabs>
-<TabItem value="Invalid" label="Invalid">
+`html!` 可以接受任意数量的根节点，因此可以直接渲染多个元素的列表：
 
-```rust , compile_fail
+```rust
 use yew::html;
 
-// 错误：只允许一个根 HTML 元素
 html! {
-
     <div></div>
     <p></p>
-
-};
-```
-
-</TabItem>
-<TabItem value="Valid" label="Valid">
-
-```rust
-use yew::html;
-
-// 修复：使用 HTML 空标签包裹
-html! {
-    <>
-        <div></div>
-        <p></p>
-    </>
 };
 ```
 
-</TabItem>
-</Tabs>
-
 更多关于 Yew 和 HTML 的内容请参见[更多 HTML](concepts/html/introduction.mdx)。
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx
index 8b7129e641e..be6d6930c34 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx
@@ -58,7 +58,7 @@ pub struct Props {
 
 #[component]
 fn HelloWorld(&Props { is_loading }: &Props) -> Html {
-    html! { <>{"Am I loading? - "}{is_loading}</> }
+    html! { {"Am I loading? - "}{is_loading} }
 }
 
 // 然后提供属性
@@ -163,7 +163,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name} </>}
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -207,7 +207,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name}</> }
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -256,7 +256,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name}</> }
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -293,7 +293,7 @@ fn Greetings(
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{message}{" "}{name}</> }
+        html! { {message}{" "}{name} }
     }
 }
 
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/components.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/components.mdx
index 5079f7e420d..7814144879c 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/components.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/components.mdx
@@ -27,7 +27,7 @@ struct Props {
 fn MyComponentWithProps(props: &Props) -> Html {
     let Props { user_first_name, user_last_name } = props;
     html! {
-        <>{"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}</>
+        {"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}
     }
 }
 
@@ -37,19 +37,17 @@ let props = Props {
 };
 
 html!{
-    <>
-        // 没有属性
-        <MyComponent />
+    // 没有属性
+    <MyComponent />
 
-        // 使用属性
-        <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />
+    // 使用属性
+    <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />
 
-        // 一次性提供所有属性
-        <MyComponentWithProps ..props.clone() />
+    // 一次性提供所有属性
+    <MyComponentWithProps ..props.clone() />
 
-        // 使用变量中的属性，并覆盖特定值
-        <MyComponentWithProps user_last_name="Elm" ..props />
-    </>
+    // 使用变量中的属性，并覆盖特定值
+    <MyComponentWithProps user_last_name="Elm" ..props />
 };
 ```
 
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx
index 345f57a339e..1dd65ef3665 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx
@@ -1,6 +1,6 @@
 ---
 title: '条件渲染'
-description: '在 html 中有条件地渲染节点！'
+description: '在 html! 中使用 if、if let 和 match 进行条件渲染'
 ---
 
 import Tabs from '@theme/Tabs'
@@ -69,5 +69,90 @@ html! {
 };
 ```
 
+  </TabItem>
+  <TabItem value="if-let-bindings" label="let 绑定">
+
+大括号体支持在 html 子节点前使用 `let` 绑定，也可以直接写多个子节点：
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    if condition {
+        let label = format!("count: {count}");
+        <h2>{"Result"}</h2>
+        <span>{label}</span>
+    } else {
+        "nothing"
+    }
+};
+```
+
+`let` 绑定必须出现在所有 html 子节点之前，不能与它们交错。
+
   </TabItem>
 </Tabs>
+
+## Match 块
+
+`match` 表达式可以直接在 `html!` 中使用，与 `if`/`else` 遵循相同的模式：
+
+<Tabs>
+  <TabItem value="match" label="match">
+
+```rust
+use yew::prelude::*;
+
+let value: Option<String> = Some("hello".into());
+
+html! {
+    match value {
+        Some(text) => <p>{text}</p>,
+        None => <p>{"Nothing here"}</p>,
+    }
+};
+```
+
+  </TabItem>
+  <TabItem value="match-guards" label="if 守卫">
+
+```rust
+use yew::prelude::*;
+
+let value: i32 = 42;
+
+html! {
+    match value {
+        x if x > 10 => <p>{"Big"}</p>,
+        x if x > 0 => <p>{"Small"}</p>,
+        _ => <p>{"Non-positive"}</p>,
+    }
+};
+```
+
+  </TabItem>
+  <TabItem value="match-let" label="let 绑定">
+
+大括号 arm 体支持 `let` 绑定和多个子节点：
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    match data {
+        Some(item) => {
+            let label = format!("Item: {}", item.name);
+            let class = if item.important { "highlight" } else { "normal" };
+            <p class={class}>{label}</p>
+        }
+        None => <p>{"No data"}</p>,
+    }
+};
+```
+
+  </TabItem>
+</Tabs>
+
+单元素 arm 可以省略大括号。含多个子节点或 `let` 绑定的 arm 需要大括号。
+
+`match` 支持所有标准 Rust 模式，包括 OR 模式（`A | B`）、解构和 `if` 守卫。穷尽性由 Rust 编译器检查。
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/events.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/events.mdx
index e4ab80d7cb3..f8ddfb159b7 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/events.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/events.mdx
@@ -132,24 +132,22 @@ fn MyComponent() -> Html {
     });
 
     html! {
-        <>
-            <label for="cautious-input">
-                { "My cautious input:" }
-                <input onchange={on_cautious_change}
-                    id="cautious-input"
-                    type="text"
-                    value={input_value.clone()}
-                />
-            </label>
-            <label for="dangerous-input">
-                { "My dangerous input:" }
-                <input onchange={on_dangerous_change}
-                    id="dangerous-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="cautious-input">
+            { "My cautious input:" }
+            <input onchange={on_cautious_change}
+                id="cautious-input"
+                type="text"
+                value={input_value.clone()}
+            />
+        </label>
+        <label for="dangerous-input">
+            { "My dangerous input:" }
+            <input onchange={on_dangerous_change}
+                id="dangerous-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -207,24 +205,22 @@ fn MyComponent() -> Html {
     });
 
     html! {
-        <>
-            <label for="cautious-input">
-                { "My cautious input:" }
-                <input onchange={on_cautious_change}
-                    id="cautious-input"
-                    type="text"
-                    value={input_value.clone()}
-                />
-            </label>
-            <label for="dangerous-input">
-                { "My dangerous input:" }
-                <input onchange={on_dangerous_change}
-                    id="dangerous-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="cautious-input">
+            { "My cautious input:" }
+            <input onchange={on_cautious_change}
+                id="cautious-input"
+                type="text"
+                value={input_value.clone()}
+            />
+        </label>
+        <label for="dangerous-input">
+            { "My dangerous input:" }
+            <input onchange={on_dangerous_change}
+                id="dangerous-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -261,18 +257,16 @@ fn MyComponent() -> Html {
     };
 
     html! {
-        <>
-            <label for="my-input">
-                { "My input:" }
-                //highlight-next-line
-                <input ref={input_node_ref}
-                    {onchange}
-                    id="my-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="my-input">
+            { "My input:" }
+            //highlight-next-line
+            <input ref={input_node_ref}
+                {onchange}
+                id="my-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -303,16 +297,14 @@ fn MyComponent() -> Html {
     //highlight-end
 
     html! {
-        <>
-            <label for="my-input">
-                { "My input:" }
-                <input ref={input_node_ref}
-                    {onchange}
-                    id="my-input"
-                    type="text"
-                />
-            </label>
-        </>
+        <label for="my-input">
+            { "My input:" }
+            <input ref={input_node_ref}
+                {onchange}
+                id="my-input"
+                type="text"
+            />
+        </label>
     }
 }
 ```
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx
index 5a015521105..8d80e8be11e 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx
@@ -2,41 +2,32 @@
 title: '空标签 (Fragments)'
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
-`html!` 宏总是需要一个根节点。为了绕过这个限制，您可以使用一个“空标签”（也称为“fragments”）。
-
-<Tabs>
-<TabItem value="Valid" label="Valid">
+`html!` 宏可以直接接受多个根节点。在根层级**不需要**使用 fragment 包装 (`<>...</>`)：
 
 ```rust
 use yew::prelude::*;
 
 html! {
-    <>
-        <div></div>
-        <p></p>
-    </>
+    <div></div>
+    <p></p>
 };
-
 ```
 
-</TabItem>
+## 带 key 的 fragment
 
-<TabItem value="Invalid" label="Invalid">
+fragment 语法仅剩的合理用途是**带 key 的** fragment。
 
-```rust, compile_fail
+```rust
 use yew::prelude::*;
 
-// 错误：只允许一个根 HTML 元素
-
 html! {
-    <div></div>
-    <p></p>
+    // .. siblings ..
+    <key="group-a">
+        <span>{"a1"}</span>
+        <span>{"a2"}</span>
+    </>
+    // .. siblings ..
 };
-
 ```
 
-</TabItem>
-</Tabs>
+在某些场景下，带 key 的 fragment 有助于差分性能和节点持久化。
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx
index d3221c820db..485b9a33d00 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx
@@ -12,10 +12,9 @@ import TabItem from '@theme/TabItem'
 
 **重要提示**
 
-1. `html! {}` 宏只能接受一个根 HTML 节点（您可以通过使用 [fragments](./fragments.mdx) 或 [iterators](./../html/lists.mdx) 来规避这一点）
-2. 空的 `html! {}` 调用是有效的，不会渲染任何内容
-3. 字面量必须始终用引号引起来并用大括号括起来：`html! { <p>{ "Hello, World" }</p> }`
-4. `html!` 宏会将所有标签名称转换为小写。要使用大写字符（某些 SVG 元素所需的字符）请使用[动态标签名称](concepts/html/elements.mdx#dynamic-tag-names)：`html! { <@{"myTag"}></@> }`
+1. `html!` 宏可以接受任意数量的根节点，包括零个。空的 `html! {}` 调用是有效的，不会渲染任何内容。
+2. 字面量必须始终用引号引起来并用大括号括起来：`html! { <p>{ "Hello, World" }</p> }`
+3. `html!` 宏会将所有标签名称转换为小写。要使用大写字符（某些 SVG 元素所需的字符）请使用[动态标签名称](concepts/html/elements.mdx#dynamic-tag-names)：`html! { <@{"myTag"}></@> }`
 
 :::note
 `html!` 宏可能会达到编译器的默认递归限制。如果遇到编译错误，请在 crate 根目录添加类似 `#![recursion_limit="1024"]` 的属性以解决问题。
@@ -204,7 +203,7 @@ html! { <div { String::from("hx-on:click") }={ "alert('Clicked!')" } /> };
 
 ## 条件渲染
 
-可以通过使用 Rust 的条件结构来条件性地渲染标记。目前只支持 `if` 和 `if let`。
+可以使用 Rust 的 `if`、`if let` 和 `match` 表达式直接在 `html!` 中条件性地渲染标记。
 
 ```rust
 use yew::prelude::*;
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx
index e634aa151c1..7cd4ec9459b 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx
@@ -23,6 +23,20 @@ html! {
         <span>{i}</span>
     }
 };
+```
+
+`for` 循环体也支持在 html 子节点前使用 `let` 绑定：
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    for item in items {
+        let label = format!("{}: {}", item.id, item.name);
+        let class = if item.active { "active" } else { "inactive" };
+        <div class={class}>{label}</div>
+    }
+};
 ```
 
   </TabItem>
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx
index c39da1ab8be..4f0c8248588 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx
@@ -17,17 +17,26 @@ use yew::prelude::*;
 
 let text = "lorem ipsum";
 html!{
-    <>
-        <div>{text}</div>
-        <div>{"dolor sit"}</div>
-        <span>{42}</span>
-    </>
+    <div>{text}</div>
+    <div>{"dolor sit"}</div>
+    <span>{42}</span>
 };
 ```
 
 ## 表达式
 
-您可以使用 `{}` 块在 HTML 中插入表达式，只要它们解析为 `Html`
+您可以使用 `{}` 块在 HTML 中插入表达式，只要它们解析为 `Html`：
+
+```rust
+use yew::prelude::*;
+
+let name = "Yew";
+html! {
+  <div>{ format!("Hello, {name}!") }</div>
+};
+```
+
+对于条件渲染，请直接在 `html!` 中使用 `if`/`else` 和 `match`，而不是在表达式块中嵌套 `html!` 调用：
 
 ```rust
 use yew::prelude::*;
@@ -36,20 +45,14 @@ let show_link = true;
 
 html! {
   <div>
-    {
-      if show_link {
-        html! {
-          <a href="https://example.com">{"Link"}</a>
-        }
-      } else {
-        html! {}
-      }
+    if show_link {
+      <a href="https://example.com">{"Link"}</a>
     }
   </div>
 };
 ```
 
-通常将这些表达式提取到函数或闭包中以优化可读性是有意义的：
+通常将复杂逻辑提取到函数或闭包中是有意义的：
 
 ```rust
 use yew::prelude::*;
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/router.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/router.mdx
index 52b0b99358a..5a774eae834 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/router.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/concepts/router.mdx
@@ -210,9 +210,7 @@ pub fn my_component() -> Html {
     let onclick = Callback::from(move |_| navigator.push(&Route::Home));
 
     html! {
-        <>
-            <button {onclick}>{"Click to go home"}</button>
-        </>
+        <button {onclick}>{"Click to go home"}</button>
     }
 }
 ```
@@ -257,11 +255,9 @@ pub fn nav_items() -> Html {
     };
 
     html! {
-        <>
-            {go_home_button}
-            {go_to_first_post_button}
-            {go_to_secure_button}
-        </>
+        {go_home_button}
+        {go_to_first_post_button}
+        {go_to_secure_button}
     }
 }
 ```
diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorial/index.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorial/index.mdx
index 17e6d790a4c..c0e9598a59d 100644
--- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorial/index.mdx
+++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorial/index.mdx
@@ -143,7 +143,7 @@ Yew 利用了 Rust 的过程宏，并为我们提供了一种类似于 JSX（Jav
 由于我们已经对我们的网站长什么样有了一个很好的想法，我们可以简单地将我们的草稿转换为与 `html!` 兼容的表示。如果您习惯于编写简单的 HTML，那么您在 `html!` 中编写标记时应该没有问题。需要注意的是，这个宏与 HTML 有一些不同之处：
 
 1. 表达式必须用大括号（`{ }`）括起来
-2. 只能有一个根节点。如果您想要在不将它们包装在容器中的情况下拥有多个元素，可以使用空标签/片段（`<> ... </>`）
+2. 可以返回任意数量的根节点，它们会被自动组合。
 3. 元素必须正确关闭。
 
 我们想要构建一个布局，原始 HTML 如下：
@@ -170,20 +170,18 @@ Yew 利用了 Rust 的过程宏，并为我们提供了一种类似于 JSX（Jav
 
 ```rust ,ignore
 html! {
-    <>
-        <h1>{ "RustConf Explorer" }</h1>
-        <div>
-            <h3>{"Videos to watch"}</h3>
-            <p>{ "John Doe: Building and breaking things" }</p>
-            <p>{ "Jane Smith: The development process" }</p>
-            <p>{ "Matt Miller: The Web 7.0" }</p>
-            <p>{ "Tom Jerry: Mouseless development" }</p>
-        </div>
-        <div>
-            <h3>{ "John Doe: Building and breaking things" }</h3>
-            <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
-        </div>
-    </>
+    <h1>{ "RustConf Explorer" }</h1>
+    <div>
+        <h3>{"Videos to watch"}</h3>
+        <p>{ "John Doe: Building and breaking things" }</p>
+        <p>{ "Jane Smith: The development process" }</p>
+        <p>{ "Matt Miller: The Web 7.0" }</p>
+        <p>{ "Tom Jerry: Mouseless development" }</p>
+    </div>
+    <div>
+        <h3>{ "John Doe: Building and breaking things" }</h3>
+        <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
+    </div>
 }
 ```
 
@@ -253,20 +251,18 @@ let videos = videos.iter().map(|video| html! {
 
 最后，我们需要用从数据创建的 `Html` 替换硬编码的视频列表：
 
-```rust ,ignore {6-10}
+```rust ,ignore {5-9}
 html! {
-    <>
-        <h1>{ "RustConf Explorer" }</h1>
-        <div>
-            <h3>{ "Videos to watch" }</h3>
--           <p>{ "John Doe: Building and breaking things" }</p>
--           <p>{ "Jane Smith: The development process" }</p>
--           <p>{ "Matt Miller: The Web 7.0" }</p>
--           <p>{ "Tom Jerry: Mouseless development" }</p>
-+           { videos }
-        </div>
-        // ...
-    </>
+    <h1>{ "RustConf Explorer" }</h1>
+    <div>
+        <h3>{ "Videos to watch" }</h3>
+-       <p>{ "John Doe: Building and breaking things" }</p>
+-       <p>{ "Jane Smith: The development process" }</p>
+-       <p>{ "Matt Miller: The Web 7.0" }</p>
+-       <p>{ "Tom Jerry: Mouseless development" }</p>
++       { videos }
+    </div>
+    // ...
 }
 ```
 
@@ -326,7 +322,7 @@ struct Video {
 
 现在，我们可以更新我们的 `App` 组件以使用 `VideosList` 组件。
 
-```rust ,ignore {4-7,13-14}
+```rust ,ignore {4-7,12-13}
 #[component(App)]
 fn app() -> Html {
     // ...
@@ -335,15 +331,13 @@ fn app() -> Html {
 -    }).collect::<Html>();
 -
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{"Videos to watch"}</h3>
--               { videos }
-+               <VideosList videos={videos} />
-            </div>
-            // ...
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{"Videos to watch"}</h3>
+-           { videos }
++           <VideosList videos={videos} />
+        </div>
+        // ...
     }
 }
 ```
@@ -428,19 +422,17 @@ fn app() -> Html {
 +    });
 
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{"Videos to watch"}</h3>
--               <VideosList videos={videos} />
-+               <VideosList videos={videos} on_click={on_video_select.clone()} />
-            </div>
-+            { for details }
--            <div>
--                <h3>{ "John Doe: Building and breaking things" }</h3>
--                <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
--            </div>
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{"Videos to watch"}</h3>
+-           <VideosList videos={videos} />
++           <VideosList videos={videos} on_click={on_video_select.clone()} />
+        </div>
++       { for details }
+-       <div>
+-           <h3>{ "John Doe: Building and breaking things" }</h3>
+-           <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
+-       </div>
     }
 }
 ```
@@ -527,15 +519,13 @@ fn app() -> Html {
     // ...
 
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{"Videos to watch"}</h3>
--                <VideosList videos={videos} on_click={on_video_select.clone()} />
-+                <VideosList videos={(*videos).clone()} on_click={on_video_select.clone()} />
-            </div>
-            { for details }
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{"Videos to watch"}</h3>
+-           <VideosList videos={videos} on_click={on_video_select.clone()} />
++           <VideosList videos={(*videos).clone()} on_click={on_video_select.clone()} />
+        </div>
+        { for details }
     }
 }
 ```
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx
index 52c5c6efcae..81fef1073e2 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/advanced-topics/children.mdx
@@ -66,11 +66,9 @@ fn Text(props: &TextProps) -> Html {
 fn App() -> Html {
     let s = String::from("world");
     html! {
-        <>
-            <Text>{"hello"}</Text>
-            <Text>{s}</Text>
-            <Text>{ format!("year {}", 2024) }</Text>
-        </>
+        <Text>{"hello"}</Text>
+        <Text>{s}</Text>
+        <Text>{ format!("year {}", 2024) }</Text>
     }
 }
 ```
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx
index d407744eb4f..dc88eba04e5 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/advanced-topics/server-side-rendering.mdx
@@ -155,9 +155,7 @@ fn App() -> Html {
     use yew_router::prelude::*;
 
     html! {
-        <>
-            <h1>{"Yew WASI SSR demo"}</h1>
-        </>
+        <h1>{"Yew WASI SSR demo"}</h1>
     }
 }
 
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx
index 8837d1c00fa..73fcde9b446 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/basic-web-technologies/html.mdx
@@ -4,9 +4,6 @@ description: '這是 HTML，但不完全是！ '
 comment: '盡量保持文件簡短和簡單。它的目的是讓讀者更容易了解 Yew 中的元件，而不是提供正確的 API 文件'
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
 你可以使用 `html!` 巨集來寫類似 HTML 的表達式。 Yew 會在背景轉換為表達 DOM 的 Rust 程式碼。
 
 ```rust
@@ -37,39 +34,15 @@ let combined_html: Html = html! {
 };
 ```
 
-使用 `html!` 有一個重要的規則 - 您只能傳回一個包裝節點。為了渲染多個元素的列表，`html!` 允許使用空標籤（Fragments）。空標籤是沒有名稱的標籤，它們本身不會產生 HTML 元素。
-
-<Tabs>
-<TabItem value="Invalid" label="Invalid">
+`html!` 可以接受任意數量的根節點，因此可以直接渲染多個元素的列表：
 
-```rust , compile_fail
+```rust
 use yew::html;
 
-// 錯誤：只允許一個根 HTML 元素
 html! {
-
     <div></div>
     <p></p>
-
-};
-```
-
-</TabItem>
-<TabItem value="Valid" label="Valid">
-
-```rust
-use yew::html;
-
-// 修正：使用 HTML 空標籤包裹
-html! {
-    <>
-        <div></div>
-        <p></p>
-    </>
 };
 ```
 
-</TabItem>
-</Tabs>
-
 更多關於 Yew 和 HTML 的內容請參考[更多 HTML](concepts/html/introduction.mdx)。
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx
index 6a99e9141c9..7ca775a2a8a 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/function-components/properties.mdx
@@ -58,7 +58,7 @@ pub struct Props {
 
 #[component]
 fn HelloWorld(&Props { is_loading }: &Props) -> Html {
-    html! { <>{"Am I loading? - "}{is_loading}</> }
+    html! { {"Am I loading? - "}{is_loading} }
 }
 
 // 然後提供屬性
@@ -163,7 +163,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name} </>}
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -207,7 +207,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name}</> }
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -256,7 +256,7 @@ fn Hello(&Props { is_loading, ref name }: &Props) -> Html {
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{"Hello "}{name}</> }
+        html! { {"Hello "}{name} }
     }
 }
 
@@ -293,7 +293,7 @@ fn Greetings(
     if is_loading {
         html! { "Loading" }
     } else {
-        html! { <>{message}{" "}{name}</> }
+        html! { {message}{" "}{name} }
     }
 }
 
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/components.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/components.mdx
index 4fef8e39e21..50f9a7ce869 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/components.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/components.mdx
@@ -27,7 +27,7 @@ struct Props {
 fn MyComponentWithProps(props: &Props) -> Html {
     let Props { user_first_name, user_last_name } = props;
     html! {
-        <>{"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}</>
+        {"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}
     }
 }
 
@@ -37,19 +37,17 @@ let props = Props {
 };
 
 html!{
-    <>
-        // 沒有屬性
-        <MyComponent />
+    // 沒有屬性
+    <MyComponent />
 
-        // 使用屬性
-        <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />
+    // 使用屬性
+    <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />
 
-        // 一次提供所有屬性
-        <MyComponentWithProps ..props.clone() />
+    // 一次提供所有屬性
+    <MyComponentWithProps ..props.clone() />
 
-        // 使用變數中的屬性，並覆寫特定值
-        <MyComponentWithProps user_last_name="Elm" ..props />
-    </>
+    // 使用變數中的屬性，並覆寫特定值
+    <MyComponentWithProps user_last_name="Elm" ..props />
 };
 ```
 
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx
index 13d6508ff9c..b758ffd7b09 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/conditional-rendering.mdx
@@ -1,6 +1,6 @@
 ---
 title: '條件渲染'
-description: '在 html 中有條件地渲染節點！ '
+description: '在 html! 中使用 if、if let 和 match 進行條件渲染'
 ---
 
 import Tabs from '@theme/Tabs'
@@ -69,5 +69,90 @@ html! {
 };
 ```
 
+  </TabItem>
+  <TabItem value="if-let-bindings" label="let 綁定">
+
+大括號主體支援在 html 子節點前使用 `let` 綁定，以及多個子節點：
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    if condition {
+        let label = format!("count: {count}");
+        <h2>{"Result"}</h2>
+        <span>{label}</span>
+    } else {
+        "nothing"
+    }
+};
+```
+
+`let` 綁定必須出現在所有 html 子節點之前，不能與它們交錯。
+
   </TabItem>
 </Tabs>
+
+## Match 區塊
+
+`match` 運算式可以直接在 `html!` 中使用，與 `if`/`else` 遵循相同的模式：
+
+<Tabs>
+  <TabItem value="match" label="match">
+
+```rust
+use yew::prelude::*;
+
+let value: Option<String> = Some("hello".into());
+
+html! {
+    match value {
+        Some(text) => <p>{text}</p>,
+        None => <p>{"Nothing here"}</p>,
+    }
+};
+```
+
+  </TabItem>
+  <TabItem value="match-guards" label="if 守衛">
+
+```rust
+use yew::prelude::*;
+
+let value: i32 = 42;
+
+html! {
+    match value {
+        x if x > 10 => <p>{"Big"}</p>,
+        x if x > 0 => <p>{"Small"}</p>,
+        _ => <p>{"Non-positive"}</p>,
+    }
+};
+```
+
+  </TabItem>
+  <TabItem value="match-let" label="let 綁定">
+
+大括號 arm 主體支援 `let` 綁定和多個子節點：
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    match data {
+        Some(item) => {
+            let label = format!("Item: {}", item.name);
+            let class = if item.important { "highlight" } else { "normal" };
+            <p class={class}>{label}</p>
+        }
+        None => <p>{"No data"}</p>,
+    }
+};
+```
+
+  </TabItem>
+</Tabs>
+
+單元素 arm 可以省略大括號。含多個子節點或 `let` 綁定的 arm 需要大括號。
+
+`match` 支援所有標準 Rust 模式，包括 OR 模式（`A | B`）、解構和 `if` 守衛。窮舉性由 Rust 編譯器檢查。
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/events.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/events.mdx
index 4a756cbd1c0..f0d8de27871 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/events.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/events.mdx
@@ -132,24 +132,22 @@ fn MyComponent() -> Html {
     });
 
     html! {
-        <>
-            <label for="cautious-input">
-                { "My cautious input:" }
-                <input onchange={on_cautious_change}
-                    id="cautious-input"
-                    type="text"
-                    value={input_value.clone()}
-                />
-            </label>
-            <label for="dangerous-input">
-                { "My dangerous input:" }
-                <input onchange={on_dangerous_change}
-                    id="dangerous-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="cautious-input">
+            { "My cautious input:" }
+            <input onchange={on_cautious_change}
+                id="cautious-input"
+                type="text"
+                value={input_value.clone()}
+            />
+        </label>
+        <label for="dangerous-input">
+            { "My dangerous input:" }
+            <input onchange={on_dangerous_change}
+                id="dangerous-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -207,24 +205,22 @@ fn MyComponent() -> Html {
     });
 
     html! {
-        <>
-            <label for="cautious-input">
-                { "My cautious input:" }
-                <input onchange={on_cautious_change}
-                    id="cautious-input"
-                    type="text"
-                    value={input_value.clone()}
-                />
-            </label>
-            <label for="dangerous-input">
-                { "My dangerous input:" }
-                <input onchange={on_dangerous_change}
-                    id="dangerous-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="cautious-input">
+            { "My cautious input:" }
+            <input onchange={on_cautious_change}
+                id="cautious-input"
+                type="text"
+                value={input_value.clone()}
+            />
+        </label>
+        <label for="dangerous-input">
+            { "My dangerous input:" }
+            <input onchange={on_dangerous_change}
+                id="dangerous-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -261,18 +257,16 @@ fn MyComponent() -> Html {
     };
 
     html! {
-        <>
-            <label for="my-input">
-                { "My input:" }
-                //highlight-next-line
-                <input ref={input_node_ref}
-                    {onchange}
-                    id="my-input"
-                    type="text"
-                    value={input_value}
-                />
-            </label>
-        </>
+        <label for="my-input">
+            { "My input:" }
+            //highlight-next-line
+            <input ref={input_node_ref}
+                {onchange}
+                id="my-input"
+                type="text"
+                value={input_value}
+            />
+        </label>
     }
 }
 ```
@@ -303,16 +297,14 @@ fn MyComponent() -> Html {
     //highlight-end
 
     html! {
-        <>
-            <label for="my-input">
-                { "My input:" }
-                <input ref={input_node_ref}
-                    {onchange}
-                    id="my-input"
-                    type="text"
-                />
-            </label>
-        </>
+        <label for="my-input">
+            { "My input:" }
+            <input ref={input_node_ref}
+                {onchange}
+                id="my-input"
+                type="text"
+            />
+        </label>
     }
 }
 ```
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx
index fc7349790ec..3e31973ce64 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/fragments.mdx
@@ -2,41 +2,32 @@
 title: '空標籤 (Fragments)'
 ---
 
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
-
-`html!` 巨集總是需要一個根節點。為了繞過這個限制，您可以使用一個“空標籤”（也稱為“fragments”）。
-
-<Tabs>
-<TabItem value="Valid" label="Valid">
+`html!` 巨集可以直接接受多個根節點。在根層級**不需要**使用 fragment 包裝 (`<>...</>`)：
 
 ```rust
 use yew::prelude::*;
 
 html! {
-    <>
-        <div></div>
-        <p></p>
-    </>
+    <div></div>
+    <p></p>
 };
-
 ```
 
-</TabItem>
+## 帶 key 的 fragment
 
-<TabItem value="Invalid" label="Invalid">
+fragment 語法僅剩的合理用途是**帶 key 的** fragment。
 
-```rust, compile_fail
+```rust
 use yew::prelude::*;
 
-// 錯誤：只允許一個根 HTML 元素
-
 html! {
-    <div></div>
-    <p></p>
+    // .. siblings ..
+    <key="group-a">
+        <span>{"a1"}</span>
+        <span>{"a2"}</span>
+    </>
+    // .. siblings ..
 };
-
 ```
 
-</TabItem>
-</Tabs>
+在某些情況下，帶 key 的 fragment 有助於差分效能和節點持久化。
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx
index 804c472e9b1..db4a61cb378 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/introduction.mdx
@@ -12,10 +12,9 @@ import TabItem from '@theme/TabItem'
 
 **重要提示**
 
-1. `html! {}` 巨集只能接受一個根HTML 節點（您可以透過使用[fragments](./fragments.mdx) 或[iterators](./../html/lists.mdx) 來規避這一點）
-2. 空的 `html! {}` 呼叫是有效的，不會渲染任何內容
-3. 字面量必須永遠用引號引起來並用大括號括起來：`html! { <p>{ "Hello, World" }</p> }`
-4. `html!` 巨集會將所有標籤名稱轉換為小寫。若要使用大寫字元（某些SVG 元素所需的字元）請使用[動態標籤名稱](concepts/html/elements.mdx#dynamic-tag-names)：`html! { <@{"myTag"}>< /@> }`
+1. `html!` 巨集可以接受任意數量的根節點，包括零個。空的 `html! {}` 呼叫是有效的，不會渲染任何內容。
+2. 字面量必須永遠用引號引起來並用大括號括起來：`html! { <p>{ "Hello, World" }</p> }`
+3. `html!` 巨集會將所有標籤名稱轉換為小寫。若要使用大寫字元（某些SVG 元素所需的字元）請使用[動態標籤名稱](concepts/html/elements.mdx#dynamic-tag-names)：`html! { <@{"myTag"}>< /@> }`
 
 :::note
 `html!` 巨集可能會達到編譯器的預設遞歸限制。如果遇到編譯錯誤，請在 crate 根目錄中新增類似 `#![recursion_limit="1024"]` 的屬性以解決問題。
@@ -204,7 +203,7 @@ html! { <div { String::from("hx-on:click") }={ "alert('Clicked!')" } /> };
 
 ## 條件渲染
 
-可以透過使用 Rust 的條件結構來條件性地渲染標記。目前只支援 `if` 和 `if let`。
+可以使用 Rust 的 `if`、`if let` 和 `match` 運算式直接在 `html!` 中條件性地渲染標記。
 
 ```rust
 use yew::prelude::*;
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx
index 7896d561948..b2114e57bbc 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/lists.mdx
@@ -23,6 +23,20 @@ html! {
         <span>{i}</span>
     }
 };
+```
+
+`for` 迴圈主體也支援在 html 子節點前使用 `let` 綁定：
+
+```rust , ignore
+use yew::prelude::*;
+
+html! {
+    for item in items {
+        let label = format!("{}: {}", item.id, item.name);
+        let class = if item.active { "active" } else { "inactive" };
+        <div class={class}>{label}</div>
+    }
+};
 ```
 
   </TabItem>
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx
index cafb4c7857f..ec9d0844f05 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/html/literals-and-expressions.mdx
@@ -17,17 +17,26 @@ use yew::prelude::*;
 
 let text = "lorem ipsum";
 html!{
-    <>
-        <div>{text}</div>
-        <div>{"dolor sit"}</div>
-        <span>{42}</span>
-    </>
+    <div>{text}</div>
+    <div>{"dolor sit"}</div>
+    <span>{42}</span>
 };
 ```
 
 ## 表達式
 
-您可以使用 `{}` 區塊在 HTML 中插入表達式，只要它們解析為 `Html`
+您可以使用 `{}` 區塊在 HTML 中插入表達式，只要它們解析為 `Html`：
+
+```rust
+use yew::prelude::*;
+
+let name = "Yew";
+html! {
+  <div>{ format!("Hello, {name}!") }</div>
+};
+```
+
+對於條件渲染，請直接在 `html!` 中使用 `if`/`else` 和 `match`，而不是在表達式區塊中巢狀 `html!` 呼叫：
 
 ```rust
 use yew::prelude::*;
@@ -36,20 +45,14 @@ let show_link = true;
 
 html! {
   <div>
-    {
-      if show_link {
-        html! {
-          <a href="https://example.com">{"Link"}</a>
-        }
-      } else {
-        html! {}
-      }
+    if show_link {
+      <a href="https://example.com">{"Link"}</a>
     }
   </div>
 };
 ```
 
-通常將這些表達式提取到函數或閉包中以優化可讀性是有意義的：
+通常將複雜邏輯提取到函式或閉包中是有意義的：
 
 ```rust
 use yew::prelude::*;
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/router.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/router.mdx
index d3912ca93ca..4b3ab2be77f 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/router.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/concepts/router.mdx
@@ -210,9 +210,7 @@ pub fn my_component() -> Html {
     let onclick = Callback::from(move |_| navigator.push(&Route::Home));
 
     html! {
-        <>
-            <button {onclick}>{"Click to go home"}</button>
-        </>
+        <button {onclick}>{"Click to go home"}</button>
     }
 }
 ```
@@ -257,11 +255,9 @@ pub fn nav_items() -> Html {
     };
 
     html! {
-        <>
-            {go_home_button}
-            {go_to_first_post_button}
-            {go_to_secure_button}
-        </>
+        {go_home_button}
+        {go_to_first_post_button}
+        {go_to_secure_button}
     }
 }
 ```
diff --git a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/tutorial/index.mdx b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/tutorial/index.mdx
index efcbde363f7..01277965e72 100644
--- a/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/tutorial/index.mdx
+++ b/website/i18n/zh-Hant/docusaurus-plugin-content-docs/current/tutorial/index.mdx
@@ -143,7 +143,7 @@ Yew 利用了 Rust 的過程宏，並為我們提供了一種類似於 JSX（Jav
 由於我們已經對我們的網站長什麼樣子有了一個很好的想法，我們可以簡單地將我們的草稿轉換為與 `html!` 相容的表示。如果您習慣於編寫簡單的 HTML，那麼您在 `html!` 中編寫標記時應該沒有問題。要注意的是，這個巨集與 HTML 有一些不同之處：
 
 1. 表達式必須用大括號（`{ }`）括起來
-2. 只能有一個根節點。如果您想要在不將它們包裝在容器中的情況下擁有多個元素，可以使用空標籤/片段（`<> ... </>`）
+2. 可以傳回任意數量的根節點，它們會被自動組合。
 3. 元素必須正確關閉。
 
 我們想要建立一個佈局，原始 HTML 如下：
@@ -170,20 +170,18 @@ Yew 利用了 Rust 的過程宏，並為我們提供了一種類似於 JSX（Jav
 
 ```rust ,ignore
 html! {
-    <>
-        <h1>{ "RustConf Explorer" }</h1>
-        <div>
-            <h3>{"Videos to watch"}</h3>
-            <p>{ "John Doe: Building and breaking things" }</p>
-            <p>{ "Jane Smith: The development process" }</p>
-            <p>{ "Matt Miller: The Web 7.0" }</p>
-            <p>{ "Tom Jerry: Mouseless development" }</p>
-        </div>
-        <div>
-            <h3>{ "John Doe: Building and breaking things" }</h3>
-            <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
-        </div>
-    </>
+    <h1>{ "RustConf Explorer" }</h1>
+    <div>
+        <h3>{"Videos to watch"}</h3>
+        <p>{ "John Doe: Building and breaking things" }</p>
+        <p>{ "Jane Smith: The development process" }</p>
+        <p>{ "Matt Miller: The Web 7.0" }</p>
+        <p>{ "Tom Jerry: Mouseless development" }</p>
+    </div>
+    <div>
+        <h3>{ "John Doe: Building and breaking things" }</h3>
+        <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
+    </div>
 }
 ```
 
@@ -253,20 +251,18 @@ let videos = videos.iter().map(|video| html! {
 
 最後，我們需要用從資料建立的 `Html` 取代硬編碼的影片清單：
 
-```rust ,ignore {6-10}
+```rust ,ignore {5-9}
 html! {
-    <>
-        <h1>{ "RustConf Explorer" }</h1>
-        <div>
-            <h3>{ "Videos to watch" }</h3>
--           <p>{ "John Doe: Building and breaking things" }</p>
--           <p>{ "Jane Smith: The development process" }</p>
--           <p>{ "Matt Miller: The Web 7.0" }</p>
--           <p>{ "Tom Jerry: Mouseless development" }</p>
-+           { videos }
-        </div>
-        // ...
-    </>
+    <h1>{ "RustConf Explorer" }</h1>
+    <div>
+        <h3>{ "Videos to watch" }</h3>
+-       <p>{ "John Doe: Building and breaking things" }</p>
+-       <p>{ "Jane Smith: The development process" }</p>
+-       <p>{ "Matt Miller: The Web 7.0" }</p>
+-       <p>{ "Tom Jerry: Mouseless development" }</p>
++       { videos }
+    </div>
+    // ...
 }
 ```
 
@@ -326,7 +322,7 @@ struct Video {
 
 現在，我們可以更新我們的 `App` 元件以使用 `VideosList` 元件。
 
-```rust ,ignore {4-7,13-14}
+```rust ,ignore {4-7,12-13}
 #[component(App)]
 fn app() -> Html {
     // ...
@@ -335,15 +331,13 @@ fn app() -> Html {
 -    }).collect::<Html>();
 -
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{"Videos to watch"}</h3>
--               { videos }
-+               <VideosList videos={videos} />
-            </div>
-            // ...
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{"Videos to watch"}</h3>
+-           { videos }
++           <VideosList videos={videos} />
+        </div>
+        // ...
     }
 }
 ```
@@ -428,19 +422,17 @@ fn app() -> Html {
 +    });
 
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{"Videos to watch"}</h3>
--               <VideosList videos={videos} />
-+               <VideosList videos={videos} on_click={on_video_select.clone()} />
-            </div>
-+            { for details }
--            <div>
--                <h3>{ "John Doe: Building and breaking things" }</h3>
--                <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
--            </div>
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{"Videos to watch"}</h3>
+-           <VideosList videos={videos} />
++           <VideosList videos={videos} on_click={on_video_select.clone()} />
+        </div>
++       { for details }
+-       <div>
+-           <h3>{ "John Doe: Building and breaking things" }</h3>
+-           <img src="https://placehold.co/640x360.png?text=Video+Player+Placeholder" alt="video thumbnail" />
+-       </div>
     }
 }
 ```
@@ -527,15 +519,13 @@ fn app() -> Html {
     // ...
 
     html! {
-        <>
-            <h1>{ "RustConf Explorer" }</h1>
-            <div>
-                <h3>{"Videos to watch"}</h3>
--                <VideosList videos={videos} on_click={on_video_select.clone()} />
-+                <VideosList videos={(*videos).clone()} on_click={on_video_select.clone()} />
-            </div>
-            { for details }
-        </>
+        <h1>{ "RustConf Explorer" }</h1>
+        <div>
+            <h3>{"Videos to watch"}</h3>
+-           <VideosList videos={videos} on_click={on_video_select.clone()} />
++           <VideosList videos={(*videos).clone()} on_click={on_video_select.clone()} />
+        </div>
+        { for details }
     }
 }
 ```