آموزش HTML – فصل دوم: سربرگ ها و پاراگراف (Headings & Paragraph)

در ادامه آموزش اچ تی ام ال به زبان ساده قصد داریم نحوه استفاده سربرگ ها (Headings) و پاراگراف را توضیح دهیم. المان های پاراگراف و هدینگ ها در زبان HTML نقشی اساسی در نمایش متن بازی می کنند. همچنین استفاده استاندارد از این تگ ها به بهینه سازی سایت برای موتور های جستجو (سئو) کمک بسیاری می کند.

توسط: حامد ارسلانپور در 6 سال پیش (دسته ها: آموزش, آموزش برنامه نویسی, آموزش طراحی وب, تکنولوژی, وب سایت)

آموزش HTML – فصل دوم: سربرگ ها و پاراگراف (Headings & Paragraph)

سربرگ ها در اچ تی ام ال (HTML Headings)

سربرگ های اچ تی ام با تگ های h1 تا h6 تعریف میشوند.

h1 نشان دهنده ی مهم ترین سربرگ است و به صورت پیشفرض بزرگتر از دیگر تگ های این مجموعه نمایش داده می شود.

h6 نشان دهنده ی کم اهمیت ترین سربرگ است و به طبع کوچک تر از دیگر سربرگ ها نمایش داده می شود.

نکته: مرور گر ها به خودی خود یک فضای خالی (حاشیه یا همان margin) قبل و بعد از هر سربرگ میگذارند.

موتور های جستجو از سربرگ ها برای دسته بندی ساختار مطالب صفحه ی وب شما استفاده میکنند.

کاربر ها نیز با گذر سطحی چشم از سربرگ های شما توجهشان به مطلب درون صفحه جلب میشود.

این بسیار مهم است که برای نمایش دادن ساختار پرونده از سربرگ ها استفاده شود.

سربرگ های h1 باید برای سربرگ های مهم استفاده شود و در ادامه سربرگ های h2 برای سربرگ ها با اهمیت کمتر و همینطور تا h6

نکته: از سربرگ ها فقط برای سربرگ استفاده کنید نه برای درشت تر و بزرگ تر شدن نوشته ها.

نکته: درون هر صفحه بهتر است فقط از یک تگ h1 استفاده کنید. این مورد برای بهینه سازی صفحه برای موتور های جستجو توصیه شده است.

چگونه می توان سربرگ ها را در HTML، بزرگتر از معمول نشان داد؟

هر سربرگ اچ تی ام ال یک سایز معمول دارد هرچند میتوان برای تغییر سایز یک سربرگ از از خاصیت style در سی اس اس و ویژگی font-size استفاده کنید.

مثال زیر برای شما یک سربرگ از نوع h1 با سایز 60 پیکسل که بزرگتر از حد معمول است، چاپ می کند.

پاراگراف اچ تی ام ال (HTML Paragraph)

المان p در اچ تی ام ال یک پاراگراف را تعریف میکند.

معمولا یک صفحه متن از تعدادی هدینگ تشکیل شده است و در زیر هر هدینگ از تگ های p برای پاراگراف بندی استفاده می شود.

نکته: مرورگر ها به صورت اتوماتیک یک حاشیه سفید (margin) در اول و آخر یک پاراگراف قرار میدهند.

نکاتی از نحوه نمایش المان ها در HTML

شما هیچ وقت نمیتوانید مطمئن باشید که اچ تی ام ال چگونه نمایش داده خواهد شد. ثغحه نمایش کوچک یا بزرگ، تغییر اندازه پنجره ها یا تفاوت در مرورگر ممکن است نتیجه های متفاوت داشته باشند.

در اچ تی ام ال شما نمیتوانید خروجی را با چند اینتر در چند خط نمایش دهید. چون مرورگر تمام اینها را در نمایش دادن صفحه پاک خواهد کرد. همچنین شما نمی توانید با تعدادب اسپیس پشت سر هم فاصله بین کلمات را بیشتر کنید.

نکته دیگر اینکه، تگ پایانی را فراموش نکنید بیشتر مرورگر ها این موضوع را نادیده میگیرند و اچ تی ام ال را به درستی نمایش میدهند حتی اگر تگ پایانی را فراموش کنید. اما نبستن تگ ها ممکن است باعث اختلالاتی شود که مایل به مشاهده آن ها نیستید.

به عنوان مثال، در مورد پایین، پاراگراف ها درست نمایش داده خواهد شد:

مثال بالا در اکثر مرورگرها کار میکند ولی به این اتکا نکنید.

نکته: از قلم انداختن تگ پایانی موجب بوجود امد نتیجه های خارج از توقع و ایراد ها میشود.

شکست خط در اچ تی ام ال چگونه انجام می شود؟

اگر نمی خواهید از تعداد زیادی پاراگراف استفاده کنید. بهتر است بدانید المان <br> در اچ تی ام ال یک شکست خط را تعریف میکند.

از این المان برای شکست خط یا همان ایجاد خط جدید استفاده کنید بدون اینکه مجبور باشید که یک پاراگراف جدید را بنویسید.

این تگ یک تگ خالی است به این معنی که تگ پایانی ندارد. این تگ را می توانید به فرم </br> تنها نیز مورد استفاده قرار دهید.

راه حل دیگری نیز برای نمایش متن در خط های مختلف وجود دارد، شما می توانید از تگ <pre>استفاده کنید تا متن را همان طور که می نویسید نمایش دهید. (البته این مورد چندان مرسوم نیست)

المان <pre> اچ تی ام ال متن از پیش قالب گذاری شده را تعریف می کند.

متن داخل المان <pre> با عرض ثابت نمایش داده میشود و فاصله ها و شکست خط های آن به صورت وارد شده به پرونده اعمال میشوند.

در این مثال نوشته در خطوط متفاوت با فاصله مشخص شده نمایش داده می شود