diff --git a/documentation/UI/render-dom-elements.md b/documentation/UI/render-dom-elements.md
index 95238bbe..7bcf93e9 100644
--- a/documentation/UI/render-dom-elements.md
+++ b/documentation/UI/render-dom-elements.md
@@ -1,16 +1,45 @@
-There are two options to render DOM elements:
-- Use `tag` from `ui/general/html.js`
-- Use `TemplateBuilder` object (t) from the render function in the view.
+tldr; Use `tag` from `ui/general/html.js` to quickly create DOM elements.
+## Syntax
+---
+The general syntax is as follows:
+```js
+tag.tag_name({attribute1: value, attribute2: value, ...}, [child_elements]);
+```
+**tag_name** can be any one of the following:
+```
+ br, a, ol, ul, li, div, h1, h2, h3, h4, h5, h6,
+ p, strong, em, span, img, section, main, article, aside,
+ pre, button, time, input, textarea, label, form, progress, output, video
+```
+
+
+
+eg:
+Here is an example HTML segment followed with the code to create it in Hydrogen.
+```html
+
+```
+```js
+tag.section({className: "main-section"},[
+ tag.h1("Demo"),
+ tag.button({className:"btn_cool"}, "Click me")
+ ]);
+```
+
+
+**Note:** In views based on `TemplateView`, you will see `t` used instead of `tag`.
+`t` is is `TemplateBuilder` object passed to the render function in `TemplateView`.
Although syntactically similar, they are not functionally equivalent.
-Primarily `tag` **does not support** bindings nor event handlers.
+Primarily `t` **supports** bindings and event handlers while `tag` **does not**.
```js
// The onClick here wont work!!
tag.button({className:"awesome-btn", onClick: () => this.foo()});
-```
- For these functionalities always use the TemplateBuilder object that is passed as argument to the render method.
-```js
+
render(t, vm){
// The onClick works here.
t.button({className:"awesome-btn", onClick: () => this.foo()});