From 4d79279f42d8e137e8fa8efb62d0818092f96799 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Tue, 8 Jun 2021 21:13:52 +0530
Subject: [PATCH 1/2] Add some content

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 documentation/UI/index.md               |  3 +++
 documentation/UI/render-dom-elements.md | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 documentation/UI/index.md
 create mode 100644 documentation/UI/render-dom-elements.md

diff --git a/documentation/UI/index.md b/documentation/UI/index.md
new file mode 100644
index 00000000..725c1a3d
--- /dev/null
+++ b/documentation/UI/index.md
@@ -0,0 +1,3 @@
+# Index for UI code
+
+1. [Rendering DOM elements](./render-dom-elements.md)
diff --git a/documentation/UI/render-dom-elements.md b/documentation/UI/render-dom-elements.md
new file mode 100644
index 00000000..95238bbe
--- /dev/null
+++ b/documentation/UI/render-dom-elements.md
@@ -0,0 +1,18 @@
+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.
+
+Although syntactically similar, they are not functionally equivalent.  
+Primarily `tag` **does not support** bindings nor event handlers.
+
+```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()});
+    }
+```

From 9e9099f5d0e5b192187eae7c6c65d7d052c62bd2 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <rmidhunsuresh@gmail.com>
Date: Tue, 8 Jun 2021 23:05:33 +0530
Subject: [PATCH 2/2] Restructure and add syntax

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
---
 documentation/UI/render-dom-elements.md | 43 +++++++++++++++++++++----
 1 file changed, 36 insertions(+), 7 deletions(-)

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
+```
+
+<br />
+
+eg:
+Here is an example HTML segment followed with the code to create it in Hydrogen.
+```html
+<section class="main-section">
+    <h1>Demo</h1>
+    <button class="btn_cool">Click me</button>
+</section>
+```
+```js
+tag.section({className: "main-section"},[
+    tag.h1("Demo"), 
+    tag.button({className:"btn_cool"}, "Click me")
+    ]);
+```
+<br />
+
+**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()});