من المبادئ المهمة لحركة معايير الويب المسؤولة عن الصناعة التي لدينا اليوم فكرة استخدام عناصر HTML لما هي عليه بدلاً من ظهورها في المتصفح بشكل افتراضي. هذا هو المعروف باسم استخدام HTML الدلالي.
ما هو HTML الدلالي
HTML الدلالي أو الترميز الدلالي هو HTML الذي يقدم معنى لصفحة الويب بدلاً من مجرد العرض التقديمي. على سبيل المثال ، تشير علامة
إلى أن النص المرفق هو فقرة.
هذا هو كل الدلالي والعرض ، لأن الناس يعرفون ما هي الفقرات والمتصفحات تعرف كيفية عرضها.
على الجانب الآخر من هذه المعادلة ، فإن العلامات مثل و ليست دلالية ، لأنها تحدد فقط كيفية ظهور النص (غامق أو مائل) ولا تقدم أي معنى إضافي للترميز.
تتضمن أمثلة علامات HTML الدلالية علامات الرأس
خلال و و و . هناك العديد من علامات HTML الدلالية التي يمكن استخدامها عند إنشاء موقع ويب متوافق مع المعايير.
لماذا يجب أن نهتم حول علم الدلالة
تنبع فائدة كتابة HTML الدلالية من ما يجب أن يكون هدف القيادة لأي صفحة ويب - الرغبة في التواصل. بإضافة علامات دلالية إلى المستند الخاص بك ، يمكنك تقديم معلومات إضافية حول هذا المستند ، مما يساعد في الاتصال. على وجه التحديد ، توضح العلامات الدلالية للمتصفح ما معنى الصفحة ومحتواها.
يتم توصيل ذلك الوضوح أيضًا بمحركات البحث ، مما يضمن تسليم الصفحات الصحيحة للاستعلامات الصحيحة.
توفر علامات HTML الدلالية معلومات حول محتويات تلك العلامات التي تتجاوز مجرد مظهرها على الصفحة. يتم التعرف على النص المضمن في العلامة فورًا بواسطة المستعرض كنوع من لغة الترميز.
بدلاً من محاولة تقديم هذا الرمز ، يفهم المتصفح أنك تستخدم هذا النص كمثال على الشفرة لأغراض مقالة أو برنامج تعليمي عبر الإنترنت من نوع ما.
يمنحك استخدام العلامات الدلالية العديد من السنانير لتصميم المحتوى الخاص بك. ربما تفضل اليوم عرض نماذج التعليمات البرمجية الخاصة بك في نمط المستعرض الافتراضي ، ولكن غدًا ، ترغب في الاتصال بها بلون خلفية رمادية ، وتريد فيما بعد تحديد مجموعة الخطوط أو الأسطر الخطية أحادية المسافة المحددة للاستخدام العينات الخاصة بك. يمكنك القيام بكل هذه الأشياء بسهولة عن طريق استخدام الترميز الدلالي وتطبيق CSS الذكي.
استخدم العلامات الدلالية بشكل صحيح
عندما تريد استخدام العلامات الدلالية لنقل المعنى وليس لأغراض العرض ، عليك أن تكون حذراً من عدم استخدامها بشكل غير صحيح ببساطة من أجل خصائص العرض الشائعة الخاصة بهم. تتضمن بعض العلامات الدلالية الأكثر استخدامًا ما يلي:
- blockquote - يستخدم بعض الأشخاص علامة لوضع مسافة بادئة في نص ليس عرضًا. ويرجع ذلك إلى أن المسافة المقطوعة للقفز معلقة بشكل افتراضي. إذا كنت تريد فقط الاستفادة من المسافة البادئة ، لكن النص ليس علامة اقتباس ، فاستخدم هوامش CSS بدلاً من ذلك.
- p - يستخدم بعض محرري الويب
& nbsp؛ (مساحة خالية من الانفصال مضمنة في paragraoph) لإضافة مساحة إضافية بين عناصر الصفحة ، بدلاً من تعريف الفقرات الفعلية لنص تلك الصفحة. كما هو الحال مع مثال الطعج المذكور سابقًا ، يجب استخدام خاصية نمط الهامش أو الحشو لإضافة مسافة.
- ul - مثل blockquote ، إرفاق النص داخل علامة
tag indents هذا النص في معظم المتصفحات. هذا هو كلام HTML غير صحيح وغير صحيح ، لأن علامات - صالحة فقط داخل علامة
. مرة أخرى ، استخدم نمط الهامش أو الحشو لنص مسافة بادئة.
- h1 – h6 - يمكن استخدام العلامات الرأسية لجعل الخطوط أكبر وأكثر جرأة ، ولكن إذا كان النص ليس عنوانًا ، فيجب ألا يكون داخل علامة عنوان. استخدم خصائص CSS للخط والخط بحجم CSS بدلاً من ذلك إذا كنت تريد تغيير حجم أو وزن نص معين في صفحتك.
باستخدام علامات HTML التي لها معنى ، يمكنك إنشاء صفحات تنقل معلومات أكثر من مجرد إحاطة كل شيء بعلامات
.
ما هي علامات HTML التي هي الدلالي؟
في حين أن كل علامة HTML4 تقريبًا وكل علامات HTML5 لها معنى دلالي ، فإن بعض العلامات هي في المقام الأول ذات طبيعة دلالية.
على سبيل المثال ، قام HTML5 بإعادة تعريف معنى العلامات و لتكون دلالية. لا تُنقل العلامة أهمية إضافية ، بل نصًا يتم عرضه بشكل غامق. لا تُنقل العلامة أيضًا أهمية أو تشديدًا أكبر ، ولكنها تحدد النص الذي يتم تقديمه عادة بخط مائل.
العلامات الدلالية HTML
<ابر> الاختصار <اختصار> اختصار <اقتباس فقرة> الاقتباس الطويل فريف <عنوان> عنوان المؤلف (المؤلفين) من الوثيقة و الاقتباس <كود> مرجع الرمز نص Teletype تقسيم منطقي حاوية نمط مضمنة عامة <ديل> النص المحذوف <الإضافية> النص المدرج تشديد على تأكيد قوي
عنوان المستوى الأول
العنوان من المستوى الثاني
العنوان من المستوى الثالث
العنوان من المستوى الرابع
العنوان من المستوى الخامس
العنوان السادس من المستوى
استراحة موضوعية النص الذي سيتم إدخاله من قبل المستخدم <قبل> نص منسق مسبقًا <ف> اقتباس مضمنة قصيرة <عصيدة> إخراج العينة <الفرعية> مخطوطة <سوب> حرف فوقي <فار> نص متغير أو مستخدم محدد
و و . هناك العديد من علامات HTML الدلالية التي يمكن استخدامها عند إنشاء موقع ويب متوافق مع المعايير.
لماذا يجب أن نهتم حول علم الدلالة
تنبع فائدة كتابة HTML الدلالية من ما يجب أن يكون هدف القيادة لأي صفحة ويب - الرغبة في التواصل. بإضافة علامات دلالية إلى المستند الخاص بك ، يمكنك تقديم معلومات إضافية حول هذا المستند ، مما يساعد في الاتصال. على وجه التحديد ، توضح العلامات الدلالية للمتصفح ما معنى الصفحة ومحتواها.
يتم توصيل ذلك الوضوح أيضًا بمحركات البحث ، مما يضمن تسليم الصفحات الصحيحة للاستعلامات الصحيحة.
توفر علامات HTML الدلالية معلومات حول محتويات تلك العلامات التي تتجاوز مجرد مظهرها على الصفحة. يتم التعرف على النص المضمن في العلامة فورًا بواسطة المستعرض كنوع من لغة الترميز.
بدلاً من محاولة تقديم هذا الرمز ، يفهم المتصفح أنك تستخدم هذا النص كمثال على الشفرة لأغراض مقالة أو برنامج تعليمي عبر الإنترنت من نوع ما.
يمنحك استخدام العلامات الدلالية العديد من السنانير لتصميم المحتوى الخاص بك. ربما تفضل اليوم عرض نماذج التعليمات البرمجية الخاصة بك في نمط المستعرض الافتراضي ، ولكن غدًا ، ترغب في الاتصال بها بلون خلفية رمادية ، وتريد فيما بعد تحديد مجموعة الخطوط أو الأسطر الخطية أحادية المسافة المحددة للاستخدام العينات الخاصة بك. يمكنك القيام بكل هذه الأشياء بسهولة عن طريق استخدام الترميز الدلالي وتطبيق CSS الذكي.
استخدم العلامات الدلالية بشكل صحيح
عندما تريد استخدام العلامات الدلالية لنقل المعنى وليس لأغراض العرض ، عليك أن تكون حذراً من عدم استخدامها بشكل غير صحيح ببساطة من أجل خصائص العرض الشائعة الخاصة بهم. تتضمن بعض العلامات الدلالية الأكثر استخدامًا ما يلي:
- blockquote - يستخدم بعض الأشخاص علامة لوضع مسافة بادئة في نص ليس عرضًا. ويرجع ذلك إلى أن المسافة المقطوعة للقفز معلقة بشكل افتراضي. إذا كنت تريد فقط الاستفادة من المسافة البادئة ، لكن النص ليس علامة اقتباس ، فاستخدم هوامش CSS بدلاً من ذلك.
- p - يستخدم بعض محرري الويب
& nbsp؛ (مساحة خالية من الانفصال مضمنة في paragraoph) لإضافة مساحة إضافية بين عناصر الصفحة ، بدلاً من تعريف الفقرات الفعلية لنص تلك الصفحة. كما هو الحال مع مثال الطعج المذكور سابقًا ، يجب استخدام خاصية نمط الهامش أو الحشو لإضافة مسافة.
- ul - مثل blockquote ، إرفاق النص داخل علامة
tag indents هذا النص في معظم المتصفحات. هذا هو كلام HTML غير صحيح وغير صحيح ، لأن علامات - صالحة فقط داخل علامة
. مرة أخرى ، استخدم نمط الهامش أو الحشو لنص مسافة بادئة.
- h1 – h6 - يمكن استخدام العلامات الرأسية لجعل الخطوط أكبر وأكثر جرأة ، ولكن إذا كان النص ليس عنوانًا ، فيجب ألا يكون داخل علامة عنوان. استخدم خصائص CSS للخط والخط بحجم CSS بدلاً من ذلك إذا كنت تريد تغيير حجم أو وزن نص معين في صفحتك.
باستخدام علامات HTML التي لها معنى ، يمكنك إنشاء صفحات تنقل معلومات أكثر من مجرد إحاطة كل شيء بعلامات
.
ما هي علامات HTML التي هي الدلالي؟
في حين أن كل علامة HTML4 تقريبًا وكل علامات HTML5 لها معنى دلالي ، فإن بعض العلامات هي في المقام الأول ذات طبيعة دلالية.
على سبيل المثال ، قام HTML5 بإعادة تعريف معنى العلامات و لتكون دلالية. لا تُنقل العلامة أهمية إضافية ، بل نصًا يتم عرضه بشكل غامق. لا تُنقل العلامة أيضًا أهمية أو تشديدًا أكبر ، ولكنها تحدد النص الذي يتم تقديمه عادة بخط مائل.
العلامات الدلالية HTML
<ابر> الاختصار <اختصار> اختصار <اقتباس فقرة> الاقتباس الطويل فريف <عنوان> عنوان المؤلف (المؤلفين) من الوثيقة و الاقتباس <كود> مرجع الرمز نص Teletype تقسيم منطقي حاوية نمط مضمنة عامة <ديل> النص المحذوف <الإضافية> النص المدرج تشديد على تأكيد قوي
عنوان المستوى الأول
العنوان من المستوى الثاني
العنوان من المستوى الثالث
العنوان من المستوى الرابع
العنوان من المستوى الخامس
العنوان السادس من المستوى
استراحة موضوعية النص الذي سيتم إدخاله من قبل المستخدم <قبل> نص منسق مسبقًا <ف> اقتباس مضمنة قصيرة <عصيدة> إخراج العينة <الفرعية> مخطوطة <سوب> حرف فوقي <فار> نص متغير أو مستخدم محدد