Mad.Html

Compose HTML structures with C#.


H Factory

The H class is a factory class that makes it easier to build html tags. Examples: H.B("some bold text") & H.Div().AddElement(H.Img("http://..."))


Getting Started

Short example of some commonly used compositions.

A story

This is a awesome story.

Read More...
        H.Div()
            .WithId("story-45")
            .AddClass("my-styory")
            .AddElement(H.H4("A story"))
            .AddElement(H.P("This is a awesome story."))
            .AddElement(H.A("#", "Read More..."));
Output +-
        <div id="story-45" class="my-styory">
            <h4>A story</h4>
            <p>This is a awesome story.</p>
            <a href="#">Read More...</a>
        </div>

Add Attributes

Show how to add attributes, pluss smome helper methods like AddStyle and AddClass

Some Text
        H.Span("Some Text")
            .WithId("span-99")
            .AddClass("my-span")
            .AddStyle("color", "red")
            .AddAttribute("my-attribute", "123")
Output +-
        <span id="span-99" class="my-span" style="color:red;" my-attribute="123">Some Text</span>

Custom Tags

If you want to create custome tags use the H.ValueTag("my-custome-tag") and H.EmptyTag("my-custome-tag").

        H.EmptyTag("my-empty-tag")
            .AddAttribute("some-attribute", "...");

        H.ValueTag("my-value-tag")
            .AddAttribute("some-attribute", "...")
            .AddElement(H.Span("..."));
Output +-
        <my-empty-tag some-attribute="..." />

        <my-value-tag some-attribute="...">
            <span>...</span>
        </my-value-tag>

Add If

The add if methods are usefull if you want to have conditional adds without breaking the composition.

        H.Div()
            .AddElementIf(true, H.B("some text"))
            .AddClassIf(true, "some-class"))
            .AddStyleIf(true, "color", "red")
            .AddElement("some text");

IHtmlElement

This is the core interface for composing Html code. Classes using this interface must implement ToString(). The ToString() is used for rendering the html.

HtmlEmptyTagSelf closing tags like <img />. These are tags that does not contain other elements.
HtmlValueTagTags like <div></div>. These can contain other tags like this. <div><b>Child tag</b></div>.
HtmlCommentA normal html comment like this <!-- a comment -->
HtmlTextIf you want to just add text without any html.
HtmlListAn array of elements. Has no markup. Renders the markup of it's items.
HtmlEmptyRenders nothing.
HtmlPageHelping class for building a full Html page.

HtmlAtribute

The HtmlAttribute is a simple class with a name and value property. Attributes can be added to the HtmlEmptyTag and HtmlValueTag.