استخدم أسماء العناصر بالأحرف الصغيرة (Use lowercase element names)
في لغة الـ HTML، يفضل استخدام الأحرف الصغيرة لأسماء العناصر. رغم أن HTML ليست لغة حساسة لحالة الأحرف (case-sensitive)، إلا أن التوحيد في استخدام الأحرف الصغيرة يمنح الكود نظافة وسهولة في القراءة.
مثال:
بدلاً من كتابة الكود بهذه الطريقة:
<BODY>
<P>This is a paragraph.</P>
</BODY>يمكن كتابته بالأحرف الصغيرة كما يلي:
<body>
<p>This is a paragraph.</p>
</body>أغلق جميع عناصر HTML (Close all HTML elements)
الأساس في الـ HTML هو البدء بعنصر وإغلاقه. العناصر التي لا تتم إغلاقها قد تسبب مشكلات في تصميم الصفحة أو عرضها.
مثال:
بدلاً من هذا:
<p>This is a paragraph
<p>This is another paragraphيفضل القيام بهذا:
<p>This is a paragraph</p>
<p>This is another paragraph</p>استخدم أسماء السمات بالأحرف الصغيرة (Use lowercase attribute names)
كما هو الحال مع أسماء العناصر، يفضل استخدام الأحرف الصغيرة لأسماء السمات. يتيح هذا النهج توحيد الكود وتسهيل قراءته.
مثال:
بدلاً من كتابة الكود بهذه الطريقة:
<a HREF="https://example.com">Example</a>يمكن كتابته بالأحرف الصغيرة كما يلي:
<a href="https://example.com">Example</a>4. اقتبس دائمًا قيم السمات (Always quote attribute values)
في الـ HTML، يجب وضع قيم السمات داخل علامات اقتباس (” “). تجنب هذه الممارسة قد يؤدي إلى نتائج غير متوقعة.
مثال:
<p class="important text">This is an important paragraph.</p>بدلاً من:
<p class=important text>This is an important paragraph.</p>حدد دائمًا alt، width، و height للصور (Always specify alt, width, and height for images)
في الـ HTML، من الأفضل دائمًا تحديد سمات alt، width، وheight للصور. السمة alt تقدم وصفاً نصياً للصورة وهو مهم للوصولية، بينما السمتان width و height تساعدان في تحسين أداء تحميل الصفحة.
مثال:
<img src="example.jpg" alt="Example image" width="500" height="600">المساحات وعلامات التساوي (Spaces and equality signs)
في HTML، يجب وضع مسافة واحدة فقط بين السمات، وعدم وضع أي مساحات حول علامات التساوي.
مثال:
<p class="text" style="color:blue">This is a text.</p>بدلاً من:
<p class = "text" style = "color:blue">This is a text.</p>أو:
<p class="text"style="color:blue">This is a text.</p>تجنب الأسطر الطويلة من الكود (Avoid long code lines)
من الأفضل تجنب الأسطر الطويلة في الكود لتحسين قراءته وصيانته. هذه ليست قاعدة صارمة، ولكنها تعد ممارسة جيدة تساهم في جعل الكود أكثر نظافة وقابلية للقراءة.
مثال:
بدلاً من كتابة الكود بهذه الطريقة:
<p class="text" style="color:blue; font-size:16px; line-height:1.6; text-align:justify;">This is a text.</p>يمكن تنظيمه بطريقة أكثر قراءة كما يلي:
<p class="text"
style="color:blue;
font-size:16px;
line-height:1.6;
text-align:justify;">
This is a text.
</p>الأسطر الفارغة والمسافة البادئة (Blank lines and indentation)
استخدام الأسطر الفارغة والمسافات البادئة بطريقة متسقة يمكن أن يساعد على جعل الكود أكثر قابلية للقراءة والصيانة.
مثال:
<div>
<p>This is a text.</p>
<p>
This is another text.
</p>
</div>تجنب تجاهل وسم <head> (Avoid omitting tag)
وسم <head> يحتوي على معلومات حول الصفحة، مثل العنوان، والرموز المفضلة، وأوراق الأنماط، والبرامج النصية. وإذا تم حذفه، قد تواجه مشاكل في تحميل هذه الموارد.
مثال:
<html>
<head>
<title>Your Page Title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<p>This is a text.</p>
</body>
</html>أضف السمة lang (Add the lang attribute)
يمكن للسمة lang أن تساعد في تحديد اللغة المستخدمة في صفحتك، وهذا يمكن أن يكون مفيدًا لأدوات الترجمة والقارئات الشاشة ومحركات البحث.
مثال:
<html lang="ar">
...
</html>تعرف على الـ SEO
تحسين محركات البحث (SEO) يعتبر جزءًا أساسيًا من تطوير الويب، والكثير من الممارسات الجيدة لـ SEO تتعلق مباشرة بكيفية استخدام HTML. على سبيل المثال، يمكنك استخدام العناوين (<h1>, <h2>, <h3>، وما إلى ذلك) لهيكلة المحتوى، ووسم <meta> لتقديم وصف للصفحة، والسمة alt لتقديم وصف نصي للصور.
مثال:
<head>
<title>Your Page Title</title>
<meta name="description" content="Your page description.">
</head>
<body>
<h1>Your Main Title</h1>
<p><img src="example.jpg" alt="Example image"></p>
</body>ابدأ التفكير بوحدات (Start thinking in modules)
بدلاً من التفكير في صفحات الويب ككائنات واحدة كبيرة، حاول التفكير فيها على أنها مجموعة من الوحدات المستقلة. هذا يمكن أن يساعد في تنظيم الكود وتحسين القابلية لإعادة الاستخدام. يمكنك استخدام HTML لإنشاء هذه الوحدات، مثل الرؤوس والأقدام والمكونات القائمة والبطاقات.
مثال:
<header>
<!-- Header content -->
</header>
<main>
<section>
<!-- Section content -->
</section>
<aside>
<!-- Aside content -->
</aside>
</main>
<footer>
<!-- Footer content -->
</footer>خاتمة
HTML هي اللغة الأساسية للويب ولهذا السبب من المهم جداً التأكد من أننا نستخدمها بطرق متوافقة مع المعايير. القواعد المذكورة أعلاه هي فقط بعض من الأمور التي يجب على المطورين الحفاظ عليها عند كتابة HTML. بالطبع، هناك الكثير لتعلمه ولكنها بالتأكيد خطوة في الاتجاه الصحيح.
الهدف من هذه الممارسات ليس فقط إنشاء صفحات تعمل، ولكن أيضاً صفحات يمكن الوصول إليها، وصفحات يمكن فهمها بواسطة محركات البحث، وصفحات يمكن صيانتها وتطويرها بسهولة.
أسئلة شائعة
لماذا يجب أن أغلق جميع عناصر HTML؟
أغلاق جميع العناصر في HTML يضمن أن المستعرض يمكنه تفسير الصفحة بشكل صحيح. بعض المتصفحات قد تحاول تخمين مكان إغلاق العناصر إذا لم يتم تحديدها بشكل صريح، ولكن هذا قد يؤدي إلى نتائج غير متوقعة.
ما الغرض من السمة lang في وسم ؟
السمة lang تبين اللغة التي تم كتابة الصفحة بها. هذا يمكن أن يكون مفيداً للقراء الشاشة وأدوات الترجمة ومحركات البحث.
لماذا يجب أن أفكر بوحدات عند كتابة HTML؟
التفكير بوحدات يساعد على تنظيم الكود وجعله أكثر قابلية لإعادة الاستخدام. بدلاً من تكرار نفس الكود في مواضع متعددة، يمكنك إنشاء “وحدة” واستخدامها في أي مكان تحتاج إليها في موقعك.
