Void HTML Elements

element_name(**attributes)

class MyView < Phlex::HTML
  def view_template
    # Images
    img(src: "/logo.png", alt: "Company Logo")
    
    # Line breaks
    p do
      plain "First line"
      br
      plain "Second line"
    end
    
    # Form inputs
    input(type: "text", name: "username", placeholder: "Enter username")
    input(type: "email", name: "email", required: true)
  end
end

# Document metadata
head do
  meta(charset: "utf-8")
  meta(name: "viewport", content: "width=device-width, initial-scale=1")
  link(rel: "stylesheet", href: "/styles.css")
end

# Horizontal rule
hr(class: "my-4")

# Base URL
base(href: "https://example.com/")

img(
  src: "/photos/product.jpg",
  alt: "Product photo",
  width: 800,
  height: 600,
  loading: "lazy"
)

form do
  input(type: "text", name: "username", placeholder: "Username", required: true)
  input(type: "password", name: "password", placeholder: "Password")
  input(type: "submit", value: "Login")
end

head do
  meta(charset: "utf-8")
  meta(name: "viewport", content: "width=device-width, initial-scale=1")
  meta(name: "description", content: "Page description")
  link(rel: "stylesheet", href: "/app.css")
  link(rel: "icon", href: "/favicon.ico")
end

# Picture with sources
picture do
  source(srcset: "/image.webp", type: "image/webp")
  source(srcset: "/image.jpg", type: "image/jpeg")
  img(src: "/image.jpg", alt: "Fallback")
end

# Video with track
video(controls: true) do
  source(src: "/video.mp4", type: "video/mp4")
  track(kind: "subtitles", src: "/subtitles.vtt", srclang: "en")
end

table do
  colgroup do
    col(style: "width: 30%")
    col(style: "width: 70%")
  end
  # ... table content
end

# INCORRECT - Will not work
img(src: "/photo.jpg") { "Alt text" }

# CORRECT - Use attributes only
img(src: "/photo.jpg", alt: "Alt text")