نقل HTML5

نقل HTML4 إلى HTML5

هذا الفصل يشرح كيفية نقل صفحة HTML4 عادية إلى صفحة HTML5 عادية.

هذا الفصل يوضح كيفية تحويل صفحة HTML4 موجودة إلى صفحة HTML5 دون تدمير المحتوى الأصلي والهيكل.

ملاحظة:يمكنك استخدام نفس المهارات لنقل HTML4 وXHTML إلى HTML5.

الصفحة العادية HTML4 الصفحة العادية HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

الصفحة العادية HTML4

مثال

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>الأخبار</li>
    <li>الرياضة</li>
    <li>الطقس</li>
  </ul>
</div>
<div id="content">
<h2>قسم الأخبار</h2>
<div id="post">
  <h2>مقالة الأخبار</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>مقالة الأخبار</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>© 2014 Monday Times. جميع الحقوق محفوظة.</p>
</div>
</body>
</html>

جربها بنفسك

استبدلها بـ Doctype HTML5

تعديل نوع الوثيقة من doctype HTML4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

تعديل doctype إلى HTML5:

<!DOCTYPE html>

جربها بنفسك

استبدلها بت编码 HTML5

تعديل معلومات الت编码 من HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

أعد تعديلها إلى HTML5:

<meta charset="utf-8">

جربها بنفسك

أضف shiv

جميع المتصفحات الحديثة تدعم العناصر الدلالية HTML5.

إضافة إلى ذلك، يمكنك "تعليم" المتصفحات القديمة كيفية التعامل مع العناصر غير المعروفة.

Shiv تم إضافته لدعم Internet Explorer:

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

جربها بنفسك

ملاحظة:اقرأ المزيد عن shiv في دعم متصفحات HTML5.

أضف CSS للعناصر الدلالية HTML5

انظر إلى الأنماط CSS الموجودة بالفعل:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
تكرار مع أنماط CSS متساوية للعناصر الدلالية HTML5:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

جربها بنفسك

استبدلها بـ HTML5 <header> و <footer>

قم بتعديل عناصر <div> التي يحتوي على id="header" و id="footer":

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>© 2016 CodeW3C.com. جميع الحقوق محفوظة.</p>
</div>

تعديلها إلى عناصر اللغة الهمجية HTML5 <header> و <footer>:

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2016 CodeW3C.com. جميع الحقوق محفوظة.</p>
</footer>

جربها بنفسك

إلى HTML5 <nav>

تعديل العنصر <div> الذي يحتوي على id="menu":

<div id="menu">
  <ul>
    <li>الأخبار</li>
    <li>Sports</a></li>
    <li>الطقس</li>
  </ul>
</div>

تعديلها إلى عناصر اللغة الهمجية HTML5 <nav>:

<nav>
  <ul>
    <li>الأخبار</li>
    <li>Sports</a></li>
    <li>الطقس</li>
  </ul>
</nav>

جربها بنفسك

إلى HTML5 <section>

تعديل العنصر <div> الذي يحتوي على id="content":

<div id="content">
.
.
.
</div>

تعديلها إلى عناصر اللغة الهمجية HTML5 <section>:

<section>
.
.
.
</section>

جربها بنفسك

إلى HTML5 <article>

تعديل جميع عناصر <div> التي تحتوي على class="post":

<div class="post">
  <h2>مقالة الأخبار</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

تعديلها إلى عناصر اللغة الهمجية HTML5 <article>:

<article>
  <h2>مقالة الأخبار</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

جربها بنفسك

حذف هذه الأنماط التي لم تعد بحاجة إليها:

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}

جربها بنفسك

صفحة HTML5 نموذجية

يمكنك حذف تگ <head>. ليست بحاجة إليها في HTML5:

مثال

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
    font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
    border:1px solid grey;
    margin:5px;margin-bottom:15px;padding:8px;
    background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}
</style>
<body>
<header>
  <h1>Monday Times</h1>
</header>
<nav>
  <ul>
    <li>الأخبار</li>
    <li>الرياضة</li>
    <li>الطقس</li>
  </ul>
