مقدمة HTML5

مثال HTML5 في كل فصل

مثال

<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
 متصفحك لا يدعم علامة الفيديو.
</video>
</body>
</html>

تجربة بنفسك

انقر على "تجربة بنفسك" لمعرفة كيف يعمل هذا المثال.

ما هو HTML5؟

HTML5 هو أحدث مواصفات HTML.

تم تصميم HTML5 خصيصًا لحمل محتويات الويب المزدهرة دون الحاجة إلى أجهزة إضافية.

يملك HTML5 مفاهيم جديدة ورسومية ومتعددة الوسائط.

يقدم HTML5 عناصر جديدة وأجهزة واجهة برمجة التطبيقات الجديدة مما يسهل بناء تطبيقات الويب.

HTML5 متعدد المنصات، ويُصمم لتشغيله على أنواع مختلفة من الأجهزة (كمبيوتر شخصي، أجهزة لوحية، هواتف، تلفزيونات، إلخ).

ملاحظة:في الفصول التالية، ستتعلم كيفية "مساعدة" المتصفحات القديمة على معالجة HTML5.

ما الجديد في HTML5؟

بيان نوع الوثيقة الجديد (DOCTYPE) في HTML5 بسيط جدًا:

<!DOCTYPE html>
إعلان الترميز الجديد (charset) بسيط جدًا:
<meta charset="UTF-8">

مثال HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>عنوان الوثيقة</title>
</head>
<body>
محتويات الوثيقة......
</body>
</html>

ملاحظة:الترميز الافتراضي للغة الحروف في HTML5 هو UTF-8.

لغة الأنواع الجديدة لـ HTML5

تسمح مواصفات HTML5 بأربعة نماذج مختلفة من لغة الأنواع.

هذا المثال يوضح مختلف النماذج التي يتم استخدامها في علامة <input>.

النوع مثال
فراغ <input type="text" value="Bill Gates" disabled>
غير مقتبس <input type="text" value=Bill Gates>
المقتبس المزدوج <input type="text" value="Bill Gates">
المقتبس المزدوج <input type="text" value='Bill Gates'>

في معايير HTML5، قد تُستخدم جميع 4 نماذج الجملة بناءً على الحاجة إلى السمة.

ميزات جديدة لـ HTML5

بعض من أكثر ميزات HTML5 إثارة للاهتمام الجديدة:

  • عناصر جديدة للمعنى مثل <header>, <footer>, <article>, و<section>.
  • عناصر جديدة للنماذج مثل الأرقام، التواريخ، الوقت، التقويم والسحابات.
  • دعم قوي للصور (من خلال <canvas> و<svg>)
  • دعم متعدد الوسائط قوي (من خلال <video> و<audio>)
  • API قوية جديدة مثل استبدال الكوكيز بالخزينة المحلية.

العناصر المحذوفة من HTML5

العناصر التالية من HTML 4.01 تم حذفها من HTML5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>