دليل شامل لتاغ الفقرة p

<p>هذه فقرة من النص في HTML</p>

<p>هذه فقرة من النص في HTML</p>

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

p {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

<p>هذه فقرة تحتوي على نص عادي يتم عرضه بالطريقة الافتراضية.</p>
<p>هذه فقرة أخرى منفصلة عن الأولى بمساحة افتراضية.</p> 

<p>هذه فقرة تحتوي على نص عادي يتم عرضه بالطريقة الافتراضية.</p>
<p>هذه فقرة أخرى منفصلة عن الأولى بمساحة افتراضية.</p> 

<p>
    هذه فقرة طويلة تحتوي على الكثير من النصوص والمعلومات التي تحتاج إلى 
    تنظيم مناسب. تاغ P يقوم تلقائياً بالتفاف النص (Word Wrap) عندما يصل 
    إلى نهاية العرض المتاح، مما يجعل النص سهل القراءة ومنظماً.
</p>

<p>
    هذه فقرة طويلة تحتوي على الكثير من النصوص والمعلومات التي تحتاج إلى 
    تنظيم مناسب. تاغ P يقوم تلقائياً بالتفاف النص (Word Wrap) عندما يصل 
    إلى نهاية العرض المتاح، مما يجعل النص سهل القراءة ومنظماً.
</p>

<p>
    يمكن أن تحتوي الفقرة على <strong>نص مهم</strong> أو 
    <em>نص مائل</em> أو حتى <a href="#">رابط</a> داخل النص.
</p>

<p>
    يمكن أن تحتوي الفقرة على <strong>نص مهم</strong> أو 
    <em>نص مائل</em> أو حتى <a href="#">رابط</a> داخل النص.
</p>

<p>
    <img src="image.jpg" alt="وصف الصورة" style="float: left; margin-right: 10px;">
    هذا نص يحيط بالصورة المضافة إلى الفقرة. الصورة ستظهر على الجانب الأيسر 
    والنص سيلتف حولها بطريقة طبيعية.
</p>

<p>
    <img src="image.jpg" alt="وصف الصورة" style="float: left; margin-right: 10px;">
    هذا نص يحيط بالصورة المضافة إلى الفقرة. الصورة ستظهر على الجانب الأيسر 
    والنص سيلتف حولها بطريقة طبيعية.
</p>

<p class="intro">فقرة المقدمة الخاصة بتصميم مختلف</p>
<p class="highlight">فقرة مميزة بلون أو خط مختلف</p>
<p class="quote">فقرة اقتباس بتنسيق خاص</p>

<p class="intro">فقرة المقدمة الخاصة بتصميم مختلف</p>
<p class="highlight">فقرة مميزة بلون أو خط مختلف</p>
<p class="quote">فقرة اقتباس بتنسيق خاص</p>

<p id="main-content">الفقرة الرئيسية للمحتوى</p>
<p id="conclusion">فقرة الخلاصة</p>

<p id="main-content">الفقرة الرئيسية للمحتوى</p>
<p id="conclusion">فقرة الخلاصة</p>

<article>
    <h1>عنوان المقال</h1>
    <p class="intro">فقرة تمهيدية تلخص محتوى المقال وتجذب انتباه القارئ.</p>
    
    <h2>القسم الأول</h2>
    <p>محتوى القسم الأول مع شرح مفصل للنقاط المهمة.</p>
    <p>فقرة إضافية لتوضيح المزيد من التفاصيل.</p>
    
    <h2>القسم الثاني</h2>
    <p>شرح القسم الثاني مع أمثلة عملية.</p>
</article>

<article>
    <h1>عنوان المقال</h1>
    <p class="intro">فقرة تمهيدية تلخص محتوى المقال وتجذب انتباه القارئ.</p>
    
    <h2>القسم الأول</h2>
    <p>محتوى القسم الأول مع شرح مفصل للنقاط المهمة.</p>
    <p>فقرة إضافية لتوضيح المزيد من التفاصيل.</p>
    
    <h2>القسم الثاني</h2>
    <p>شرح القسم الثاني مع أمثلة عملية.</p>
</article>

<div class="product-description">
    <p class="product-summary">وصف مختصر للمنتج وفوائده الرئيسية.</p>
    <p class="product-features">تفاصيل المميزات والخصائص التقنية.</p>
    <p class="usage-instructions">طريقة الاستخدام والعناية بالمنتج.</p>
</div>

<div class="product-description">
    <p class="product-summary">وصف مختصر للمنتج وفوائده الرئيسية.</p>
    <p class="product-features">تفاصيل المميزات والخصائص التقنية.</p>
    <p class="usage-instructions">طريقة الاستخدام والعناية بالمنتج.</p>
</div>

<form>
    <p>
        <label for="name">الاسم:</label>
        <input type="text" id="name" name="name">
    </p>
    
    <p>
        <label for="email">البريد الإلكتروني:</label>
        <input type="email" id="email" name="email">
    </p>
    
    <p class="form-note">
        جميع الحقول المميزة بـ (*) مطلوبة.
    </p>
</form>

<form>
    <p>
        <label for="name">الاسم:</label>
        <input type="text" id="name" name="name">
    </p>
    
    <p>
        <label for="email">البريد الإلكتروني:</label>
        <input type="email" id="email" name="email">
    </p>
    
    <p class="form-note">
        جميع الحقول المميزة بـ (*) مطلوبة.
    </p>
</form>

<article class="news-article">
    <h1>عنوان الخبر</h1>
    <p class="news-lead">المقدمة الإخبارية الجاذبة في بداية الخبر.</p>
    <p class="news-body">تفاصيل الخبر والمعلومات الأساسية.</p>
    <p class="news-quote">"اقتباس من شخصية مهمة في الخبر"</p>
    <p class="news-conclusion">خلاصة أو تطورات متوقعة.</p>
</article>

<article class="news-article">
    <h1>عنوان الخبر</h1>
    <p class="news-lead">المقدمة الإخبارية الجاذبة في بداية الخبر.</p>
    <p class="news-body">تفاصيل الخبر والمعلومات الأساسية.</p>
    <p class="news-quote">"اقتباس من شخصية مهمة في الخبر"</p>
    <p class="news-conclusion">خلاصة أو تطورات متوقعة.</p>
</article>

<p>مقدمة الموضوع وأهميته.</p>
<p>النقطة الأولى مع الشرح المفصل.</p>
<p>النقطة الثانية والأمثلة العملية.</p>
<p>الخلاصة والنتائج.</p>

<p>مقدمة الموضوع وأهميته.</p>
<p>النقطة الأولى مع الشرح المفصل.</p>
<p>النقطة الثانية والأمثلة العملية.</p>
<p>الخلاصة والنتائج.</p>

<!-- جيد: فقرة بطول مناسب -->
<p>
    هذه فقرة بطول مناسب تحتوي على فكرة واحدة رئيسية. 
    تتراوح بين 3-5 جمل وتكون سهلة القراءة والفهم.
    لا تحتوي على معلومات كثيرة ومتنوعة في نفس الوقت.
</p>

<!-- تجنب: الفقرات الطويلة جداً -->
<p>
    هذه فقرة طويلة جداً تحتوي على الكثير من المعلومات المختلفة...
    [محتوى طويل جداً يصعب قراءته]
</p>

<!-- جيد: فقرة بطول مناسب -->
<p>
    هذه فقرة بطول مناسب تحتوي على فكرة واحدة رئيسية. 
    تتراوح بين 3-5 جمل وتكون سهلة القراءة والفهم.
    لا تحتوي على معلومات كثيرة ومتنوعة في نفس الوقت.
</p>

<!-- تجنب: الفقرات الطويلة جداً -->
<p>
    هذه فقرة طويلة جداً تحتوي على الكثير من المعلومات المختلفة...
    [محتوى طويل جداً يصعب قراءته]
</p>

<!-- نظام فئات منطقي -->
<p class="intro">فقرة المقدمة</p>
<p class="main-content">المحتوى الرئيسي</p>
<p class="sidebar-note">ملاحظة جانبية</p>
<p class="footer-text">نص التذييل</p>

<!-- نظام فئات منطقي -->
<p class="intro">فقرة المقدمة</p>
<p class="main-content">المحتوى الرئيسي</p>
<p class="sidebar-note">ملاحظة جانبية</p>
<p class="footer-text">نص التذييل</p>

<p dir="rtl" lang="ar">
    هذه فقرة باللغة العربية تحتاج إلى اتجاه من اليمين إلى اليسار.
</p>

<p class="arabic-text">
    النص العربي يحتاج إلى خطوط مناسبة ومساحات صحيحة.
</p>

<p dir="rtl" lang="ar">
    هذه فقرة باللغة العربية تحتاج إلى اتجاه من اليمين إلى اليسار.
</p>

<p class="arabic-text">
    النص العربي يحتاج إلى خطوط مناسبة ومساحات صحيحة.
</p>

    /* التنسيق الأساسي */
p {
    font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1.5em;
}

/* للنصوص العربية */
p[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

/* أنواع مختلفة من الفقرات */
p.intro {
    font-size: 18px;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 2em;
}

p.highlight {
    background-color: #f8f9fa;
    padding: 15px;
    border-left: 4px solid #007bff;
    margin: 1.5em 0;
}

p.small-text {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

p.quote {
    font-style: italic;
    font-size: 18px;
    text-align: center;
    margin: 2em 0;
    padding: 20px;
    background: #f5f5f5;
}

    /* التنسيق الأساسي */
p {
    font-family: 'Cairo', 'Tajawal', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1.5em;
}

/* للنصوص العربية */
p[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

/* أنواع مختلفة من الفقرات */
p.intro {
    font-size: 18px;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 2em;
}

p.highlight {
    background-color: #f8f9fa;
    padding: 15px;
    border-left: 4px solid #007bff;
    margin: 1.5em 0;
}

p.small-text {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

p.quote {
    font-style: italic;
    font-size: 18px;
    text-align: center;
    margin: 2em 0;
    padding: 20px;
    background: #f5f5f5;
}

/* للشاشات الكبيرة */
@media (min-width: 1024px) {
    p {
        max-width: 65ch; /* 65 حرف كحد أقصى للسطر */
        font-size: 18px;
    }
}

/* للأجهزة اللوحية */
@media (max-width: 768px) {
    p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 1.2em;
    }
}

/* للهواتف المحمولة */
@media (max-width: 480px) {
    p {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 1em;
    }
}

/* للشاشات الكبيرة */
@media (min-width: 1024px) {
    p {
        max-width: 65ch; /* 65 حرف كحد أقصى للسطر */
        font-size: 18px;
    }
}

/* للأجهزة اللوحية */
@media (max-width: 768px) {
    p {
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 1.2em;
    }
}

/* للهواتف المحمولة */
@media (max-width: 480px) {
    p {
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 1em;
    }
}

<!-- خطأ شائع -->
<p> </p>
<p>  </p>
<p> <br> </p>

<!-- استخدم CSS بدلاً من ذلك -->
<p class="spacer"> محتوى مع مساحة إضافية </p>

<!-- خطأ شائع -->
<p> </p>
<p>  </p>
<p> <br> </p>

<!-- استخدم CSS بدلاً من ذلك -->
<p class="spacer"> محتوى مع مساحة إضافية </p>

<!-- خطأ: استخدام P للتخطيط -->
<p><button>زر</button></p>
<p><img src="logo.jpg"></p>

<!-- صحيح: استخدام العناصر المناسبة -->
<div class="button-container">
    <button>زر</button>
</div>
<figure>
    <img src="logo.jpg" alt="الشعار">
</figure>

<!-- خطأ: استخدام P للتخطيط -->
<p><button>زر</button></p>
<p><img src="logo.jpg"></p>

<!-- صحيح: استخدام العناصر المناسبة -->
<div class="button-container">
    <button>زر</button>
</div>
<figure>
    <img src="logo.jpg" alt="الشعار">
</figure>

<!-- خطأ: عناصر block داخل P -->
<p>
    نص عادي
    <div>قسم داخل الفقرة</div> <!-- خطأ -->
    <h3>عنوان داخل الفقرة</h3> <!-- خطأ -->
</p>

<!-- صحيح -->
<p>نص عادي</p>
<div>قسم منفصل</div>
<h3>عنوان منفصل</h3>
<p>نص آخر</p>

<!-- خطأ: عناصر block داخل P -->
<p>
    نص عادي
    <div>قسم داخل الفقرة</div> <!-- خطأ -->
    <h3>عنوان داخل الفقرة</h3> <!-- خطأ -->
</p>

<!-- صحيح -->
<p>نص عادي</p>
<div>قسم منفصل</div>
<h3>عنوان منفصل</h3>
<p>نص آخر</p>

<!-- خطأ شائع -->
<p>فقرة أولى</p>
<p> </p> <!-- خطأ: فقرة فارغة للمساحة -->
<p>فقرة ثانية</p>

<!-- الطريقة الصحيحة -->
<p>فقرة أولى</p>
<p class="spaced">فقرة ثانية مع مساحة إضافية</p>

<style>
.spaced {
    margin-top: 2em;
}
</style>

<!-- خطأ شائع -->
<p>فقرة أولى</p>
<p> </p> <!-- خطأ: فقرة فارغة للمساحة -->
<p>فقرة ثانية</p>

<!-- الطريقة الصحيحة -->
<p>فقرة أولى</p>
<p class="spaced">فقرة ثانية مع مساحة إضافية</p>

<style>
.spaced {
    margin-top: 2em;
}
</style>

<!-- خطأ -->
<p>فقرة غير مغلقة

<p>فقرة أخرى</p>

<!-- صحيح -->
<p>فقرة مغلقة بشكل صحيح</p>
<p>فقرة أخرى</p>

<!-- خطأ -->
<p>فقرة غير مغلقة

<p>فقرة أخرى</p>

<!-- صحيح -->
<p>فقرة مغلقة بشكل صحيح</p>
<p>فقرة أخرى</p>

<!-- خطأ: خلط الاتجاهات -->
<p>نص عربي مع English text بدون تنظيم</p>

<!-- صحيح: تنظيم الاتجاهات -->
<p dir="rtl">
    نص عربي مع <span dir="ltr">English text</span> منظم
</p>

<!-- خطأ: خلط الاتجاهات -->
<p>نص عربي مع English text بدون تنظيم</p>

<!-- صحيح: تنظيم الاتجاهات -->
<p dir="rtl">
    نص عربي مع <span dir="ltr">English text</span> منظم
</p>

<!-- خطأ: تنسيق مباشر مفرط -->
<p style="color: red; font-size: 20px; background: yellow; padding: 10px;">
    فقرة مع تنسيق مباشر مفرط
</p>

<!-- صحيح: استخدام CSS منفصل -->
<p class="highlighted">فقرة مع تنسيق منظم</p>

<style>
.highlighted {
    color: #c0392b;
    font-size: 1.25em;
    background-color: #fff3cd;
    padding: 0.75rem;
}
</style>

<!-- خطأ: تنسيق مباشر مفرط -->
<p style="color: red; font-size: 20px; background: yellow; padding: 10px;">
    فقرة مع تنسيق مباشر مفرط
</p>

<!-- صحيح: استخدام CSS منفصل -->
<p class="highlighted">فقرة مع تنسيق منظم</p>

<style>
.highlighted {
    color: #c0392b;
    font-size: 1.25em;
    background-color: #fff3cd;
    padding: 0.75rem;
}
</style>

<!-- خطأ: تقسيم غير منطقي -->
<p>هذه</p>
<p>فقرات</p>
<p>مقسمة</p>
<p>بطريقة</p>
<p>خاطئة</p>
<!-- صحيح: تقسيم منطقي -->
<p>هذه فقرة كاملة ومنطقية تحتوي على فكرة واحدة.</p>
<p>وهذه فقرة أخرى تحتوي على فكرة مختلفة.</p>

<!-- خطأ: تقسيم غير منطقي -->
<p>هذه</p>
<p>فقرات</p>
<p>مقسمة</p>
<p>بطريقة</p>
<p>خاطئة</p>
<!-- صحيح: تقسيم منطقي -->
<p>هذه فقرة كاملة ومنطقية تحتوي على فكرة واحدة.</p>
<p>وهذه فقرة أخرى تحتوي على فكرة مختلفة.</p>

<p dir="rtl" lang="ar" class="arabic-paragraph">
    هذه فقرة عربية بإعدادات صحيحة للاتجاه واللغة.
</p>

<p dir="rtl" lang="ar" class="arabic-paragraph">
    هذه فقرة عربية بإعدادات صحيحة للاتجاه واللغة.
</p>

.arabic-paragraph {
    font-family: 'Cairo', 'Amiri', 'Scheherazade', serif;
    text-align: right;
    direction: rtl;
    line-height: 1.8; <em>/* خط أعلى للعربية */</em>
}

.arabic-paragraph {
    font-family: 'Cairo', 'Amiri', 'Scheherazade', serif;
    text-align: right;
    direction: rtl;
    line-height: 1.8; <em>/* خط أعلى للعربية */</em>
}

<p dir="rtl">
    هذا نص عربي يحتوي على 
    <span dir="ltr">English text</span> 
    و <span dir="ltr">numbers 123</span>
    بطريقة صحيحة.
</p>

<p dir="rtl">
    هذا نص عربي يحتوي على 
    <span dir="ltr">English text</span> 
    و <span dir="ltr">numbers 123</span>
    بطريقة صحيحة.
</p>

<p>
    استخدم علامات الترقيم العربية الصحيحة، مثل الفاصلة العربية (،) 
    وعلامة الاستفهام (؟) وعلامة التعجب (!)
</p>

<p>
    استخدم علامات الترقيم العربية الصحيحة، مثل الفاصلة العربية (،) 
    وعلامة الاستفهام (؟) وعلامة التعجب (!)
</p>

<article class="blog-post">
    <header>
        <h1>عنوان المقال الرئيسي</h1>
        <p class="meta">نُشر في 15 أغسطس 2024 بواسطة أحمد محمد</p>
    </header>
    
    <main>
        <p class="lead">
            فقرة المقدمة الجاذبة التي تلخص أهم نقاط المقال وتشجع القارئ 
            على متابعة القراءة والاستفادة من المحتوى.
        </p>
        
        <p>
            الفقرة الأولى من المحتوى الرئيسي تحتوي على شرح مفصل للموضوع 
            مع إعطاء السياق اللازم للفهم.
        </p>
        
        <p>
            فقرة ثانية تطرق إلى نقطة مهمة أخرى مع 
            <a href="#reference">مرجع مفيد</a> للاستزادة.
        </p>
        
        <p class="highlight">
            فقرة مميزة تحتوي على نصيحة مهمة أو معلومة قيمة يجب التركيز عليها.
        </p>
        
        <p>
            الفقرة الختامية التي تلخص أهم النقاط وتقدم توصيات عملية للقارئ.
        </p>
    </main>
    
    <footer>
        <p class="tags">الكلمات المفتاحية: تطوير الويب، HTML، البرمجة</p>
    </footer>
</article>

<article class="blog-post">
    <header>
        <h1>عنوان المقال الرئيسي</h1>
        <p class="meta">نُشر في 15 أغسطس 2024 بواسطة أحمد محمد</p>
    </header>
    
    <main>
        <p class="lead">
            فقرة المقدمة الجاذبة التي تلخص أهم نقاط المقال وتشجع القارئ 
            على متابعة القراءة والاستفادة من المحتوى.
        </p>
        
        <p>
            الفقرة الأولى من المحتوى الرئيسي تحتوي على شرح مفصل للموضوع 
            مع إعطاء السياق اللازم للفهم.
        </p>
        
        <p>
            فقرة ثانية تطرق إلى نقطة مهمة أخرى مع 
            <a href="#reference">مرجع مفيد</a> للاستزادة.
        </p>
        
        <p class="highlight">
            فقرة مميزة تحتوي على نصيحة مهمة أو معلومة قيمة يجب التركيز عليها.
        </p>
        
        <p>
            الفقرة الختامية التي تلخص أهم النقاط وتقدم توصيات عملية للقارئ.
        </p>
    </main>
    
    <footer>
        <p class="tags">الكلمات المفتاحية: تطوير الويب، HTML، البرمجة</p>
    </footer>
</article>

<div class="product-page">
    <section class="product-info">
        <h1>اسم المنتج</h1>
        
        <p class="product-tagline">
            وصف مختصر وجذاب للمنتج يوضح قيمته الأساسية.
        </p>
        
        <p class="product-description">
            وصف مفصل للمنتج يشمل المميزات الرئيسية والفوائد التي سيحصل 
            عليها العميل عند الشراء. يجب أن يكون واضحاً ومقنعاً.
        </p>
        
        <p class="specifications">
            <strong>المواصفات:</strong> قائمة بأهم المواصفات التقنية 
            والخصائص المميزة للمنتج.
        </p>
        
        <p class="warranty">
            <em>ضمان لمدة عامين مع خدمة عملاء على مدار الساعة.</em>
        </p>
    </section>
</div>

<div class="product-page">
    <section class="product-info">
        <h1>اسم المنتج</h1>
        
        <p class="product-tagline">
            وصف مختصر وجذاب للمنتج يوضح قيمته الأساسية.
        </p>
        
        <p class="product-description">
            وصف مفصل للمنتج يشمل المميزات الرئيسية والفوائد التي سيحصل 
            عليها العميل عند الشراء. يجب أن يكون واضحاً ومقنعاً.
        </p>
        
        <p class="specifications">
            <strong>المواصفات:</strong> قائمة بأهم المواصفات التقنية 
            والخصائص المميزة للمنتج.
        </p>
        
        <p class="warranty">
            <em>ضمان لمدة عامين مع خدمة عملاء على مدار الساعة.</em>
        </p>
    </section>
</div>