بناء جملة أتش تي أم أل. لغة ترميز HTML، بناء الجملة

بناء جملة أتش تي أم أل. لغة ترميز HTML، بناء الجملة

علامات HTML هي الأساس لغة HTML. تُستخدم العلامات لتحديد بداية ونهاية العناصر في الترميز.

يتكون كل مستند HTML من شجرة من عناصر HTML والنص. يتم تعريف كل عنصر HTML بواسطة علامة البداية (الفتح) والنهاية (الإغلاق). تحتوي علامتي الفتح والإغلاق على اسم العلامة.

تنقسم جميع عناصر HTML إلى خمسة أنواع:

  • العناصر الفارغة - , ,
    , , , , , , , , , , , , ;
  • عناصر ذات نص غير منسق - , ;
  • العناصر التي تعرض نصًا غير منسق - , ;
  • عناصر من مساحة اسم أخرى - MathML وSVG؛
  • العناصر العادية - جميع العناصر الأخرى.

يظهر الجدول القائمة الكاملةالعناصر التي يدعمها HTML4 وHTML5. يتم استبعاد العلامات التجريبية والقديمة. يتم تمييز العناصر المضافة إلى مواصفات HTML5 باللون الأزرق المخضر.

قائمة كاملة بعناصر HTML الجدول 1. عناصر HTML وصف العلامة
تستخدم لإضافة التعليقات.
يعلن عن نوع المستند ويوفر المعلومات الأساسية للمتصفح - لغته وإصداره.
ينشئ روابط النص التشعبي.
يحدد النص كاختصار أو اختصار. يتم تحديد النص التوضيحي باستخدام سمة العنوان.
يحدد معلومات الاتصال الخاصة بالمؤلف/مالك المستند أو المقالة. تظهر بخط مائل في المتصفح.
وهو عبارة عن ارتباط تشعبي يحتوي على نص يتوافق مع منطقة معينة على خريطة الصورة أو منطقة نشطة داخل خريطة الصورة. متداخلة دائمًا داخل العلامة.
قسم من المحتوى يشكل جزءًا مستقلاً من مستند أو موقع ويب، مثل مقال في مجلة أو منشور مدونة أو تعليق.
يمثل محتوى الصفحة الذي يرتبط بشكل غير مباشر بالمحتوى الرئيسي للصفحة/الموقع.
تحميل المحتوى الصوتي إلى صفحة ويب.
يضبط مقطعًا من النص ليكون غامقًا دون إضافة تأكيد أو أهمية للنص المميز.
يحدد العنوان الأساسي (URL) الذي يتم حساب كافة العناوين النسبية منه. سيساعد ذلك في تجنب المشكلات عند نقل الصفحة إلى موقع آخر، حيث ستعمل جميع الروابط كما كانت من قبل.
يعزل مقطعًا من النص المكتوب باللغة التي يُقرأ فيها النص من اليمين إلى اليسار عن بقية النص.
يعرض النص في الاتجاه المحدد بواسطة السمة dir، متجاوزًا اتجاه النص الحالي.
يبرز النص كاقتباس، ويستخدم لوصف علامات الاقتباس الكبيرة.
يمثل نص المستند (المحتوى الذي لا يشكل جزءًا من بيانات تعريف المستند).

