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

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

علم الدلالة حول معنى

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

"ألقى الرجل الكمبيوتر من النافذة."

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

The man threw the computer through the window.

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

هياكل HTML لديها بالفعل معنى

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

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

أتذكر عندما بدأنا في فصل المحتوى عن الأسلوب؟

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

على سبيل المثال ، استبدلنا العلامة "i" بعلامة em ، والتي تعد أكثر أهمية ولا تخبر المتصفح بالضبط عن كيفية عرض النص داخل العنصر. الغرض من استخدام em بدلاً من i هو نقل معلومات حول طبيعة عنصر المحتوى ، بدلاً من المعلومات حول تصميمه. تؤثر em بالطبع على النمط ، وهو السبب الرئيسي في استخدامه ، إلا أنه يترك تفاصيل النمط حتى المستعرض و / أو رمز CSS المفصولة بشكل مثالي عن ترميز الصفحات.

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

أليس هذا مشابه لـ XML؟

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

Jim Smith23 November 2012

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

بالمناسبة ، هناك أنواع مختلفة من المعنى

لقد تحدثنا عن المعنى ، ولكن في الحقيقة هناك طرق مختلفة يمكن أن يكون فيها عنصر أو مقتطف شفرة آخر ذا مغزى.

تعد العلامة img ذات معنى في أنها تخبر شيئًا عن محتوى العنصر ، وتصف ما هو عليه.

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

كيف يرتبط كل هذا برمز HTML5؟

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

Man in Window Outburst

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

تصف علامة nav الغرض من قسم صفحة ، بمعنى أنه يحتوي على روابط تنقل:

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

What happened
Police officers apprehended the man at 3.30pm...

عنصر المقالة مشابه ، يستخدم لتعريف عنصر مستقل بذاته:

The Law
The law on throwing items through windows is very clear...

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

The Law
The law on throwing items through windows is very clear...

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

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

هل كنت تضيف بالفعل معنى لترميزك؟

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

لماذا نفعل كل هذا؟

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

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

يدفع المطورون تطور تقنيات الويب

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

هل تستخدم عناصر دلالية HTML5؟ هل التركيز على الدلالات ينتج منتجات عالية الجودة؟ دعنا نعرف بماذا تفكر في التعليقات.

صورة مميزة / صورة مصغرة ، يستخدم صورة اللغة عبر Shutterstock.