</nav>
<section>
<h2>قسم الأخبار</h2>
<div id="post">
  <h2>مقالة الأخبار</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
<h2>مقالة الأخبار</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</section>
<footer>
  <p>© 2014 Monday Times. جميع الحقوق محفوظة.</p>
</footer>
</body>
</html>

جربها بنفسك

الفرق بين <article> و <section> و <div>:

في معيار HTML5، الفرق بين <article> و <section> و <div> صغير جدًا ويمكن أن يكون محيرًا.

في معيار HTML5، تم تحديد عنصر <section> كحاوية بلوك للعناصر المرتبطة.

تم تعريف عنصر <article> كحاوية شاملة ومستقلة للعناصر المرتبطة.

تم تعريف عنصر <div> كحاوية بلوك للعناصر الفرعية.

كيف نفهم ذلك؟

في الأمثلة السابقة، استخدمنا <section> كحاوية للنصوص المرتبطة.

لكن، يمكننا أيضًا استخدام <article> كحاوية للنصوص.

إليك بعض الأمثلة المختلفة:

في <article> من <article>：
<article>
<h2 المدن الشهيرة</h2>
<article>
<h2>لندن</h2>
<p>لندن عاصمة إنجلترا. هي أكبر مدينة مأهولة في المملكة المتحدة,</p>
<p>مع منطقة حضرية تزيد عن 13 مليون نسمة.</p>
</article>
<article>
<h2>باريس</h2>
<p>باريس عاصمة فرنسا، وأكبر مدينة مأهولة.</p>
</article>
<article>
<h2>تокиو</h2>
<p>تокиو عاصمة اليابان، مركز منطقة توكيو الكبرى,</p>
وهي أكبر منطقة حضرية في العالم.</p>
</article>
</article>

جربها بنفسك

<article> من <div>：</article>
<article>
<h2 المدن الشهيرة</h2>
<div class="city">
<h2>لندن</h2>
<p>لندن عاصمة إنجلترا. هي أكبر مدينة مأهولة في المملكة المتحدة,</p>
<p>مع منطقة حضرية تزيد عن 13 مليون نسمة.</p>
</div>
<div class="city">
<h2>باريس</h2>
<p>باريس عاصمة فرنسا، وأكبر مدينة مأهولة.</p>
</div>
<div class="city">
<h2>تокиو</h2>
<p>تокиو عاصمة اليابان، مركز منطقة توكيو الكبرى,</p>
وهي أكبر منطقة حضرية في العالم.</p>
</div>
</article>

جربها بنفسك

<article> من <section> من <div>：</article>
<article>
<section>
<h2 المدن الشهيرة</h2>
<div class="city">
<h2>لندن</h2>
<p>لندن عاصمة إنجلترا. هي أكبر مدينة مأهولة في المملكة المتحدة,</p>
<p>مع منطقة حضرية تزيد عن 13 مليون نسمة.</p>
</div>
<div class="city">
<h2>باريس</h2>
<p>باريس عاصمة فرنسا، وأكبر مدينة مأهولة.</p>
</div>
<div class="city">
<h2>تокиو</h2>
<p>تокиو عاصمة اليابان، مركز منطقة توكيو الكبرى,</p>
وهي أكبر منطقة حضرية في العالم.</p>
</div>
</section>
<section>
<h2>الدول الشهيرة</h2>
<div class="country">
<h2>إنجلترا</h2>
<p>لندن عاصمة إنجلترا. هي أكبر مدينة مأهولة في المملكة المتحدة,</p>
<p>مع منطقة حضرية تزيد عن 13 مليون نسمة.</p>
</div>
<div class="country">
<h2>فرنسا</h2>
<p>باريس عاصمة فرنسا، وأكبر مدينة مأهولة.</p>
</div>
<div class="country">
<h2>اليابان</h2>
<p>تокиو عاصمة اليابان، مركز منطقة توكيو الكبرى,</p>
وهي أكبر منطقة حضرية في العالم.</p>
</div>
</section>
</article>

جربها بنفسك