التفاف النص إلى سطر جديد.
إنشاء زر تفاعلي. يمكنك وضع المحتوى داخل العلامة - نص أو صورة.
حاوية قماش لعرض الصور ديناميكيًا مثل الصور البسيطة والمخططات والرسوم البيانية وما إلى ذلك. يتم استخدام لغة البرمجة النصية جافا سكريبت للرسم.
لإضافة تسمية توضيحية إلى الجدول. يتم إدراجها مباشرة بعد العلامة .
تستخدم للإشارة إلى مصدر الاقتباس. معروضة بالخط المائل.
يمثل جزءًا من كود البرنامج، معروضًا في عائلة خطوط أحادية المسافة.
تحديد عمود واحد أو أكثر من أعمدة الجدول للتنسيق الذي لا يحتوي على نفس نوع المعلومات.
ينشئ مجموعة هيكلية من الأعمدة التي تحدد العديد من الخلايا المتجانسة منطقيا.
يتم استخدام العنصر لربط قيمة سمة القيمة، والتي تكون بتنسيق يمكن قراءته آليًا ويمكن معالجته بواسطة جهاز كمبيوتر، مع محتوى العلامة.
عنصر الحاوية لعنصر القائمة المنسدلة. يتم وضع القيم المتغيرة في العناصر.
تستخدم لوصف مصطلح من علامة.
وضع علامة على النص كمحذوف عن طريق شطبه.
يقوم بإنشاء عنصر واجهة مستخدم تفاعلي يمكن للمستخدم فتحه أو إغلاقه. يمثل حاوية للمحتوى، ويتم وضع العنوان المرئي لعنصر واجهة المستخدم في العلامة.
يحدد الكلمة كمصطلح عن طريق وضعها بخط مائل. وينبغي أن يحتوي النص التالي على تعريف لهذا المصطلح.
عنصر تفاعلي يتفاعل معه المستخدم لإكمال مهمة، مثل مربع الحوار أو المفتش أو النافذة. وبدون السمة المفتوحة، لن يكون مرئيًا للمستخدم.
علامة حاوية لأقسام مستند HTML. يُستخدم لتجميع عناصر الكتلة للتنسيق باستخدام الأنماط.
علامة حاوية تحتوي على مصطلح ووصفه.
تستخدم لتحديد مصطلح.
يسلط الضوء على المقاطع المهمة من النص من خلال عرضها بخط مائل.
علامة حاوية لتضمين محتوى تفاعلي خارجي أو مكون إضافي.
تجميع العناصر المرتبطة في نموذج عن طريق رسم مربع حولها.
عنوان/تعليق للعنصر.
علامة حاوية قائمة بذاتها لمحتوى مثل الرسوم التوضيحية والرسوم البيانية والصور الفوتوغرافية وأمثلة التعليمات البرمجية، وعادةً ما تكون مع تسمية توضيحية.
يحدد منطقة النهاية (التذييل) للمستند أو القسم.
نموذج لجمع وإرسال المعلومات من المستخدمين إلى الخادم. لا يعمل بدون سمة الإجراء.
قم بإنشاء ستة مستويات من العناوين للأقسام ذات الصلة.
عنصر حاوية لبيانات تعريف مستند HTML، مثل، و، و، و.
قسم خاص بالمعلومات التمهيدية لموقع أو مجموعة روابط التنقل. قد يحتوي على واحد أو أكثر من العناوين والشعارات والمعلومات حول المؤلف.
خط أفقي للتقسيم الموضوعي للفقرات.
العنصر الجذر لمستند HTML. يخبر المتصفح أن هذا مستند HTML. إنها حاوية لجميع عناصر HTML الأخرى.
كتابة مقطع من النص بخط مائل دون إعطائه تأكيدًا إضافيًا.
ينشئ إطارًا مضمنًا عن طريق تحميل مستند آخر في مستند HTML الحالي.
يقوم بتضمين الصور في مستند HTML باستخدام سمة src، التي تكون قيمتها هي عنوان URL للصورة المضمنة.
ينشئ حقول نموذج غنية يمكن للمستخدم إدخال البيانات فيها.
يسلط الضوء على النص مع التسطير. يُستخدم لتسليط الضوء على التغييرات التي تم إجراؤها على المستند.
تحديد النص الذي سيتم إدخاله بواسطة المستخدم باستخدام لوحة المفاتيح بخط أحادي المسافة.
يستخدم لتخزين معلومات إضافية حول الصفحة. يتم استخدام هذه المعلومات بواسطة المتصفحات لمعالجة الصفحة، ومن خلال محركات البحث لفهرستها. يمكن أن يكون هناك عدة علامات في الكتلة، نظرًا لأنها تحمل معلومات مختلفة اعتمادًا على السمات المستخدمة.
مؤشر القياس في نطاق معين.
قسم من الوثيقة يحتوي على روابط التنقل الخاصة بالموقع.
يحدد القسم الذي لا يدعم البرمجة النصية.
حاوية لتضمين الوسائط المتعددة (مثل الصوت والفيديو وتطبيقات Java وActiveX وPDF وFlash). يمكنك أيضًا إدراج صفحة ويب أخرى في مستند HTML الحالي. يتم استخدام العلامة لتمرير معلمات البرنامج المساعد.
قائمة مرقمة مرتبة. يمكن أن يكون الترقيم رقميًا أو أبجديًا.
حاوية تحتوي على عنوان لمجموعة من العناصر.
يحدد خيارًا/خيارًا للاختيار من القائمة المنسدلة أو .
حقل لعرض نتيجة العملية الحسابية المحسوبة باستخدام البرنامج النصي.

