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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>
<HTML>
<meta charset = "utf-8"/>
<head>
<title> العناوين حسب المستويات </ title>
</head>
<body>
<!--العنوان الأول رئيسي-->
<h1> عنوان رئيسي مهم للغاية </h1>
<!--العنوان الثاني مهم جداً-->
<h2> هذاعنوان مهم </h2>
<!--العنوان الثالث اقل أهمية-->
<h3> عنوان أقل أهمية </ h3>
<!--العنوان الرابع ليس مهما جداً-->
<h4> العنوان غير مهم جداً </h4>
<!--العنوان الخامس ليس مهما-->
<h5> عنوان غير مهم </h5>
<!--العنوان السادس ليس مهما على الاطلاق-->
<h6> العنوان ليس مهماً على الإطلاق </h6>

<!DOCTYPE html>

<HTML>

<head>

<title> العناوين حسب المستويات </ title>

</head>

<body>

<h1> عنوان رئيسي مهم للغاية </h1>

<h2> هذاعنوان مهم </h2>

<h3> عنوان أقل أهمية </ h3>

<h4> العنوان غير مهم جداً </h4>

<h5> عنوان غير مهم </h5>

<h6> العنوان ليس مهماً على الإطلاق </h6>

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

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

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

هذا عنوان مهم

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

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

عنوان غير مهم

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

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

تنبيـه :

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

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

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

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

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

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

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

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

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

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

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

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

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