تگ‌های html، ادامه آموزش اچ‌‌تی‌ام‌ال

تگ‌های خط افقی (hr)، خط شکسته (br)، small، big، زیر خط (sub)، بالای خط (sup ) تگ‌های دیگر با اهمیت html هستند که توسط نیوسان‌وب آموزش داده می‌شوند.

بعد از یادگیری تگ‌های مهمی مانند p و h1 تا h6 که در مقاله قبلی نکات لازم را در خصوص آنها در همین وبسایت نیوسان‌وب ارائه کردیم، لازم است با تگ‌های زیر آشنا شوید و بتوانید به خوبی در محتوای متنی وبسایت‌ها از آنها استفاده کنید. در ابتدا لازم است که برای تمرینات عملی این جلسه از آموزش، ابتدا یک فولدر به نام 004 ایجاد کنید و پس از ساخت فایل Index.html هر یک از کدهایی که در ادامه گفته خواهد شد را در بخش body وارد تایپ نمایید.

تگ خط افقی یا hr

این تگ همانطور که مشخص است حروفش از ابتدای کلمات horizontal line به معنی خط افقی در زبان انگلیسی برداشته شده است. از این تگ برای ایحاد خط افقی در لابلای متون استفاده می‌شود و در واقع هر وقت بخواهیم به شکلی واضح بین تو بخش جدایش یا مرز ایجاد کنیم، از این تگ استفاده می کنیم. ویژگی برجسته این تگ، تک بخشی بودن آن است و تگ پایانی ندارد. این تگ به شکل زیر نوشته می شود.

<body>
    <p>This is the first paragraph...</p>
    <hr>
    <p>This is the second paragraph...</p>
</body>

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

تگ خط شکسته یا br

این تگ یک خط شکسته ایجاد می‌کند و اگر در بین متن ایجاد شود، یک شکستگی یا break ایجاد می‌کند و متون را از هم جدا می‌کند. این تگ نیز تک بخشی است و تگ دیگری ندارد. برای مثال کد زیر را در فایل Index بنویسید و سپس با باز کردن آن توسط مرورگر، نتیجه را ببینید.

<body>
    <p>
        In this section of teaching HTML, I want to show you what break tag do.
    </p>
    <p>
        In this section of teaching HTML,<br> I want to show you what break tag do.
    </p>
    <p>
        In this section of teaching HTML,
        I want to show you what break tag do.
    </p>
</body>

اگر خروجی این کدها را ببینید، متوجه می‌شوید که <> در پاراگراف دوم در جایی که استفاده شده است، یک شکستگی در متن ایجاد کرده است و سبب شده است که ادامه متن در خط بعدی ظاهر شود. مطابق تصویر زیر:

تگ <br> در html همانطور که در تصویر بالا مشاهده می‌شود، در پاراگراف دوم دقیقا در جایی که <br> به کار برده شد، شکستگی در متن ایجاد شد. به پاراگراف سوم هم دقت کنید، با اینکه در کدهای بالا با زدن یک اینتر به خط بعدی رفته بودیم، اما توسط مرورگر نادیده گرفته شده است و خروجی عینا مشابه پاراگراف اول است.

نکته مهم: اینجا شاید در ذهن شما این تفکر ایجاد شود که شاید بتوانید با استفاده از br، پاراگراف های مختلف را بسازید و از تگ p استفاده نکنید؛ باید گفت این کار گرچه روی کاغذ جواب می‌دهد، اما هرگز از این ترفند استفاده نکنید؛ چرا که هر یک کاربرد خاص خود را دارند و اگر به جای p از br استفاده کنید، محتوای متنی تولید شده شما ساختار صحیحی نخواهد داشت و شاید ربات‌های خزنده متن و موتور جستجو هم نتوانند ارتباط مناسبی با آن برقرار کنند.

تگ small در html

از تگ small وقتی در html استفاده می‌شود که بخواهید فونت کلمه یا کلماتی را یک سایز کوچکتر کنید. مثلا کد زیر و نتیجه را در ادامه آن ببینید.

<body>
    <p>
        I am using small tag to make these words size smaller.
    </p>
    <p>
        I am using small tag to make these <small>words size smaller</small>.
    </p>
</body>

نتیجه به شکل زیر خواهد بود:

تک small در html

همانطور که مشاهده کردید، words size smaller در پاراگراف دوم، سایز کوچکتری به خود گرفته است.

توجه: اگر از دو تگ small تو در تو استفاده کنید، کلمات به اندازه دو سایز کوچکتر می‌شوند و همینطور برای سه و تعداد بیشتری تگ تو در تو نیز این مساله صدق می‌کند.

تگ big در html

از تگ big وقتی در html استفاده می‌شود که بخواهید فونت کلمه یا کلماتی را یک سایز کوچکتر کنید. کد زیر را مشاهده کنید. برای تمرین می‌توانید در کد بالا، به جای small، تگ big را قرار دهید و نتیجه

تگ sub در html

تگ sub را که ما زیرخط می‌نامیم، حروف یا کلمات مابین تگ ابتدایی و انتهایی خود را به زیر خط در HTML می‌برد. برای مثال اگر بخواهید فرمول شیمیایی آب را بنویسید می‌توانید از این تگ استفاده کنید.

