العلامات الهيكلية HTML5. عناصر HTML5 - علامات جديدة

02.06.2019

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

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

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

القائد العام لترميز مواقع الويب، HTML الشهير

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

لا ينبغي للمبتدئين في هذا المجال من المعرفة القلق. سأكرر التعريفات الرئيسية على وجه التحديد.

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

يتم استخدام علامات اللغة لإدارة محتوى الموقع. ماذا تعني "العلامة" وما الغرض منها؟

العلامة هي وحدة لغة ترميزية تساعد في تحديد عرض محدد لكائن معين على صفحة موقع ويب، بالإضافة إلى الإشارة إلى نوعه (رابط، صورة، وما إلى ذلك).

يمكن أن تكون عناصر اللغة مفردة أو حاوية (وتسمى أيضًا عادةً مقترنة). إنها تختلف فقط في أن العناصر المقترنة يمكن أن تحتوي على عناصر أخرى داخل نفسها: العلامات أو النص.

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

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

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

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

كما هو موضح بالفعل في مقالاتي السابقة، يجب ألا تخلط بين html وhtml 5. إن Html 5، على الرغم من أنه "قريب" لـ html إلى حد ما، هو منصة جديدة تمامًا، وتتمثل مهمتها الرئيسية في دعم ملفات الصوت والفيديو، الرسوم المتحركة وعرض المواقع الجغرافية وأكثر من ذلك بكثير.

تزود هذه المواصفات صفحات الويب بميزات جديدة وتُعلم DOM (نموذج كائن المستند) بوجود كائنات جديدة فيها. يؤدي ذلك إلى تسريع تحميل الصفحة وتسهيل الأمر على المتصفحات.

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

والآن أريد أن أدرج علامات المواصفات الرئيسية، والتي تتضمن المقالة والجانبية وغيرها، كما أصف أيضًا الغرض الذي تم إنشاؤها من أجله.

العلامات الدلالية

ومع ظهور منصة HTML 5، ظهرت أيضًا العلامات الدلالية. الآن سأشرح بلغة بسيطة ما هو عليه.

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

ربما كان هذا مناسبًا للمطورين من ناحية، لكن محركات البحث، وكذلك المتصفحات، واجهت وقتًا عصيبًا. ولذلك، تم العثور على الحل في شكل العلامات الدلالية.

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

لفهم المادة، أريدك أن تجرب مثالاً عمليًا:

مدونة موقع الويب الخاص بك لأخصائيي تكنولوجيا المعلومات

  • عنصر القائمة 1
  • عنصر القائمة 2
عنوان المشاركة

نص المقال الأول

حقوق الطبع والنشر للمدون المفضل

يوضح هذا المثال سهولة تنظيم التعليمات البرمجية باستخدام html 5. أود أن أشير إلى أن المطورين الذين يحترمون أنفسهم اليوم يستخدمون مواصفات html 5 وcss3 في موارد الويب الخاصة بهم. تعمل على تحسين تفاعل المتصفح مع

والتي تسمح لك بوصف كتل المحتوى بوضوح

ما هو HTML5؟

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

  • علامات الوسائط المضمنة لدعم محتوى الصوت والفيديو
  • علامة Canvas لرسم المحتوى مباشرة في المتصفح
  • النماذج الذكية التي تسمح بعمليات مثل التحقق من الصحة باستخدام سمة مطلوبة
تحسين مهارات التأهيل في هذا الموضوع

هذه المقالة جزء من برنامج "الطريق إلى المعرفة" لتحسين مهارات التأهيل (مسار المعرفة). سم. .

تعمل مجموعة جديدة من العناصر الهيكلية (العلامات) في HTML5 على تغيير طريقة تنظيم مستندات HTML. تركز علامات البنية الجديدة على تقسيم مستند HTML إلى أجزاء منطقية. يصف اسم كل علامة بنية نوع المحتوى الذي تهدف العلامة إلى تخزينه. هذه المقالة مخصصة لوصف تفصيلي لهذه العلامات الجديدة.

خلفية

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

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

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

يضمن هذا المزيج من تقنيات HTTP وHTML التنقل السريع والسهل لمحتوى الإنترنت - للتنقل بين المستندات، ما عليك سوى النقر فوق الروابط الموجودة في النص. بعد إنشاء التقنيتين المذكورتين أعلاه، أسس بيرنرز لي منظمة تسمى W3C (اتحاد شبكة الويب العالمية). قادت W3C تطوير الإصدارات الأربعة الأولى من HTML.

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

