Documentation for Section

Author: robdmoore

docs/the-section.md

@@ -56,6 +56,19 @@ The start and end HTML of the Section are generated via the `BeginSection` and `
 
 ## Default usage
 
+# [Tag Helpers variant](#tab/default-section-th)
+
+In order to output a default instance of a Section you can use the `<form-section>` tag helper within a `<chameleon-form>`, e.g.:
+
+```cshtml
+<form-section heading="Heading">
+    @* Section fields go here *@
+</form-section>
+```
+
+
+# [HTML Helpers variant](#tab/default-section-hh)
+
 In order to get an instance of a `Section<TModel>` you can use the `BeginSection` method on the Form, e.g.
 
 ```cshtml
@@ -144,7 +157,29 @@ The `BeginSection` extension methods look like this:
         }
 ```
 
-From within a Section you can create [Fields](field.md) and you can also create nested sections using the `BeginSection` extension method off the Section:
+
+***
+
+You can extend the Section by adding [HTML attributes](html-attributes.md) to it.
+
+From within a Section you can create [Fields](field.md) and you can also create nested sections:
+
+# [Tag Helpers variant](#tab/nested-section-th)
+
+Using a nested `<form-section>` tag helper:
+
+```cshtml
+<form-section heading="Heading">
+    @* Fields... *@
+    <form-section heading="Inner Heading">
+    </form-section>
+    @* Fields... *@
+</form-section>
+```
+
+# [HTML Helpers variant](#tab/nested-section-hh)
+
+ Using the `BeginSection` extension method off the Section:
 
 ```cshtml
 @using (var s = f.BeginSection("Heading")) {
@@ -244,6 +279,8 @@ The `BeginSection` extension methods on Section look like this:
         }
 ```
 
+***
+
 ## Default HTML
 
 ### Begin HTML