الفقرات في النص.
يحدد معلمات المكونات الإضافية التي تم إنشاؤها باستخدام العنصر.
عنصر حاوية يحتوي على عنصر واحد وصفر أو أكثر من العناصر. في حد ذاته لا يعرض أي شيء. يسمح للمتصفح باختيار الصورة الأنسب.
إخراج النص بدون تنسيق، والحفاظ على المسافات وفواصل النص. يمكن استخدامه لعرض رمز الكمبيوتر ورسائل البريد الإلكتروني وما إلى ذلك.
مؤشر على الانتهاء من مهمة من أي نوع.
يحدد الاقتباس القصير.
حاوية لرموز شرق آسيا وفك رموزها.
يحدد النص المتداخل الخاص به باعتباره المكون الأساسي للتعليق التوضيحي.
يضيف وصفًا مختصرًا أعلى أو أسفل الأحرف الموجودة في العنصر، ويتم عرضها بخط أصغر.
وضع علامة على النص المضمن كتعليق توضيحي إضافي.
يعرض نصًا بديلاً إذا كان المتصفح لا يدعم العنصر.
يعرض النص غير الحالي مع يتوسطه خط.
يُستخدم لعرض النص الذي يمثل نتيجة تنفيذ التعليمات البرمجية للبرنامج أو البرنامج النصي، بالإضافة إلى رسائل النظام. يتم عرضه بخط أحادي المسافة.
يُستخدم لتحديد برنامج نصي من جانب العميل (عادةً JavaScript). يحتوي إما على نص البرنامج النصي أو يشير إلى ملف برنامج نصي خارجي باستخدام السمة src.
يحدد المنطقة المنطقية (القسم) من الصفحة، عادةً برأس.
عنصر تحكم يسمح لك بتحديد القيم من مجموعة مقترحة. يتم وضع القيم المتغيرة في .
يعرض النص بحجم خط أصغر.
يحدد موقع ونوع موارد الوسائط البديلة لـ , , .
حاوية للعناصر المضمنة. يمكن استخدامه لتنسيق مقاطع النص، مثل تمييز الكلمات الفردية بالألوان.
يضع التركيز في النص، ويسلط الضوء عليه بالخط العريض.
يتضمن أوراق الأنماط المضمنة.
يحدد الكتابة المنخفضة للرموز، على سبيل المثال، فهرس العناصر في الصيغ الكيميائية.
ينشئ عنوانًا مرئيًا للعلامة. يتم عرضه بمثلث مملوء، ويتيح لك النقر عليه عرض تفاصيل العنوان.
يحدد التهجئة المرتفعة للأحرف.
علامة لإنشاء جدول.
يحدد جسم الطاولة.
إنشاء خلية جدول.
يُستخدم للإعلان عن أجزاء تعليمات HTML البرمجية التي يمكن استنساخها وإدراجها في مستند بواسطة برنامج نصي. محتوى العلامة ليس عنصرًا فرعيًا.
إنشاء حقول إدخال نص كبيرة.
يحدد تذييل الجدول.
ينشئ عنوان خلية الجدول.
يحدد عنوان الجدول.
يحدد التاريخ/الوقت.
عنوان مستند HTML الذي يظهر أعلى شريط عنوان المتصفح. قد يظهر أيضًا في نتائج البحث، لذلك يجب أخذ ذلك في الاعتبار عند تقديم عنوان.
ينشئ صف جدول.
يضيف ترجمات للعناصر و.
يسلط الضوء على مقطع من النص من خلال وضع خط تحته، دون تأكيد إضافي.
ينشئ قائمة ذات تعداد نقطي.
يبرز المتغيرات من البرامج من خلال عرضها بخط مائل.
يضيف ملفات الفيديو إلى الصفحة. يدعم 3 صيغ فيديو: MP4، WebM، Ogg.
يشير إلى المتصفح حيث يمكن أن ينقطع الخط الطويل.
ورقة الغش مع العلامات

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

آخر تحديث: 18/11/2019

عند إنشاء مستند HTML5، يمكننا استخدام نمطين مختلفين: HTML وXML.