حاول W3C حل مشاكل الإنترنت اليوم باستخدام معيار XHTML 2.0 (لغة ترميز النص التشعبي القابلة للتوسيع). ومع ذلك، لم يتم اعتماد هذا المعيار على نطاق واسع وتم التخلي عنه تقريبًا. في عام 2004، بينما كان W3C يركز جهوده على معيار XHMTL 2.0، بدأت منظمة أخرى تسمى WHATWG (مجموعة عمل تكنولوجيا تطبيق النص التشعبي على الويب) في تطوير معيار HTML5، والذي لقي استحسانًا أكبر من قبل المجتمع مقارنة بمعيار XHTML 2.0. لقد توقف W3C عن العمل على XHTML 2.0 ويعمل حاليًا مع WHATWG لتطوير مواصفات HTML5.

المتصفحات المدعومة

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

تم تحديث إعلان نوع الوثيقة

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

يخبر إعلان Doctype المتصفح بإصدار لغة الترميز التي تمت كتابة الصفحة الحالية بها. ويتم ذلك باستخدام قالب DTD (تعريف نوع المستند). يحدد DTD القواعد التي تستخدمها لغة الترميز لمساعدة المتصفحات على عرض المحتوى بشكل صحيح.

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

الجدول 1. إعلانات Doctype وقدراتها مثال على قدرات إعلان Doctype
HTML 4.01 صارميسمح بجميع عناصر وسمات HTML، ولكنه لا يسمح بعلامات العرض التقديمي مثل الخط. عناصر مجموعة الإطارات غير مسموح بها.
HTML 4.01 الانتقاليةيشبه إعلان HTML الصارم، ولكنه يسمح باستخدام علامات مثل الخط. عناصر مجموعة الإطارات غير مسموح بها.
مجموعة إطارات HTML 4.01يشبه إعلان HTML الانتقالي، ولكنه يسمح باستخدام عناصر مجموعة الإطارات.
XHTML 1.0 صارميشبه إعلان HTML الصارم، ولكن يجب أن يكون كل المحتوى بتنسيق XML. على سبيل المثال، يجب أن يكون لكل عنصر افتتاحي عنصر إغلاق مناظر. عناصر مجموعة الإطارات غير مسموح بها.
XHTML 1.0 الانتقاليةيشبه إعلان HTML الانتقالي، ولكن يجب أن يكون كل المحتوى بتنسيق XML. عناصر مجموعة الإطارات غير مسموح بها.
مجموعة إطارات XHTML 1.0يشبه إعلان XHTML الانتقالي، ولكنه يسمح بعناصر مجموعة الإطارات.
أتش تي أم أل 1.1على غرار إعلان XHTML الصارم، يوفر بالإضافة إلى إمكانات الوحدة النمطية مثل دعم Ruby للغات شرق آسيا.

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

القائمة 1. إعلان نوع مستند HTML5

يجب أن يكون الإعلان في بداية مستند HTML، قبل .

علامات هيكلية جديدة

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

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

نهج HTML 4

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

القائمة 2. صفحة HTML بسيطة باستخدام علامات Div صفحة HTML بسيطة باستخدام تذييل محتوى رأس Div

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

نهج HTML5

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

القائمة 4. إضافة قسم علامة رأس صفحة HTML بسيطة

هذا قسم مهم من الصفحة.

مقالة علامة التذييل

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

القائمة 5. إضافة علامات المقالة رأس صفحة HTML بسيط

هذا قسم مهم من محتوى الصفحة. ربما وظيفة بلوق.

علامة التذييل جانبا

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

القائمة 6. إضافة علامة جانبية رأس صفحة HTML بسيط

هذا قسم مهم من محتوى الصفحة. ربما وظيفة بلوق.

هذا قسم مهم من محتوى الصفحة. ربما وظيفة بلوق.

علامة التذييل

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

القائمة 7. إضافة علامة تذييل رأس صفحة HTML بسيط

هذا قسم مهم من محتوى الصفحة. ربما وظيفة بلوق.

هذا جانبا لأول مشاركة في المدونة.

هذا قسم مهم من محتوى الصفحة. ربما وظيفة بلوق.

تذييل

في هذه المرحلة، تم استبدال جميع علامات div من المثال الأصلي بعلامات بنية HTML5.

قائمة علامات التنقل 8. إضافة علامة تنقل رأس صفحة HTML بسيط بعض رابط التنقل بعض روابط التنقل الأخرى رابط التنقل الثالث

هذا قسم مهم من محتوى الصفحة. ربما وظيفة بلوق.

هذا جانبا لأول مشاركة في المدونة.

هذا قسم مهم من محتوى الصفحة. ربما وظيفة بلوق.

تذييل النسخة النهائية للمثال

يظهر هنا نتيجة استبدال علامات div الأصلية بعلامات بنية HTML5 الجديدة.

القائمة 9. الإصدار النهائي من مثال رأس صفحة HTML البسيط بعض رابط التنقل بعض روابط التنقل الأخرى رابط التنقل الثالث

