HTML Elements

rsx! {
    base { href: "https://example.com/", target: "_blank" }
}

rsx! {
    head {
        title { "My App" }
        meta { charset: "utf-8" }
    }
}

rsx! {
    link { 
        rel: "stylesheet", 
        href: "/styles.css",
        r#type: "text/css"
    }
}

rsx! {
    meta { charset: "utf-8" }
    meta { name: "viewport", content: "width=device-width, initial-scale=1" }
    meta { property: "og:title", content: "My App" }
}

rsx! {
    style { r#type: "text/css", ".my-class {{ color: red; }}" }
}

rsx! {
    title { "My Page Title" }
}

rsx! {
    body {
        h1 { "Welcome" }
        p { "Content here" }
    }
}

rsx! {
    address {
        "Contact us at: "
        a { href: "mailto:[email protected]", "[email protected]" }
    }
}

rsx! {
    article {
        h2 { "Article Title" }
        p { "Article content..." }
    }
}

rsx! {
    aside {
        h3 { "Related Links" }
        ul { li { "Link 1" } }
    }
}

rsx! {
    footer {
        p { "© 2024 My Company" }
    }
}

rsx! {
    header {
        h1 { "Site Title" }
        nav { /* navigation */ }
    }
}

rsx! {
    h1 { "Main Heading" }
    h2 { "Subheading" }
    h3 { "Sub-subheading" }
}

rsx! {
    main {
        article { "Main content" }
    }
}

rsx! {
    nav {
        a { href: "/home", "Home" }
        a { href: "/about", "About" }
    }
}

rsx! {
    section {
        h2 { "Section Title" }
        p { "Section content" }
    }
}

rsx! {
    blockquote { cite: "https://example.com", "Quote text" }
}

rsx! {
    div { class: "container",
        p { "Content inside div" }
    }
}

rsx! {
    dl {
        dt { "Term" }
        dd { "Definition" }
    }
}

rsx! {
    figure {
        img { src: "/image.jpg" }
        figcaption { "Image caption" }
    }
}

rsx! {
    p { "Section 1" }
    hr {}
    p { "Section 2" }
}

rsx! {
    ul {
        li { "Item 1" }
        li { "Item 2" }
    }
}

rsx! {
    ol { reversed: true, start: 10,
        li { "First" }
        li { "Second" }
    }
}

rsx! {
    p { "This is a paragraph." }
}

rsx! {
    pre { "Preformatted\n  text" }
}

rsx! {
    ul {
        li { "Item 1" }
        li { "Item 2" }
    }
}

rsx! {
    a { href: "https://example.com", target: "_blank", "Link text" }
}

rsx! {
    abbr { title: "HyperText Markup Language", "HTML" }
}

rsx! {
    b { "Bold text" }
}

rsx! {
    p {
        "Line 1"
        br {}
        "Line 2"
    }
}

rsx! {
    code { "let x = 42;" }
}

rsx! {
    em { "Emphasized text" }
}

rsx! {
    i { "Italic text" }
}

rsx! {
    kbd { "Ctrl" } "+" kbd { "C" }
}

rsx! {
    mark { "Highlighted text" }
}

rsx! {
    small { "Fine print" }
}

rsx! {
    span { class: "highlight", "Highlighted" }
}

rsx! {
    strong { "Important text" }
}

rsx! {
    time { datetime: "2024-03-04", "March 4, 2024" }
}

rsx! {
    audio { controls: true, src: "/audio.mp3" }
}

rsx! {
    img { 
        src: "/image.jpg", 
        alt: "Description",
        width: 300,
        height: 200
    }
}

rsx! {
    video { 
        controls: true,
        width: 640,
        height: 360,
        src: "/video.mp4"
    }
}

rsx! {
    iframe { 
        src: "https://example.com",
        width: 800,
        height: 600,
        allow: "fullscreen"
    }
}

rsx! {
    canvas { width: 800, height: 600 }
}

rsx! {
    script { src: "/script.js", r#async: true }
}

rsx! {
    table {
        thead {
            tr {
                th { "Header 1" }
                th { "Header 2" }
            }
        }
        tbody {
            tr {
                td { "Cell 1" }
                td { "Cell 2" }
            }
        }
    }
}

rsx! {
    th { scope: "col", "Header" }
}

rsx! {
    td { colspan: 2, "Cell content" }
}

rsx! {
    form { 
        action: "/submit",
        method: "post",
        input { r#type: "text", name: "username" }
        button { r#type: "submit", "Submit" }
    }
}

rsx! {
    button { 
        r#type: "button",
        onclick: |_| println!("Clicked!"),
        "Click me"
    }
}

rsx! {
    input {
        r#type: "text",
        name: "username",
        placeholder: "Enter username",
        value: "{username}",
        oninput: move |e| username.set(e.value())
    }
}

rsx! {
    label { r#for: "username", "Username:" }
    input { id: "username", r#type: "text" }
}

rsx! {
    select { 
        name: "choice",
        onchange: move |e| selection.set(e.value()),
        option { value: "1", "Option 1" }
        option { value: "2", "Option 2" }
    }
}

rsx! {
    option { value: "1", selected: true, "Choice 1" }
}

rsx! {
    textarea {
        name: "message",
        rows: 5,
        cols: 40,
        placeholder: "Enter your message",
        value: "{message}",
        oninput: move |e| message.set(e.value())
    }
}

rsx! {
    fieldset {
        legend { "Personal Information" }
        input { r#type: "text", name: "name" }
    }
}

rsx! {
    progress { value: 70, max: 100 }
}

rsx! {
    details { open: true,
        summary { "Click to expand" }
        p { "Hidden content" }
    }
}

rsx! {
    dialog { open: true,
        p { "This is a dialog" }
        button { "Close" }
    }
}

rsx! {
    slot { name: "content" }
}

rsx! {
    svg { 
        width: "100",
        height: "100",
        circle { cx: "50", cy: "50", r: "40", fill: "red" }
    }
}

rsx! {
    element_name {
        // Attributes first
        attribute_name: "value",
        another_attribute: true,
        
        // Then children
        "Text content"
        child_element {}
    }
}