HTML Builder

Unpretentious short and sweet HTML Builder.

Benefits

Valid (X)HTML
Programatically generate (X)HTML
Pure GO code
No need to transfer HTML files
No need to embed HTML files

Example

Section containing div container (Bootstrap) with a message "Hello world"

import "github.com/gouniverse/hb"
	
// 1. Create a div container with "Hello world" message
div := hb.NewDiv().Attr("class", "container").HTML("Hello world")

// 2. Create a section with padding of 40px containing the container
section := hb.NewSection().Attr("style","padding:40px;").AddChild(div)

// 3. Render to HTML to display
html := section.ToHTML()

!!! For more examples look below in the README

Installation

go get -u github.com/gouniverse/hb@v2.0.0

Implemented Tag Shortcuts

NewBorderLayout() - border layout with top, bottom, left, right and center slots (see example below how to use it)
NewButton() - shortcut for <button> tag
NewCode() - shortcut for <code> tag
NewDiv() - shortcut for <div> tag
NewForm() - shortcut for <form> tag
NewI() - shortcut for <i> tag
NewHTML(html string) - creates empty tag with the HTML content
NewHR() - shortcut for <hr> tag
NewHeading1() - shortcut for <h1> tag
NewHeading2() - shortcut for <h2> tag
NewHeading3() - shortcut for <h3> tag
NewHeading4() - shortcut for <h4> tag
NewHeading5() - shortcut for <h5> tag
NewHeading6() - shortcut for <h6> tag
NewHyperlink() - shortcut for <a> tag
NewImage() - shortcut for <img> tag
NewInput() - shortcut for <input> tag
NewLI() - shortcut for <li> tag
NewLabel() - shortcut for <label> tag
NewNav() - shortcut for <nav> tag
NewNavbar() - shortcut for <navbar> tag
NewOL() - shortcut for <ol> tag
NewOption() - shortcut for <option> tag
NewParagraph() - shortcut for <p> tag
NewPRE() - shortcut for <pre> tag
NewScript() - shortcut for <script> tag
NewScriptURL() - shortcut for <script src="{SRC}"> tag
NewSelect() - shortcut for <select> tag
NewSpan() - shortcut for <span> tag
NewStyle() - shortcut for <style> tag
NewStyleURL() - shortcut for <link> tag
NewSection() - shortcut for <section> tag
NewSub() - shortcut for <sub> tag
NewSup() - shortcut for <sup> tag
NewTag(tagName string) - for custom tags
NewTable() - shortcut for <table> tag
NewTBody() - shortcut for <tbody> tag
NewTD() - shortcut for <td> tag
NewTemplate() - shortcut for <template> tag
NewTextArea() - shortcut for <textarea> tag
NewTH() - shortcut for <th> tag
NewThead() - shortcut for <thead> tag
NewTR() - shortcut for <tr> tag
NewUL() - shortcut for <ul> tag
NewWebpage() - full HTML page withe head, body, meta, styles and scripts

Tag Methods

Attr(key, value string) - shortcut for SetAttribute
Attrs(map[string]string) - shortcut for setting multiple attributes
HTML(html string) - shortcut for AddHTML
AddChild(tag Tag) - adds a child element
AddChildren(tag []Tag) - adds an array of child elements
AddClass(className string) - adds a class name to the "class" attribute
AddHTML(html string) - adds HTML content to the element
Class(className string) - shortcut for AddClass
HasClass(className string) - checks if the class is available
ID(className string) - shortcut to add an "id" attribute
GetAttribute(key string) string
OnClick(js string) - shortcut to add an "onclick" attribute
SetAttribute(key, value string) - sets an attribute (i.e. id, class, etc)
ToHTML() string - outputs HTML code

Webpage Methods

AddChild(child *Tag)
SetFavicon(favicon string)
SetTitle(title string)
AddScripts(scripts []string)
AddScript(script string)
AddScriptURLs(scriptURLs []string)
AddScriptURL(scriptURL string)
AddStyle(style string)
AddStyles(styles []string)
AddStyleURL(styleURL string)
AddStyleURLs(styleURLs []string)

Border Layout Methods

AddTop(tag *Tag, alignHorizontal string, alignVertical string)
AddBottom(tag *Tag, alignHorizontal string, alignVertical string)
AddLeft(tag *Tag, alignHorizontal string, alignVertical string)
AddRight(tag *Tag, alignHorizontal string, alignVertical string)
AddCenter(tag *Tag, alignHorizontal string, alignVertical string)

Working with Raw Tags

tag := &Tag{
	TagName: "custom-element",
}
tag.toHTML()

Escaping HTML

For safeguarding HTML use the EscapeString method from the standard HTML library

Link with example: https://golang.org/pkg/html/#EscapeString

Examples

Border Layout

