Fix unexpected behavior in UG due to invalid HTML markup (#1837)

Invalid HTML markup may cause Vue hydration issues.

Let's replace span tags with div tags to avoid invalid
inclusion of block-level elements in span tags.

This prevents possible errors in HTML syntax.

Author: tlylt

docs/_markbind/layouts/userGuide.md

@@ -38,6 +38,7 @@
   * [Syntax Cheat Sheet]({{baseUrl}}/userGuide/syntaxCheatSheet.html)
   * [`site.json` File]({{baseUrl}}/userGuide/siteJsonFile.html)
   * [Tips & Tricks]({{baseUrl}}/userGuide/tipsAndTricks.html)
+  * [Troubleshooting]({{baseUrl}}/userGuide/troubleshooting.html)
   * [Glossary]({{baseUrl}}/userGuide/glossary.html)
       </site-nav>
     </div>

docs/index.md

@@ -6,11 +6,11 @@
 
 <h1 class="display-3"><md>**MarkBind**</md></h1>
 
-<span class="lead">
+<div class="lead">
 
 ++**Generate <tooltip content="as opposed to _one-size-fits-all_ static content">_more dynamic_</tooltip> websites from Markdown text.**++
 Optimized for creating text-heavy websites %%e.g., eLearning websites, online instruction manuals, project documentation etc.%%
-</span>
+</div>
 
 <a class="btn btn-primary" href="userGuide/">Get Started</a>
 

docs/userGuide/addingPages.md

@@ -14,11 +14,11 @@
 
 # {{ title }}
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 **It is easy to add files to a MarkBind site as any file inside the {{ tooltip_root_directory }} becomes a part of the generated website.**
 
-</span>
+</div>
 
 <div class="indented">
 

docs/userGuide/components/imagesAndDiagrams.md

@@ -16,11 +16,11 @@
 
 # Image & Diagram Components
 
-<span id="overview" class="lead">
+<div id="overview" class="lead">
 
 The image components here provide **convenient syntax & styling abstractions** on top of raw HTML and Markdown images.
 Diagrams, in the form of **inline PlantUML components** are also supported.
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

docs/userGuide/components/others.md

@@ -16,10 +16,10 @@
 
 # Other Components
 
-<span id="overview" class="lead">
+<div id="overview" class="lead">
 
 This page lists some other components that may be useful in creating education websites. For now, there are only question and quiz components.
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

docs/userGuide/components/popups.md

@@ -16,10 +16,10 @@
 
 # Pop-Up Components
 
-<span id="overview" class="lead">
+<div id="overview" class="lead">
 
 The components in this page can be used to easily create **various forms of pop-ups** that are activated on some user action (e.g., hovering over some text). This may be useful for showing additional information related to some specific area or span of content.
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

docs/userGuide/components/presentation.md

@@ -16,10 +16,10 @@
 
 # Presentational Components
 
-<span id="overview" class="lead">
+<div id="overview" class="lead">
 
 The components in this page are the core **presentational** components you may want to use. Panels and tabs can be used to **organise content sections**, while badges and boxes can **highlight small, specific pieces of information**.
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

docs/userGuide/deployingTheSite.md

@@ -14,10 +14,10 @@
 
 # {{ title }}
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 **A site generated by MarkBind can be deployed by simply uploading the generated files to any Web server.** In addition, MarkBind provides several convenient deployment options.
-</span>
+</div>
 
 ## Generic steps for deploying a MarkBind site
 

docs/userGuide/formattingContents.md

@@ -14,11 +14,11 @@
 
 # {{ title }}
 
-<span class="lead" id="overview">
+<div class="lead" id="overview">
 
 **MarkBind supports a wide collection of Markdown-like basic content formatting syntax** such as text styling, tables, lists, images, links, etc.
 
-</span>
+</div>
 
 {% from "userGuide/fullSyntaxReference.md" import syntax_topics as topics %}
 

docs/userGuide/glossary.md

@@ -5,7 +5,7 @@
 
 #### Live Preview <span style="font-size: 0.8em;">:fas-sync:</span>
 
-<span id="live-preview">
+<div id="live-preview">
 
 **_Live preview_** is:
 - Regeneration of affected content upon any change to <tooltip content="`.md`, `.njk` files ... anything your content depends on!">source files</tooltip>, then reloading the updated site in the Browser.
@@ -16,4 +16,4 @@
 
 Use [the `serve` command](cliCommands.html#serve-command) to launch a live preview.
 
-</span>
+</div>