diff --git a/core/modules/filter/src/Element/TextFormat.php b/core/modules/filter/src/Element/TextFormat.php
index aaff8b4..4b213d8 100644
--- a/core/modules/filter/src/Element/TextFormat.php
+++ b/core/modules/filter/src/Element/TextFormat.php
@@ -161,7 +161,7 @@ public static function processFormat(&$element, FormStateInterface $form_state,
     $options = array();
     foreach ($formats as $format) {
       $options[$format->id()] = $format->label();
-      $element['format']['guidelines'][$format->id()] = array(
+      $element['format']['guidelines']['format-' . $format->id()] = array(
         '#theme' => 'filter_guidelines',
         '#format' => $format,
       );
diff --git a/core/modules/filter/src/Tests/FilterUnitTest.php b/core/modules/filter/src/Tests/FilterUnitTest.php
index 2c2a5c9..3e87393 100644
--- a/core/modules/filter/src/Tests/FilterUnitTest.php
+++ b/core/modules/filter/src/Tests/FilterUnitTest.php
@@ -118,7 +118,7 @@ function testCaptionFilter() {
 
     // Data-caption attribute.
     $input = '<img src="llama.jpg" data-caption="Loquacious llama!" />';
-    $expected = '<figure><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
@@ -130,14 +130,14 @@ function testCaptionFilter() {
 
     // HTML entities in the caption.
     $input = '<img src="llama.jpg" data-caption="&ldquo;Loquacious llama!&rdquo;" />';
-    $expected = '<figure><img src="llama.jpg" /><figcaption>“Loquacious llama!”</figcaption></figure>';
+    $expected = '<figure class="caption caption-img"><img src="llama.jpg" /><figcaption>“Loquacious llama!”</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
 
     // HTML encoded as HTML entities in data-caption attribute.
     $input = '<img src="llama.jpg" data-caption="&lt;em&gt;Loquacious llama!&lt;/em&gt;" />';
-    $expected = '<figure><img src="llama.jpg" /><figcaption><em>Loquacious llama!</em></figcaption></figure>';
+    $expected = '<figure class="caption caption-img"><img src="llama.jpg" /><figcaption><em>Loquacious llama!</em></figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
@@ -146,33 +146,33 @@ function testCaptionFilter() {
     // not allowed by the HTML spec, but may happen when people manually write
     // HTML, so we explicitly support it.
     $input = '<img src="llama.jpg" data-caption="<em>Loquacious llama!</em>" />';
-    $expected = '<figure><img src="llama.jpg" /><figcaption><em>Loquacious llama!</em></figcaption></figure>';
+    $expected = '<figure class="caption caption-img"><img src="llama.jpg" /><figcaption><em>Loquacious llama!</em></figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
 
     // Security test: attempt an XSS.
     $input = '<img src="llama.jpg" data-caption="<script>alert(\'Loquacious llama!\')</script>" />';
-    $expected = '<figure><img src="llama.jpg" /><figcaption>alert(\'Loquacious llama!\')</figcaption></figure>';
+    $expected = '<figure class="caption caption-img"><img src="llama.jpg" /><figcaption>alert(\'Loquacious llama!\')</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
 
     // Ensure the filter also works with uncommon yet valid attribute quoting.
     $input = '<img src=llama.jpg data-caption=\'Loquacious llama!\' />';
-    $expected = '<figure><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
 
     // Finally, ensure that this also works on any other tag.
     $input = '<video src="llama.jpg" data-caption="Loquacious llama!" />';
-    $expected = '<figure><video src="llama.jpg"></video><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-video"><video src="llama.jpg"></video><figcaption>Loquacious llama!</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
     $input = '<foobar data-caption="Loquacious llama!">baz</foobar>';
-    $expected = '<figure><foobar>baz</foobar><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-foobar"><foobar>baz</foobar><figcaption>Loquacious llama!</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
@@ -198,17 +198,17 @@ function testAlignAndCaptionFilters() {
     // Both data-caption and data-align attributes: all 3 allowed values for the
     // data-align attribute.
     $input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="left" />';
-    $expected = '<figure class="align-left"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img align-left"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
     $input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="center" />';
-    $expected = '<figure class="align-center"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img align-center"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
     $input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="right" />';
-    $expected = '<figure class="align-right"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img align-right"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
@@ -216,7 +216,7 @@ function testAlignAndCaptionFilters() {
     // Both data-caption and data-align attributes, but a disallowed data-align
     // attribute value.
     $input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="left foobar" />';
-    $expected = '<figure><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $output = $test($input);
     $this->assertIdentical($expected, $output->getProcessedText());
     $this->assertIdentical($attached_library, $output->getAssets());
diff --git a/core/modules/filter/src/Tests/TextFormatElementFormTest.php b/core/modules/filter/src/Tests/TextFormatElementFormTest.php
index b889c4a..2851e34 100644
--- a/core/modules/filter/src/Tests/TextFormatElementFormTest.php
+++ b/core/modules/filter/src/Tests/TextFormatElementFormTest.php
@@ -117,10 +117,16 @@ public function testTextFormatElement() {
     $output = $this->render($form);
     $this->setRawContent($output);
     $this->assertFieldByName('textformat[value]');
-    $this->assertRaw('<h4>Full HTML</h4>');
-    $this->assertRaw('<h4>Filtered HTML</h4>');
-    $this->assertRaw('<h4>Test format</h4>');
+    $this->assertRaw('<h4 class="label">Full HTML</h4>');
+    $this->assertRaw('<h4 class="label">Filtered HTML</h4>');
+    $this->assertRaw('<h4 class="label">Test format</h4>');
     $this->assertNoPattern('|<h4[^>]*></h4>|', 'No empty H4 element found.');
+
+    // It tests if guidelines are included.
+    $this->assertRaw('filter-guidelines-full_html');
+    $this->assertRaw('filter-guidelines-filtered_html');
+    $this->assertRaw('filter-guidelines-filter_test');
+    
   }
 
   /**
diff --git a/core/modules/filter/templates/filter-caption.html.twig b/core/modules/filter/templates/filter-caption.html.twig
index f015ac0..eb9d248 100644
--- a/core/modules/filter/templates/filter-caption.html.twig
+++ b/core/modules/filter/templates/filter-caption.html.twig
@@ -12,7 +12,7 @@
  * - string classes: The classes of the captioned HTML tag.
  */
 #}
-<figure{%- if classes %} class="{{ classes }}"{%- endif %}>
+<figure class="caption caption-{{ tag }}{%- if classes %} {{ classes }}{%- endif %}">
 {{ node }}
 <figcaption>{{ caption }}</figcaption>
 </figure>
diff --git a/core/modules/filter/templates/filter-guidelines.html.twig b/core/modules/filter/templates/filter-guidelines.html.twig
index 317cfa6..9459c1a 100644
--- a/core/modules/filter/templates/filter-guidelines.html.twig
+++ b/core/modules/filter/templates/filter-guidelines.html.twig
@@ -19,7 +19,13 @@
  * @ingroup themeable
  */
 #}
-<div{{ attributes }}>
-  <h4>{{ format.label }}</h4>
+{%
+  set classes = [
+    'filter-guidelines-item',
+    'filter-guidelines-' ~ format.id,
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  <h4 class="label">{{ format.label }}</h4>
   {{ tips }}
 </div>
diff --git a/core/modules/filter/templates/filter-tips.html.twig b/core/modules/filter/templates/filter-tips.html.twig
index b020c23..b17de01 100644
--- a/core/modules/filter/templates/filter-tips.html.twig
+++ b/core/modules/filter/templates/filter-tips.html.twig
@@ -24,19 +24,30 @@
 
 {% if tips|length %}
   {% if multiple %}
-    <div>
+    <div class="compose-tips">
   {% endif %}
 
   {% for name, tip in tips %}
     {% if multiple %}
-      <div{{ attributes }}>
+      {%
+        set tip_classes = [
+          'filter-type',
+          'filter-' ~ name|clean_class,
+        ]
+      %}
+      <div{{ tip.attributes.addClass(tip_classes) }}>
       <h3>{{ tip.name }}</h3>
     {% endif %}
 
     {% if tip.list|length %}
-      <ul>
+      <ul class="tips">
       {% for item in tip.list %}
-        <li{{ tip.attributes }}>{{ item.tip }}</li>
+        {%
+          set item_classes = [
+            long ? 'filter-' ~ item.id|replace({'/': '-'}),
+          ]
+        %}
+        <li{{ item.attributes.addClass(item_classes) }}>{{ item.tip }}</li>
       {% endfor %}
       </ul>
     {% endif %}
diff --git a/core/modules/filter/templates/text-format-wrapper.html.twig b/core/modules/filter/templates/text-format-wrapper.html.twig
index ce3ba55..4e5ff6d 100644
--- a/core/modules/filter/templates/text-format-wrapper.html.twig
+++ b/core/modules/filter/templates/text-format-wrapper.html.twig
@@ -15,9 +15,14 @@
  * @ingroup themeable
  */
 #}
-<div>
+<div class="text-format-wrapper form-item">
   {{ children }}
   {% if description %}
-    <div{{ attributes }}>{{ description }}</div>
+    {%
+      set classes = [
+        aria_description ? 'description',
+      ]
+    %}
+    <div{{ attributes.addClass(classes) }}>{{ description }}</div>
   {% endif %}
 </div>
diff --git a/core/themes/classy/templates/filter/filter-guidelines.html.twig b/core/themes/classy/templates/filter/filter-guidelines.html.twig
index 783992b..9459c1a 100644
--- a/core/themes/classy/templates/filter/filter-guidelines.html.twig
+++ b/core/themes/classy/templates/filter/filter-guidelines.html.twig
@@ -22,7 +22,7 @@
 {%
   set classes = [
     'filter-guidelines-item',
-    'filter-guidelines-' ~ format.format,
+    'filter-guidelines-' ~ format.id,
   ]
 %}
 <div{{ attributes.addClass(classes) }}>