تگ HTML چیست؟ این نشانه‌ها نوع و نقش بخش‌های صفحه را برای مرورگر مشخص می‌کنند. عنوان، پاراگراف، تصویر و پیوند هرکدام تگ مناسب دارند. با چند مثال ساده، ساختار تگ و کاربرد آن را یاد می‌گیرید.
HTML چیست و تگ در آن چه نقشی دارد؟
HTML کوتاه‌شده HyperText Markup Language و زبان نشانه‌گذاری صفحه‌های وب است. این زبان، ساختار محتوای صفحه را مشخص می‌کند. برای نمونه، عنوان، متن عادی و پیوند نقش‌های متفاوتی دارند. تگ مناسب هر بخش این تفاوت را به مرورگر و ابزارهای کمکی می‌فهماند.
تگ معمولا نامی میان دو علامت کوچک‌تر و بزرگ‌تر دارد. <p> آغاز یک پاراگراف را نشان می‌دهد و </p> پایان آن را مشخص می‌کند. محتوای پاراگراف میان این دو تگ قرار می‌گیرد. مجموعهٔ تگ‌ها و محتوا یک عنصر می‌سازند؛ پس تگ و عنصر دقیقاً مترادف نیستند.
ساختار تگ HTML چگونه است؟
در نمونه <p>سلام دنیا</p>، تگ آغازین <p> است. عبارت «سلام دنیا» محتوای عنصر است. تگ پایانی </p> پایان پاراگراف را نشان می‌دهد. خط مورب در تگ پایانی، بسته‌شدن عنصر را مشخص می‌کند.
همه عنصرها تگ پایانی ندارند. برای نمونه، <img> تصویر را در صفحه قرار می‌دهد و محتوای درونی ندارد. به این گروه عنصر تهی می‌گویند. بنابراین، نباید انتظار داشت هر تگ HTML با تگ پایانی همراه باشد.
ویژگی یا Attribute چیست؟
ویژگی، اطلاعات بیشتری به تگ آغازین می‌دهد. در نمونه <a href="https://example.com">نمونه</a>، ویژگی href مقصد پیوند را مشخص می‌کند. نام تگ a است و متن «نمونه» برای مخاطب دیده می‌شود.
در تصویر نیز src نشانی فایل را تعیین می‌کند. ویژگی alt توضیح جایگزین تصویر را فراهم می‌کند. برای تصویرهای محتوایی، این توضیح باید کوتاه و مرتبط باشد. اگر تصویر صرفا تزئینی است، روش نشانه‌گذاری آن می‌تواند متفاوت باشد.
تگ‌های پرکاربرد HTML کدام‌اند؟
لازم نیست همه تگ‌ها را حفظ کنید. ابتدا نقش چند تگ پایه را بشناسید و هنگام نیاز به مرجع رسمی مراجعه کنید.
- <h1> تا <h6> سطح عنوان‌ها را مشخص می‌کنند.
- <p> یک پاراگراف می‌سازد.
- <a> یک پیوند به صفحه یا مقصد دیگر ایجاد می‌کند.
- <img> تصویر را در صفحه می‌گذارد.
- <ul> و <li> فهرست بدون شماره و موارد آن را می‌سازند.
- <ol> و <li> برای فهرست شماره‌دار به کار می‌روند.
- <strong> اهمیت بیشتر بخشی از متن را نشان می‌دهد.
- <header>، <main>، <nav> و <footer> نقش بخش‌های اصلی صفحه را روشن می‌کنند.
تگ‌ها را بر پایه معنای محتوا انتخاب کنید. فهرست کامل و توضیح هر عنصر را در مرجع عنصرهای HTML در MDN ببینید.
تگ HTML چیست و چطور یک صفحه را می‌سازد؟ برای پاسخ، کافی است ساختار ساده یک سند را ببینید. هر تگ به مرورگر می‌گوید بخشی از محتوا چه نقشی دارد.
یک صفحه HTML از چه بخش‌هایی ساخته می‌شود؟
یک سند معمولی با <!doctype html> آغاز می‌شود. سپس عنصر <html> ریشه سند را دربر می‌گیرد. درون آن، <head> برای اطلاعات صفحه و <body> برای محتوای قابل‌نمایش قرار می‌گیرد.
در <head> می‌توان عنوان زبانه مرورگر را با <title> نوشت. توضیح صفحه هم با فراداده ثبت می‌شود. اما عنوان اصلی داخل صفحه معمولا در <body> و با <h1> می‌آید.
برای تمرین، در <body> یک <h1>، یک <p> و یک <a> قرار دهید. سپس فایل را با پسوند .html ذخیره و در مرورگر باز کنید. با این کار تفاوت کد و نتیجه قابل‌دیدن را می‌بینید.
ترتیب تگ‌های تو‌در‌تو
وقتی عنصری را داخل عنصر دیگر می‌گذارید، ترتیب بسته‌شدن مهم است. در نمونه <p><strong>متن مهم</strong></p>، عنصر داخلی زودتر بسته می‌شود. ساختار نامنظم ممکن است باعث شود مرورگر صفحه را برخلاف انتظار تفسیر کند.
تفاوت HTML با CSS و JavaScript چیست؟
HTML ساختار و معنای محتوا را مشخص می‌کند. CSS ظاهر، فاصله‌ها، رنگ و چیدمان را کنترل می‌کند. JavaScript نیز می‌تواند رفتار تعاملی به صفحه اضافه کند. این سه فناوری کنار هم کار می‌کنند، اما وظیفه یکسان ندارند.
برای مثال، <button> یک دکمه معنادار در HTML می‌سازد. CSS می‌تواند رنگ و اندازه آن را تغییر دهد. JavaScript هم می‌تواند برای کلیک روی دکمه رفتاری تعریف کند.
چرا انتخاب تگ درست مهم است؟
تگ درست، ساختار صفحه را برای انسان و نرم‌افزار روشن‌تر می‌کند. عنوان واقعی را با تگ عنوان بنویسید، نه فقط متن درشت. برای جابه‌جایی میان صفحه‌ها نیز از پیوند واقعی استفاده کنید.
این ساختار به ابزارهای کمکی، مانند صفحه‌خوان‌ها، در شناخت بخش‌های صفحه کمک می‌کند. موتورهای جست‌وجو هم از محتوای ساختاریافته برای فهم بهتر صفحه بهره می‌برند. بااین‌حال، هیچ تگ منفردی رتبه جست‌وجو را تضمین نمی‌کند.
برای نمونه، توضیح مناسب alt می‌تواند تصویر را برای کسی که آن را نمی‌بیند قابل‌فهم‌تر کند. عنوان‌های مرتب نیز حرکت میان بخش‌های طولانی را آسان‌تر می‌کنند. پس انتخاب تگ، بخشی از دسترس‌پذیری و خوانایی صفحه است.
کارتینو چه ارتباطی با HTML دارد؟
صفحه‌های وب، از جمله صفحه‌های معرفی آنلاین، در مرورگر نمایش داده می‌شوند. دانستن مفهوم HTML کمک می‌کند ساختار یک صفحه را بهتر بفهمید. برای معرفی حرفه‌ای خود، همیشه لازم نیست کد HTML بنویسید.
در کارت ویزیت دیجیتال کارتینو، می‌توانید پروفایل معرفی و راه‌های تماس را کنار هم قرار دهید و نشانی آن را با دیگران به اشتراک بگذارید. این کار با ساخت دستی یک وب‌سایت تفاوت دارد.
برای معرفی حضوری نیز کارت ویزیت NFC راه دیگری برای بازکردن پروفایل است. کارتینو ابزار آموزش یا ویرایش HTML نیست؛ صفحه معرفی آنلاین را برای دسترسی و اشتراک‌گذاری فراهم می‌کند.
جمع‌بندی
تگ HTML نشانه‌ای برای مشخص‌کردن نقش محتوا در صفحه است. تگ آغازین، محتوای عنصر و گاهی تگ پایانی، ساختار رایج آن را می‌سازند. ویژگی‌ها هم اطلاعاتی مانند مقصد پیوند یا نشانی تصویر را اضافه می‌کنند.
برای شروع، تگ‌های عنوان، پاراگراف، پیوند و تصویر را تمرین کنید. بعد تفاوت HTML و CSS را به خاطر بسپارید و برای جزئیات به مرجع MDN سر بزنید.
پرسش‌های پرتکرار
آیا تگ و عنصر HTML یکی هستند؟
خیر. تگ بخشی از نشانه‌گذاری آغاز یا پایان است. عنصر معمولا تگ‌ها و محتوای میان آن‌ها را شامل می‌شود.
آیا همه تگ‌ها تگ پایانی دارند؟
خیر. برخی عنصرها مانند <img> محتوای درونی ندارند و تگ پایانی جداگانه نمی‌خواهند.
آیا HTML یک زبان برنامه‌نویسی است؟
HTML زبان نشانه‌گذاری است. این زبان ساختار محتوا را توصیف می‌کند و به‌تنهایی منطق برنامه‌نویسی را اجرا نمی‌کند.
برای معرفی آنلاین، کارت ویزیت دیجیتال کارتینو را ببینید.
برای آشنایی با شیوه معرفی حضوری، کارت ویزیت NFC کارتینو را ببینید.
