There are two sets of HTML/XML combinators in WebSharper:

1. Client-side - in IntelliFactory.WebSharper.Html - used to represent client-side, dynamic markup.

   Example (from the Hello World online sample):

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   

   namespace Samples
   
   open IntelliFactory.WebSharper
   open IntelliFactory.WebSharper.Html
   
   module HelloWorld =
   
       [<JavaScript>]
       let Main () =
           let welcome = P [Text "Welcome"]
           Div [
               welcome
               Button [Text "Click Me!"]
               |>! OnClick (fun e args ->
                   welcome.Text <- "Hello, world!")
           ]
   
   type HelloWorldViewer() =
       inherit Web.Control()
   
       [<JavaScript>]
       override this.Body = HelloWorld.Main () :> Html.IPagelet

   Here, Div, P, and Button are all client-side combinators. Note, that to attach event handlers, you must have client-side DOM nodes to attach to - so you will need to define a Web.Control type to bridge between server and client markup if you are using sitelets to model your application.

2. Server-side - in IntelliFactory.Html - used to represent server-side, static markup that is output by sitelets.

   Example (assuming that you have Skin.WithTemplate defined, see [link:fpish.net] for details):

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   

   module Site =
       open IntelliFactory.Html
       open IntelliFactory.WebSharper
       open IntelliFactory.WebSharper.Sitelets
   
       let ( => ) text url =
           A [HRef url] -< [Text text]
   
       let Links (ctx: Context<Action>) =
           UL [
               LI ["Home" => ctx.Link Home]
               LI ["About" => ctx.Link About]
           ]
   
       let HomePage =
           Skin.WithTemplate "HomePage" <| fun ctx ->
               [
                   Div [Text "HOME"]
                   Links ctx
               ]
       ...

   Here, Div, UL, LI and A are all server-side combinators - used to construct HomePage.