❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <html>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

يعتبر الوسم <html> الوسم الرئيسي في الصفحة حيث أنه يجب وضعه كأول وسم فيها و من ثم وضع جميع وسوم الصفحة بداخله.

دعم المتصفحات

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

خصائصه

الخاصية xmlns

يمكن إضافتها للوسم في حال كان نوع ملف الصفحة هو .xhtml و ليس .html بهدف تحديد الإصدار الذي تم إعتماده في الصفحة.

هذا الأمر يعتبر إختياري في الإصدار الخامس من لغة HTML و القيمة الإفتراضية لهذه الخاصية هي "http://www.w3.org/1999/xhtml".

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

إستخدامه

في المثال التالي قمنا بتحديد أن لغة الصفحة هي العربية و أن إتجاه محتواها هو من اليمين إلى اليسار.

المثال الأول

<!DOCTYPE html>
<html dir="rtl" lang="ar">
    <body>
        <h1>صفحة عربية</h1>
        <p>السلام عليكم و رحمة الله و بركاته، في هذا المثال
        قمنا بإعلام المتصفح بأن لغة الصفحة هي العربية و
        أن محتواها يتجه من اليمين إلى اليسار</p>
    </body>
</html>
جرب الكود

في المثال التالي قمنا بإضافة الخاصية xmln للوسم <html>.
ملاحظة: لا يوجد أي داعي لفعل ذلك كما سبق و ذكرنا لأن نوع الصفحة في الأساس هو .html.

المثال الثاني

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <p>Using the xmlns attribute is optional in HTML5.</p>
</html>
جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

html {
    display: block;
}

html:focus {
    outline: none;
}

نصائح و ملاحظات

يفضل دائماً تحديد إتجاه و لغة محتوى الصفحة بواسطة الخاصية lang كما فعلنا في المثال الأول.