هذا قسم مهم من محتوى الصفحة. ربما وظيفة بلوق.

هذا جانبا لأول مشاركة في المدونة.

هذا قسم مهم من محتوى الصفحة. ربما وظيفة بلوق.

تذييل

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

خاتمة

تصف علامات بنية HTML5 الجديدة المحتوى الذي تحتويه وتساعد في تقسيم المستند إلى أقسام منطقية. مثل المؤلف الذي يكتب كتابًا، سيظل مؤلف المستند قادرًا على تحديد متى وأين يستخدم هذه العناصر الجديدة في مستنده. على الرغم من أن مؤلفين يكتبان نفس الكتاب قد يختاران طرقًا مختلفة لتقسيم هذا الكتاب إلى فصول، إلا أن استخدام الفصول لا يزال أسلوبًا ثابتًا لتقسيم الكتب إلى أقسام. وبالمثل، على الرغم من أن مؤلفي صفحة ويب معينة قد يختاران هياكل مختلفة، فإن العناصر الهيكلية الجديدة لـ HTML5 تزود مطوري صفحات الويب بقدرات جديدة ومتسقة لم توفرها علامات div السابقة.

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

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

يتم قلي مكونات الفروبونيتور والباربيناتور.

ويؤدي (الفقرة الأولى من مقال في الصحافة)


القطط "المعتمدة" من قبل أرنب أليف

عثرت ستة قطط مهجورة على شخصية أم جديدة غير متوقعة - أرنب أليف.


أخذت الممرضة البيطرية ميلاني همبل القطط البالغة من العمر ثلاثة أسابيع إلى منزلها في أبردين.


وهذا بدوره، كما في السابق، يعني زيادة أهمية محتوياته.

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

لكل Aspera Ad Astra- المثل المترجم من اللاتينية يعني "من خلال الأشواك إلى النجوم".

إنه يعني الإجهاد المؤكد والتأكيد العاطفي على مقطع معين من النص. هذا هو الحال عندما نسلط الضوء في الكلام على الكلمات بصوت (التنغيم، الحجم، وما إلى ذلك)

لا يمكنك التنفيذ، يمكنك أن تحظى بالرحمة.

اقرأ العقد بعناية! "النص الدقيق" (المعلومات التي تمثل إجراءً قانونيًا، مثل ترخيص المؤسسة أو العنوان القانوني، وما إلى ذلك) نقوم، كقاعدة عامة، بتمييزها بعنصر بفئة تحدد خطًا أصغر في وكلاء المستخدم المرئيين. الآن ظهر عنصر دلالي قديم جديد في ترسانتنا - .Holivar o في السابق لم يكن أكثر من مجرد نص مشطوب. يمثل الآن المعلومات التي فقدت أهميتها.
لدينا أيضًا عنصر تكون نتيجته الافتراضية في وكلاء المستخدم المرئيين عبارة عن نص يتوسطه خط. ويعني إجراء تغييرات على المستند، وللوهلة الأولى قد يبدو الغرض منها هو نفسه. ومع ذلك، هناك نقطة خفية هنا. دعونا نلقي نظرة على مثال لصفحة منتج في متجر عبر الإنترنت.
وقد يشير إلى سعرين، أحدهما مشطوب. نقوم بتمييزه بالعنصر . وهذا يعني أن السعر القديم فقد أهميته (لا يهم متى حدث ذلك، فالحقيقة نفسها مهمة). كيفية التحقق إذا لم يكن كذلك؟ يدل التغييرات التي تم إجراؤها على الوثيقة(الشيء المهم هو ذلك في وقت ما تم تغيير المستند). في حالتنا، يحتوي المستند الجديد بالفعل على معلومات غير ذات صلة. دلالات جديدة ونمط مستند قديم. إذا لم تتمكن، لسبب غير معروف، من استبدال نوع المستند بآخر جديد وتخطيطه رسميًا في HTML 4.01، فلا تيأس. استخدم العناصر الجديدة القديمة ذات المعنى الجديد وفي الوقت المناسب سوف تشكر نفسك. ربما سيقول شخص ما أن هذا غير صحيح، ولكن هذه العناصر ليست حتى غير صالحة. بالإضافة إلى ذلك، تم تصميم HTML5 مع وضع التوافق مع الإصدارات السابقة في الاعتبار، وينطبق الشيء نفسه على الدلالات الجديدة للعناصر القديمة. لم يتغير شيء بشكل جذري، ولكن تمت إضافة نكهة دلالية فقط.

HTML - لغة ترميز النص التشعبي. لأنه يقوم على ما يسمى العلامات. العلامات هي بعض عناصر الغلاف التي تحدد تنسيق وخصائص عناصر صفحة الويب. لقد قمنا بتجميع مرجع محدث لعلامات HTML لك في صفحة واحدة.