يفترض نمط HTML النقاط التالية:

    قد لا تحتوي العناصر على علامات فتح

    قد لا تحتوي العناصر على علامات إغلاق نهائية

    يمكن إغلاق العناصر الفارغة فقط (مثل br , img , link) بشرطة مائلة />

    لا يهم حالة أسماء العلامات والسمات

    ليس عليك تضمين قيم السمات بين علامتي اقتباس

    قد لا تحتوي بعض السمات على قيم (محددة ومعطلة)

    لا يتم الهروب من الأحرف الخاصة

    يجب أن يحتوي المستند على عنصر DOCTYPE

هذا هو ما يسمى بالأسلوب "المسموح"، الذي يعتمد على التنازلات عند إنشاء مستند.

يمكن أيضًا وصف مستند HTML5 باستخدام بناء جملة XML. يُسمى هذا النمط أيضًا "XHTML". يتم استخدامه إذا كان رأس نوع المحتوى هو application/xml+xhtml . القواعد التالية نموذجية لهذا النمط:

    يجب أن يكون لكل عنصر علامة فتح البداية

    العناصر غير الفارغة التي تحتوي على علامة فتح البداية يجب أن تحتوي أيضًا على علامة إغلاق نهائية

    يمكن إغلاق أي عنصر بشرطة مائلة />

    تكون أسماء العلامات والسمات حساسة لحالة الأحرف وتكون عادةً بأحرف صغيرة

    يجب أن تكون قيم السمات محاطة بعلامات اقتباس

    لا يُسمح بالسمات التي لا تحتوي على قيم (checked="checked" بدلاً من تحديدها فقط)

    يجب الهروب من الأحرف الخاصة

دعونا نقارن بين نهجين. نهج HTML5:

عنوان

محتويات مستند HTML5

ومثال مشابه باستخدام نهج XHTML:

عنوان

محتويات مستند HTML5

عند استخدام بناء جملة XHTML، نحتاج أيضًا إلى تحديد مساحة الاسم للمستند المحدد:

يعتمد اختيار نمط معين عند كتابة مستندات HTML على تفضيلات المبرمج أو مصمم الويب. غالبًا ما يتم استخدام النمط المختلط، والذي يستعير قواعد من النمطين الأول والثاني.

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

كما أن تضمين قيم السمات بين علامتي اقتباس سيساعد في تجنب الأخطاء المحتملة. وبالتالي، يمكن أن تأخذ سمة الفئة عدة قيم على التوالي. على سبيل المثال: . ولكن إذا حذفنا علامات الاقتباس، فسيتم استخدام "navmenu" كقيمة، وسيحاول المتصفح تفسير "bigdesctop" كسمة منفصلة.

إذا كانت هناك أي صعوبات فيما يتعلق بمدى صحة ترميز html الذي تم إنشاؤه، فيمكنك التحقق من ذلك باستخدام أداة التحقق من الصحة على https://validator.w3.org:

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

لنبدأ بتعلم اللغة. نص HTML هو "نص عادي". يتم تحديد كافة ميزات النص التشعبي للمستند باستخدام العلامات - الملاحظات الخاصة المضمنة في هذا النص.

ليكن هناك نص:

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

في HTML، تسمى التعليمات العلامات. يقوم المتصفح بتنفيذ تعليمات العلامة، أي أنه يقوم بإجراء تغييرات على النص دون إظهارها. ولذلك سنرى ما يلي على الشاشة:

"كانت أمي تغسل الإطار، وكانت القطة تلعب بالكرة. أخذ الصبي الكرة من القطة.

العلامة - الأمر بين قوسين زاوية. اسم العلامة هو أول ما يكتب بعد قوس زاوية الفتح، بدون مسافات قبله! هناك علامات مفردة وعلامات حاوية. علامات واحدة– تنفيذ بعض الأوامر للمتصفح في المكان المحدد فيه، على سبيل المثال، أمر “رسم خط”:

تتكون علامات الحاوية من علامة فتح وعلامة إغلاق، وتشير دلالتها إلى كل النص الموجود بينهما، فيقال: "متداخل في الحاوية". تحمل علامة الإغلاق نفس اسم علامة الفتح، ولكن الاسم يسبقه حرف مائل: "/":

غسلت أمي الإطار.

.

