دليل أساسي في HTML5

API في HTML5

وسائط في HTML5

الرسومات في HTML5

عناصر جديدة في HTML5

تسمية الأعمدة في HTML5 وأصنافها تجعل من السهل على المطورين إنشاء تصميمات صفحات الويب الواضحة، بالإضافة إلى استنساخ تأثيرات CSS3، يصبح إنشاء صفحات ويب غنية ومتعددة الوظائف بسيطًا جدًا.

عناصر جديدة في HTML5

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

منذ عام 1999، تغيرت HTML 4.01 كثيرًا، اليوم، بعض العناصر في HTML 4.01 قد تم إزالتها أو تعديلها. لمعالجة تطبيقات الإنترنت اليومية بشكل أفضل، أضافت HTML5 العديد من العناصر الجديدة والوظائف، مثل: رسم الصور، محتوى المتعدد، بنية صفحة أفضل، شكل أفضل معالجة، وعدة api لسحب العناصر، التوضيح، بما في ذلك صفحات الويب

كاشف التطبيقات، التخزين، العمال الشبكية، وما إلى ذلك.

عناصر العلامات الجديدة في HTML5
<header> تعريف رأس الصفحة أو المناطق؛
<footer> تعريف نهاية الصفحة أو المناطق؛
<nav> تعريف منطقة التوجيه في الصفحة أو المناطق؛
<section> منطقة منطقية في الصفحة أو تجميع المحتوى؛
<article> تعريف النص أو محتوى كامل؛

علامة التوجيه nav تعريف المحتوى الإضافي أو المحتوى المماثل؛

مثال

!doctype html<html><head>
<meta charset="UTF-8">
<title>استخدام علامة التوجيه Nav في HTML5</title>
</head>
<body>
<nav>
　　　　<ul>
　　　　　　　　<li><a href="#">المنزل</a></li>
　　　　　　　　<li><a href="#">واحد</a></li>
　　　　　　　　<li><a href="#">إثنين</a></li>
　　　　　　　　<li><a href="#">ثلاثة</a></li>
　　　　</ul>
</nav>
</body></html>

اختبار لـ «/»

<header> العلامة تحقيق

مثال

!doctype html
<html>
<head>
<meta charset="UTF-8">
<title><header> العلامة تحقيق by ar.oldtoolbag.com</title>
</head>
<body>
<header id="page_header">
　　　　<h1>.Header</h1>
</header>
</body>
</html>

اختبار لـ «/»

<footer> العلامة تحقيق

مثال

!doctype html
<html>
<head>
<meta charset="UTF-8">
<title><footer> العلامة تحقيق by ar.oldtoolbag.com</title>
</head>
<body>
<footer> العلامة تحقيق
<footer id="page_footer">
　　　　<h2>.Footer</h2>
</footer>
</body>
</html>

اختبار لـ «/»

<section> الكتلة و <article> المقال

مثال

!doctype html
<html>
<head>
<meta charset="UTF-8">
<title><section> و <article> العلامات تحقيق by ar.oldtoolbag.com</title>
</head>
<body>
تحقيق <section> و <article> علامات
<section id="posts">
　　　　　　　　/*يمكن تضمين عدة <article>*/
　　　　<article class="post">
　　　　　　　　　/*محتويات المقالة*/
　　　　　　　　</article>
　　　　　　　　<article class="post">
　　　　　　　　　/*محتويات المقالة*/
　　　　　　　　</article>
</section>
</body>
</html>

اختبار لـ «/»

<canvas> العنصر الجديد

الوسم	وصف
<canvas>	يحدد الرسومات مثل الرسوم البيانية وأخرى من أنواع مختلفة. يُستند هذا الوسم إلى API رسم الجافا سكربت.

عناصر وسائط جديدة

الوسم	وصف
<audio>	يحدد محتوى الصوت.
<video>	يحدد الفيديو (video أو movie).
<source>	يحدد موارد الوسائط المتعددة <video> و<audio>.
<embed>	يحدد محتوى مضمن، مثل البرامج الإضافية.
<track>	يحدد مسارات النصوص الخارجية للموارد الوسائطية مثل <video> و<audio>.

عناصر النماذج الجديدة

الوسم	وصف
<datalist>	يحدد قائمة الخيارات. استخدم هذا العنصر مع عنصر input لتعريف القيم المحتملة للـ input.
<keygen>	يحدد حقل مولد الأزمنة السرية لاستخدامها في النماذج.
<output>	يحدد أنواع مختلفة من المخرجات، مثل مخرجات السكربت.

عناصر معانية جديدة وструкورية

يقدم HTML5 عناصر جديدة لإنشاء بنية صفحة أفضل:

الوسم	وصف
<article>	تعريف منطقة محتوى مستقلة في الصفحة.
<aside>	تعريف محتوى جانبي الصفحة.
<bdi>	يسمح لك بتعيين نص، بحيث يكون منفصلاً عن إعدادات اتجاه النص لأبويته.
<command>	تعريف زر الأمر، مثل المفتاح المحدد، المربع المزدوج أو الزر.
<details>	يستخدم لوصف تفاصيل الوثيقة أو جزء منها.
<dialog>	تعريف نافذة الحوار، مثل نافذة التحذير.
<summary>	يحدد عنوان عنصر details.
<figure>	يحدد محتوى التدفق المستقل (الصور، الرسوم البيانية، الصور، الشيفرة، إلخ).
<figcaption>	تعريف عنوان عنصر <figure>.
<footer>	تعريف قدم الوثيقة أو الصفحة.
<header>	تعريف منطقة رأس الوثيقة.
<mark>	تعريف النص المزود بالعلامات.
<meter>	تعريف الوحدات القياسية. تستخدم فقط للقياسات المعروفة بحدودها الأدنى والأعلى.
<nav>	تحديد جزء من رابط التوجيه.
<progress>	تحديد تقدم أي مهمة.
<ruby>	تحديد التعليقات ruby (النطق بالصينية أو الحرف).
<rt>	تحديد تفسير أو نطق للحرف (النطق بالصينية أو الحرف).
<rp>	استخدامها في التعليقات ruby، لتحديد المحتوى الذي سيظهر في المتصفحات التي لا تدعم عناصر ruby.
<section>	تحديد قسم (section أو منطقة) في المستند.
<time>	تحديد تاريخ أو وقت.
<wbr>	تحديد أين يمكن إضافة سطر جديد في النص.

العناصر المزالة

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

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

SVG المدمج في HTML5 دعم متصفحات HTML5