هناك أكثر من مائة عنصر ترميز في المجموع. ولكل منها عدد من السمات وبناء الجملة الخاص بها. سيساعدك مرجع علامات HTML في العثور بسرعة على العنصر الذي تحتاجه.

قائمة علامات HTML

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

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

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

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

    كيفية استبدال علامة HTML القديمة؟ في معظم الحالات، تفي أوراق الأنماط المتتالية CSS بالغرض. هناك أيضًا بدائل للعلامات غير المستخدمة في المواصفات الجديدة داخل HTML. يعرض الجدول أدناه علامات HTML المهملة مع خيارات لاستبدالها.

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

    تقوم علامة القسم بتجميع المحتوى حسب الموضوع، أو بمعنى آخر، تحدد قسمًا من المستند. عادة ما يسبق الرأس، وقد يظهر في التذييل. يمكن تغليف علامة القسم داخل علامة قسم أخرى إذا لزم الأمر، ويمكن أن تحتوي على أي قدر من العلامات. في HTML العادي، كقاعدة عامة، يتم استخدام div بدلاً من علامة القسم.

    علامة الرأس

    تحتوي علامة الرأس عادةً على عنوان أو عناوين مجموعات، ولكنها يمكن أن تحتوي أيضًا على معلومات حول قسم ما.

    بمعنى آخر، تحدد علامة الرأس رأس الموقع (رأس الموقع).

    علامة التذييل

    تحتوي علامة التذييل عادةً على معلومات حول القسم، على سبيل المثال: مؤلف المقالة، التاريخ، حقوق الطبع والنشر، إلخ.

    لغة البرمجة

    حقوق الطبع والنشر 20011 جميع الحقوق

    علامة التنقل

    تحدد علامة التنقل منطقة التنقل، وهي عادة قائمة من الروابط. علامة التنقل هي شقيق القسم الرئيسي والرأس والتذييل.

    لغة البرمجة
    • بيت
    • تحميل
    • أرشيف
    • معلومات عنا

    يمكن أيضًا وضع عنصر التنقل، على سبيل المثال، في علامة الرأس.

    علامة جانبا

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

    علامة المقالة

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

    علامة الشكل

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

    HTML هنا أصف الصورة مربع حوار العلامة

    علامة الحوار هي المنطقة التي يتم فيها عرض التعليقات (المحادثة، المحادثة). تتكون علامة الحوار من الأجزاء التالية:

    • علامة الحوار نفسها، والتي تحدد كتلة تحتوي على تعليقات
    • ستحدد علامة dt من يتحدث
    • تحدد العلامة dd نص التعليق
    HTML Vasya لقد كنت هنا Petya أؤكد أن كل ما كتبه Vasya هو ترميز حقيقي يعتمد على علامات HTML5

    لذلك دعونا نجمع بيننا علامات الهيكلعلى الصفحة.

    مدونة قياسية

    • بيت
    • تحميل
    • أرشيف
    • معلومات عنا
    عنوان

    لوريم إيبسوم...

    عنوان

    لوريم إيبسوم...

    حقوق الطبع والنشر 20011 جميع الحقوق

    كما ترون، العلامات نفسها أكثر وصفية مما لو كنت تستخدم معرفات عادية لعلامات div. هناك أيضًا ميزة واضحة لاستخدام علامات الإغلاق المناسبة مثل Article . على سبيل المثال، يصبح ترميز المستند أكثر قابلية للفهم (بما في ذلك محركات البحث) إذا استخدمت علامة المقالة بدلاً من كتلة غير مفهومة مع id = "something" (حيث لا تزال هناك حاجة إلى البحث عن علامة الإغلاق!).

    هل يجب عليك استخدام علامات البنية الآن؟

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

    أولاً، نظرًا لأن معظم المتصفحات لا تفهم نموذج HTML5، فإنهم ليسوا على علم بالعلامات الجديدة في HTML5. لحسن الحظ، المتصفحات حساسة للغاية، مما يسمح لها بالتعامل مع العلامات غير المعروفة. المشكلة الوحيدة هي أن العلامات غير المعروفة لا تحتوي على أنماط افتراضية، ويتم التعامل مع هذه العلامات كعلامات مضمّنة. لكن علامات HTML5 الجديدة لدينا هي هيكلية ومن الواضح أنها يجب أن تكون عناصر كتلة. لذلك، عندما نقوم بتصميمها في CSS، نحتاج إلى تضمين إعلان العرض: الكتلة.

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

    دعم آي إي

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

    document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("جانبا"); document.createElement("nav"); document.createElement("article");

    يمكن تضمين هذا الرمز مباشرة في الرأس أو توصيله من خلال ملف خارجي.

    خاتمة

    لذا يمكنك تنظيم مستنداتك باستخدام علامات HTML5 الجديدة الآن.