آموزش HTML قسمت چهارم:تگ های عنوان
آموزش HTML قسمت چهارم:تگ های عنوان

معرفی تگ های عنوان

اگر اهل مطالعه کردن و همچنین روزنامه خواندن باشید حتما درون کتاب ها یا مجلات و روزنامه‌ها، متن‌های بسیار کوتاه که با فونت درشتی نوشته شده‌اند را دیده‌اید. ما این نوشته های کوتاه را با نام عنوان یا تیتر می‌شناسیم. درکد نویسی HTML این عناوین یا تیتر ها را با استفاده از تگ های عنوان <h> </h> که برگرفته از حرف اول کلمه heading به معنای “عنوان” است، تعیین می‌کنیم.

در HTML تیتر ها با استفاده از اهمیتی که دارند شماره گذاری می‌شوند. هر عنوان بسته به اهمیتی که دارد یکی از شماره های یک تا شش را به خود می‌گیرد. ممکن است بدانید که مهم ترین خبر یک روزنامه، به تیتر یک آن روزنامه تبدیل می‌شود. در HTML نیز مهم ترین عنوان، عدد یک را به خود اختصاص می‌دهد و تگ های کم اهمیت تر به ترتیب اعداد دو تا شش را بر اساس درجه اهمیت، به خود اختصاص می‌دهند. پس با این وجود کم اهمیت ترین عنوان عدد شش را به خود می‌گیرد.

نکات مهمِ تگ های عنوان

در این زمینه لازم است بدانید که هر تگ heading یا عنوان، یک خط را به طور کامل اشغال می‌کند. این بدین معنی است که اگر در کنار تگ heading یک تگ متنی قرار دهید، تگ متنی به خط بعدی می‌رود. زیرا بر اساس قواعد نگارشی نباید در کنار یک عنوان، متنی نوشته شود. خوشبختانه این موضوع در HTML به خوبی رعایت شده است.

عناوین باید کوتاه و بسیار پر مفهوم باشند. به عنوان مثال در تیتر همین نوشته می‌توانستیم به جای “نکات مهمِ تگ های عنوان” تیتر “چند نکته کاربردی ومهم راجب تگ های عنوان” را بنویسیم. اما در این صورت عنوان ما بسیار طولانی شده و قدرت کافی برای جذب مخاطب به سمت خود را از دست می‌دهد.

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

در پاراگراف قبلی از نوشتن یک مطلب صحبت کردیم. ممکن است در ذهن شما سوال شود که آیا برای نوشتن هر مطلب باید مقدار بسیار زیادی کد نویسی HTML انجام داد؟
جواب خیر است. به طور خلاصه میگوییم که پس از طراحی یک صفحه ایستا که به وسیله HTML و CSS انجام می‌شود شما باید صفحه HTML خود را به یک صفحه پویا تبدیل کنید. سپس با استفاده از سیستم های مدیریت محتوا شما فقط باید مطلب خود را بنویسید و ادامه کار با سیستم است. در حال حاضر بهتر است ذهن خود را در این باره درگیر نکنید چرا که پس از پایان دوره به طور کامل متوجه روند کار می‌شوید.

ساختار تگ heading

هر تگ عنوان از یک تگ باز و یک تگ بسته تشکیل شده است. عنوان ما باید میان این دو تگ قرار بگیرد. برای اینکه به طور کامل متوجه شوید می‌توانید به قطعه کد های زیر نگاهی بیاندازید.

See the Pen LYPrxaq by amir (@amir5250) on CodePen.0

همانطور که می‌بینید تیتر یک همیشه فونت بزرگ تری نسبت به دیگر تگ های عنوان دارد. تگ h6 را نیز می‌توانید مشاهده کنید که بسیار بی اهمیت شمرده شده است و فونت بسیار کوچکی به آن داده شده است. البته این را به خاطر داشته باشید که شما می‌توانید با استفاده از فناوری CSS رنگ، نوع و اندازه فونت های متنی و تگ های عنوان خود را تعیین کنید. بدین منظور بهتر است تا انتهای این دوره آموزشی را مطالعه کنید سپس به سراغ آموزش CSS در همین سایت یعنی bezafeh.ir بروید.

در انتهای جعبه کد ها می‌توانید مشاهده کنید که با وجود قرار دادن تگ متنی <p> در کنار تگ عنوان <h1> ، باز هم تگ متنی به خط بعدی رفته است و این قضیه به نکته ذکر شده یعنی “هر تگ عنوان یک خط را اشغال می‌کند” اشاره دارد.

پاسخی بگذارید