fix: change title attribute example

Change the `title` attribute interactive example as the current example use case is problematic from an accessibility perspective and is not the best use case to use for the example.

fix #1822

live-examples/html-examples/global-attributes/attribute-title.html

@@ -1,4 +1,6 @@
-<p>The three primary web development technologies are
-<abbr title="Hypertext Markup Language">HTML</abbr>,
-<abbr title="Cascading Stylesheets">CSS</abbr>, and
-JavaScript.</p>
+<p>Use the <code>title</code> attribute on an <code>iframe</code> to clearly identify the content of the <code>iframe</code> to screen readers.</p>
+
+<div class="frame-container">
+  <iframe title="Wikipedia page for the HTML language" src="https://en.m.wikipedia.org/wiki/HTML"></iframe>
+  <iframe title="Wikipedia page for the CSS language" src="https://en.m.wikipedia.org/wiki/CSS"></iframe>
+</div>

live-examples/html-examples/global-attributes/css/attribute-title.css

@@ -1,3 +1,13 @@
 .output {
     font: 1rem 'Fira Sans', sans-serif;
 }
+
+.output .frame-container {
+    display: flex;
+    gap: 24px;
+}
+
+.output .frame-container iframe {
+    height: 100%;
+    width: 50%;
+}