كيفية إنشاء العناوين والفقرات في HTML

كيفية إنشاء العناوين والفقرات في HTML

تماشياً مع سياسة SEO لمحتوى الوجبات الخفيفة في كتابة المقالات ونشر المعلومات فإنني أحببت اليوم أن أقتبس عنصرين أساسيان من الدرس الطويل الذي عرضته خلال الدورة التعليمية لكيفية تنظيم و ترتيب النّص ب HTML وهما : إدراج العناوين و تحرير الفقرات بلغة HTML داخل النص أو المقالة . 
حين قلت اقتباس فأنا لا أعني بالضرورة أنني سأقوم بعملية نسخ ولصق.  ولكنني هنا أشير إلى أن هذين العنصرين ( العناوين والفقرات )  قد قمت بدمجهما ضمن عدد من العناصر المكونة للنص بلغة HTML في الدرس المشار إليه أعلاه . واليوم سأعمل على تحرير هذا الدرس منفصلاً ليكون أكثر انسجاماً  وإدراكاً لدى كل المستويات ويَسْهُلُ تطبيقهما داخل المقالة عن فهم ودراية.

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

ما الشيئ الذي يميز العناوين عن الفقرات في HTML؟


مرة أخرى ، عليك أن تذكر دائماً أن HTML هي لغة ترميز بتم تحريرها بواسطة أكواد برمجية.

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

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

المتصفحات كيفية إنشاء العناوين والفقرات في HTML

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

في الواقع ، سيستخدم Google  العناويل المحددة  كعناصر لفهم صفحتنا قبل الانتقال لفحص المحتوى ، مما يمنحها أهمية أكبر من المحتوى المُكون من الفقرات .

دروس HTML

كيفية إنشاء العناوين والفقرات في HTML

إنشاء العناوين وتحديدها في HTML


 

هناك ستة مستويات هرمية من العناوين. وهي محددة بواسطة العلامات :  h1 و h2 و h3 و h4 و h5 و h6 والتي تعتبر أساسية في تنظيم  المحتوى على صفحات الويب.

من المفيد أن تعرف العلامة أو العنصر : “h” ، فهي تعني “العنوان” .  بالانجليزية   « heading » ، و غالباً ما يتم اختيار الأحرف الأولى من العناصر في HTML بما تمثله باللغة الإنجليزية.

يمثل عنصر h1 عنواناً رئيسياً في صفحتنا أو في قسم صفحة بعينه ، وعلى هذا الأساس ، سنكون قادرين على استخدام عنصر h1 واحد فقط لكل صفحة أو في قسم الصفحة ، 

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

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

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

لأن المستويات الأخرى من h4 إلى h6 تكاد تكون ضعيفة إلى  بلا قيمة !  .. شاهد المثال: ⇓

كيفية إنشاء العناوين والفقرات في HTML

نتيجة عرض العناوين حسب مستوياتها المذكورة أعلاه

عنوان رئيسي مهم للغاية

هذا عنوان مهم

عنوان أقل أهمية

العنوان غير مهم جداً

عنوان غير مهم
العنوان ليس مهماً على الإطلاق

 

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

تنبيـه :

أشير إلى أنه لا يمكن أبداً  استخدام عنصر من نوع  *h  في كتابة نص كبير بخط غليظ ! لأن *h تستخدم فقط لتحديد عنوان في صفحة من صفحات الويب. أما ما يخص تكبير وتغليظ الخط فإنه يعتمد بالأساس على إدخال لغـة CSS في تحديد حجم النص .

ملاحظة: يجب عدم الخلط بين عنصر *h  وعنصر  title ( العنوان ) : يتم استخدام عنصر title لإعطاء عنوان لصفحتنا بينما يتم استخدام عناصر *h  لتحديد العناوين داخل صفحتنا ، أي تنظيم و ترتيب محتوى صفحتنا.

تَـعَـرَّفْ أكثر على العنوان title من هنا

إنشاء الفقرات وتحديدها في HTML


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

الفقرة تبدأ بالعلامة <p>  وتنتهي بالعلامة </p>

ولكي تكون أكثر إلماماً باستخدام العلامات p لتنسيق الفقرات داخل المقالة  أدعوك للنقر على الرابط المبين أدناه حيث يوجد الشرح  مفصلاً بطريقة أوضح مع عرض صور لِلَقطات الشاشة:

كيفية إنشاء العناوين والفقرات في HTML إكتشف كيفية تنسيق الفقرات داخل المقالة: التعريف بالفقرات في HTML وكيفية إنشائها

كيفية إنشاء العناوين والفقرات في HTML

أرجو أن يكون الشرح موفقاً … في أمان الله

 

قناتي على اليوتوب

تنويرأرى أن هذه المواضيع الذات صلة قد تهمك:

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 457 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

24 عدد المشاهدات لهذا المحتوى
Scroll to Top