Lesson 7 / الدرس 7

Paragraphs / الفقرات

The  tag marks one paragraph, one idea. The browser collapses every space and line break inside it into a single space, and adds its own spacing above and below.

الوسم  يُعرِّف فقرة واحدة، فكرة واحدة. والمتصفح يدمج كل مسافة وسطر جديد داخلها في مسافة واحدة، ويضيف تباعده الخاص فوقها وتحتها.

A paragraph is a block of text that carries one idea. In HTML you write it with the  tag: everything between the opening  and the closing  belongs to that one idea. The browser automatically adds space above and below every paragraph, even though you never wrote any CSS for it.

الفقرة هي كتلة من النص تحمل فكرة واحدة. في HTML نكتبها بالوسم : كل ما بين وسم الفتح  ووسم الإغلاق  ينتمي إلى تلك الفكرة الواحدة. والمتصفح يضيف تلقائيًا مسافة فوق وتحت كل فقرة، رغم أنك لم تكتب أي CSS لذلك.

<p>This is my first paragraph.</p>
<p>And this is a second one.</p>

Two paragraphs. Notice each one opens with  and closes with .

فقرتان. لاحظ أن كل واحدة تفتح بـ  وتغلق بـ .

The browser ignores your extra spaces

If you press Enter many times, add many spaces, or even use a tab inside a paragraph, the browser collapses that entire run into one single space. This rule is called whitespace collapsing, and it treats every space, tab and line break the same way — HTML never distinguishes between them. It exists so you are free to format your source file for your own eyes: indent it, break long lines, leave blank lines between paragraphs for readability — none of that changes what appears on the page.

<p>These      spaces


and line breaks all become one space.</p>

Run this — the output is a single tidy line.

So where does the gap between paragraphs come from?

Not from a blank line you typed — you just saw that the browser throws those away. It comes from  itself: every browser ships with a default stylesheet, and in it  is a block element with margin above and below built in. A block element always takes the full width of its container and stacks under whatever came before it, which is why two paragraphs never sit side by side. Later, when you learn CSS, you will be able to change or remove that default margin — but until then, the browser supplies it for you automatically.

ليست من سطر فارغ كتبته أنت — فقد رأيت للتو أن المتصفح يتجاهله. بل تأتي من  نفسه: فكل متصفح يأتي بورقة أنماط افتراضية، وفيها  عنصر كتلة له هامش فوق وتحت مدمج فيه. وعنصر الكتلة يأخذ دائمًا العرض الكامل لحاويته، ويصطف تحت ما سبقه، ولهذا لا تجلس فقرتان أبدًا جنبًا إلى جنب. وحين تتعلم CSS لاحقًا ستستطيع تغيير هذا الهامش الافتراضي أو إزالته — لكن حتى ذلك الحين، يوفره لك المتصفح تلقائيًا.

لإجبار المتصفح على كسر السطر داخل الفقرة، استخدم  . ستتعلمه بالتفصيل في الدرس السابع.

لا تضع فقرة داخل فقرة أخرى أبدًا. فقاعدة تحليل HTML تنص على أن  يُغلق تلقائيًا بمجرد أن يقابل المتصفح وسم فتح كتلة آخر — بما في ذلك  ثانٍ — فوسم الإغلاق الذي توقعته يُتجاهل ببساطة. سيبدو الكود متداخلًا في المحرر، لكن المتصفح لن يعرضه هكذا أبدًا.

 is a block element — it takes the full width of its container.
The closing tag  is required in good practice.
You can put text, links and images inside a paragraph.
Do not add empty  pairs just to create blank space — that space is CSS's job, not the paragraph's.

Tag	What it does
<p>	Opens a paragraph
</p>	Closes a paragraph
<br>	Line break inside a paragraph

The tags used in this lesson.

Try it live / جرّب بنفسك

<h1>Your name here</h1>

<p>Write your first paragraph here.</p>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Which tag defines a paragraph?

2. What happens to five spaces in a row inside a paragraph?

3. Is it correct to write a  inside another ?

هل يصح كتابة  داخل  أخرى؟

Your task / مهمتك

Write a page that introduces you: a heading with your name, then three paragraphs — where you live, what you are learning, and why.

اكتب صفحة تعرّف بك: عنوان باسمك، ثم ثلاث فقرات — أين تسكن، وماذا تتعلم، ولماذا.

One <h1> with your name وسم <h1> واحد باسمك
Exactly three  elements ثلاث فقرات  بالضبط
Every tag is properly closed كل وسم مغلق بشكل صحيح