Lesson 5 / الدرس 5

Elements, tags & attributes / العناصر والوسوم والسمات

An element is an opening tag, its content and its closing tag — except for void elements, which have no closing tag at all. Attributes add extra information inside an opening tag, written name="value".

العنصر هو وسم فتح ومحتوى ووسم إغلاق — إلا العناصر الفارغة، التي لا وسم إغلاق لها أصلًا. والسمات تضيف معلومات إضافية داخل وسم الفتح، وتُكتب name="value".

You have already used tags without a name for what they add up to. Now you get the full vocabulary: what an element actually is, tags that never close, and the extra information you can attach to a tag called an attribute. Everything later in this course is built out of these three ideas.

An element = opening tag + content + closing tag

You saw this already with <h1>: <h1> is the opening tag, </h1> is the closing tag — the forward slash is what makes it a closing tag — and the text between them is the content. All three parts together are called an element. This pattern repeats for almost every tag in HTML: <tagname>content</tagname>.

رأيت هذا من قبل مع <h1>: <h1> وسم الفتح، و </h1> وسم الإغلاق — والشرطة المائلة هي ما يجعله وسم إغلاق — والنص بينهما هو المحتوى. والأجزاء الثلاثة معًا تُسمى عنصرًا. وهذا النمط يتكرر في كل وسم تقريبًا في HTML: <tagname>محتوى</tagname>.

<h1>Amman</h1>
<p>A city with three thousand years of history.</p>
<a href="https://example.com">Read more</a>

Three elements, each with its own opening tag, content and closing tag.

كل وسم تفتحه لا بد أن تغلقه، وبالترتيب الصحيح — آخر وسم فتحته هو أول وسم تغلقه. فكتابة <p><strong>تحذير</p></strong> تجعل الوسوم متقاطعة لا متداخلة بشكل صحيح، والمتصفحات تخمّن ما قصدته بطرق مختلفة تمامًا. أغلق الوسوم بترتيب معاكس لترتيب فتحها.

Void elements: tags with no content and no closing tag

Not every tag wraps content. Some tags represent one single thing on their own and have nothing to put a closing tag around — these are called void elements. <hr> draws a horizontal line; there is no content it could hold, so it is just <hr>, never <hr></hr>. <br>, <img>, <input> and <meta> work the same way — you will meet each of them properly later in this course.

لا يُحيط كل وسم بمحتوى. فبعض الوسوم يمثّل شيئًا واحدًا بذاته ولا يوجد محتوى يمكن أن يحيط به وسم إغلاق — وتُسمى هذه العناصر الفارغة. فوسم <hr> يرسم خطًا أفقيًا؛ ولا يوجد محتوى يحمله، فيُكتب <hr> فقط، ولا يُكتب أبدًا <hr></hr>. وتعمل <br> و <img> و <input> و <meta> بالطريقة نفسها — وستتعرف على كل واحد منها بالتفصيل لاحقًا في هذه الدورة.

Attributes: extra information inside the opening tag

A tag by itself says what something is; an attribute adds a detail about it. An attribute is written as name="value", sits inside the opening tag after the tag name, separated from it and from other attributes by a space — and it never appears on the closing tag. You already saw one: in <a href="https://example.com">, href is the attribute name and the address is its value, always inside quotes.

الوسم وحده يقول ما هو الشيء؛ أما السمة فتضيف تفصيلًا عنه. تُكتب السمة بالشكل name="value"، وتقع داخل وسم الفتح بعد اسم الوسم، وتُفصل عنه وعن أي سمة أخرى بمسافة — ولا تظهر أبدًا في وسم الإغلاق. وقد رأيت واحدة من قبل: في <a href="https://example.com">، href هو اسم السمة والعنوان هو قيمتها، وتكون دائمًا بين علامتي اقتباس.

<img src="cat.jpg" alt="A sleeping cat">

<a href="https://example.com">Visit the site</a>

<img> is a void element carrying two attributes — src and alt — and no closing tag at all. <a> is a regular element, closed as usual, carrying one attribute, href.

<img> عنصر فارغ يحمل سمتين — src و alt — وبلا وسم إغلاق على الإطلاق. أما <a> فعنصر عادي، يُغلق كالمعتاد، ويحمل سمة واحدة هي href.

يجب أن تكون قيمة السمة داخل علامتي اقتباس، خصوصًا إذا كانت تحتوي على مسافة. فكتابة alt=orange cat بلا علامتي اقتباس تجعل المتصفح يقرأ orange فقط بوصفها القيمة، وتبقى cat سمة ثانية مكسورة بلا معنى. أحِط القيمة كاملة دائمًا: alt="orange cat".

Word	What it means
Tag	A label such as <p> or <img>
Element	An opening tag, its content, and its closing tag
Void element	A tag with no content and no closing tag, such as <hr>
Attribute	Extra information inside an opening tag, written name="value"

The vocabulary this lesson gives you — the rest of the course uses it constantly.

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

<h1>Your name here</h1>

<hr>

<!-- add a link with an href attribute below -->

Preview / المعاينة

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

1. An opening tag, its content and its closing tag together are called what?

2. Where does an attribute go?

3. You write <img src="cat.jpg" alt=orange cat>. What goes wrong?

كتبت <img src="cat.jpg" alt=orange cat>. ما الخطأ الذي يحدث؟

Your task / مهمتك

Write a small page about yourself: one heading with your name, an <hr> as a divider, and a link (<a>) with an href attribute pointing to any site you like, with text that says where it goes. Every regular tag you open must be closed, every attribute value must be in quotes, and the <hr> must have no closing tag.

اكتب صفحة صغيرة عن نفسك: عنوانًا باسمك، ثم <hr> كفاصل، ثم رابطًا (<a>) بسمة href تشير إلى أي موقع تحبه، ونصًا يقول إلى أين يذهب. كل وسم عادي تفتحه لا بد أن تغلقه، وكل قيمة سمة لا بد أن تكون بين علامتي اقتباس، و <hr> يجب ألا يكون له وسم إغلاق.

One heading, opened and properly closed عنوان واحد، مفتوح ومغلق بشكل صحيح
One <hr> with no closing tag وسم <hr> واحد بلا وسم إغلاق
One <a> with an href attribute whose value is in quotes وسم <a> واحد بسمة href قيمتها بين علامتي اقتباس