<body>
   <p>
       Water chemical formula is H<sub>2</sub>O.
   </p>
</body>

تگ sup در html

تگ sup در html وقتی به کار می‌رود که بخواهیم کلمه یا حروفی را به بالای خط ببریم (مانند به توان رساندن اعداد). برای مثال اگر بخواهیم سرعت نور در خلار را به صورت متر بر ثانیه بنویسیم.

<body>
   <p>
       The light velocity is 3*10<sup>8</sup> m/s.
   </p>
</body>

تگ strong

این تگ اهمیت داشتن یک جمله یا عبارت را نشان می‌دهد که مرورگرها جهت برجسته‌نمایی آنها و همچنین برای نشان دادن اهمیت قسمتی از متن در کل متن به مرورگر، ظاهر فونت آن را به صورت bold نشان می‌دهند. تفاوت ظاهری بین این تگ و تگ b وجود ندارد؛ اما تگ b تنها به برجسته سازی متن می‌پردازد ولی تگ strong علاوه بر برجسته سازی، مهم بودن آن را هم به مرورگر نشان می‌دهد که اهمیت سئویی آن تکه از متن را نسبت به کل متن مشخص می‌کند.

تگ div

این تگ یک بلوک را نشان می‌دهد که در حالت عادی هر بلوک، عرض کل صفحه html را در بر می‌گیرد و در داخل آن ممکن است هر چیزی از عکس، هایپرلینک، پاراگراف و … جای بگیرد.

تگ span

این تگ هم مانند تگ div در بر گیرنده سایر المان‌های html است. البته با این تفاوت که span به صورت بلوک یا block نیست و inline است که در این حالت عرض آن به اندازه عرض المان‌های داخلش بستگی دارد. در خصوص div و span در آینده (پس از معرفی attribute یا صفت style) توضیحات کامل‌تری خواهیم داد.

تگ‌های دیگر html

در ادامه برخی تگ‌های دیگر html را نام می‌بریم. البته به دلیل سادگی آنها از ارائه مثال برای هر یک خودداری می‌کنیم. برای استفاده از این تگ‌ها کافی است عبارت مورد نیازتان را در بین تگ ابتدایی و انتهایی آنها بنویسید. برای ثال اگر x نام تگ باید کافی است به این شکل از آنعا استفاده کنید: <x/>عبارت مورد نظر<x>

تگ s

تگ s برای خط زدن روی متن استفاده می‌شود.

تگ u

تگ u زیر عبارتی که در داخل آن است، خط می‌کشد.

تگ em

از این تگ برای ایتالیک کردن فونت استفاده می‌شود. این تگ در ظاهر با تگ i یکسان است اما ار نظر معنایی با آن تفاوت دارد؛ به این صورت که گرچه ظاهر هر دو یکسان است اما em برخلاف i، اهمیت بخشی که به صورت ایتالیک شده است را هم جهت تاکید بیشتر نشان می‌دهد و استفاده از آن در بحث دیجیتال مارکتینگ اهمیت دارد.

تگ del

از تگ del برای نشان دادن حذف شدن یک متن استفاده می‌شود که در این حالت مرورگر یک خط را روی متن نشان می‌دهد تا به کاربر بگوید که حذف شده است. این تگ نیز در ظاهر شبیه تگ s است. اما وقتی از آن استفاده می‌شود، یعنی برای همیشه به دلایلی از متن حذف شده است و در عبارات منطقی می‌توان گفت که صادق نیست اما تگ s برای این است که نشان بدهد که در حال حاضر متن احاطه شده توسط آن، برقرار نیست یا باید نادیده گرفته می‌شود.

تگ ins

ins تگی است که از آن برای نشان دادن جایگزین شدن یک متن حذف شده با متن جاری استفاده می‌شود. در این حال مرورگر متن را به صورت زیرخط دار نشان می‌دهد تا کاربر را از جایگزینی آن مطلع سازد. این تگ نیز در ظاهر شبیه تگ u است اما از نظر معنایی با آن تفاوت‌هایی دارد و نشانگر جایگزین شدن متن یا کلمه حذف شده قبلی، با متن کنونی می‌تواند باشد.

تصویر زیر را ببینید که کاربرد موارد گفته شده در توضیحات بالا را به همراه مثال نشان می‌دهد.

کاربرد تگ های em, big, small, del, ins , s , u و ... در html

جمع‌بندی و سخن پایانی

اگر بخواهیم مطالب گفته شده را جمع‌بندی کنیم باید گفت که در این مقاله نکاتی در خصوص تگ‌های br، hr، big، small، sub و sup و سایر تگ‌ها گفتیم و برای اکثر آنها مثال عملی ذکر کردیم تا نتیجه را ببینید و در خاطرتان بسپارید. در پایان باید گفت که هنوز تگ‌های زیادی هستند که باید آموزش داده شده و نکات لازم در خصوص آنها گفته شود. اگر با نیوسان‌وب همراه باشید، در ادامه شما را با این تگ‌های مهم آشنا می‌کنیم و کاربردهای هر یک را هم خدمت شما ارائه خواهیم کرد. لطفا اگر نظر، پیشنهاد یا سوالی دارید در انتهای مقاله در بخش دیدگاه‌ها آن را ارسال نمایید.

لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.