لست بحاجة إلى استخدام علامات div في كل مرة. استخدم علامات HTML الدلالية هذه لجعل موقعك أكثر تنظيماً وقابلاً للوصول.
قبل إدخال HTML الدلالية ، استخدم المطورون divs لترتيب المحتوى. عناصر Div ليس لها معنى في حد ذاتها. إنها توفر فقط طريقة لتطبيق الأنماط وترتيب المحتوى.
كلمة دلالية تعني المتعلقة بالمعنى. تصف عناصر HTML الدلالية الغرض من محتواها. إنها توفر معنى للمطور والمستخدم ومحركات البحث والتقنيات المساعدة. فيما يلي قائمة بعلامات HTML الدلالية الشائعة التي يمكنك استخدامها في مشروعك التالي.
ما هي Divs؟
في HTML ، عنصر div (التقسيم) عبارة عن حاوية على مستوى الكتلة. يمكنك استخدام div لتجميع عناصر HTML أو تقسيمها إلى أقسام على صفحة الويب. بناء الجملة كما هو موضح أدناه:
<شعبة>
شعبة>
فوائد استخدام عناصر HTML الدلالية على Divs
قدم HTML5 عناصر HTML الدلالية لتسهيل قراءة التعليمات البرمجية. توفر العناصر الدلالية معنى وبنية لمحتوى الويب.
يجعلون التعليمات البرمجية الخاصة بك مفهومة للمطورين الآخرين. كما أنها تسهل على محركات البحث العثور على المحتوى الخاص بك وجذب حركة المرور إلى موقعك. فيما يلي بعض العناصر الدلالية التي يمكنك استخدامها في ملف مشاريع HTML و CSS.
1.
ال تحدد العلامة قسم الرأس في المستند. عادةً ما يحتوي على شعار الموقع والتنقل وعنوان الصفحة. إنه القسم الذي يظهر أعلى صفحة الويب. يمكنك تخصيص الرأس حسب حاجتك. بناء الجملة كما يلي:
<جسم><رأس>
<h1> أهلاً!h1>
<ص>أنا رأسص>
رأس>
جسم>
2.
ال تحتوي العلامة على روابط التنقل الخاصة بالموقع. يمكن أن تكون هذه القوائم أو جداول المحتويات أو الفهارس. عادة ما يتم وضعها داخل ملف بطاقة شعار. بناء الجملة كما يلي:
<رأس><التنقل>
<ماي>
<لي>روابط موقع الويب الخاص بيلي>
<لي><أhref="#"> بيتأ>لي>
<لي ><أhref="#"> معلومات عنا أ>لي>
ماي>
التنقل>
<h1>ما ورد أعلاه هو جزء التنقل من موقع الويب الخاص بي.h1>
رأس>
سيبدو على المتصفح كما يلي:
يمكنك استخدام نماذج تخطيط CSS مثل فليكس بوكس CSS لمحاذاة
3.
ال تحتوي العلامة على المحتوى الرئيسي لصفحة الويب. يفصل المحتوى من الرأس والشريط الجانبي والتذييل. يمثل الرئيسي المحتوى السائد في قسم.
<جسم><رأس>
<عنوان> حقائق الموقع عنوان>
رأس>
<رئيسي>
<ص> هذا الموقع هو عرض توضيحي قصير لكيفية عمل العلامة الرئيسية.ص>
<ص> إنه يحتوي على جزء من موقع الويب بمحتوى مفيد.ص>
رئيسي>
<تذييل>
<h3> هذا تذييل h3>
تذييل>
جسم>
يبدو كالتالي:
4.
استخدم ال علامة لتحديد الأقسام المستقلة في مستند أو موقع ويب. على سبيل المثال ، يمكنك استخدامها لتنظيم منشورات المدونة أو المجلات أو بطاقات المنتجات. ال يمكن للعنصر إحاطة عناصر أخرى بما في ذلك المقالات والأقسام والعناوين الأخرى. يجب أن تتعلق العناصر المرفقة بموضوع المقالة.
<شرط>
<h1>أغرب من الخيالh1><شرط>
<h3>مقدمةh3>
<ص>الأحداث والأشخاص المروية في هذا الكتاب خيالية.ص>
شرط>
<شرط>
<h3>الفصل الأولh3>
<ص> كان النهار ساطعًا وابتسمت الشمس من السماءص>
شرط>
شرط>
يبدو هكذا:
5.
ال تحتوي العلامة على المحتوى المتعلق بالمحتوى الرئيسي. استخدم هذه العلامة لإنشاء أشرطة جانبية للاقتباسات أو التعليقات أو الصيحات. يسلط الضوء على المعلومات التي قد يفوتها القارئ. تبرز من بقية المحتوى.
لغة البرمجة><لغة البرمجة>
<أسلوب>
جسم{
لون الخلفية: # abdbe3 ؛
}
جانبا {
العرض: 30٪؛
حشوة اليسار: 0.5rem ؛
الهامش الأيسر: 1rem ؛
المرن: يسار ؛
ظل الصندوق: أقحم 5 بكسل 0 5 بكسل -5 بكسل أخضر ؛
نمط الخط: مائل ؛
لون احمر؛
}
جانبا> ص {
الهامش: 0.5 ريم ؛
أسلوب>
<جسم>
<رئيسي>
<h1> ويفر بيردh1>
<ص>Ploceidae هي عائلة من طيور الجاسرين الصغيرة. ويطلق على العديد منها اسم النساجون والطيور النساجة والعصافير الحياكة والأساقفة.ص>
<جانبا>
<ص>المملكة: Animalia
الأسرة في اللغات الحبلياتص>جانبا>
<ص>في أحدث التصنيفات ، يعتبر Ploceidae كليد ، يستثني بعض الطيور التي تم تصنيفها تاريخيًا في العائلة. بعض العصافير تشمل الفصيلة الأحادية النمط Amblyospizinae.ص>
رئيسي>
جسم>
لغة البرمجة>
6.
ال يحتوي العنصر على جزء من الصفحة بدون عنصر دلالي محدد. قد تحتوي الأقسام على عنوان لتقديم المحتوى وإرفاق عناصر HTML الأخرى. يمثل مكونات صفحة الويب مثل الفصول في كتاب أو مدونة.
لغة البرمجة><لغة البرمجة>
<جسم>
<h1>الكتاب المقدسh1>
<قسم>
<h2>مقدمةh2>
<ص>الكتاب المقدس هو مجموعة من الكتب الدينية المقدسة في المسيحية واليهودية والسامرية. الكتاب المقدس مختارات – مجموعة نصوص متنوعة الأشكال – كتبت في الأصل باللغات العبرية والآرامية واليونانية.ص>
قسم>
<قسم>
<h2>الفصل الأول: التكوينh2>
<ص>سفر التكوين هو أول كتاب من الكتاب المقدس العبري والعهد المسيحي القديم. اسمها العبري هو نفس الكلمة الأولى ، بيريشيت. سفر التكوين هو سرد لخلق العالم ، والتاريخ المبكر للبشرية ، وأسلاف إسرائيل وأصول الشعب اليهوديص>
قسم>جسم>
لغة البرمجة>
يبدو هكذا:
7.
ال العناصر التوضيحية المضمنة ذاتيًا مثل الصور أو الرسوم البيانية. هذه الرسوم التوضيحية تشير إلى المحتوى على الصفحة الرئيسية. تأتي الأرقام مع التسميات التوضيحية المحددة من قبل عنصر. ال يشرح ما هي الصورة. ال
لغة البرمجة><لغة البرمجة>
<جسم>
<رئيسي>
<قسم>
<h1>أجزاء من الكمبيوترh1>
<ص> هناك عدة أجزاء تعمل معًا لتكوين جهاز كمبيوترص>
<شكل>
<IMGsrc="some-url.jpg"بديل="فأرة الحاسوب">
<فيجكابتيون>هذا هو فأرة الكمبيوترفيجكابتيون>
شكل>
قسم>
رئيسي>
جسم>
لغة البرمجة>
يمكنك الذهاب أبعد من ذلك والتعلم كيفية إنشاء صور سريعة الاستجابة بتنسيق HTML.
ال يحتوي عنصر HTML على معلومات في الجزء السفلي من صفحة الويب. إنه عكس عنصر. ال قد تحتوي على معلومات حول مالك الصفحة. يتضمن ذلك بيانات حقوق النشر أو روابط لمعلومات إضافية عن الموقع.
لغة البرمجة><لغة البرمجة>
<جسم>
<رئيسي>
<قسم>
<h1>أجزاء من الكمبيوترh1>
<شكل>
<IMGsrc="some-url.jpg"بديل="فأرة الحاسوب">
<فيجكابتيون>هذا هو فأرة الكمبيوترفيجكابتيون>
شكل>
قسم>
رئيسي>
<تذييل>
<ص> صُنع بواسطة ComputerTech © 2023ص>
تذييل>
جسم>
لغة البرمجة>
يضيف الكود أعلاه تذييلاً إلى ملف أجزاء من الكمبيوتر الصفحة كما هو موضح في الصورة التالية.
لماذا نستخدم عناصر HTML الدلالية؟
استخدام عناصر HTML الدلالية يعطي سياق للكود. يمكن لأي شخص ينظر إلى الكود أن يفهمها بسهولة. تسهل العلامات تصميم العناصر والتعاون في المشاريع.
يمكنك استخدام HTML الدلالية مع مكتبات وأطر الواجهة الأمامية. تفضل معظم متصفحات الويب الحديثة عناصر HTML الدلالية على العناصر التقليدية. ابدأ في استخدام HTML الدلالي وشاهد الكود الخاص بك يبدو حديثًا وقابلًا للقراءة وسهل المظهر.
