هنگام ایجاد یک صفحه وب در HTML، برنامه نویسان از تگ های HTML استفاده می کنند تا به صفحه وب در مورد نوع محتوا و نحوه ظاهر شدن محتوا استفاده کنند. آنها به صورت جفت (<>، </>) می آیند، با یک تگ باز (<>) که شروع یک عنصر را نشان می دهد و یک برچسب بسته (</>) که نشان دهنده پایان آن است. بین این تگ‌ها، اقدام یا داده‌هایی را که می‌خواهیم وارد کنیم، مشخص می‌کنیم.
تگ HTML چیست؟
آنها نشان می دهند که آیا محتوا یک عنصر صفحه وب (مانند header, body, یا title)، یک سبک قالب بندی (مانند bold یا italics)، یا عملکرد (مانند onclick or onsubmit) است. به عنوان مثال، تگ <h1> </h> یک عنوان (عنصر) را در بالاترین سطح تعریف می کند، تگ <p> </p> یک پاراگراف (سبک قالب بندی) و غیره را تعریف می کند.
1. تگ HTML
نحو:
<html></html>
چیست؟: تگ <html> نقطه شروع یک سند HTML را مشخص می کند، در حالی که </html> پایان کل سند را نشان می دهد. به صفحه وب ساختاری می دهد که نحوه تعریف و مرتب کردن همه عناصر را نشان می دهد.
چه کاری انجام می دهد؟: همانطور که شروع و پایان سند را تعریف می کند، شامل تمام دو تگ مهم دیگر <head> و <body> در ساختار خود است.
2. تگ Head
نحو:
<head></head>
چیست؟: تگ <head> مانند صفحه جلد کتاب برای یک صفحه وب است. همانطور که جلد کتاب عنوان و توضیحات آن را نشان می دهد، تگ <head> حاوی اطلاعات مهمی برای مرورگرهای وب مانند Google Chrome و Mozilla Firefox است.
چه کاری انجام می دهد؟: حاوی عناصری مانند <title>، <meta>، <style> و <link> است. این تگ‌ها ابرداده‌های مربوط به صفحه وب، مانند عنوان، رمزگذاری کاراکتر، توضیحات، سبک CSS و غیره را به مرورگر می‌دهند. این عناصر به موتورهای جستجو کمک می‌کنند محتوای صفحه وب را به‌طور دقیق فهرست‌بندی کنند.
3. تگ Title
نحو:
<title></title>
چیست؟: تگ <title> عنوان صفحه وب را که در نوار عنوان، برگه و نشانک‌های مرورگر ظاهر می‌شود، مشخص می‌کند. به عنوان مثال - <title>به ماجراهای کمپینگ خوش آمدید</title> در بخش <head> کد HTML قرار خواهد گرفت.
چه کاری انجام می دهد؟: هم در تجربه کاربر و هم در بهینه سازی موتور جستجو نقش مهمی ایفا می کند. با نوشتن یک عنوان آموزنده و مرتبط، وب مسترها می توانند دید، نرخ کلیک و قابلیت استفاده کلی صفحات وب خود را بهبود بخشند.
4. تگ Body
نحو:
<body></body>
چیست؟: تگ <body> در HTML محفظه اصلی است که تمام محتوای قابل مشاهده ای که کاربر در یک صفحه وب می بیند را در خود نگه می دارد.
چه کاری انجام می دهد؟: ما تگ <body> را در تگ <html> اضافه می کنیم که متن، تصاویر، ویدئوها و لینک ها را در خود نگه می دارد. هر چیزی که داخل تگ <body> قرار دهید در صفحه وب نمایش داده می شود.
توجه: در یک سند HTML باید تنها یک تگ <body> وجود داشته باشد و باید درون تگ <html> باشد.
کد:
<body> <!-- content goes here --> </body>
5. تگ های Heading
نحو:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
| تگ | چیست؟ | چه کاری انجام می دهد؟ |
| <h1> | این بالاترین سطح عنوان در یک صفحه وب است که می توانیم فقط یک بار در هر صفحه وب از آن استفاده کنیم. نشان دهنده عنوان اصلی صفحه است. | عنوان واضحی برای محتوا فراهم می کند که به کاربران کمک می کند موضوع اصلی صفحه را درک کنند. همچنین به موتورهای جستجو کمک می کند تا تعیین کنند که آیا محتوا مرتبط است یا خیر. |
| <h2> | این بخش یا بخش فرعی را نشان می دهد که اهمیت کمی کمتر از عنوان اصلی صفحه دارد. | ساختار مناسبی را به صفحه وب اضافه می کند و جستجوی هر بخش خاصی را برای کاربران آسان می کند. موتورهای جستجو از عناوین برای نمایه سازی و رتبه بندی استفاده می کنند، بنابراین استفاده از تگ های عنوان مناسب می تواند سئو را بهبود بخشد. |
| <h3> | <h3> مانند یک عنوان فرعی با بخشی است که محتوا را به بخش های کوچکتر تقسیم می کند. | این برای تقسیم یک صفحه وب به بخش های مجزا مفید است و به خوانندگان این امکان را می دهد که موضوعات مختلف تحت پوشش را به سرعت اسکن و درک کنند. |
| <h4> | <h4> زیربخش دیگری را در بخش <h3> اضافه می کند تا تاکید بصری به متن داخل آن اضافه کند. | وقتی از <H4> استفاده می کنید، به مرورگرهای وب و موتورهای جستجو نشان می دهد که متن ضمیمه شده در مقایسه با <H1>، <H2> و <H3> از اهمیت کمتری برخوردار است. |
| <h5> | می‌توانیم از <h5> برای نوشتن عناوین زیر تگ <h4> استفاده کنیم. | این به سازماندهی و ساختار محتوا کمک می کند و خواندن و درک آن را برای کاربران آسان تر می کند. |
| <h6> | <h6> محتوایی را اضافه می کند که اهمیت چندانی ندارد. | می تواند برای افزودن عناصری مانند پاورقی، شماره صفحه و غیره مفید باشد. |
کد:
<h1>Welcome to Camping Adventures</h1> <h2>Popular Camping Destinations</h2> <h3>Upcoming Camping Event</h3> <h4>Testimonials</h4> <h5>Sarah Smith</h5> <h6>Book Your Camping Trip</h6>
6. تگ Paragraph
نحو:
<p></p>
چیست؟: تگ «<p>» در HTML پاراگراف هایی را در یک صفحه وب ایجاد می کند. این به ساختار و سازماندهی محتوای متن کمک می کند.
چه کاری انجام می دهد؟: وقتی یک بلوک متنی را در تگ های «<p>» قرار می دهید، به عنوان یک پاراگراف جداگانه با مقداری فاصله قبل و بعد از آن ظاهر می شود. در مقالات یا پست‌های وبلاگ معمولاً متن خواناتر و از نظر بصری متمایزتر از سایر محتوای صفحه است.
7. تگ Link
نحو:
<a></a>
چیست؟: تگ <a> یک هایپرلینک ایجاد می کند که به عنوان پیوند لنگر نیز شناخته می شود، که می تواند به شما کمک کند به یک صفحه وب دیگر یا یک بخش خاص در همان صفحه بروید.
چه کاری انجام می دهد؟: وقتی می خواهید یک پیوند قابل کلیک در یک صفحه وب ایجاد کنید، از تگ <a> استفاده می کنید. این تگ به یک ویژگی به نام href (مرجع فرا متنی) نیاز دارد که URL یا مقصد پیوند را مشخص می کند.
کد:
<h6><a href="https://campingadventures.com">Book Your Camping Trip</a></h6>
8. تگ Image
نحو:
<img>
چیست؟: تگ <img> یک عنصر HTML است که می توانیم از آن برای نمایش تصویر در یک صفحه وب استفاده کنیم. برخلاف تمام تگ‌های دیگر، تگ <img> دارای تگ بسته شدن </img> نیست. بنابراین، به عنوان تگ خود بسته شونده نیز شناخته می شود.
چه کاری انجام می دهد؟: دو ویژگی مهم دارد: src (که فایل تصویر یا URL را مشخص می کند) و alt (که متن تصویر را ارائه می دهد).
توجه: ارائه مسیر صحیح فایل یا URL در ویژگی “src” برای نمایش صحیح تصویر ضروری است.
کد:
<img src="C:\Users\cba_17\Downloads/camping.png" width="450" height="250">
9. تگ لیست مرتب
نحو:
<ol></ol>
چیست؟: تگ <ol> زمانی مفید است که می خواهید یک لیست مرتب شده در یک صفحه وب ایجاد کنید. موارد را به ترتیب عددی یا الفبایی خاص نمایش می دهد.
چه کاری انجام می دهد؟: تگ <ol> به شما کمک می کند تا اطلاعاتی مانند مراحل یک فرآیند، رتبه بندی یا هر موقعیت دیگری را که در آن ترتیب اهمیت دارد، ارائه دهید.
توجه: ما معمولاً تگ <ol> را با تگ های <li> (مورد لیست) جفت می کنیم که هر آیتم را در لیست تعریف می کند.
10. برچسب آیتم لیست
نحو:
<li></li>
چیست؟: تگ <li> موارد را در یک لیست ایجاد و جدا می کند و نمایش هر چیز در لیست را به طور جداگانه آسان می کند.
چه کاری انجام می دهد؟: تگ <li> برای نشان دادن هر آیتم در یک لیست استفاده می شود که می توانیم آن را با تگ های <ul> (لیست نامرتب) یا <ol> (فهرست مرتب شده) ایجاد کنیم. این به سازماندهی و مکان یابی اقلام در فهرست به راحتی کمک می کند.
کد:
<ol>
<li>Mountain Wilderness Camp</li>
<li>Lakeside Retreat</li>
<li>Coastal Camping Paradise</li>
</ol>
11. تگ لیست نامرتب
نحو:
<ul></ul>
چیست؟: تگ <ul> تگ لیستی است که گروهی از آیتم ها را در یک لیست گلوله ای مرتب می کند.
چه کاری انجام می دهد؟: یک لیست نامرتب ایجاد می کند که ترتیب یا دنباله خاصی ندارد. تگ <li> (مورد لیست) موارد موجود در لیست را نشان می دهد و ما این تگ های آیتم های لیست را در تگ های <ul> قرار می دهیم.
12. تگ تقسیم - div
نحو:
<div></div>
چیست؟: تگ <div> در HTML یک بخش را در یک سند HTML تعریف می کند.
چه کاری انجام می دهد؟: به توسعه دهندگان اجازه می دهد تا سبک های خاصی را در بخش های خاصی از یک صفحه وب اعمال کنند. محتوای داخل <div> می تواند شامل متن، تصاویر، فرم ها، سرفصل ها و سایر عناصر HTML باشد.
توجه: هر زمان که از تگ <div> استفاده می کنید، همیشه به یاد داشته باشید که هر دو تگ <div> و </div> پایانی را در آن قرار دهید.
کد:
<div class="container">
<h1>Welcome to Camping Adventures</h1>
<p>Experience the beauty of nature! Embark on unforgettable camping trips that will rejuvenate your soul.</p>
<img src="C:\Users\cba_17\Downloads\camping.png" width="450" height="250">
</div>
<div>Dates: August 20th - 22nd</div>
13. تگ Span
نحو:
<span></span>
چیست؟: تگ Span یا تگ <span> در HTML، به طراحان وب اجازه می دهد تا قسمت های خاصی از متن را متفاوت از بقیه استایل کنند.
چه کاری انجام می دهد؟: می تواند قسمت کوچکی از متن شما را گروه بندی کند و به آن سبک یا قالب منحصر به فردی بدهد. این یک عنصر درون خطی است که می تواند رنگ، فونت، اندازه را تغییر دهد یا حتی جلوه های ویژه ای را به آن قسمت اضافه کند بدون اینکه بر بقیه متن تأثیر بگذارد.
کد:
<h1><span style="color:#016e38;">Welcome to Camping Adventures</span></h1>
14. تگ شکست خط
نحو:
<br>
چیست؟: تگ Line Break یا <br> یک خط شکسته یا خط جدید در یک صفحه وب ایجاد می کند. این به سادگی به عنوان کلید "Enter" برای HTML کار می کند.
چه کاری انجام می دهد؟: وقتی مرورگر با تگ <br> روبرو می شود، یک شکست خط را وارد می کند که کلمه، جمله یا پاراف را به خط بعدی منتقل می کند. هنگامی که می خواهید بدون شروع پاراگراف جدید یا اضافه کردن فاصله اضافی بین عناصر، یک خط جدید ایجاد کنید مفید است.
سوالات متداول
Q1. چهار عنصر اصلی HTML چیست؟
پاسخ: چهار عنصر اصلی HTML عبارتند از:
<html> ریشه یک سند HTML را نشان می دهد.
عنصر <head> حاوی ابرداده در مورد سند HTML است.
عنصر <title> فرزند عنصر <head> است و عنوان سند HTML را مشخص می کند.
عنصر <body> محتوای سند HTML نمایش داده شده در پنجره مرورگر را نشان می دهد.
Q2. تگ خالی چیست؟
پاسخ: در HTML، تگ‌های خالی عناصر خودبسته‌شونده هستند که نیازی به تگ بسته شدنی ندارند. آنها برای درج عناصر خاص بدون محتوا یا عناصر تودرتو استفاده می شوند. به عنوان مثال می توان به <br> برای شکست خط، <img> برای تصاویر، و <input> برای فیلدهای ورودی اشاره کرد.
Q3. تگ معنایی HTML چیست؟
پاسخ: تگ‌های معنایی HTML عناصر خاصی در HTML هستند که راهی برای توصیف هدف یا نقش بخش‌های مختلف یک صفحه وب فراهم می‌کنند و درک و پردازش محتوا را برای ابزارهای دسترسی، موتورهای جستجو و سایر فناوری‌ها آسان‌تر می‌کنند. به عنوان مثال می‌توان به «<header>»، «<nav>»، «<main>»، «<article>»، «<section>»، «<aside>»، «<footer>»، «<figure>»، «<figcaption>»، «<time>»، «<blockquote>» و «<cite>».
منبع: educba.com
