ورقة HTML المرجعية
آخر تحديث
بنية المستند
كل صفحة HTML تبدأ بهذا الهيكل.
| العنصر | وظيفته |
|---|---|
<!DOCTYPE html> | يُعلن المستند كـ HTML5 (السطر الأول) |
<html lang="en"> | العنصر الجذر؛ تحدّد lang اللغة |
<head> | البيانات الوصفية: العنوان والروابط والسكربتات - لا تظهر على الصفحة |
<meta charset="UTF-8"> | ترميز الأحرف (أدرجه دائمًا) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | التحجيم المتجاوب على الجوّال |
<title> | عنوان الصفحة الظاهر في تبويب المتصفح ونتائج البحث |
<body> | كل ما هو مرئي على الصفحة يُوضع هنا |
النص والعناوين
| العنصر | وظيفته |
|---|---|
<h1> … <h6> | العناوين، <h1> الأهم (واحد لكل صفحة) |
<p> | فقرة نصية |
<br> | فاصل سطر (دون وسم إغلاق) |
<hr> | فاصل موضوعي / خط أفقي |
<strong> | نص مهم (عريض) |
<em> | نص مؤكَّد (مائل) |
<span> | حاوية سطرية لتنسيق جزء من النص |
<code> | كود سطري |
<pre> | نص منسّق مسبقًا (يُبقي المسافات البيضاء) |
<blockquote> | كتلة نصية مقتبسة |
الروابط والصور
| العنصر | الصياغة |
|---|---|
| رابط | <a href="https://coddy.tech">Coddy</a> |
| فتح في تبويب جديد | <a href="..." target="_blank" rel="noopener"> |
| مرساة (الانتقال إلى id) | <a href="#section">Jump</a> |
| صورة | <img src="cat.png" alt="A cat" width="200"> |
| صورة متجاوبة | <img src="..." srcset="..." sizes="..."> |
| شكل مع تسمية توضيحية | <figure><img ...><figcaption>…</figcaption></figure> |
القوائم
| العنصر | وظيفته |
|---|---|
<ul> | قائمة غير مرتّبة (بنقاط) |
<ol> | قائمة مرتّبة (مرقّمة) |
<li> | عنصر قائمة (داخل <ul> أو <ol>) |
<dl> | قائمة وصف |
<dt> / <dd> | مصطلح الوصف / تفصيل الوصف |
الجداول
| العنصر | وظيفته |
|---|---|
<table> | حاوية الجدول |
<thead> / <tbody> / <tfoot> | مجموعات رأس الجدول وجسمه وتذييله |
<tr> | صف في الجدول |
<th> | خلية رأس (عريضة، وسطية) |
<td> | خلية بيانات |
colspan / rowspan | دمج الخلايا عبر الأعمدة / الصفوف |
النماذج وحقول الإدخال
اللبنات الأساسية لأيّ نموذج يجمع المدخلات.
| العنصر | الصياغة / الغرض |
|---|---|
| نموذج | <form action="/submit" method="post"> |
| حقل نص | <input type="text" name="q" placeholder="Search"> |
| بريد إلكتروني / كلمة مرور | <input type="email">, <input type="password"> |
| مربع اختيار / زر اختيار | <input type="checkbox">, <input type="radio"> |
| رقم / تاريخ | <input type="number">, <input type="date"> |
| تسمية | <label for="q">Search</label> |
| متعدد الأسطر | <textarea rows="4"></textarea> |
| قائمة منسدلة | <select><option>One</option></select> |
| زر | <button type="submit">Send</button> |
| حقل مطلوب | <input required> |
الوسوم الدلالية ووسوم التخطيط
استخدم هذه بدلًا من <div> العامة حتى تفهم المتصفحات وقارئات الشاشة ومحركات البحث صفحتك.
| العنصر | ما يرمّزه |
|---|---|
<header> | أعلى الصفحة أو القسم (الشعار، التنقل) |
<nav> | روابط التنقل |
<main> | المحتوى المهيمن (واحد لكل صفحة) |
<section> | تجميع موضوعي للمحتوى |
<article> | محتوى مكتفٍ بذاته (منشور، بطاقة) |
<aside> | شريط جانبي / محتوى هامشي |
<footer> | أسفل الصفحة أو القسم |
<div> | حاوية كتلة عامة (دون معنى) |
السمات العامة الشائعة
| السمة | وظيفتها |
|---|---|
id | معرّف فريد لعنصر |
class | اسم فئة واحد أو أكثر (لـ CSS / JS) |
style | CSS سطري (استخدمه باعتدال) |
title | نص تلميح عند المرور بالمؤشر |
data-* | سمة بيانات مخصّصة، مثل data-id="42" |
hidden | يُخفي العنصر |
كل وسم وسمة في HTML قد تحتاجها، مجمّعة حسب وظيفتها. تغطّي ورقة HTML المرجعية هذه الهيكل الأساسي للصفحة، والنص والروابط، والصور والوسائط، والقوائم، والجداول، والنماذج، والوسوم الدلالية التي تمنح ترميزك معنى.
كل ذلك هو HTML5 قياسية تعمل في كل متصفح حديث. انسخ وسمًا، أو افتح playground الخاص بـ HTML لتحريره مع معاينة حيّة - دون الحاجة إلى أي إعداد.
الأسئلة الشائعة حول ورقة HTML المرجعية
هل ورقة HTML المرجعية هذه مجانية؟
نعم. ورقة HTML المرجعية هذه مجانية الاستخدام دون تسجيل. أضِفها إلى المفضلة وارجع إليها متى احتجت إلى البحث عن وسم أو سمة.
ما الفرق بين <section> و <div>؟
<section> وسم دلالي - يُخبر المتصفحات وقارئات الشاشة بأن محتواه مجموعة موضوعية ذات معنى، وعادةً ما يكون له عنوان. أمّا <div> فلا يحمل أيّ معنى وهو مجرد حاوية عامة للتنسيق أو البرمجة. استخدم وسمًا دلاليًا (<section> أو <article> أو <nav>) عندما يناسب أحدها، ولا تلجأ إلى <div> إلا عندما لا يناسب أيّ منها.هل تحتاج كل وسوم HTML إلى وسم إغلاق؟
معظمها يحتاج (
<p>...</p>)، لكن قلّة من العناصر "الفارغة" (void) لا تحتاج لأنها لا يمكن أن تحتوي على شيء: <img> و <br> و <hr> و <input> و <meta> و <link>. في HTML5 يمكنك كتابتها مع شرطة مائلة في النهاية أو دونها.هل يمكنني التدرّب على HTML عبر الإنترنت؟
نعم. افتح playground الخاص بـ HTML لكتابة HTML في متصفحك مع معاينة حيّة - دون الحاجة إلى تثبيت أي شيء. وعندما ترغب في تعلّم منظّم، تُعلّمك دورة HTML التفاعلية المجانية من Coddy الوسوم والنماذج والتخطيط خطوة بخطوة.
هل هذه الورقة المرجعية مناسبة للمبتدئين؟
نعم. تبدأ بالهيكل الأساسي للصفحة والوسوم اليومية التي ستستخدمها أولًا، ثم تنتقل إلى النماذج والترميز الدلالي، بحيث يمكنك استخدام الأقسام العلوية من اليوم الأول.
موارد ذات صلة
المزيد من الأوراق المرجعية
