Documentation updates for v5.0.0 - with more changes

_basics/introduction.md

@@ -4,15 +4,15 @@ description: An overview of objects, tags, and filters in the Liquid template la
 redirect_from: /basics/
 ---
 
-Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters).
+Liquid uses a combination of [**objects**](#intro-objects), [**tags**](#intro-tags), and [**filters**](#intro-filters) inside **template files** to display dynamic content.
 
-## Objects
+<h2 id="intro-objects">Objects</h2>
 
-**Objects** tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.
+**Objects** contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.
 
 <p class="code-label">Input</p>
 ```liquid
-{% raw %}
+{%- raw -%}
 {{ page.title }}
 {% endraw %}
 ```
@@ -22,17 +22,15 @@ Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags),
 {{ page.title }}
 ```
 
-In this case, Liquid is rendering the content of an object called `page.title`, and that object contains the text `Introduction`.
+In this case, Liquid is rendering the content of the `title` property of the `page` object, which contains the text `{{ page.title }}`.
 
-## Tags
+<h2 id="intro-tags">Tags</h2>
 
-**Tags** create the logic and control flow for templates. They are denoted by curly braces and percent signs: `{% raw %}{%{% endraw %}` and `{% raw %}%}{% endraw %}`.
-
-The markup used in tags does not produce any visible text. This means that you can assign variables and create conditions and loops without showing any of the Liquid logic on the page.
+**Tags** create the logic and control flow for templates. The curly brace percentage delimiters `{% raw %}{%{% endraw %}` and `{% raw %}%}{% endraw %}` and the text that they surround do not produce any visible output when the template is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.
 
 <p class="code-label">Input</p>
 ```liquid
-{% raw %}
+{%- raw -%}
 {% if user %}
   Hello {{ user.name }}!
 {% endif %}
@@ -44,21 +42,22 @@ The markup used in tags does not produce any visible text. This means that you c
 Hello Adam!
 ```
 
-Tags can be categorized into three types:
+Tags can be categorized into various types:
 
 - [Control flow]({{ "/tags/control-flow/" | prepend: site.baseurl }})
 - [Iteration]({{ "/tags/iteration/" | prepend: site.baseurl }})
-- [Variable assignments]({{ "/tags/variable/" | prepend: site.baseurl }})
+- [Template]({{ "/tags/template/" | prepend: site.baseurl }})
+- [Variable assignment]({{ "/tags/variable/" | prepend: site.baseurl }})
 
 You can read more about each type of tag in their respective sections.
 
-## Filters
+<h2 id="intro-filters">Filters</h2>
 
-**Filters** change the output of a Liquid object. They are used within an output and are separated by a `|`.
+**Filters** change the output of a Liquid object or variable. They are used within double curly braces `{% raw %}{{ }}{% endraw %}` and [variable assignment]({{ "/tags/variable/" | prepend: site.baseurl }}), and are separated by a pipe character `|`.
 
 <p class="code-label">Input</p>
 ```liquid
-{% raw %}
+{%- raw -%}
 {{ "/my/fancy/url" | append: ".html" }}
 {% endraw %}
 ```
@@ -68,11 +67,11 @@ You can read more about each type of tag in their respective sections.
 {{ "/my/fancy/url" | append: ".html" }}
 ```
 
-Multiple filters can be used on one output. They are applied from left to right.
+Multiple filters can be used on one output, and are applied from left to right.
 
 <p class="code-label">Input</p>
 ```liquid
-{% raw %}
+{%- raw -%}
 {{ "adam!" | capitalize | prepend: "Hello " }}
 {% endraw %}
 ```
@@ -81,3 +80,12 @@ Multiple filters can be used on one output. They are applied from left to right.
 ```text
 {{ "adam!" | capitalize | prepend: "Hello " }}
 ```
+
+Filters can be categorized into various types:
+
+- <a href="#" onclick="scrollToFilter(event, 'array-filters')">Array filters</a>
+- <a href="#" onclick="scrollToFilter(event, 'math-filters')">Math filters</a>
+- <a href="#" onclick="scrollToFilter(event, 'string-filters')">String filters</a>
+- <a href="#" onclick="scrollToFilter(event, 'filters')">Other filters</a>
+
+You can see the list of filters for each type in their respective sections on the side menu.