bl := NewBorderLayout()
	bl.AddTop(NewSpan().HTML("TOP"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
	bl.AddCenter(NewSpan().HTML("CENTER"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
	bl.AddBottom(NewSpan().HTML("BOTTOM"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
	bl.AddLeft(NewSpan().HTML("LEFT"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
	bl.AddRight(NewSpan().HTML("RIGHT"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
	blHtml := bl.ToHTML()

Bootstrap login form

// Elements for the form
header := hb.NewHeading3().HTML("Please sign in").Attr("style", "margin:0px;")
emailLabel := hb.NewLabel().HTML("E-mail Address")
emailInput := hb.NewInput().Class("form-control").Attr("name", "email").Attr("placeholder", "Enter e-mail address")
emailFormGroup := hb.NewDiv().Class("form-group").AddChild(emailLabel).AddChild(emailInput)
passwordLabel := hb.NewLabel().AddChild(hb.NewHTML("Password"))
passwordInput := hb.NewInput().Class("form-control").Attr("name", "password").Attr("type", "password").Attr("placeholder", "Enter password")
passwordFormGroup := hb.NewDiv().Class("form-group").AddChild(passwordLabel).AddChild(passwordInput)
buttonLogin := hb.NewButton().Class("btn btn-lg btn-success btn-block").HTML("Login")
buttonRegister := hb.NewHyperlink().Class("btn btn-lg btn-info float-left").HTML("Register").Attr("href", "auth/register")
buttonForgotPassword := hb.NewHyperlink().Class("btn btn-lg btn-warning float-right").HTML("Forgot password?").Attr("href", "auth/password-restore")

// Add elements in a card
cardHeader := hb.NewDiv().Class("card-header").AddChild(header)
cardBody := hb.NewDiv().Class("card-body").AddChildren([]*hb.Tag{
	emailFormGroup,
	passwordFormGroup,
	buttonLogin,
})
cardFooter := hb.NewDiv().Class("card-footer").AddChildren([]*hb.Tag{
	buttonRegister,
	buttonForgotPassword,
})
card := hb.NewDiv().Class("card card-default").Attr("style", "margin:0 auto;max-width: 360px;")
card.AddChild(cardHeader).AddChild(cardBody).AddChild(cardFooter)

// Convert to HTML to display
html := card.ToHTML()

Result:

Webpage with title, favicon, Font Awesome icons 4.7.0, jQuery 3.2.1, and Bootstrap 4.5

// 1. Webpage Title
title := "Title"

// 2. Webpage Favicon
favicon := "data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAABNTU0AVKH/AOPj4wDExMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACIiAREQEREAIiIBERAREQAiIgIiICIiACIiAiIgIiIAMzMDMzAzMwAzMwMzMDMzACIiAiIgIiIAIiICIiAiIgAzMwMzMDMzADMzAzMwMzMAIiICIiAiIgAiIgIiICIiAAAAAAAAAAAAIiICIiAiIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"

// 3. Webpage
webpage := NewWebpage().SetTitle(title).SetFavicon(favicon).AddStyleURLs([]string{
		"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
		"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css",
	}).AddScriptURLs([]string{
		"https://code.jquery.com/jquery-3.2.1.min.js",
		"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js",
	}).AddStyle(`html,body{height:100%;font-family: Ubuntu, sans-serif;}`).AddChild(NewDiv().HTML("Hello"))

Wrap webpage in a function to be reused as a master template

// Webpage returns the webpage template for the website
func Webpage(title, content string) *hb.Webpage {
	faviconImgCms := `data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAmzKzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEQEAAQERAAEAAQABAAEAAQABAQEBEQABAAEREQEAAAERARARAREAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAAi6MAALu7AAC6owAAuC8AAIkjAAD//wAA//8AAP//AAD//wAA`
	webpage := hb.NewWebpage()
	webpage.SetTitle(title)
	webpage.SetFavicon(faviconImgCms)

	webpage.AddStyleURLs([]string{
		"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css",
	})
	webpage.AddScriptURLs([]string{
		"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js",
		"http://code.jquery.com/jquery-3.5.1.min.js",
		"https://unpkg.com/vue@next",
		"https://cdn.jsdelivr.net/npm/sweetalert2@9",
	})
	webpage.AddScripts([]string{})
	webpage.AddStyle(`html,body{height:100%;font-family: Ubuntu, sans-serif;}`)
	webpage.AddStyle(`body {
		font-family: "Nunito", sans-serif;
		font-size: 0.9rem;
		font-weight: 400;
		line-height: 1.6;
		color: #212529;
		text-align: left;
		background-color: #f8fafc;
	}`)
	webpage.AddChild(hb.NewHTML(content))
	return webpage
}

// Generate HTML
html := webpage("Home", "Hello world").ToHTML()

How to Add a Redirection?

webpage.Head.AddChild(hb.NewMeta().Attr("http-equiv", "refresh").Attr("content", "2; url = https://www.yahoo.com"))

Changelog

2022.01.07 - Added Attrs shortcut for setting multiple attributes

2021.07.30 - Added shortcut for <hr> tag

2021.03.20 - Renamed package name to hb to not conflict/confuse with the standard html package

2021.03.18 - Added shortcuts for <template> tag

2021.02.26 - Added shortcuts for <sub>, <sup> tags

2021.01.03 - Added example for webpage layout, and screenshot

2020.12.28 - Added shortcuts for <code>, <pre> tags, shortcuts sorted alphabetically

2020.12.27 - Added shortcuts for <table>, <thead>, <tbody>, <tr>, <th>, <td> tags

2020.12.26 - Fix for attribute escapes, added tests

2020.09.16 - Added shortcuts for <nav>, <navbar>, <ol>, <ul>, <li> tags

2020.06.16 - Initial commit

Aternatives

Stevelacy Daz (https://github.com/stevelacy/daz) | Last update: 24 Jun 2021
Extemplate (https://github.com/dannyvankooten/extemplate) | Last update: 15 Jun 2021
ThePlant HTMLGO (https://github.com/theplant/htmlgo) | Last update: 18 Sep 2021
Julvo HTMLGO (https://github.com/julvo/htmlgo) | Last update: 5 May 2020
Go Components (https://github.com/maragudk/gomponents)
Uberswe HTML (https://github.com/uberswe/html) | Last update: 24 Feb 2021
Forms from Structs (https://github.com/joncalhoun/form)
HTMLX (https://github.com/mdigger/htmlx) | Last update: 20 Jun 2021

Sinevia / hb