diff --git a/src/components/Callout/index.astro b/src/components/Callout/index.astro
index 4ce4bde700..f67b2644cd 100644
--- a/src/components/Callout/index.astro
+++ b/src/components/Callout/index.astro
@@ -14,7 +14,7 @@ const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
 ---
 
-<div class={`callout ${props.title ? 'callout-note' : ''}`}>
-  <h5>{t('calloutTitles', props.title || "Try this!")}</h5>
+<div class={`callout ${props.title ? 'callout-note' : ''}`} role="note">
+  <p class="callout-title">{t('calloutTitles', props.title || "Try this!")}</p>
   <slot />
 </div>
diff --git a/src/content/tutorials/en/get-started.mdx b/src/content/tutorials/en/get-started.mdx
index f0961280fb..c9c14c2332 100644
--- a/src/content/tutorials/en/get-started.mdx
+++ b/src/content/tutorials/en/get-started.mdx
@@ -66,7 +66,7 @@ Using the [p5.js Web Editor](https://editor.p5js.org/):
 
 ![A user on the p5.js Web Editor finds their project "Interactive Landscape" in their gallery of saved sketches.](../images/introduction/p5_editor_interactive_landscape_3.png)
 
-#### Default Code
+### Default Code
 
 All p5.js projects include the p5.js library and three files: [`index.html`](https://www.classes.cs.uchicago.edu/archive/2021/spring/11111-1/happycoding/p5js/web-dev.html#:~:text=The%20index.,the%20page%20using%20HTML%20tags!), [style.css](https://happycoding.io/tutorials/p5js/web-dev), and `sketch.js`. Make changes on the canvas by adding code to the sketch.js file. New p5.js projects begin with the following code in the sketch.js file:
 
@@ -173,7 +173,7 @@ There are over 10 million combinations of numbers for red, green, and blue that
 Visit the p5.js reference pages for [background()](/reference/p5/background) and [color](/reference/p5/color) to learn about more ways you can change the background color of the canvas.
 
 
-#### Tip
+### Tip
 
 Use [Google’s Color Picker](https://g.co/kgs/aCdbzD) to search for the code that can set the background to any color. Find the color you would like to use, copy the numbers in the box labeled RGB, and paste them into [`background()`](/reference/p5/background).
 
diff --git a/src/layouts/ReferenceItemLayout.astro b/src/layouts/ReferenceItemLayout.astro
index d16adc5c3e..632af23886 100644
--- a/src/layouts/ReferenceItemLayout.astro
+++ b/src/layouts/ReferenceItemLayout.astro
@@ -112,37 +112,37 @@ function normalizeP5ReferenceLinks(html: string | undefined): string | undefined
   <div class="content-grid mt-0 max-w-[770px]">
     <div class="col-span-9 xl:min-w-[1000px]">
       {entry.data.webgpuOnly && (
-        <div class="experimental">
-          <h5>
-            <div
+        <div class="experimental" role="note">
+          <p class="callout-title">
+            <span
               class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
               set:html={warning}
             />
             {t('webgpuAddon')}
-          </h5>
+          </p>
         </div>
       )}
       {entry.data.beta && (
-        <div class="experimental">
-          <h5>
-            <div
+        <div class="experimental" role="note">
+          <p class="callout-title">
+            <span
               class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
               set:html={flask}
             />
             {t('experimentalApi', 'title')}
-          </h5>
+          </p>
           <p>{t('experimentalApi', 'description')}</p>
         </div>
       )}
       {entry.data.deprecated && (
-        <div class="deprecated">
-          <h5>
-            <div
+        <div class="deprecated" role="note">
+          <p class="callout-title">
+            <span
               class="inline-block mr-2 w-[20px] h-[20px] mb-[-2px]"
               set:html={warning}
             />
             {t('calloutTitles', 'Warning')}
-          </h5>
+          </p>
           <p set:html={entry.data.deprecated} />
         </div>
       )}
diff --git a/styles/global.scss b/styles/global.scss
index ec109430c4..f682034bdc 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -321,8 +321,10 @@ pre.code-box,
     color: var(--type-black);
   }
 
-  & h5 {
+  & h5,
+  & .callout-title {
     font-weight: bold;
+    margin-top: 0;
     margin-bottom: var(--spacing-sm);
     &:last-child {
       margin-bottom: 0;