يمكن أن تحتوي العلامة على سمات. السمة تكمل وتشرح العلامة. ترتيب السمات ليس مهما. على سبيل المثال، تحتوي علامة HR على السمة WIDTH، التي تشير إلى عرض الخط، وSIZE، وسمك الخط، وALIGN، والموقع (المحاذاة)، وCOLOR، واللون. تحدد قيم السمات خاصية معينة. قاعدة بناء الجملة هي كما يلي: يمكن أن يتبع اسم العلامة مسافة واحدة على الأقل، ثم، مفصولة بمسافات، يمكن أن تتبع الثلاثيات: السمة، الرمز "="، القيمة. يوصى بإدراج القيمة بين علامات الاقتباس، على الرغم من أن معيار HTML يسمح بعدم تضمين القيم التي تتكون من أحرف وأرقام لاتينية فقط بين علامات الاقتباس.

ستكون الصورة على الشاشة مثل هذا.

_____________________________________

يسمح لك المعيار بحذف علامة الإغلاق إذا كانت ضمنية. على سبيل المثال، العلامة

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

يشير إلى فقرة.

غسلت أمي الإطار.

كانت الابنة تلعب بالكرة.

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

يمكن أن تتداخل العلامات (العناصر) في HTML مع بعضها البعض، على غرار الحلقات أو العبارات الشرطية في لغات البرمجة. يحظر تقاطعات العلامات دون تداخل.

مثال على الإدخال الخاطئ:

مثال الكتلة

مع فقرة متداخلة

مثال على الإدخال الصحيح:

مثال الكتلة

مع فقرة متداخلة

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

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

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

بناء جملة HTML

أرز. 1.6. عرض صفحة HTML بسيطة في متصفح الويب

القواعد الأساسية للغة HTML

أسماء علامات HTML ليست حساسة لحالة الأحرف، وفي XHTML، تعتبر الأحرف الصغيرة والأحرف الكبيرة مختلفة، ويجب كتابة أسماء العلامات بأحرف صغيرة.

يمكن أن تتضمن العناصر نصًا وعناصر فرعية (مثل عنصر أتش تي أم أليحتوي على العناصر الفرعية للرأس والجسم في المثال أعلاه). يجب أن تكون العناصر متداخلة بشكل صحيح.

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

بشكل صحيح، يجب أن يبدو هذا الجزء كما يلي:

هذا نص غامق ومائل

في XHTML، إذا كان العنصر لا يتضمن نصًا وعناصر فرعية (عنصر فارغ)، فيجب أن يحتوي على علامة فتح وإغلاق. على سبيل المثال، لا يحتوي العنصر br على أي محتوى ويؤدي إلى فاصل أسطر (يستمر النص بـ خط جديد). ومع ذلك، وفقا للقواعد، ينبغي كتابتها على النحو التالي:

أو باختصار
. يجب كتابة العنصر – مخرج الخط الأفقي – بنفس الطريقة تمامًا.

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

العديد من السمات في HTML مشتركة بين جميع العناصر، ولكن بعضها خاص بها من هذا العنصرأو العناصر. كل منهم لديهم النموذج:

السمة_اسم = "القيمة"

على سبيل المثال:

أساسيات لغة ترميز النص التشعبي"

في في هذا المثاليحتوي عنصر div (قسم من صفحة HTML يسمح لك بفصل المستندات إلى كتل منطقية) على سمة معرف تم تعيينها على mySection. يحتوي عنصر div على عنصر h1 (عنوان المستوى الأول أو الأكثر أهمية)، والذي يحتوي بدوره على بعض النص. يجب أن تكون قيم السمات محاطة بعلامات اقتباس مفردة أو مزدوجة.

أسماء العلامات والصفات وخصائصها القيم الممكنةيتم تعريفها بواسطة مواصفات لغة HTML، ولا يمكنك إنشاء علاماتك أو سماتك الخاصة.

يمكن أن تحتوي جميع العناصر على سمات معرف وفئة، حيث يتم استخدام قيمها لتحديد عناصر محددة (معرف) أو مجموعات من العناصر (فئة). يتم استخدام هذه السمات بشكل نشط في البرامج النصية للمستندات و أوصاف CSSأنماط الوثيقة.

