diff --git a/aio/content/examples/event-binding/src/app/app.component.html b/aio/content/examples/event-binding/src/app/app.component.html
index dea7f717206..ed3e816db2c 100644
--- a/aio/content/examples/event-binding/src/app/app.component.html
+++ b/aio/content/examples/event-binding/src/app/app.component.html
@@ -28,10 +28,7 @@
 <div class="group">
   <h3>Binding to a nested component</h3>
   <h4>Custom events with EventEmitter</h4>
-  <!-- #docregion event-binding-to-component -->
   <app-item-detail (deleteRequest)="deleteItem($event)" [item]="currentItem"></app-item-detail>
-    <!-- #enddocregion event-binding-to-component -->
-
 
   <h4>Click to see event target class:</h4>
 
diff --git a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html
index 67c31d78d5e..036bffb46f3 100644
--- a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html
+++ b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html
@@ -1,9 +1,7 @@
 <div class="detail">
   <p>This is the ItemDetailComponent</p>
-  <!-- #docregion line-through -->
   <img src="{{itemImageUrl}}" alt="{{item.name}}" [style.display]="displayNone">
   <span [style.text-decoration]="lineThrough">{{ item.name }}
   </span>
   <button type="button" (click)="delete()">Delete</button>
-  <!-- #enddocregion line-through -->
 </div>
diff --git a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts
index 1c1092bc547..f0a3b1696f6 100644
--- a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts
+++ b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.ts
@@ -15,7 +15,6 @@ export class ItemDetailComponent {
   displayNone = '';
   @Input() prefix = '';
 
-  // #docregion deleteRequest
   // This component makes a request but it can't actually delete a hero.
   @Output() deleteRequest = new EventEmitter<Item>();
 
@@ -24,6 +23,5 @@ export class ItemDetailComponent {
     this.displayNone = this.displayNone ? '' : 'none';
     this.lineThrough = this.lineThrough ? '' : 'line-through';
   }
-  // #enddocregion deleteRequest
 
 }
diff --git a/aio/content/examples/interpolation/src/app/app.component.html b/aio/content/examples/interpolation/src/app/app.component.html
index f9540c31d2a..4a765651470 100644
--- a/aio/content/examples/interpolation/src/app/app.component.html
+++ b/aio/content/examples/interpolation/src/app/app.component.html
@@ -16,16 +16,12 @@
 
     <h3>Evaluating template expressions </h3>
     <h4>Simple evaluation (to a string):</h4>
-    <!-- #docregion convert-string -->
     <!-- "The sum of 1 + 1 is 2" -->
     <p>The sum of 1 + 1 is {{1 + 1}}.</p>
-    <!-- #enddocregion convert-string -->
 
     <h4>Evaluates using a method (also evaluates to a string):</h4>
-    <!-- #docregion invoke-method -->
     <!-- "The sum of 1 + 1 is not 4" -->
     <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>
-    <!-- #enddocregion invoke-method -->
   </div>
 
   <hr />
diff --git a/aio/content/examples/property-binding/src/app/app.component.html b/aio/content/examples/property-binding/src/app/app.component.html
index 1737640384e..0c50825400e 100644
--- a/aio/content/examples/property-binding/src/app/app.component.html
+++ b/aio/content/examples/property-binding/src/app/app.component.html
@@ -46,27 +46,21 @@
   <hr />
 
   <h2>Property binding and interpolation</h2>
-  <!-- #docregion property-binding-interpolation -->
   <p><img alt="Interpolated item" src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
   <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <i>property bound</i> image.</p>
 
   <p><span>"{{interpolationTitle}}" is the <i>interpolated</i> title.</span></p>
   <p>"<span [innerHTML]="propertyTitle"></span>" is the <i>property bound</i> title.</p>
-  <!-- #enddocregion property-binding-interpolation -->
 
   <hr />
 
   <h2>Malicious content</h2>
 
-<!-- #docregion malicious-interpolated -->
   <p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p>
-<!-- #enddocregion malicious-interpolated -->
 
