به عنوان یک توسعه‌دهنده وب یا حتی یک مبتدی در دنیای وب، شما قطعاً با HTML و مفاهیم مرتبط با آن آشنایی دارید. HTML (Hypertext Markup Language) زبان اصلی وب است که برای ایجاد صفحات وب استفاده می‌شود. یکی از جنبه‌های مهم HTML، عناصر و تگ‌های آن هستند. در این مقاله، به بررسی عمیق‌تر تگ و عناصر در HTML خواهیم پرداخت. در واقع، تگ‌ها و عناصر HTML اساسی‌ترین ساختار برای تشکیل و نمایش محتوای وب هستند. با ما همراه باشید تا موضوع تگ و عناصر را موشکافانه بررسی کنیم. همچنین پیشنهاد می‌کنیم آموزش سرآیند و بدنه HTML را در کنار این مقاله مطالعه نمایید.
HTML چیست؟
HTML یک زبان نشانه‌گذاری (Markup Language) است که برای ایجاد و ترتیب دادن اطلاعات روی صفحات وب استفاده می‌شود. این زبان به مرورگرها می‌گوید که چگونه متن، تصاویر، لینک‌ها و سایر عناصر را نمایش دهند. HTML از تگ‌ها و عناصری تشکیل شده است که به عنوان تگ‌های HTML شناخته می‌شوند.
تگ و عناصر در HTML
تگ‌ها در HTML به عنوان عناصر اصلی شناخته می‌شوند. هر تگ به یک نام دارد و معمولاً دارای دو علامت باز و بسته است. تگ‌ها باعث تشخیص مرورگر در مورد نوع و نحوه نمایش محتوا می‌شوند. این تگ‌ها درواقع دستورهایی به مرورگر هستند تا بفهمد که چگونه محتوا را نمایش دهد.
به عنوان مثال، تگ <p> برای تعریف یک پاراگراف متنی استفاده می‌شود. این تگ با <p> آغاز می‌شود و با </p> به پایان می‌رسد. به این صورت:
<p>این یک پاراگراف متنی است.</p>
در اینجا تگ <p> تعریف کننده شروع و پایان پاراگراف است. هر تگ HTML دارای نامی است که در داخل علامت باز و بسته آن آمده و نام تگ باید بین علامت‌های < و > قرار گیرد. تگ پایان نیز با / پس از علامت باز (<) قرار می‌گیرد.
عناصر (Elements) در HTML
عناصر HTML از تگ‌ها تشکیل شده‌اند و می‌توانند حاوی محتوا یا دیگر عناصر باشند. به عنوان مثال، یک تگ پاراگراف <p> به تنهایی یک عنصر HTML است. اما می‌تواند حاوی متن یا تگ‌های دیگر باشد. در اینجا چند مثال از عناصر HTML ارائه گردیده است:
عنصر متنی (Text Element):
<p>این یک متن نمونه است.</p>
در این مثال، عنصر متنی یک پاراگراف است که متن “این یک متن نمونه است” را درون خود دارد.
عنصر تصویر (Image Element):
<img src="image.jpg" alt="توضیح تصویر">
عنصر تصویر (<img>) برای نمایش تصاویر استفاده می‌شود. در اینجا، ویژگی src مسیر تصویر و ویژگی alt متن جایگزین تصویر را مشخص می‌کند.
عنصر لینک (Link Element):
<a href="https://www.example.com">لینک به وبسایت نمونه</a>
عنصر لینک (<a>) برای ایجاد لینک‌ها به صفحات دیگر یا منابع خارجی به کار می‌رود. ویژگی href به مسیر لینک اشاره دارد.
عنصر فرم (Form Element):
<form>
<label for="name">نام:</label>
<input type="text" id="name" name="name">
<input type="submit" value="ارسال">
</form>
عنصر فرم (<form>) برای ایجاد فرم‌های تعاملی برای جمع‌آوری اطلاعات از کاربران استفاده می‌شود. در اینجا، ما عناصری مانند تگ‌های <input> برای ایجاد فیلدهای فرم داریم.
عنصر جدول (Table Element):
<table>
<tr>
<th>سرستون 1</th>
<th>سرستون 2</th>
</tr>
<tr>
<td>داده 1</td>
<td>داده 2</td>
</tr>
</table>
عنصر جدول (<table>) برای نمایش اطلاعات در قالب جدولی به کار می‌رود. در اینجا، ما یک جدول با سرستون‌ها و داده‌ها داریم.
عنصر چندرسانه‌ای (Multimedia Element):
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
پخش فایل صوتی
</audio>
عنصر چندرسانه‌ای (<audio>) برای نمایش و پخش فایل‌های صوتی و ویدیویی استفاده می‌شود. ویژگی controls امکان کنترل پخش را فراهم می‌کند.
عنصر فهرست (List Element):
<ul>
<li>آیتم ۱</li>
<li>آیتم ۲</li>
</ul>
عنصر فهرست (<ul>) برای نمایش اطلاعات به صورت فهرست به کار می‌رود. در این مثال، ما یک فهرست بدون ترتیب داریم.
عنصر فرمت(Formatting Element):
<div class="container">
<p>متن درون شکل دهی شده با تگ div</p>
</div>
<span style="color: red;">متن شکل‌دهی شده با تگ span</span>
عنصر‌های شکل‌دهی مانند <div> و <span> به شما امکان می‌دهند تا عناصر را درون یک محیط گروهی به صورت دقیق‌تر فرمت بندی کنید. این تگ‌ها معمولاً برای شکل‌دهی بلوکی (block formatting) به کار می‌روند.
کامنت‌ها (Comments):
کامنت‌ها با تگ <!-- و --> به کد HTML اضافه می‌شوند. این کامنت‌ها برای توضیح کد و افزودن یادداشت‌های اضافی مفید هستند و در اجرای صفحه توسط مرورگر نمایش داده نمی‌شوند.
<!-- این یک کامنت است و برای توضیح کد استفاده می‌شود -->
نحوه استفاده از تگ و عناصر در HTML
استفاده از تگ و عناصر در HTML برای ساخت صفحات وب بسیار مهم است. تگ‌ها برای تشخیص مرورگر در مورد نحوه نمایش محتوا استفاده می‌شوند. آن‌ها عناصر، اطلاعات و محتوای واقعی را درون خود نگه می‌دارند. برای مثال، تگ <p> تعیین می‌کند که متن درون آن یک پاراگراف است.
نحوه تعریف تگ و عناصر:
- تگ باز (Opening Tag): این تگ با علامت > شروع می‌شود و با نام تگ ادامه می‌باید. ممکن است دارای ویژگی‌های اضافی نیز باشد. به عنوان مثال:
<tagname attribute="value">. - تگ بسته (Closing Tag): برای بستن تگ ابتدا علامت تگ باز (>) با
/قرار می‌گیرد و در پایان علامت>می‌آید. به عنوان مثال:</tagname>. - محتوا (Content): برخی از تگ‌ها محتوایی دارند که بین تگ باز و تگ بسته قرار می‌گیرد. به عنوان مثال:
<p>محتوای این پاراگراف</p>.
نام تگ (Tag Name):
نام تگ شامل حروف الفبا، اعداد، و یا خط‌زیرها (_) است و باید با یک حرف شروع شود. همچنین نام تگ نیاز به حساسیت نسبت به بزرگی و کوچکی حروف ندارد. به عنوان مثال، <p> و <P> هر دو به معنای تگ پاراگراف هستند.
ویژگی‌ها (Attributes):
بسیاری از تگ‌ها می‌توانند دارای ویژگی‌های اضافی باشند که برای تنظیم خصوصیات تگ استفاده می‌شوند. ویژگی‌ها به عنوان یک جفت “نام” و “مقدار” تعریف می‌شوند. به عنوان مثال:
<a href="https://www.example.com">لینک به وبسایت نمونه</a>
در این مثال، href ویژگی تگ <a> است که مقدار “https://www.example.com” را دارد.
تگ‌های مهم HTML
تگ‌های HTML به دسته‌بندی‌های مختلفی تقسیم می‌شوند و هر یک وظیفه و نقش‌های مختلفی دارند. در ادامه به معرفی برخی از تگ‌های مهم و پرکاربرد در HTML می‌پردازیم:
<html>: این تگ برای تعریف شروع و پایان یک صفحه HTML است. همه عناصر HTML درون این تگ قرار می‌گیرند.<head>: این تگ برای تعریف بخش سرآیند یک صفحه است. اطلاعاتی مانند عنوان صفحه و لینک‌های استایل به این بخش اضافه می‌شوند.<title>: این تگ برای تعریف عنوان صفحه مورد استفاده قرار می‌گیرد و در نوار عنوان مرورگر نمایش داده می‌شود.<meta>: این تگ برای تعریف اطلاعات متا (مثل توضیحات صفحه) مورد استفاده قرار می‌گیرد و به موتورهای جستجو کمک می‌کند.<link>: این تگ برای ایجاد ارتباط با فایل‌های خارجی مانند فایل‌های CSS استفاده می‌شود.<body>: این تگ برای تعریف بخش بدنه صفحه است و شامل محتوای اصلی صفحه می‌شود.<h1>تا<h6>: این تگ‌ها برای تعریف عناوین مختلف از سطح 1 تا 6 به کار می‌روند.<h1>بیشترین اهمیت را دارد و<h6>کمترین.<p>: این تگ برای تعریف پاراگراف‌های متنی استفاده می‌شود.<a>: این تگ برای ایجاد لینک‌ها به صفحات دیگر یا منابع خارجی مورد استفاده قرار می‌گیرد.<img>: این تگ برای نمایش تصاویر استفاده می‌شود و ویژگی‌هایی مانندsrcوaltدارد.<ul>و<ol>: این تگ‌ها برای ایجاد فهرست‌های بدون ترتیب (لیست نقطه‌ای) و فهرست‌های مرتب (لیست عددی) مورد استفاده قرار می‌گیرند.<table>: این تگ برای ایجاد جداول داده‌ها استفاده می‌شود و شامل تگ‌هایی مانند<tr>(سطر)،<th>(سرستون) و<td>(داده) می‌شود.<form>: این تگ برای ایجاد فرم‌ها برای تعامل با کاربران مورد استفاده قرار می‌گیرد و شامل تگ‌هایی مانند<input>،<textarea>و<select>است.<div>و<span>: این تگ‌ها برای شکل‌دهی و گروه‌بندی عناصر به کار می‌روند.<iframe>: این تگ برای نمایش صفحات وب دیگر درون صفحه فعلی به کار می‌رود.<audio>و<video>: این تگ‌ها برای نمایش و پخش فایل‌های صوتی و ویدیویی به کار می‌روند.<hr>: این تگ برای ایجاد یک خط افقی جداکننده استفاده می‌شود.
این فهرست تگ‌ها تنها یک بخش کوچک از تگ‌ها و عناصر HTML است. HTML دارای تعداد زیادی تگ و عنصر مفید دیگر است که برای ایجاد صفحات وب پویا و زیبا استفاده می‌شوند.
نحوه تخصیص ویژگی‌ها (Attributes) به تگ‌ها
ویژگی‌ها به تگ‌ها اضافه می‌شوند. ویژگی‌ها تا حد زیادی مشخص می‌کنند که تگ چگونه عمل کند یا نمایش داده شود. برای افزودن ویژگی به یک تگ، می‌توانید ویژگی‌ها را داخل تگ باز تعریف کنید.
<tagname attribute="value">محتوا</tagname>
در اینجا، attribute نام ویژگی و value مقداری است که به ویژگی تخصیص داده می‌شود. به عنوان مثال، اگر می‌خواهید یک تصویر به صفحه اضافه کنید، می‌توانید از تگ <img> با ویژگی‌هایی مانند src (مسیر تصویر) و alt (متن جایگزین تصویر) استفاده کنید.
<img src="image.jpg" alt="توضیح تصویر">
توجه داشته باشید که برخی از تگ‌ها ویژگی‌های اجباری دارند و باید آن‌ها را داشته باشند. برای مثال، تگ <a> برای ایجاد لینک باید ویژگی href داشته باشد.
تگ و عناصر تودرتو
یکی از ویژگی‌های قدرتمند HTML این است که می‌توانید تگ‌ها و عناصر را داخل یکدیگر تو در تو قرار دهید. این به شما اجازه می‌دهد تا ساختار پیچیده‌تری را ایجاد کنید. به عنوان مثال، می‌توانید یک لینک داخل یک پاراگراف قرار دهید:
<p>برای مطالعه بیشتر به <a href="https://www.example.com">وبسایت نمونه</a> مراجعه کنید.</p>
در این مثال، تگ <a> که یک لینک است، داخل تگ <p> که یک پاراگراف است قرار دارد.
همچنین می‌توانید تگ‌ها را به صورت لیست‌های مرتب یا غیرمرتب داخل یکدیگر قرار دهید. به عنوان مثال:
فهرست بدون ترتیب (Unordered List):
<ul>
<li>آیتم ۱</li>
<li>آیتم ۲</li>
</ul>
فهرست مرتب (Ordered List):
<ol>
<li>آیتم ۱</li>
<li>آیتم ۲</li>
</ol>
در هر دو مثال، تگ‌های <li> (که مخفف “آیتم لیست” است) داخل تگ‌های <ul> یا <ol> قرار دارند. این به مرورگر می‌گوید که یک لیست بدون ترتیب یا مرتب است