هناك فئتان رئيسيتان من العناصر في HTML: حاجزو خيط

  • عناصر الكتلةعادة ما تبلغ عن هيكل الوثيقة. تبدأ مثل هذه العناصر في سطر جديد، مبتعدة عما سبقها. ومن أمثلة عناصر الكتلة الفقرات, عناصر القائمة والرؤوس والجداول وحاويات div.
  • عناصر السلسلةيتم تضمينها ضمن العناصر الهيكلية على مستوى الكتلة وتغطي فقط أجزاء من نص المستند، وليس مناطق بأكملها. لا يتسبب العنصر المضمن في ظهور سطر جديد في المستند لأنها عناصر تظهر في فقرة من النص. ومن أمثلة عناصر السلسلة الروابط والكلمات أو العبارات المميزة والحاويات الممتدة.

علامات HTML هي أساس لغة HTML. تُستخدم العلامات لتحديد بداية ونهاية العناصر في الترميز.

يتكون كل مستند HTML من شجرة من عناصر HTML والنص. يتم تعريف كل عنصر HTML بواسطة علامة البداية (الفتح) والنهاية (الإغلاق). تحتوي علامتي الفتح والإغلاق على اسم العلامة.

تنقسم جميع عناصر HTML إلى خمسة أنواع:

  • العناصر الفارغة - , ,
    , , , , , , , , , , , , ;
  • عناصر ذات نص غير منسق - , ;
  • العناصر التي تعرض نصًا غير منسق - , ;
  • عناصر من مساحة اسم أخرى - MathML وSVG؛
  • العناصر العادية - جميع العناصر الأخرى.

يوفر الجدول قائمة كاملة بالعناصر التي يدعمها HTML4 وHTML5. يتم استبعاد العلامات التجريبية والقديمة. يتم تمييز العناصر المضافة إلى مواصفات HTML5 باللون الأزرق المخضر.

قائمة كاملة بعناصر HTML الجدول 1. عناصر HTML وصف العلامة
تستخدم لإضافة التعليقات.
يعلن عن نوع المستند ويوفر المعلومات الأساسية للمتصفح - لغته وإصداره.
ينشئ روابط النص التشعبي.
يحدد النص كاختصار أو اختصار. يتم تحديد النص التوضيحي باستخدام سمة العنوان.
يحدد معلومات الاتصال الخاصة بالمؤلف/مالك المستند أو المقالة. تظهر بخط مائل في المتصفح.
وهو عبارة عن ارتباط تشعبي يحتوي على نص يتوافق مع منطقة معينة على خريطة الصورة أو منطقة نشطة داخل خريطة الصورة. متداخلة دائمًا داخل العلامة.
قسم من المحتوى يشكل جزءًا مستقلاً من مستند أو موقع ويب، مثل مقال في مجلة أو منشور مدونة أو تعليق.
يمثل محتوى الصفحة الذي يرتبط بشكل غير مباشر بالمحتوى الرئيسي للصفحة/الموقع.
تحميل المحتوى الصوتي إلى صفحة ويب.
يضبط مقطعًا من النص ليكون غامقًا دون إضافة تأكيد أو أهمية للنص المميز.
يحدد العنوان الأساسي (URL) الذي يتم حساب كافة العناوين النسبية منه. سيساعد ذلك في تجنب المشكلات عند نقل الصفحة إلى موقع آخر، حيث ستعمل جميع الروابط كما كانت من قبل.
يعزل مقطعًا من النص المكتوب باللغة التي يُقرأ فيها النص من اليمين إلى اليسار عن بقية النص.
يعرض النص في الاتجاه المحدد بواسطة السمة dir، متجاوزًا اتجاه النص الحالي.
يبرز النص كاقتباس، ويستخدم لوصف علامات الاقتباس الكبيرة.
يمثل نص المستند (المحتوى الذي لا يشكل جزءًا من بيانات تعريف المستند).

