<!DOCTYPE html>
إعلان
إعلان يُخبر المتصفح أن الملف HTML5. يجب أن يكون أول سطر في كل ملف HTML.
<!DOCTYPE html>
<html>...</html>
ملاحظة: ليس tag بالمعنى الحقيقي — لا يحتاج إغلاق. بدونه المتصفح يدخل "Quirks Mode" ويعرض الصفحة بشكل غير متوقع.
<html>
Block
الجذر — يحتوي كل عناصر الصفحة. يقبل lang (اللغة) وdir (اتجاه الكتابة).
<html lang="ar" dir="rtl">
..كل الصفحة هنا..
</html>
lang: يخبر محركات البحث ومساعدي الصوت بلغة المحتوى. dir="rtl" للعربية والعبرية.
<head>
Meta
يحتوي المعلومات الخفية (metadata) — لا يُعرض للزائر. يضم title وmeta وlink وscript.
<head>
<meta charset="UTF-8">
<title>عنوان الصفحة</title>
</head>
كل ما يُوضع هنا لا يظهر على الشاشة لكنه يؤثر على كيفية عمل الصفحة وترتيبها في البحث.
<body>
Block
يحتوي كل المحتوى المرئي. كل ما تراه على الشاشة يعيش هنا.
<body>
<h1>مرحباً!</h1>
<p>محتوى الصفحة</p>
</body>
يقبل: onload, onscroll لتشغيل JS. يمكن تنسيقه بـ CSS لتغيير خلفية الصفحة كلها.
<title>
Meta
عنوان الصفحة — يظهر في تبويب المتصفح، نتائج البحث، والـ Bookmarks.
<title>تعلّم HTML | PhineX Academy</title>
SEO: أهم عنصر للـ SEO. 50-60 حرف مثالي. يجب أن يكون فريداً لكل صفحة في موقعك.
<meta>
Void
عنصر بيانات وصفية. لا يحتاج إغلاق. يُستخدم لـ charset وviewport وdescription وOG tags.
<meta charset="UTF-8">
<meta name="description" content="وصف الصفحة">
<meta name="viewport" content="width=device-width">
Void element = لا يقبل محتوى ولا يحتاج tag إغلاق.
<header>
Block
رأس الصفحة أو القسم. يحتوي عادةً الشعار وقائمة التنقل.
<header>
<img src="logo.png" alt="الشعار">
<nav>...</nav>
</header>
يمكن استخدامه أكثر من مرة — داخل article وsection أيضاً كرأس لهذا القسم.
<nav>
Block
حاوية قائمة التنقل الرئيسية. يجب أن يحتوي فقط روابط التنقل المهمة.
<nav aria-label="القائمة الرئيسية">
<ul>
<li><a href="/">الرئيسية</a></li>
</ul>
</nav>
Accessibility: أضف aria-label لتمييز قوائم متعددة في صفحة واحدة.
<main>
Block
المحتوى الرئيسي الفريد للصفحة. يجب أن يكون واحداً فقط في كل صفحة.
<main>
<!-- المحتوى الرئيسي -->
<article>...</article>
</main>
SEO: Google يُعطي أولوية للمحتوى داخل main. لا يُكرَّر في الصفحة.
<section>
Block
قسم موضوعي في الصفحة. يجب أن يكون له عنوان (h2-h6) ويمثل محتوى متماسكاً.
<section id="about">
<h2>عنّي</h2>
<p>معلومات عني...</p>
</section>
مقابل div: section له معنى دلالي. div مجرد حاوية عامة بدون معنى.
<article>
Block
محتوى مستقل يمكن نشره بمفرده — مقال، تغريدة، منتج، تعليق.
<article>
<h2>عنوان المقال</h2>
<time datetime="2025-01-01">يناير 2025</time>
<p>محتوى المقال...</p>
</article>
سؤال لتحديد ما إذا كنت تحتاج article: "هل يبدو هذا المحتوى منطقياً لو نُشر بمفرده في موقع آخر؟"
<aside>
Block
محتوى جانبي مرتبط بالمحتوى الرئيسي. مثالي للشريط الجانبي والإعلانات والروابط ذات الصلة.
<aside>
<h3>مقالات ذات صلة</h3>
<ul>...</ul>
</aside>
لا تستخدم aside لمحتوى ليس له علاقة بالمحتوى الرئيسي. استخدم div عوضاً.
<footer>
Block
ذيل الصفحة أو القسم. يحتوي حقوق النشر وروابط السياسات وبيانات الاتصال.
<footer>
<p>© 2025 PhineX Academy</p>
<nav>
<a href="/privacy">الخصوصية</a>
</nav>
</footer>
مثل header، يمكن استخدامه داخل article وsection كذيل لذلك القسم.
<div>
Block
حاوية عامة بدون معنى دلالي. استخدمه للتنسيق فقط عندما لا يناسب أي عنصر دلالي آخر.
<div class="card-grid">
<div class="card">بطاقة</div>
<div class="card">بطاقة</div>
</div>
قاعدة: إذا وجدت عنصراً دلالياً مناسباً (section, article, nav...) استخدمه. div هو الملاذ الأخير.
<h1> — <h6>
Block
ستة مستويات من العناوين. h1 الأكبر والأهم (مرة واحدة فقط في الصفحة).
<h1>عنوان الصفحة (مرة واحدة)</h1>
<h2>عنوان قسم رئيسي</h2>
<h3>عنوان قسم فرعي</h3>
SEO: h1 هو الكلمة المفتاحية الرئيسية. لا تستخدم العناوين لتكبير النص — استخدم CSS.
<p>
Block
فقرة نصية. المتصفح يضيف مسافة فوقها وتحتها تلقائياً.
<p>هذه فقرة نصية كاملة تحتوي على جملة أو أكثر.</p>
<p>وهذه فقرة أخرى منفصلة.</p>
لا تضع عناصر block (مثل div أو h2) داخل p — هذا خطأ HTML.
<span>
Inline
حاوية inline عامة بدون معنى دلالي. مثالية لتنسيق جزء من النص.
<p>السعر <span class="price">99 ريال</span> فقط.</p>
span للـ inline مثل div للـ block — حاوية تنسيق بدون معنى دلالي.
<strong>
Inline
نص مهم — يظهر غامقاً ويحمل أهمية دلالية لمحركات البحث.
<p>هذا <strong>مهم جداً</strong> ولا تتجاهله.</p>
مقابل <b>: strong له معنى دلالي (أهمية). b مجرد تغميق بصري بدون معنى.
<em>
Inline
تأكيد — يظهر مائلاً ويحمل معنى التأكيد الدلالي.
<p>قل <em>الحقيقة</em> دائماً.</p>
مقابل <i>: em تأكيد دلالي. i مائل بصري فقط (يُستخدم للمصطلحات الأجنبية أو الأيقونات).
<br>
Void
كسر سطر (Line Break) — ينزل سطراً جديداً داخل نفس الفقرة.
<p>السطر الأول<br>
السطر الثاني في نفس الفقرة</p>
استخدم p لفقرات منفصلة. br للكسر داخل فقرة واحدة فقط (مثل الشعر أو العناوين).
<hr>
Void
خط أفقي فاصل — يمثل تحولاً موضوعياً في المحتوى.
<p>موضوع أول</p>
<hr>
<p>موضوع مختلف</p>
له معنى دلالي (فاصل موضوعي) وليس مجرد خط تزييني.
<blockquote>
Block
اقتباس من مصدر خارجي. يجب استخدام cite لتحديد المصدر.
<blockquote cite="https://source.com">
<p>نص الاقتباس هنا...</p>
<footer>— المصدر</footer>
</blockquote>
المتصفح يُضيف هامشاً داخلياً تلقائياً. cite يحتوي رابط المصدر.
<code>
Inline
جزء صغير من كود برمجي داخل النص. يظهر بخط monospace.
<p>استخدم <code>console.log()</code> للتصحيح.</p>
لكتل الكود الكاملة استخدم pre + code معاً.
<pre>
Block
نص منسق مسبقاً — يحافظ على المسافات والأسطر كما كُتبت.
<pre><code>
function hello() {
console.log("مرحباً!");
}
</code></pre>
استخدمه مع code لعرض كتل الكود الكاملة مع الحفاظ على التنسيق.
<mark>
Inline
نص مظلل بالأصفر — يعني "ذو أهمية في هذا السياق".
<p>نتيجة البحث: تعلّم <mark>HTML</mark> من الصفر.</p>
مثالي لتمييز نتائج البحث داخل الصفحة.
<time>
Inline
يُمثّل وقتاً أو تاريخاً. datetime يحتوي التنسيق الآلي القابل للقراءة بالأجهزة.
<time datetime="2025-03-15">15 مارس 2025</time>
<time datetime="14:30">2:30 مساءً</time>
محركات البحث تفهم datetime لعرض التواريخ في نتائج البحث الغنية.
<a>
Inline
Anchor — الرابط التشعبي. href يحدد الوجهة. يمكنه أن يحتوي أي عنصر HTML.
<a href="https://phinex.com" target="_blank" rel="noopener">
PhineX Academy
</a>
<!-- رابط إيميل -->
<a href="mailto:hi@phinex.com">راسلنا</a>
<!-- رابط هاتف -->
<a href="tel:+966501234567">اتصل بنا</a>
دائماً أضف rel="noopener noreferrer" مع target="_blank" لأسباب أمنية.
<img>
Void
يعرض صورة. src مسار الصورة، alt النص البديل (إلزامي).
<img
src="photo.jpg"
alt="وصف واضح للصورة"
width="800"
height="600"
loading="lazy">
حدّد دائماً width وheight لمنع قفز المحتوى عند التحميل (CLS).
<figure> + <figcaption>
Block
يغلّف صورة (أو مخططاً أو كوداً) مع تعليق توضيحي.
<figure>
<img src="chart.png" alt="مخطط المبيعات">
<figcaption>مبيعات الربع الأول 2025</figcaption>
</figure>
figcaption يوفر سياقاً للصورة — أفضل من p منفصل تحت الصورة.
<video>
Block
يُشغّل فيديو مباشرة في الصفحة. يدعم controls وautoplay وloop ومزيداً.
<video
src="intro.mp4"
controls
poster="thumbnail.jpg"
width="640">
متصفحك لا يدعم الفيديو
</video>
poster = صورة تظهر قبل التشغيل. controls = يُظهر أزرار التشغيل والصوت.
<audio>
Inline
يُشغّل ملف صوتي في الصفحة. مثالي للبودكاست والتعليقات الصوتية.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
</audio>
قدم صيغتين لضمان التوافق مع كل المتصفحات (mp3 وogg).
<iframe>
Block
يُضمّن صفحة ويب أخرى داخل صفحتك. يُستخدم لخرائط Google ومقاطع YouTube.
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
title="عنوان الفيديو"
width="560"
height="315"
allowfullscreen>
</iframe>
دائماً أضف title للـ iframe لإمكانية الوصول. sandbox يحد من صلاحياته لزيادة الأمان.
<picture>
Block
يتيح تحديد صور مختلفة لشاشات مختلفة الحجم (Responsive Images).
<picture>
<source media="(min-width:768px)" srcset="desktop.jpg">
<source media="(min-width:480px)" srcset="tablet.jpg">
<img src="mobile.jpg" alt="صورة متجاوبة">
</picture>
المتصفح يختار المصدر المناسب. img الأخير هو الاحتياطي للمتصفحات القديمة.
<table>
Block
الجدول الكامل — يحتوي thead وtbody وtfoot والصفوف والخلايا.
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>
مهم: استخدم الجداول للبيانات الجدولية فقط — ليس للتخطيط! الـ Flexbox وGrid للتخطيط.
<thead> / <tbody> / <tfoot>
Block
تقسيم الجدول: thead للرأس، tbody للبيانات، tfoot للمجاميع. تساعد على القراءة والـ SEO.
<thead>
<tr><th>الاسم</th><th>السعر</th></tr>
</thead>
<tbody>
<tr><td>منتج أ</td><td>50 ر</td></tr>
</tbody>
بدون هذه العناصر المتصفح يُضيفها تلقائياً — لكن من الأفضل كتابتها صريحة.
<tr>
Block
Table Row — صف في الجدول. يحتوي خلايا td أو th.
<tr>
<td>خلية 1</td>
<td>خلية 2</td>
<td>خلية 3</td>
</tr>
يجب أن يكون داخل thead أو tbody أو tfoot — ليس مباشرة في table.
<th> / <td>
Block
th = خلية رأس (غامقة ومتوسطة). td = خلية بيانات عادية.
<!-- th في الرأس -->
<th scope="col">المنتج</th>
<!-- td للبيانات -->
<td colspan="2">يمتد عمودين</td>
<td rowspan="3">يمتد 3 صفوف</td>
scope في th يوضح إذا كان رأساً للعمود (col) أو الصف (row).
<caption>
Block
عنوان/تعليق للجدول. يجب أن يكون أول عنصر داخل table.
<table>
<caption>إحصائيات المبيعات 2025</caption>
<thead>...</thead>
</table>
مهم لإمكانية الوصول — قارئات الشاشة تقرأه قبل الجدول.
<form>
Block
حاوية النموذج. action يحدد وجهة البيانات، method يحدد طريقة الإرسال.
<form action="/submit" method="POST" novalidate>
...الحقول هنا...
</form>
novalidate يعطّل التحقق المدمج لتتولى أنت التحقق بـ JS.
<input>
Void
أكثر عنصر تنوعاً في HTML. نوعه (type) يحدد سلوكه الكامل.
<!-- أنواع شائعة -->
<input type="text" name="n">
<input type="email" required>
<input type="password" minlength="8">
<input type="number" min="1" max="100">
<input type="checkbox" value="agree">
<input type="radio" name="gender">
<input type="file" accept=".pdf,.jpg">
<input type="range" min="0" max="100">
<input type="date" value="2025-01-01">
<input type="color">
<label>
Inline
تسمية الحقل. for يربطها بـ id الحقل. النقر عليها يُفعّل الحقل.
<label for="email">البريد الإلكتروني:</label>
<input type="email" id="email">
for يطابق id الحقل — إلزامي لإمكانية الوصول.
<textarea>
Block
حقل نص متعدد الأسطر. rows وcols يحددان حجمه الأولي.
<textarea
id="msg"
name="message"
rows="5"
maxlength="500"
placeholder="اكتب رسالتك..."></textarea>
textarea يحتاج tag إغلاق! أي نص بين الـ tags يظهر كقيمة افتراضية.
<select> + <option>
Block
قائمة منسدلة. select الحاوية، option لكل اختيار.
<select name="country" required>
<option value="" disabled selected>اختر...</option>
<option value="sa">السعودية</option>
<option value="eg" selected>مصر (افتراضي)</option>
</select>
value = ما يُرسل للسيرفر. النص بين tags = ما يراه المستخدم.
<button>
Inline
زر تفاعلي. type يحدد سلوكه: submit لإرسال النموذج، button للـ JS، reset لمسح الحقول.
<button type="submit">إرسال</button>
<button type="button" onclick="doSomething()">
<img src="icon.svg" alt=""> اضغط هنا
</button>
button يقبل أي محتوى HTML بداخله (صور، أيقونات...). input[type=button] نص فقط.
<fieldset> + <legend>
Block
يجمع حقولاً ذات صلة في مجموعة مع عنوان. يضيف إطاراً بصرياً ودلالياً.
<fieldset>
<legend>بيانات التواصل</legend>
<label for="phone">الهاتف:</label>
<input type="tel" id="phone">
</fieldset>
مثالي لتجميع checkboxes وradio buttons في مجموعة منطقية.
<datalist>
Block
يوفر اقتراحات لحقل input — الكتابة تُصفّي الاقتراحات تلقائياً.
<input list="langs" placeholder="اختر لغة...">
<datalist id="langs">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
</datalist>
list في input يطابق id في datalist. يجمع بين حرية الكتابة واقتراحات جاهزة.
<ul>
Block
Unordered List — قائمة بنقاط. الترتيب لا يهم (مكونات، مميزات، روابط تنقل).
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
ul يقبل فقط li كأبناء مباشرين. استخدمه لقوائم التنقل أيضاً.
<ol>
Block
Ordered List — قائمة مرقمة. الترتيب مهم (خطوات، تعليمات، ترتيب نتائج).
<ol type="1" start="1">
<li>تعلّم HTML</li>
<li>تعلّم CSS</li>
</ol>
<!-- type: 1, A, a, I, i -->
type يغير شكل الترقيم. start يحدد رقم البداية (مفيد عند تقسيم قائمة مستمرة).
<li>
Block
List Item — عنصر القائمة. يجب أن يكون داخل ul أو ol.
<ul>
<li>
عنصر يحتوي
<ul>
<li>قائمة متداخلة</li>
</ul>
</li>
</ul>
li يمكنه أن يحتوي أي عنصر HTML — نص، روابط، صور، حتى قوائم أخرى.
<dl> + <dt> + <dd>
Block
Description List — قائمة المصطلحات والتعريفات. مثالي للمسارد والـ FAQ.
<dl>
<dt>HTML</dt>
<dd>لغة بناء هيكل صفحات الويب</dd>
<dt>CSS</dt>
<dd>لغة تنسيق وتجميل صفحات الويب</dd>
</dl>
dt = المصطلح، dd = التعريف. يمكن أن يكون لمصطلح واحد تعريفات متعددة.
لا توجد نتائج لبحثك. جرب كلمة أخرى.