مروری بر جلسه قبل و شروع مسیر جدید
در جلسه اول از سری آموزشهای HTML، با ساختار اساسی یک صفحه وب آشنا شدیم. ما یاد گرفتیم که هر سند HTML از تگهایی مانند <html>, <head> و <body> تشکیل شده است. تگ <body> در واقع بدنه اصلی صفحه ماست و تمام محتوای قابل مشاهده برای کاربر در داخل آن قرار میگیرد.
اکنون در این جلسه، قصد داریم قدمی فراتر بگذاریم و به سراغ مهمترین بخش یعنی عناصر HTML برویم. این عناصر، همان تگهایی هستند که به محتوای ما معنا و شکل میبخشند. در این مطلب، به طور خاص روی تگهای قالببندی متن تمرکز خواهیم کرد تا بتوانید متنی خوانا، زیبا و با معنا در وبسایت خود ایجاد کنید.
عناصر HTML به چه معنا هستند؟
به زبان ساده، عنصر HTML (HTML Element) به هر چیزی گفته میشود که بین تگ بازشونده (مانند <b>) و تگ بستهشونده (مانند </b>) قرار میگیرد. این ساختار سهجزئی (تگ باز، محتوا، تگ بست) بنیانهای ساختمان یک صفحه وب هستند.
برای مثال، در کد زیر:
<b>This text is bold</b>
متن "This text is bold" به همراه تگهای <b> و </b> یک عنصر HTML را تشکیل میدهند. کار این عنصر مشخص است: متن داخل آن را به صورت ضخیم (Bold) نمایش میدهد. بیایید این کد را درون تگ <body> در فایل HTML خود قرار دهیم و نتیجه را در مرورگر مشاهده کنیم. خواهید دید که متن به صورت برجسته نمایش داده میشود.
آشنایی با تگهای قالببندی متن در HTML
HTML مجموعهای غنی از تگها را برای تغییر ظاهر و معنای متن ارائه میدهد. این تگها به شما کمک میکنند تا کلمات و جملات کلیدی را برجسته کنید و خوانایی محتوا را افزایش دهید. در ادامه، با مهمترین آنها آشنا میشویم.
تفاوت `` و ``: اهمیت معنایی در برابر نمایش بصری
دو تگ <b> و <strong> هر دو متن را به صورت ضخیم نمایش میدهند، اما تفاوت معنایی مهمی بین آنها وجود دارد.
- تگ `` (Bold): این تگ صرفاً یک دستور ظاهری است و به مرورگر میگوید که این متن را به صورت ضخیم نمایش دهد. این تگ هیچ معنای خاصی به متن اضافه نمیکند و فقط برای جلب توجه بصری به کار میرود.
- تگ `` (Strong Importance): این تگ از نظر ظاهری کار مشابهی دارد، اما از نظر معنایی به متن اهمیت میبخشد. موتورهای جستجو و خوانندههای صفحه (Screen Readers) متوجه میشوند که محتوای داخل این تگ از اهمیت بالایی برخوردار است. توصیه میشود برای تاکید بر کلمات کلیدی و جملات مهم، همیشه از
<strong>استفاده کنید.
تفاوت `` و ``: تاکید در برابر کجنمایی
این دو تگ نیز مانند تگهای قبلی، عملکرد ظاهری مشابهی (کج کردن متن) دارند اما تفاوتی در معنا دارند.
- تگ `` (Italic): این تگ صرفاً برای نمایش کج (Italic) متن به کار میرود. کاربرد رایج آن برای نمایش عناوین کتابها، اصطلاحات خارجی یا تفکر یک شخص است.
- تگ `` (Emphasis): این تگ به متن تاکید میبخشد. وقتی میخواهید لحن کلام را در متن تغییر دهید و روی کلمهای خاص تاکید کنید، استفاده از این تگ از نظر معنایی صحیحتر است.
بررسی سایر تگهای متنی پرکاربرد
علاوه بر تگهای بالا، HTML تگهای دیگری نیز برای قالببندی متن ارائه میدهد که هرکدام کاربرد خاص خود را دارند.
- ``: متن را کمی بزرگتر از اندازه استاندارد نمایش میدهد. (نکته: این تگ در HTML5 منسوخ شده و توصیه میشود برای تغییر اندازه متن از CSS استفاده کنید.)
- ``: متن را کوچکتر از اندازه استاندارد نمایش میدهد. کاربرد آن برای توضیحات حقوقی، یادداشتها یا اطلاعات جانبی بسیار مناسب است.
- `` (Subscript): متن را به صورت زیرنویس (پایینتر از خط اصلی) نمایش میدهد. این تگ برای فرمولهای شیمیایی (مانند H2O) یا اندیسهای ریاضی بسیار کاربردی است.
- `` (Superscript): متن را به صورت بالانویس (بالاتر از خط اصلی) نمایش میدهد. از این تگ برای توانهای ریاضی (مانند X2) یا پانویسها استفاده میشود.
- `
`: این تگ یک خط شکستن ایجاد میکند و باعث میشود متن پس از آن به خط بعد منتقل شود. این تگ یک عنصر خالی است و نیازی به تگ بستن ندارد. - `
`:
این تگ یک پاراگراف جدید را تعریف میکند. برخلاف<br/>که فقط یک خط شکستن ایجاد میکند، تگ<p>یک فاصله عمودی قبل و بعد از خود ایجاد کرده و متون را در بلاکهای مجزا جدا میکند.
مثال عملی و جامع از تگهای متنی
برای درک بهتر، تمام تگهای گفتهشده را در یک مثال گرد هم آوردهایم. کد زیر را کپی کرده و در یک فایل با پسوند .html ذخیره کنید و نتیجه را در مرورگر خود مشاهده نمایید.
<html> <body> <h2>مثالهایی از تگهای متنی HTML</h2> <p>این یک متن <strong>بسیار مهم</strong> است. </p> <p>در اینجا یک <em>کلمه با تاکید</em> داریم. </p> <p>این متن <b>صرفاً ضخیم</b> است و این متن <i>صرفاً کج</i> است. </p> <p>این یک متن <big>بزرگ</big> و این یک متن <small>کوچک</small> است. </p> <p>فرمول آب: H<sub>2</sub>O</p> <p>این یک متن معمولی و این هم یک<sup>بالانویس</sup> است.</p> <p> <br/> <b>نکته:</b> این یک پاراگراف است که پس از یک خط شکسته آمده است. </p> </body> </html>
نکات کلیدی و بهترین pratiques در استفاده از تگهای متن
در طراحی وب مدرن، تاکید بر استفاده از HTML معنایی (Semantic HTML) است. این یعنی باید از تگی استفاده کنید که معنای واقعی محتوای شما را به بهترین شکل بیان کند، نه فقط صرفاً برای ظاهر آن.
- اولویت با معنا: همیشه
<strong>را به<b>و<em>را به<i>ترجیح دهید، مگر اینکه کاربردتان صرفاً ظاهری باشد. - استایلدهی با CSS: برای کنترل دقیق ظاهر (رنگ، فونت، اندازه و...) از زبان CSS استفاده کنید. تگهایی مانند
<big>که صرفاً برای استایلدهی هستند، در HTML5 منسوخ شدهاند. - میزان استفاده: از برجستهسازی بیش از حد خودداری کنید. اگر تمام متن ضخیم یا کج باشد، هیچ کلمهای اهمیت خود را از دست نمیدهد و خوانایی صفحه کاهش مییابد.
جمعبندی و نگاهی به آینده
در این جلسه با مفهوم عناصر HTML و مهمترین تگهای قالببندی متن آشنا شدیم. ما یاد گرفتیم که چگونه با استفاده از تگهایی مانند <strong>, <em>, <sub> و <sup> به محتوای خود معنا و شکل ببخشیم. تفاوت بین تگهای معنایی و نمایشی نیز از نکات کلیدی بود که باید در mind خود داشته باشید.
در جلسه بعد، به سراغ عناصر ساختاریتر مانند تگهای headings (عناوین) و lists (لیستها) خواهیم رفت تا بتوانیم اسکلت محتوای خود را به شکل بهتری بچینیم. با ما همراه باشید.
[wpdm_package id='7806']
نظرات
0دیدگاه خود را ثبت کنید
برای ارسال نظر و مشارکت در گفتگو، لطفا وارد حساب کاربری خود شوید.