آموزش HTML - بخش سوم: تگهای عنوان
تگ عناوین (h)
از تگ عناوین برای نوشتن عنوان در متن استفاده میشود. جمع بستن آن‌ها به این علت است که این تگ‌ها در واقع 6 تا هستند و تفاوت آن‌ها در اندازه آن‌هاست و به ترتیب از بزرگ به کوچک تبدیل و شماره گذاری میشوند.
برای ایجاد یک عنوان بزرگ از تگ <h1/> متن عنوان <h1> استفاده می‌گردد. همانطور که گفتیم تگهای h دارای شش گزینه هستند که به ترتیب از <h1> شروع و به <h6/>متن عنوان<h6> ختم میشوند. تگ <h1> از نظر اندازه بزرگترین اندازه را دارد و <h6> کوچکترین اندازه را. البته ویژگی‌هایی همچون پررنگ بودن در همگی آن‌ها یکسان است.
نحوه استفاده از این تگ نیز همانند باقی تگهای HTML است. یک تگ شروع کننده و یک تگ تمام کننده که در خود یک / دارد. برای مثال:
نمونه کد
<h1>این عنوان با اندازه h1 است <h1/>
<h2>این عنوان با اندازه h2 است<h2/>
<h3>این عنوان با اندازه h3 است<h3/>
...
<h6>این عنوان با اندازه h6 (برای عناوین با اهمیت کمتر) است<h6/>
نتيجه‌اي که مرورگر نمايش خواهد داد
این عنوان با اندازه h2 است
این عنوان با اندازه h3 است
...
این عنوان با اندازه h6 (برای عناوین با اهمیت کمتر) است
اهمیت عناوین:
عناوین در زبان اچ تی ام ال از اهمیت بسیار زیادی برخوردار هستند. چرا که موتورهای جستجو برای ایندکس کردن سایت شما از عناوین به عنوان یکی از المان‌های مهم استفاده می‌کنند. همچین تا حد امکان سعی کنید تا از عناوین برای بولد کردن کلمات در متن استفاده نکنید، چرا که آن ها تگ مخصوص خود را دارند و به آن تگ <b> می‌گوییم (در رابطه با این تگ بعدا بیشتر خواهیم گفت).
علاوه بر این, ترتیب در استفاده از عناوین هم مهم است. در واقع معمترین مطالب با <h1> و مطالب زیر مجموعه و با اهمیت پایین‌تر با <h2> و به ترتیب کم اهمیت ترین عناوین با <h6> نوشته میشوند.
پیشنهاد: از <h2> برای عناوین مهم استفاده کنید.
خلاصه قسمت دوم:
در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.
- در سومین قسمت از سری آموزش HTML با نحوه ایجاد یک عنوان در صفحه اچ‌تی‌ام ال آشنا شدیم.
- در ادامه با انواع عنوان‌ها آشنا شدیم که از
<h1>بزرگترین تا<h6>کوچکترین دسته بندی میشوند. - همچنین متوجه شدیم که عناوین با شماره کمتر و ابعاد بزرگ‌تر باید برای موضوعات مهم و عناوین کوچک‌تر برای موضوعات کم اهمیت به کار روند.
- همچنین یادگرفتیم که گوگل در هنگام جستجو به عناوین و هدینگ‌ها نیز اهمیت می‌دهد.
نوبت شما:
از آنجا که هیچ کاری بدون تمرین کردن فایده ندارد، پس وقت آن رسیده تا خودتان دست به کار شوید و آنچه فرا گرفته‌اید را در ادیتور آنلاین زیر امتحان کنید. تنها کافی است کدهای اچ‌تی‌ام‌ال را در کادر HTML پاک کنید و نتیجه آن را در کادر preivew به صورت زنده ببینید. در ضمن نگران فراموش کردن نباشید! آموزش‌های زومیت همیشه در اختیار شما است.
امیدواریم که این آموزش به سبک زومیت هم که حاصل تلاش تیم زومیت هست، موفق به جلب رضایت شما زومیتی‌های عزیز شده باشد. قسمت‌های قبلی این مجموعه مقالات را از دست ندهید تجربیات، پیشنهادات و نظرات شما بدون شک در ادامه این مقالات آموزشی تاثیر بسزایی خواهد داشت. پس لطفا با ما در ارتباط باشید.
