تگ‌های HTML مهم و کاربردی را در ادامه به صورت دقیق‌تری بررسی خواهیم کرد:
تگ html
این تگ در اصل شروع کد HTML شما را نشان می‌دهد. به مرورگر می‌گوید که هر چیزی در ادامه می‌آید، کد HTML است.
مثال زیر کدی در این زمینه را ارائه می‌کند:
<!DOCTYPE html>
<html> <!-- 👈 html tag open -->
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>This is some text.</p>
</body>
</html> <!-- 👈 html tag close -->تگ head
تگ head حاوی اطلاعاتی در مورد سند است، مانند عنوان صفحه، پیوندهایی که به فایل‌های استایل‌دهی1stylesheets اشاره دارند و تگ‌های meta.
مثال زیر کدی در این زمینه را ارائه می‌کند:
<!DOCTYPE html>
<html>
<head> <!-- 👈 head tag open -->
<title>My Page</title>
<meta name="description" content="A description of my page.">
<style type="text/css">
body {
text-align: center;
}
h1 {
background-color: cyan;
color: white;
font-family: cursive;
}
p {
background-color: red;
color: black;
font-family: sans-serif;
}
</style>
</head> <!-- 👈 head tag close -->
<body>
<h1>Welcome to my page!</h1>
<p>This is some text.</p>
</body>
</html>تگ title
این تگ عنوان صفحه را تنظیم می‌کند که در واقع شما آن را در تب مرورگر خود در قسمت بالایی صفحه می‌توانید مشاهده کنید.
مثال زیر کدی در این زمینه را ارائه می‌کند:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title> <!-- 👈 title tag open & close -->
</head>
<body>
<h1>Welcome to my page!</h1>
<p>This is some text.</p>
</body>
</html>تگ‌های heading
این تگ‌ها برای ایجاد عناوین در صفحه شما استفاده می‌شوند. اندازه آنها از h1 (بزرگ‌ترین) تا h6 (کوچک‌ترین) متغیر است.
مثال زیر کدی در این زمینه را ارائه می‌کند:
<!DOCTYPE html>
<html>
<head>
<title>Heading Page</title>
</head>
<body>
<h1>Welcome to Heading 1</h1> <!-- 👈 heading 1 tag open & close -->
<h2>Heading 2</h2> <!-- 👈 heading 2 tag open & close -->
<h3>Heading 3</h3> <!-- 👈 heading 3 tag open & close -->
<h4>Heading 4</h4> <!-- 👈 heading 4 tag open & close -->
<h5>Heading 5</h5> <!-- 👈 heading 5 tag open & close -->
<h6>Heading 6</h6> <!-- 👈 heading 6 tag open & close -->
</body>
</html>تگ p
این تگ در ساختار تگ‌های HTML برای متن‌ها و پاراگراف‌ها استفاده می‌شود. نمونه چنین کاربردی را در کد زیر مشاهده می‌کنید:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>This is some text.</p> <!-- 👈 Paragraph tag open & close -->
<p>This is some more text.</p> <!-- 👈 Paragraph tag open & close -->
</body>
</html>تگ a
تگ a یک هایپرلینک ایجاد می‌کند که بازدیدکنندگان می‌توانند برای حرکت به صفحه دیگری یا بخش دیگری از صفحه فعلی سایت بر روی آن کلیک کنند. این یک راه‌کار قدرتمند برای اتصال بخش‌های مختلف وب‌سایت شما به یکدیگر است.
مثال زیر کدی در این زمینه را ارائه می‌کند:
<!DOCTYPE html>
<html>
<head>
<title>Anchor Page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<!-- 👇 anchor tag open & close -->
<p>Visit <a href="https://www.google.com/">Google</a>.</p>
<p>Visit <a href="https://www.youtube.com/">Youtube</a>.</p>
<p>Visit <a href="https://www.facebook.com/">Facebook</a>.</p>
</body>
</html>تگ img
تگ img به شما امکان می‌دهد تصاویر را در وب‌سایت خود نمایش دهید. شما می‌توانید منبع تصویر را با استفاده از ویژگی یا شاخصه src مشخص کنید.
در اینجا مثالی در این خصوص ذکر شده است:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome to my page!</h1>
<img src="https://picsum.photos/500/300" alt="A beautiful image"> <!-- 👈 image tag open and self close -->
</body>
</html>تگ style
تگ style به شما اجازه می‌دهد تا کد CSS را در ساختار HTML خود وارد کنید و المان‌ها را به کمک آن استایل‌دهی نمایید. این تگ معمولاً در درون تگ head استفاده می‌شود.
در اینجا مثالی در این خصوص ذکر شده است:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style> <!-- 👈 style tag open -->
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style> <!-- 👈 style tag close -->
</head>
<body>
<h1>Welcome to my page!</h1>
<p>This is some text.</p>
</body>
</html>با کد نوشته شده بین دو تگ style در بالا، در اصل به تگ h1 رنگ آبی داده شده و برای تگ p اندازه فونت برابر 16 پیکسل تنظیم شده است. البته این موارد تنها یک سری استایل‌های پایه هستند که صرفا برای مثال در اینجا آورده شده‌اند. شما به کمک CSS می‌توانید استایل‌های فراوانی به ساختار HTML خود بدهید.
تگ form
تگ form برای ایجاد یک ظرف برای تگ‌های input که ورودی‌های کاربران سایت را در خود جای می‌دهند، استفاده می‌شود. شما می‌توانید از این تگ برای ایجاد انواع عناصر فرم مانند فیلدهای ورودی، دکمه‌های رادیویی، چک‌باکس‌ها و موارد دیگر استفاده کنید.
به مثال زیر در این خصوص توجه نمایید:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Contact Us</h1>
<form> <!-- 👈 form tag open -->
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br><br>
<input type="submit" value="Submit">
</form> <!-- 👈 form tag close -->
</body>
</html>در کد بالا، ما از تگ form برای ایجاد یک فرم تماس استفاده کرده‌ایم که شامل فیلدهای ورودی برای نام و ایمیل، یک منطقه متنی برای پیام و یک دکمه ارسال است.
تگ table
تگ table برای ایجاد جداول در صفحه وب‌سایت شما استفاده می‌شود. جداول را می‌توان برای سازماندهی داده‌ها و جذاب‌تر کردن بصری آنها استفاده کرد.
به مثال زیر در این خصوص توجه نمایید:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>My Table</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>
</body>
</html>در کد بالا، ما از تگ table برای ایجاد یک جدول ساده با دو ستون استفاده کردیم و این دو ستون را Name و Age نام نهاده‌ایم. به بیان دیگر، ردیف اول جدول شامل عناوین ستون‌ها است که با تگ‌های th مشخص می‌شوند، در حالی‌که ردیف‌های بعدی حاوی خود داده‌های جدول هستند و با تگ‌های td معین می‌گردند.
تگ div
تگ div برای ایجاد یک ظرف2container برای محتوا در صفحه وب‌سایت استفاده می‌شود. شما می‌توانید از این تگ HTML برای گروه‌بندی عناصر مرتبط با هم استفاده کنید و طراحی‌های CSS را روی آنها اعمال کنید.
مثال زیر کدی در این زمینه را ارائه می‌کند:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.container {
background-color: #f2f2f2;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to my page!</h1>
<p>This is some text.</p>
</div>
</body>
</html>در کد بالا، ما از تگ div برای ایجاد یک ظرف با پس‌زمینه خاکستری که دارای پدینگ3padding 20 پیکسل از هر طرف است، استفاده کرده‌ایم. البته برای این کار ما کلاس container. را به این تگ اعمال کرده‌ایم.
جمع‌بندی
در این مقاله سعی کردیم تا برخی از تگ‌های مهم و کاربردی HTML را به شما خوانندگان محترم معرفی کنیم. البته این‌ها تنها برخی از تگ‌های HTML هستند که شما ممکن است در ساختن وب‌سایت‌ها به آنها نیاز داشته باشید. مسلما برای یادگیری HTML نیاز به مرور و تمرین نکات فراوان دیگری هم هست. به عنوان مثال شاید مطالعه کتاب‌هایی که در این زمینه نوشته شده‌اند بتواند باعث آشنایی بیشتر شما با این زبان و طراحی سایت توسط آن گردد. از جمله کتاب‌های مفیدی که می‌توان اشاره کرد، این کتاب است که به صورتی جامع و کامل به این‌گونه مباحث و برخی مطالب دیگر پرداخته است. همچنین اگر به یادگیری بیشتر در زمینه HTML علاقه دارید، خواندن این مقاله را نیز به شما توصیه می کنیم.