التفاف النص إلى سطر جديد.
إنشاء زر تفاعلي. يمكنك وضع المحتوى داخل العلامة - نص أو صورة.
حاوية قماشية لعرض الصور ديناميكيًا مثل صور بسيطة، الرسوم البيانية، الرسوم البيانية، الخ. يتم استخدام لغة البرمجة النصية جافا سكريبت للرسم.
لإضافة تسمية توضيحية إلى الجدول. يتم إدراجها مباشرة بعد العلامة .
تستخدم للإشارة إلى مصدر الاقتباس. معروضة بالخط المائل.
يمثل جزءًا من كود البرنامج، معروضًا في عائلة خطوط أحادية المسافة.
تحديد عمود واحد أو أكثر من أعمدة الجدول للتنسيق الذي لا يحتوي على نفس نوع المعلومات.
ينشئ مجموعة هيكلية من الأعمدة التي تحدد العديد من الخلايا المتجانسة منطقيا.
يتم استخدام العنصر لربط قيمة سمة القيمة، والتي تكون بتنسيق يمكن قراءته آليًا ويمكن معالجته بواسطة جهاز كمبيوتر، مع محتوى العلامة.
عنصر الحاوية لعنصر القائمة المنسدلة. يتم وضع القيم المتغيرة في العناصر.
تستخدم لوصف مصطلح من علامة.
وضع علامة على النص كمحذوف عن طريق شطبه.
يقوم بإنشاء عنصر واجهة مستخدم تفاعلي يمكن للمستخدم فتحه أو إغلاقه. يمثل حاوية للمحتوى، ويتم وضع العنوان المرئي لعنصر واجهة المستخدم في العلامة.
يحدد الكلمة كمصطلح عن طريق وضعها بخط مائل. وينبغي أن يحتوي النص التالي على تعريف لهذا المصطلح.
عنصر تفاعلي يتفاعل معه المستخدم لإكمال مهمة، مثل مربع الحوار أو المفتش أو النافذة. وبدون السمة المفتوحة، لن يكون مرئيًا للمستخدم.
علامة حاوية لأقسام مستند HTML. يُستخدم لتجميع عناصر الكتلة للتنسيق باستخدام الأنماط.
علامة حاوية تحتوي على مصطلح ووصفه.
تستخدم لتحديد مصطلح.
يسلط الضوء على المقاطع المهمة من النص من خلال عرضها بخط مائل.
علامة حاوية لتضمين محتوى تفاعلي خارجي أو مكون إضافي.
تجميع العناصر المرتبطة في نموذج عن طريق رسم مربع حولها.
عنوان/تعليق للعنصر.
علامة حاوية قائمة بذاتها لمحتوى مثل الرسوم التوضيحية والرسوم البيانية والصور الفوتوغرافية وأمثلة التعليمات البرمجية، وعادةً ما تكون مع تسمية توضيحية.
يحدد المنطقة الزائدة ( تذييل) وثيقة أو قسم.
نموذج لجمع وإرسال المعلومات من المستخدمين إلى الخادم. لا يعمل بدون سمة الإجراء.
قم بإنشاء ستة مستويات من العناوين للأقسام ذات الصلة.
عنصر حاوية لبيانات تعريف مستند HTML، مثل، و، و، و.
قسم خاص بالمعلومات التمهيدية لموقع أو مجموعة روابط التنقل. قد يحتوي على واحد أو أكثر من العناوين والشعارات والمعلومات حول المؤلف.
خط أفقي للتقسيم الموضوعي للفقرات.
العنصر الجذر لمستند HTML. يخبر المتصفح أن هذا مستند HTML. إنها حاوية لجميع عناصر HTML الأخرى.
كتابة مقطع من النص بخط مائل دون إعطائه تأكيدًا إضافيًا.
ينشئ إطارًا مضمنًا عن طريق تحميل مستند آخر في مستند HTML الحالي.
يقوم بتضمين الصور في مستند HTML باستخدام سمة src، التي تكون قيمتها هي عنوان URL للصورة المضمنة.
ينشئ حقول نموذج غنية يمكن للمستخدم إدخال البيانات فيها.
يسلط الضوء على النص مع التسطير. يُستخدم لتسليط الضوء على التغييرات التي تم إجراؤها على المستند.
تحديد النص الذي سيتم إدخاله بواسطة المستخدم باستخدام لوحة المفاتيح بخط أحادي المسافة.
تستخدم للتخزين معلومات إضافيةعن الصفحة. تستخدم المتصفحات هذه المعلومات لمعالجة الصفحة و محركات البحث- لفهرسته. يمكن أن يكون هناك عدة علامات في الكتلة، نظرًا لأنها تحمل معلومات مختلفة اعتمادًا على السمات المستخدمة.
مؤشر القياس في نطاق معين.
قسم من الوثيقة يحتوي على روابط التنقل الخاصة بالموقع.
يحدد القسم الذي لا يدعم البرمجة النصية.
حاوية لتضمين الوسائط المتعددة (مثل الصوت والفيديو وتطبيقات Java وActiveX وPDF وFlash). يمكنك أيضًا إدراج صفحة ويب أخرى في مستند HTML الحالي. يتم استخدام العلامة لتمرير معلمات البرنامج المساعد.
قائمة مرقمة مرتبة. يمكن أن يكون الترقيم رقميًا أو أبجديًا.
حاوية تحتوي على عنوان لمجموعة من العناصر.
يحدد خيارًا/خيارًا للاختيار من القائمة المنسدلة أو .
حقل لعرض نتيجة العملية الحسابية المحسوبة باستخدام البرنامج النصي.

