الروابط: ما جعل الويب ويبًا
وسم <a> يحوّل المستندات المنعزلة إلى ويب، وتحدّد خاصية href وجهتك.
- absolute URL لموقع آخر، وrelative path لصفحاتك أنت
mailto:يفتح البريد، وtel:يتصل بالهاتف، و#section-idينتقل داخل الصفحةtarget="_blank"يفتح تبويبًا جديدًا — احصره في الروابط الخارجية- اكتب نص رابط يصف الوجهة؛ ولا تكتب "اضغط هنا" أبدًا
الصور والخاصية التي يتجاهلها الجميع
وسم <img> ذاتي الإغلاق — لا يوجد </img> — وخاصية alt أول ما يتجاهله المبتدئ وأكثر ما يندم عليه.
srcيشير إلى الملف؛ وaltيصفه- قارئ الشاشة ينطق
alt، ومحرك البحث يفهرسه، وإذا فشلت الصورة ظهرaltمكانها - الـ alt الجيد يصف المحتوى ("Golden retriever playing fetch") لا الوسيط
- حدّد
widthوheightكي يحجز المتصفح المساحة فلا تقفز الصفحة - الصيغ:
.jpgللصور ·.pngللشعارات والشفافية ·.svgللأيقونات ·.webpالأصغر بأفضل جودة
النص والقوائم والجداول
وسوم مستوى النص تجعله دقيقًا، والقوائم تحمل معنى، والجداول للبيانات لا للتخطيط.
<sub>و<sup>للكيمياء والرياضيات، و<mark>للتمييز، و<small>للملاحظات الدقيقة<blockquote>و<q>للاقتباس؛ و<pre>يحفظ المسافات؛ و<code>للمقاطع؛ و<abbr>يتوسّع عند المرور<ul>حين لا يحمل الترتيب معنى، و<ol>حين يحمله- القائمة المتداخلة توضع داخل عنصر
<li>الأب لا بجانبه <caption>يسمّي الجدول؛ و<thead>/<tbody>/<tfoot>تقسّمه؛ و<th>يحدّد خلايا الرأسcolspan/rowspanتمدّان الخلية — والخلية الممتدة تعني<td>واحدًا أقل في صفها
التجميع: div و span
لا يعني <div> ولا <span> شيئًا بذاته — فهما صندوقان فارغان تنسّقهما.
<div>عنصر كتلة: يبدأ سطرًا جديدًا ويملأ العرض<span>عنصر سطري: يلفّ عبارة دون كسر الجملة- الفصل بين الكتلة والسطر قاعدة اللغة كلها لا هذين الوسمين فقط
- معرفة أيّهما يفسّر لماذا تتراص عناصر وتجلس أخرى جنبًا إلى جنب