html5 tags - هل من الضروري كتابة علامات HEAD و BODY و HTML؟




code weschool (6)

هل من الضروري كتابة علامات <html> و <head> و <body> ؟

على سبيل المثال ، يمكنني تقديم مثل هذه الصفحة:

<!DOCTYPE html>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script>

ويفصل Firebug الرأس والجسم بشكل صحيح:

تقول W3C Validation أنه صالح.

لكن نادرًا ما أرى هذه الممارسة على الويب.

هل هناك أي سبب لكتابة هذه العلامات؟


Answers

صحيح أن مواصفات HTML تسمح بحذف علامات معينة في حالات معينة ، ولكن القيام بذلك بشكل عام أمر غير حكيم.

وله تأثيران - فهو يجعل المواصفات أكثر تعقيدًا ، وهذا بدوره يجعل من الصعب على مؤلفي المستعرض كتابة تطبيقات صحيحة (كما هو موضح من قِبل IE مما يجعله خاطئًا).

هذا يجعل احتمالية أخطاء المستعرض في هذه الأجزاء من المواصفات عالية. وبصفتك مؤلفًا على الموقع ، يمكنك تجنب المشكلة من خلال تضمين هذه العلامات - لذلك ، في حين أن المواصفات لا تعني ضرورة القيام بذلك ، فإن ذلك يقلل من فرصة حدوث أشياء خاطئة ، وهي ممارسة هندسية جيدة.

ما هو أكثر من ذلك ، فإن أحدث مواصفات HTML 5.1 WG حاليا تقول (ضع في اعتبارك أنه عمل قيد التقدم وقد يتغير بعد).

قد يتم حذف علامة بدء عنصر العنصر إذا كان العنصر فارغًا ، أو إذا كان أول شيء داخل عنصر النص الأساسي ليس حرفًا فضاءً أو تعليقًا ، إلا إذا كان أول شيء في العنصر الأساسي هو meta ، أو link ، أو script ، أو style ، أو عنصر القالب.

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

هذا قليلا خفية. يمكنك تجاهل الجسم والرأس ، وسيستدل المتصفح على المكان الذي يجب إدراج هذه العناصر فيه. هذا يحمل خطر عدم الوضوح ، مما قد يسبب الارتباك.

إذا هذا

<html>
  <h1>hello</h1>
  <script ... >
  ...

النتائج في عنصر البرنامج النصي كونه طفلًا للعنصر الأساسي ، لكن هذا

<html>
  <script ... >
  <h1>hello</h1>

سيؤدي إلى أن تكون علامة البرنامج النصي طفلًا لعنصر الرأس.

قد تكون واضحًا من خلال القيام بذلك

<html>
    <body>
      <script ... >
      <h1>hello</h1>

ثم أيهما لديك أولاً ، البرنامج النصي أو h1 ، كلاهما ، سيظهر بشكل متوقع في عنصر الأساسي. هذه هي الأشياء التي يسهل التغاضي عنها أثناء إعادة التصحيح وتصحيح التعليمات البرمجية. (على سبيل المثال ، لديك JS الذي يبحث عن عنصر البرنامج النصي الأول في النص الأساسي - في المقتطف الثاني سيتوقف عن العمل).

كقاعدة عامة ، يكون التوضيح حول الأمور دائمًا أفضل من ترك الأشياء مفتوحة للتفسير. في هذا الصدد ، يعد XHTML أفضل لأنه يفرض عليك أن تكون صريحًا تمامًا حول بنية العنصر في الشفرة ، مما يجعل الأمر أبسط ، وبالتالي أقل عرضة لسوء التفسير.

لذا نعم ، يمكنك حذفها وتكون صالحة من الناحية الفنية ، ولكن من غير الحكمة بوجه عام القيام بذلك.


من المؤكد أن حذف علامات html و head و body يسمح به مواصفات HTML. يتمثل السبب الأساسي في أن المتصفحات سعت دائمًا إلى التوافق مع صفحات الويب الحالية ، ولم تحدد الإصدارات القديمة جدًا من HTML هذه العناصر. عندما أتش تي أم أل 2.0 في البداية ، تم ذلك بطريقة يمكن استنتاج العلامات عند فقدها.

غالبًا ما أجد أنه من الملائم حذف العلامات عند وضع النماذج وخصوصًا عند كتابة حالات الاختبار لأنها تساعد في الحفاظ على تركيز العلامة على الاختبار المعني. يجب أن تنشئ عملية الاستدلال العناصر بالطريقة التي تراها في Firebug تمامًا ، والمتصفحات متسقة جدًا في القيام بذلك.

لكن...

لدى IE على الأقل خطأ واحد معروف في هذا المجال. حتى IE9 يحمل هذا. لنفترض أن الترميز هو:

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

يجب عليك (وماذا تفعل في المتصفحات الأخرى) الحصول على DOM يبدو كالتالي:

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

