diff --git a/packages/ui-react/src/text/Text.tsx b/packages/ui-react/src/text/Text.tsx
index 9e83d0ad..f578ded5 100644
--- a/packages/ui-react/src/text/Text.tsx
+++ b/packages/ui-react/src/text/Text.tsx
@@ -32,9 +32,9 @@ const Text: React.FC<TextProps> = ({ config }) => {
   if (!app) return null;
 
   return (
-    <div className="magic-ui-text" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
+    <p className="magic-ui-text" style={app.transformStyle(config.style || {})} id={`${config.id || ''}`}>
       {config.text}
-    </div>
+    </p>
   );
 };
 
diff --git a/packages/ui-vue2/src/text/Text.vue b/packages/ui-vue2/src/text/Text.vue
index a51d0e12..344dfbf9 100644
--- a/packages/ui-vue2/src/text/Text.vue
+++ b/packages/ui-vue2/src/text/Text.vue
@@ -54,9 +54,9 @@ export default defineComponent({
   render() {
     const className = this.config?.multiple ? 'magic-ui-text' : 'magic-ui-text magic-ui-text--single-line';
     if (typeof this.$slots?.default === 'function') {
-      return h('div', { class: className }, [this.$slots?.default?.() || '']);
+      return h('p', { class: className }, [this.$slots?.default?.() || '']);
     }
-    return h('div', {
+    return h('p', {
       class: className,
       domProps: {
         innerHTML: this.displayText,
diff --git a/packages/ui/src/text/src/index.vue b/packages/ui/src/text/src/index.vue
index df05ed3c..8a4a4d6f 100644
--- a/packages/ui/src/text/src/index.vue
+++ b/packages/ui/src/text/src/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>{{ config.text }}</span>
+  <p>{{ config.text }}</p>
 </template>
 
 <script lang="ts" setup>