الفقرات في النص.
يحدد معلمات المكونات الإضافية التي تم إنشاؤها باستخدام العنصر.
عنصر حاوية يحتوي على عنصر واحد وصفر أو أكثر من العناصر. في حد ذاته لا يعرض أي شيء. يسمح للمتصفح باختيار الصورة الأنسب.
إخراج النص بدون تنسيق، مع الحفاظ على المسافات وفواصل النص. يمكن استخدامها لعرض رمز الكمبيوتر والرسائل بريد إلكترونيإلخ.
مؤشر على الانتهاء من مهمة من أي نوع.
يحدد الاقتباس القصير.
حاوية لرموز شرق آسيا وفك رموزها.
يحدد النص المتداخل الخاص به باعتباره المكون الأساسي للتعليق التوضيحي.
يضيف وصف مختصرأعلى أو أسفل الأحرف الموجودة في العنصر، ويتم عرضها بخط أصغر.
وضع علامة على النص المضمن كتعليق توضيحي إضافي.
يعرض نصًا بديلاً إذا كان المتصفح لا يدعم العنصر.
يعرض النص غير الحالي مع يتوسطه خط.
يُستخدم لعرض النص الذي يمثل نتيجة تنفيذ التعليمات البرمجية للبرنامج أو البرنامج النصي، بالإضافة إلى رسائل النظام. يتم عرضه بخط أحادي المسافة.
يُستخدم لتحديد برنامج نصي من جانب العميل (عادةً JavaScript). يحتوي إما على نص البرنامج النصي أو يشير إلى ملف خارجيالبرنامج النصي باستخدام سمة src.
يحدد المنطقة المنطقية (القسم) من الصفحة، عادةً برأس.
عنصر تحكم يسمح لك بتحديد القيم من مجموعة مقترحة. يتم وضع القيم المتغيرة في .
يعرض النص بحجم خط أصغر.
يحدد موقع ونوع موارد الوسائط البديلة لـ , , .
حاوية للعناصر المضمنة. يمكن استخدامه لتنسيق مقاطع النص، مثل تمييز الكلمات الفردية بالألوان.
يضع التركيز في النص، ويسلط الضوء عليه بالخط العريض.
يتضمن أوراق الأنماط المضمنة.
يحدد الكتابة المنخفضة للرموز، على سبيل المثال، فهرس العناصر في الصيغ الكيميائية.
ينشئ عنوانًا مرئيًا للعلامة. يتم عرضه بمثلث مملوء، ويتيح لك النقر عليه عرض تفاصيل العنوان.
يحدد التهجئة المرتفعة للأحرف.
علامة لإنشاء جدول.
يحدد جسم الطاولة.
إنشاء خلية جدول.
يُستخدم للإعلان عن أجزاء تعليمات HTML البرمجية التي يمكن استنساخها وإدراجها في مستند بواسطة برنامج نصي. محتوى العلامة ليس عنصرًا فرعيًا.
إنشاء حقول إدخال نص كبيرة.
يحدد تذييل الجدول.
ينشئ عنوان خلية الجدول.
يحدد عنوان الجدول.
يحدد التاريخ/الوقت.
عنوان مستند HTML الذي يظهر أعلى شريط عنوان المتصفح. قد يظهر أيضًا في نتائج البحث، لذلك يجب أخذ ذلك في الاعتبار عند تقديم عنوان.
ينشئ صف جدول.
يضيف ترجمات للعناصر و.
يسلط الضوء على مقطع من النص من خلال وضع خط تحته، دون تأكيد إضافي.
ينشئ قائمة ذات تعداد نقطي.
يبرز المتغيرات من البرامج من خلال عرضها بخط مائل.
يضيف ملفات الفيديو إلى الصفحة. يدعم 3 صيغ فيديو: MP4، WebM، Ogg.
يشير إلى المتصفح حيث يمكن أن ينقطع الخط الطويل.
ورقة الغش مع العلامات

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