ولكن في IE تحصل على هذا:

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

ترى ذلك بنفسك.

يبدو أن هذا الخطأ يقتصر على علامة بدء form تسبق أي محتوى نصي وأي علامة لبدء تشغيل body .


من الصحيح حذفها في HTML4:

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

في HTML5 ، لا توجد عناصر "مطلوبة" أو "اختيارية" تمامًا ، نظرًا لأن بناء جملة HTML5 أكثر تحديدًا بشكل فضفاض. على سبيل المثال ، title :

عنصر العنوان هو طفل مطلوب في معظم الحالات ، ولكن عندما يوفر بروتوكول المستوى الأعلى معلومات عن العنوان ، على سبيل المثال في سطر موضوع البريد الإلكتروني عندما يتم استخدام HTML كتنسيق تأليف البريد الإلكتروني ، يمكن حذف عنصر العنوان .

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

لا يصح إغفالها في XHTML5 صحيح ، على الرغم من أن ذلك لا يستخدم تقريبًا أبدًا (مقابل XHTML-acting-like-HTML5).

ومع ذلك ، من وجهة نظر عملية ، غالباً ما ترغب في تشغيل المتصفحات في "وضع المعايير" ، من أجل إمكانية التنبؤ في تقديم HTML و CSS. سيوفر توفير DOCTYPE وشجرة HTML أكثر تنظيمًا نتائج عبر متصفح يمكن التنبؤ بها بشكل أكبر.


خلافاً لملاحظةLiza Daly حول HTML5 ، هذه المواصفات محددة تمامًا حول العلامات التي يمكن حذفها ، ومتى (والقواعد مختلفة قليلاً عن HTML 4.01 ، معظمها لتوضيح العناصر الغامضة مثل التعليقات والمساحة البيضاء)

المرجع ذي الصلة هو http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags ، ويقول:

  • قد يتم حذف علامة بدء عنصر html إذا كان أول شيء داخل عنصر html ليس تعليقًا.

  • قد يتم حذف علامة نهاية عنصر html إذا لم يتبع عنصر html مباشرة تعليق.

  • قد يتم حذف علامة بدء عنصر الرأس إذا كان العنصر فارغًا ، أو إذا كان العنصر الأول داخل عنصر الرأس عنصرًا.

  • قد يتم حذف علامة نهاية عنصر الرأس إذا لم يتبع عنصر الرأس مباشرة حرف مسافة أو تعليق.

  • قد يتم حذف علامة بدء عنصر العنصر إذا كان العنصر فارغًا ، أو إذا كان أول شيء داخل عنصر النص الأساسي ليس حرفًا فضاءً أو تعليقًا ، إلا إذا كان أول عنصر داخل العنصر الأساسي هو نص أو عنصر نمط.

  • قد يتم حذف علامة نهاية عنصر العنصر إذا لم يتبع عنصر النص تعليقًا على الفور.

لذلك فإن المثال الخاص بك هو HTML5 صالح ، وسيتم تحليله بهذه الطريقة ، مع علامات html و head و body في مواضعها الضمنية:

<!DOCTYPE html><HTML><HEAD>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

لاحظ أن التعليق "هذا النص سيكون في رأسه" يتم تحليله بالفعل كجزء من الجسم ، على الرغم من أن النص نفسه جزءًا من الرأس. وفقًا للمواصفات ، إذا كنت تريد أن تكون مختلفة على الإطلاق ، فقد لا يتم حذف علامات </HEAD> و <BODY> . (على الرغم من أن علامات <HEAD> و </BODY> المقابلة لا تزال يمكن أن تكون)


يعرض Firebug هذا بشكل صحيح لأن المتصفح الخاص بك يعمل تلقائيًا على إصلاح الترميز السيئ لك. لا يتم تحديد هذا السلوك في أي مكان ويمكن (سيختلف) من المستعرض إلى المستعرض. هذه العلامات مطلوبة من قِبل DOCTYPE الذي تستخدمه ويجب عدم حذفه.

عنصر html هو العنصر الجذر لكل صفحة html. إذا نظرت إلى وصف جميع العناصر الأخرى ، فإنها توضح المكان الذي يمكن استخدام عنصر فيه (وتقريباً تتطلب جميع العناصر إما رأس أو جسم).


<\s*(\w+)[^/>]*>

The parts explained:

< : starting character

\s* : it may have whitespaces before tag name (ugly but possible).

(\w+) : tags can contain letters and numbers (h1). Well, \w also matches '_', but it does not hurt I guess. If curious use ([a-zA-Z0-9]+) instead.

[^/>]* : anything except > and / until closing >

> : closing >

UNRELATED

And to fellows who underestimate regular expressions saying they are only as powerful as regular languages:

a n ba n ba n which is not regular and not even context free, can be matched with ^(a+)b\1b\1$

Backreferencing FTW !







html html5 tags