-<!-- #docregion malicious-content -->
   <!--
   Angular generates a warning for the following line as it sanitizes them
   WARNING: sanitizing HTML stripped some content (see https://g.co/ng/security#xss).
  -->
   <p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>
-<!-- #enddocregion malicious-content -->
 </div>
diff --git a/aio/content/examples/property-binding/src/app/app.component.ts b/aio/content/examples/property-binding/src/app/app.component.ts
index 5b58a8c6b3e..1d377de7a7f 100644
--- a/aio/content/examples/property-binding/src/app/app.component.ts
+++ b/aio/content/examples/property-binding/src/app/app.component.ts
@@ -13,9 +13,7 @@ export class AppComponent {
   // #docregion boolean
   isUnchanged = true;
   // #enddocregion boolean
-  // #docregion directive-property
   classes = 'special';
-  // #enddocregion directive-property
   // #docregion parent-data-type
   parentItem = 'lamp';
   // #enddocregion parent-data-type
@@ -30,7 +28,5 @@ export class AppComponent {
   interpolationTitle = 'Interpolation';
   propertyTitle = 'Property binding';
 
-  // #docregion malicious-content
   evilTitle = 'Template <script>alert("evil never sleeps")</script> Syntax';
-  // #enddocregion malicious-content
 }
diff --git a/aio/content/examples/template-reference-variables/src/app/app.component.html b/aio/content/examples/template-reference-variables/src/app/app.component.html
index ce46ff170c5..de6de41ec25 100644
--- a/aio/content/examples/template-reference-variables/src/app/app.component.html
+++ b/aio/content/examples/template-reference-variables/src/app/app.component.html
@@ -97,7 +97,5 @@ value of the input will have no effect. -->
 
 See the console output to see that when you declare the variable on an <code>ng-template</code>, the variable refers to a <code>TemplateRef</code> instance, which represents the template.
 
-<!-- #docregion template-ref -->
 <ng-template #ref3></ng-template>
 <button type="button" (click)="log(ref3)">Log type of #ref</button>
-<!-- #enddocregion template-ref -->
diff --git a/aio/content/guide/ajs-quick-reference.md b/aio/content/guide/ajs-quick-reference.md
index 226e5e2f912..be902739d2e 100644
--- a/aio/content/guide/ajs-quick-reference.md
+++ b/aio/content/guide/ajs-quick-reference.md
@@ -238,7 +238,7 @@ But now you can also encapsulate a style sheet within a specific component.
 [AioGuideArchitectureServicesAndDependencyInjection]: guide/architecture#services-and-dependency-injection "Services and dependency injection - Introduction to Angular concepts | Angular"
 
 [AioGuideAttributeBinding]: guide/attribute-binding "Attribute, class, and style bindings | Angular"
-[AioGuideAttributeBindingBindingToTheStyleAttribute]: guide/attribute-binding#binding-to-the-style-attribute "Binding to the style attribute - Attribute, class, and style bindings | Angular"
+[AioGuideAttributeBindingBindingToTheStyleAttribute]: guide/class-binding "Class and style binding | Angular"
 
 [AioGuideBuiltInDirectives]: guide/built-in-directives "Built-in directives | Angular"
 [AioGuideBuiltInDirectivesDisplayingAndUpdatingPropertiesWithNgmodel]: guide/built-in-directives#displaying-and-updating-properties-with-ngmodel "Displaying and updating properties with ngModel - Built-in directives | Angular"
diff --git a/aio/content/guide/attribute-binding.md b/aio/content/guide/attribute-binding.md
index 32608a0bf15..da7c722ed8d 100644
--- a/aio/content/guide/attribute-binding.md
+++ b/aio/content/guide/attribute-binding.md
@@ -67,6 +67,6 @@ For more information on how to bind to the `colSpan` property, see the [`colspan
 
 ## What’s next
 
-* [Class & Style Binding](class-binding.md)
+* [Class & Style Binding](guide/class-binding)
 
 @reviewed 2022-05-02
diff --git a/aio/content/guide/built-in-directives.md b/aio/content/guide/built-in-directives.md
index 29d646fe460..ddb83fd0d79 100644
--- a/aio/content/guide/built-in-directives.md
+++ b/aio/content/guide/built-in-directives.md
@@ -50,7 +50,7 @@ Add or remove multiple CSS classes simultaneously with `ngClass`.
 
 <div class="alert is-helpful">
 
-To add or remove a *single* class, use [class binding](guide/attribute-binding#class-binding) rather than `NgClass`.
+To add or remove a *single* class, use [class binding](guide/class-binding) rather than `NgClass`.
 
 </div>
 
diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md
index e355de47095..c3c75f2a629 100644
--- a/aio/content/guide/glossary.md
+++ b/aio/content/guide/glossary.md
@@ -239,8 +239,7 @@ Read about the following forms of binding of the [Template Syntax][AioGuideTempl
 *   [Property binding][AioGuidePropertyBinding]
 *   [Event binding][AioGuideEventBinding]
 *   [Attribute binding][AioGuideAttributeBinding]
-*   [Class binding][AioGuideAttributeBindingBindingToTheClassAttribute]
-*   [Style binding][AioGuideAttributeBindingBindingToTheStyleAttribute]
+*   [Class and style binding][AioGuideAttributeBindingBindingToTheClassAttribute]
 *   [Two-way data binding with ngModel][AioGuideBuiltInDirectivesDisplayingAndUpdatingPropertiesWithNgmodel]
 
 ## declarable
@@ -807,7 +806,8 @@ For an introduction and comparison of both forms approaches, see [Introduction t
 
 A TypeScript-like syntax that Angular evaluates within a [data binding][AioGuideGlossaryDataBinding].
 
-Read about how to write template expressions in the [template expressions][AioGuideInterpolationTemplateExpressions] section of the [Interpolation][AioGuideInterpolation] guide.
+<!--todo: have Alex review this -->
+<!-- Read about how to write template expressions in the [template expressions][AioGuideInterpolationTemplateExpressions] section of the [Interpolation][AioGuideInterpolation] guide. -->
 
 ## template reference variable
 
@@ -991,9 +991,8 @@ Learn more about zones in this [Brian Ford video][YoutubeWatchV3iqtmusceU].
 
 [AioGuideArchitectureServices]: guide/architecture-services "Introduction to services and dependency injection | Angular"
 
-[AioGuideAttributeBinding]: guide/attribute-binding "Attribute, class, and style bindings | Angular"
-[AioGuideAttributeBindingBindingToTheClassAttribute]: guide/attribute-binding#binding-to-the-class-attribute "Binding to the class attribute - Attribute, class, and style bindings | Angular"
-[AioGuideAttributeBindingBindingToTheStyleAttribute]: guide/attribute-binding#binding-to-the-style-attribute "Binding to the style attribute - Attribute, class, and style bindings | Angular"
+[AioGuideAttributeBinding]: guide/attribute-binding "Attribute binding | Angular"
+[AioGuideAttributeBindingBindingToTheClassAttribute]: guide/class-binding "Class and style binding | Angular"
 
 [AioGuideAttributeDirectives]: guide/attribute-directives "Attribute directives | Angular"
 
@@ -1120,7 +1119,7 @@ Learn more about zones in this [Brian Ford video][YoutubeWatchV3iqtmusceU].
 [AioGuideHierarchicalDependencyInjection]: guide/hierarchical-dependency-injection "Hierarchical injectors | Angular"
 
 [AioGuideInterpolation]: guide/interpolation "Text interpolation | Angular"
-[AioGuideInterpolationTemplateExpressions]: guide/interpolation#template-expressions "Template expressions - Text interpolation | Angular"
+<!-- [AioGuideInterpolationTemplateExpressions]: guide/interpolation#template-expressions "Template expressions - Text interpolation | Angular" -->
 
 [AioGuideNgmodules]: guide/ngmodules "NgModules | Angular"
 
diff --git a/aio/content/guide/interpolation.md b/aio/content/guide/interpolation.md
index b7b5fa3f578..183eae51c16 100644
--- a/aio/content/guide/interpolation.md
+++ b/aio/content/guide/interpolation.md
@@ -6,26 +6,23 @@
 * [Basics of templates](guide/glossary#template)
 * [Binding syntax](guide/binding-syntax)
 
-Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters.
+<!--todo: needs a level 2 heading for info below -->
+
+Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces `{{` and `}}` as delimiters.
 
 To illustrate how interpolation works, consider an Angular component that contains a currentCustomer variable:
 
-src/app/app.component.ts
-content_copy
-currentCustomer = 'Maria';
+<code-example path="interpolation/src/app/app.component.ts" region="customer"></code-example>
+
 Use interpolation to display the value of this variable in the corresponding component template:
 
-src/app/app.component.html
-content_copy
-<h3>Current customer: {{ currentCustomer }}</h3>
-Angular replaces currentCustomer with the string value of the corresponding component property. In this case, the value is Maria.
+<code-example path="interpolation/src/app/app.component.html" region="interpolation-example1"></code-example>
 
-In the following example, Angular evaluates the title and itemImageUrl properties to display some title text and an image.
+Angular replaces currentCustomer with the string value of the corresponding component property. In this case, the value is `Maria`.
 
-src/app/app.component.html
-content_copy
-<p>{{title}}</p>
-<div><img alt="item" src="{{itemImageUrl}}"></div>
+In the following example, Angular evaluates the `title` and `itemImageUrl` properties to display some title text and an image.
+
+<code-example path="interpolation/src/app/app.component.html" region="component-property"></code-example>
 
 ## What's Next
 
diff --git a/aio/content/guide/observables-in-angular.md b/aio/content/guide/observables-in-angular.md
index 427a00da8a2..1f9c1636b37 100644
--- a/aio/content/guide/observables-in-angular.md
+++ b/aio/content/guide/observables-in-angular.md
@@ -3,7 +3,8 @@
 Angular makes use of observables as an interface to handle a variety of common asynchronous operations.
 For example:
 
-*   You can define [custom events](guide/event-binding#custom-events-with-eventemitter) that send observable output data from a child to a parent component
+<!--todo: Have Alex review this -->
+<!-- *   You can define [custom events](guide/event-binding#custom-events-with-eventemitter) that send observable output data from a child to a parent component -->
 *   The HTTP module uses observables to handle AJAX requests and responses
 *   The Router and Forms modules use observables to listen for and respond to user-input events
 
diff --git a/aio/content/guide/property-binding.md b/aio/content/guide/property-binding.md
index 36c23448079..91e1a4f6058 100644
--- a/aio/content/guide/property-binding.md
+++ b/aio/content/guide/property-binding.md
@@ -28,19 +28,19 @@ To read a target element property or call one of its methods, see the API refere
 
 ## Binding to a property
 
-To bind to an element's property, enclose it in square brackets, '[]', which identifies the property as a target property.
+To bind to an element's property, enclose it in square brackets, `[]`, which identifies the property as a target property.
 
 A target property is the DOM property to which you want to assign a value.
 
-To assign a value to a target property for the image element's 'src' property, type the following code:
+To assign a value to a target property for the image element's `src` property, type the following code:
 
 <code-example path="property-binding/src/app/app.component.html" region="property-binding" header="src/app/app.component.html"></code-example>
 
 In most cases, the target name is the name of a property, even when it appears to be the name of an attribute.
 
-In this example, 'src' is the name of the '<img>' element property.
+In this example, `src` is the name of the `<img>` element property.
 
-The brackets, '[]', cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.
+The brackets, `[]`, cause Angular to evaluate the right-hand side of the assignment as a dynamic expression.
 
 Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.
 
@@ -48,31 +48,31 @@ To assign a string to a property, type the following code:
 
 <code-example path="property-binding/src/app/app.component.html" region="no-evaluation" header="src/app.component.html"></code-example>
 
-Omitting the brackets renders the string 'parentItem', not the value of 'parentItem'.
+Omitting the brackets renders the string `parentItem`, not the value of `parentItem`.
 
 ## Setting an element property to a component property value
 
-To bind the ‘src’ property of an '<img>' element to a component's property, place the target, ‘src', in square brackets followed by an equal sign and then the property.
+To bind the `src` property of an `<img>` element to a component's property, place the target, `src`, in square brackets followed by an equal sign and then the property.
 
-Using the property 'itemImageUrl', type the following code:
+Using the property `itemImageUrl`, type the following code:
 
 <code-example path="property-binding/src/app/app.component.html" region="property-binding" header="src/app/app.component.html"></code-example>
 
-Declare the 'itemImageUrl' property in the class, in this case 'AppComponent'.
+Declare the `itemImageUrl` property in the class, in this case `AppComponent`.
 
 <code-example path="property-binding/src/app/app.component.ts" region="item-image" header="src/app/app.component.ts"></code-example>
 
 {@a colspan}
 
-#### 'colspan' and 'colSpan'
+#### `colspan` and `colSpan`
 
-A common point of confusion is between the attribute, 'colspan', and the property, 'colSpan'.  Notice that these two names differ by only a single letter.
+A common point of confusion is between the attribute, `colspan`, and the property, `colSpan`.  Notice that these two names differ by only a single letter.
 
 To use property binding using colSpan, type the following:
 
 <code-example path="attribute-binding/src/app/app.component.html" region="colSpan" header="src/app/app.component.html"></code-example>
 
-To disable a button when the component says that it 'isUnchanged', type the following:
+To disable a button when the component says that it `isUnchanged`, type the following:
 
 <code-example path="property-binding/src/app/app.component.html" region="disabled-button" header="src/app/app.component.html"></code-example>
 
@@ -87,11 +87,11 @@ To set the model property of a custom component for parent and child components
 
 ## Toggling button functionality
 
-To disable a button's functionality depending on a Boolean value, bind the DOM 'disabled' property to a property in the class that is 'true' or 'false'.
+To disable a button's functionality depending on a Boolean value, bind the DOM `disabled` property to a property in the class that is `true` or `false`.
 
 <code-example path="property-binding/src/app/app.component.html" region="disabled-button" header="src/app/app.component.html"></code-example>
 
-Because the value of the property 'isUnchanged' is 'true' in the 'AppComponent', Angular disables the button.
+Because the value of the property `isUnchanged` is `true` in the `AppComponent`, Angular disables the button.
 
 <code-example path="property-binding/src/app/app.component.ts" region="boolean" header="src/app/app.component.ts"></code-example>
 
diff --git a/aio/content/guide/router-tutorial-toh.md b/aio/content/guide/router-tutorial-toh.md
index 187abd20f7d..2155b070e1f 100644
--- a/aio/content/guide/router-tutorial-toh.md
+++ b/aio/content/guide/router-tutorial-toh.md
@@ -1018,7 +1018,7 @@ The `ActivatedRoute.paramMap` property is an `Observable` map of route parameter
 The `paramMap` emits a new map of values that includes `id` when the user navigates to the component.
 In `ngOnInit()` you subscribe to those values, set the `selectedId`, and get the heroes.
 
-Update the template with a [class binding](guide/attribute-binding#class-binding).
+Update the template with a [class binding](guide/class-binding).
 The binding adds the `selected` CSS class when the comparison returns `true` and removes it when `false`.
 Look for it within the repeated `<li>` tag as shown here:
 
diff --git a/aio/content/navigation.json b/aio/content/navigation.json
index 3c7699123b2..152b170ff7f 100644
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@@ -178,29 +178,61 @@
               "tooltip": "Introductory guide to statements in templates that respond to events that components, directives, or elements raise."
             },
             {
-              "url": "guide/pipes",
+              "title": "Binding",
+              "tooltip": "A binding connects a template and a component.",
+              "children": [
+                {
+                  "url": "guide/binding-overview",
+                  "title": "Understanding binding",
+                  "tooltip": "Introductory guide to binding."
+                },
+                {
+                  "url": "guide/attribute-binding",
+                  "title": "Attribute binding",
+                  "tooltip": "Learn how to use attribute binding."
+                },
+                {
+                  "url": "guide/class-binding",
+                  "title": "Class and style binding",
+                  "tooltip": "Learn how to use class and style binding."
+                },
+                {
+                  "url": "guide/event-binding",
+                  "title": "Event binding",
+                  "tooltip": "Learn how to use to event binding."
+                },
+                {
+                  "url": "guide/property-binding",
+                  "title": "Property binding",
+                  "tooltip": "Learn how to use property binding."
+                },             
+                {
+                  "url": "guide/two-way-binding",
+                  "title": "Two-way binding",
+                  "tooltip": "Learn how to share data between a class and a template."
+                }
+              ]
+            },
+            {
               "title": "Pipes",
-              "tooltip": "Pipes transform displayed values within a template."
-            },
-            {
-              "url": "guide/property-binding",
-              "title": "Property binding",
-              "tooltip": "Introductory guide to setting element or input properties."
-            },
-            {
-              "url": "guide/attribute-binding",
-              "title": "Attribute, class, and style bindings",
-              "tooltip": "Introductory guide to setting the value of HTML attributes."
-            },
-            {
-              "url": "guide/event-binding",
-              "title": "Event binding",
-              "tooltip": "Introductory guide to listening for user interaction."
-            },
-            {
-              "url": "guide/two-way-binding",
-              "title": "Two-way binding",
-              "tooltip": "Introductory guide to sharing data between a class and a template."
+              "tooltip": "Pipes transform displayed values within a template.",
+              "children": [
+                {
+                  "url": "guide/pipes-overview",
+                  "title": "Understanding pipes",
+                  "tooltip": "Introductory guide to pipes."
+                },
+                {
+                  "url": "guide/pipe-template",
+                  "title": "Using a pipe in a template",
+                  "tooltip": "Learn how to use a pipe in a template."
+                },
+                {
+                  "url": "guide/pipes-transform-data",
+                  "title": "Transforming data with parameters and chained pipes",
+                  "tooltip": "Learn how to use a pipe transform data."
+                }
+             ]
             },
             {
               "url": "guide/template-reference-variables",
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md
index b3658dfc671..ada6e8ce0a5 100644
--- a/aio/content/tutorial/toh-pt2.md
+++ b/aio/content/tutorial/toh-pt2.md
@@ -168,7 +168,7 @@ To apply the `.selected` class to the `<li>` when the user clicks it, use class
 
 </div>
 
-Angular's [class binding](guide/attribute-binding#class-binding) can add and remove a CSS class conditionally.
+Angular's [class binding](guide/class-binding) can add and remove a CSS class conditionally.
 Add `[class.some-css-class]="some-condition"` to the element you want to style.
 
 Add the following `[class.selected]` binding to the `<button>` in the `HeroesComponent` template: