آشنایی با 30 تا از پرکاربردترین تگ های HTML

نویسنده: رومینا نظری
بازبینی شده توسط: محسن لشکری
بروزرسانی: ۰۸ اردیبهشت ۱۴۰۳ 20:39:18
https://darkoobedu.ir/?p=11382

از گذشته تا امروز، تکنولوژی‌های مختلفی در جذاب کردن فرآیند طراحی وب تاثیرگذار بوده‌اند، اما اگر بگوییم تمام این تکنولوژی‌ها به HTML منتهی می‌شوند، باور می‌کنید؟ در این مسیر همراه ما باشید تا کشف کنیم HTML چیست، چه کاربردی دارد و چطور این همه سال در دنیای وب جایگاه خودش را حفظ کرده است. همچنین 30 تگ پرکاربرد HTML را معرفی می‌کنیم که می‌تواند در کارهای روزمره‌ی شما مورد استفاده قرار بگیرد. با ما همراه باشید.

لیست مطالب

تگ HTML چیست و چه کاربردی دارد؟

برای اینکه با تگ‌های پرکاربرد HTMl کار کنید، لازم نیست حتما بدانید که HTML چیست اما خوب است در ابتدا نگاهی به تعریف آن بیاندازیم؛ چرا که وقتی با مفهوم چیزی آشنا باشیم، کار با آن ساده‌تر می‌شود. HTML یا “HyperText Markup Language”، یک زبان نشانه‌گذاری به‌حساب می‌آید که برای ایجاد صفحات وب در اینترنت استفاده می‌شود. شما با استفاده از تگ‌ها و عناصر مختلف این زبان، می‌توانید ساختار و محتوای صفحات وب را تعریف کنید. در واقع، HTML به مرورگرها می‌گوید که چگونه محتوا را نمایش دهند.

نگاهی به 30 تا از پرکاربردترین تگ های HTML

برنامه‌نویس حرفه‌ای شدن کار ساده‌ای نیست اما در بسیاری از موارد، برای نوشتن دستورات ساده نیازی نداریم تا حتی یک برنامه‌نویس باشیم. آشنایی با تگ‌ های HTML پرکاربرد به ما در این مسیر کمک می‌کنند؛ پس بیایید نگاهی به آن‌ها بیاندازیم:

<html>: تگ شروع و پایان یک سند HTML را مشخص می‌کند.
<head>: اطلاعات برگه مانند عنوان و ارجاعات به CSS و جاوا‌ اسکریپت را در این تگ قرار می‌دهیم.
<title>: عنوان برگه را مشخص می‌کند که در نوار عنوان مرورگر نمایش داده می‌شود.
<body>: محتوای نمایشی برگه از این تگ شروع و تا تگ بسته آن ادامه می‌یابد.
<h1> تا <h6>: تعداد شش عنوان اصلی متفاوت با اولویت‌های مختلف را مشخص می‌کند.
<p>: یک پاراگراف متن را نشان می‌دهد.
<a>: برای ایجاد پیوندهای هایپرمتن استفاده می‌شود.
<img>: برای نمایش تصاویر یا تصاویر نقشه استفاده می‌شود.
<ul>: یک لیست نامرتب ایجاد می‌کند.
<ol>: یک لیست مرتب ایجاد می‌کند.
<li>: یک مورد درون لیست به صورت مرتب یا نامرتب قرار می‌دهد.
<table>: یک جدول را تعریف می‌کند.
<tr>: یک ردیف در یک جدول را مشخص می‌کند.
<td>: یک سلول درون یک جدول را نمایش می‌دهد.
<div>: برای تقسیم بندی محتوای وب سایت استفاده می‌شود.
<span>: برای تغییر قالب بندی و اعمال استایل به قسمت‌های کوچک متن استفاده می‌شود.
<form>: یک فرم ایجاد می‌کند که برای جمع‌آوری اطلاعات از کاربران استفاده می‌شود.
<input>: یک محل برای ورود اطلاعات کاربر به فرم ایجاد می‌کند.
<textarea>: یک ناحیه برای ورود متن بلند تر از یک خط به فرم ایجاد می‌کند.
<button>: یک دکمه ایجاد می‌کند که می‌تواند اقداماتی را انجام دهد.
<label>: برای تعیین برچسب برای المنت‌های فرم استفاده می‌شود.
<select>: یک دکمه کشویی ایجاد می‌کند.
<option>: گزینه‌ها را برای المنت <select> تعریف می‌کند.
<header>: بخشی از صفحه وب را به عنوان سربرگ مشخص می‌کند.
<nav>: برای تعریف یک منوی ناوبری استفاده می‌شود.
<footer>: بخش پایینی صفحه وب را تعریف می‌کند.
<section>: برای تقسیم بندی صفحه وب به بخش‌های مجزا استفاده می‌شود.
<article>: برای تعریف یک مقاله یا محتوای مستقل استفاده می‌شود.
<aside>: برای تعریف محتوای فرعی و کناری به موضوع اصلی استفاده می‌شود.
<style>: برای تعریف استایل‌های CSS برای صفحه HTML استفاده می‌شود.

متاتگ چیست و چه کاربردی دارد؟

متاتگ‌ها یا به اصطلاح متا دیتا، اطلاعاتی هستند که در توصیف اطلاعات دیگر مورد استفاده قرار می‌گیرند و در واقع اطلاعات تکمیلی صفحات وب شما هستند که توسط بازدیدکنندگان قابل رویت نیستند. این تگ‌ها در کد منبع صفحه قرار دارند و در خود صفحه نمایش داده نمی‌شوند؛ اما موتورهای جستجو و سایر وب‌سایت‌ها از اطلاعات موجود در متاتگ‌ها استفاده می‌کنند.

این نوع از تگ‌ها، اطلاعات مهمی درباره صفحه و محتوای آن را در اختیار موتورهای جستجو و سایر وب‌سایت‌ها قرار می‌دهند که می‌تواند در سئو سایت برای موتورهای جستجو تاثیر داشته باشد و رتبه‌بندی صفحه در نتایج گوگل را تغییر دهد. این تگ‌ها معمولا توصیف‌کننده کمّی محتوا هستند و می‌توانند شامل مواردی مانند کلمات کلیدی، توضیحات، نویسنده و سایر متا دیتاها باشند.

نگاهی به عناصر HTML

در HTML، عناصر نقش مهمی در تعریف ساختار و محتوای صفحات دارند و هر عنصر از یک تگ شروع، محتوا و یک تگ پایان تشکیل شده است. به طور کلی، یک عنصر HTML از موارد زیر تشکیل می‌شود:

تگ‌های بلند: این تگ‌ها شروع و پایان دارند. برخی از تگ‌های بلند مهم عبارتند از:
- <h1>: برای تعریف تیترها یا عناوین در صفحه وب استفاده می‌شود.
- <p>: برای نمایش پاراگراف‌ها از متن استفاده می‌شود.
- <a>: برای تعریف لینک‌ها در صفحه وب استفاده می‌شود.
- <img>: برای نمایش تصاویر در صفحه وب استفاده می‌شود.
تگ‌های کوتاه: این تگ‌ها شروع و پایان ندارند و به صورت تکمیلی در میان متن قرار می‌گیرند. برخی از تگ‌های کوتاه عبارتند از:
- <br>: برای شکستن متن و رفتن به سطر جدید استفاده می‌شود.
- <hr>: برای ایجاد خط افقی در صفحه وب استفاده می‌شود.
- <meta>: برای تعریف مشخصات صفحه وب (مانند کاراکترست، زبان و …) استفاده می‌شود.

همچنین، تگ‌ها می‌توانند داخل یکدیگر قرار بگیرند (تگ‌های تو در تو) و تشکیل ساختار صفحه را بدهند. در مثال زیر چهار عنصر HTML را می‌بینید:

<!DOCTYPE html>
<html>
<body>
    <h1>عنوان اول من</h1>
    <p>پاراگراف اول من</p>
</body>
</html>

در این مثال، تگ <html> ریشه‌ی HTML را تعریف می‌کند. داخل آن، تگ <body> بدنه‌ی را تعریف می‌کند. و در داخل تگ <body>، دو عنصر دیگر به نام‌های <h1> و <p> قرار دارند. تگ <h1> یک عنوان تعریف می‌کند و تگ <p> یک پاراگراف را. همچنین، توجه داشته باشید که تگ‌های HTML حساس به بزرگی و کوچکی حروف نیستند. به عبارت دیگر، <P> به معنی همان <p> است؛ با این حال، استفاده از حروف کوچک برای تگ‌ها توصیه می‌شود.

نمونه تگ های HTML با مثال

برای اینکه بتوانید بهتر با این تگ‌ها و کاربرد آن‌ها در کدنویسی آشنا شوید، در ادامه چند نمونه از تگ‌های HTML را به‌همراه مثال‌ها آورده‌ایم:

1. <title>: برای نام‌گذاری یک صفحه استفاده می‌شود.

2. <h1> تا <h6>: برای تعریف عناوین و عناصر سربرگ در صفحه استفاده می‌شوند.

3. <p>: برای نمایش متن‌های پاراگراف استفاده می‌شود.

4. <a>: برای ایجاد لینک‌ها به صفحات دیگر یا منابع خارجی استفاده می‌شود.

5. <img>:برای نمایش تصاویر در صفحه وب استفاده می‌شود.

6. <ul> و <li>: برای ایجاد لیست‌های نقطه‌ای استفاده می‌شوند.

7. <ol> و <li>: برای ایجاد لیست‌های عددی استفاده می‌شوند.

8. <div>: برای تقسیم بندی و گروه‌بندی عناصر در صفحه استفاده می‌شود.

<title>صفحه اصلی</title>

<h1>سلام، دنیا!</h1>

<h2>خوش آمدید به وب‌سایت من</h2>


 <p> این یک متن پاراگراف است. </p>


<a href="https://example.com">مشاهده بیشتر</a>


      <img src="image.jpg" alt="تصویر توضیحی">


<ul>

<li>مورد اول</li>

<li>مورد دوم</li>

</ul>


<ol>

<li>مورد اول</li>

    <li>مورد دوم</li>

</ol>


<div class="container">

<p>محتوای این قسمت</p>

</div>

این تگ‌ها تنها چند نمونه از تگ‌های HTML هستند و طبعا در طراحی صفحات وب از بسیاری تگ‌های دیگر هم استفاده می‌شود.

دسته بندی تگ های HTML

تگ‌های HTML را براساس نوع کاری که برای آن تعریف می‌شوند، دسته‌‎بندی می‌کنند؛ بنابراین، طبق آنچه پیشتر شرح دادیم، از انواع دسته‌بندی این نوع تگ‌ها می‌توان به تگ‌های پایه، تگ‌های قالب‌بندی، تگ‌های ورودی و فرم‌ها، تگ‌های قالب نمایشی، تگ‌های تصاویر، تگ‌های صوت و ویدیو، تگ‌های پیوند، تگ‌های لیست، تگ‌های جدول، تگ‌های استایل و معناگرا، متاتگ‌ها و تگ‌های برنامه‌نویسی اشاره کرد. هرکدام از این دسته‌بندی‌ها برای تفهیم کردن فضای وب‌سایت به گوگل، اهمیت دارند و اگر برای گرفتن یک نتیجه مناسب به استفاده درست از آن‌ها نیاز دارید.

در این مطلب ، نگاهی به 30 تگ پرکاربرد HTML و از انواع مختلف آن‌ها گفتیم. در دنیای برنامه‌نویسی می‌توان مدت‌ها غرق شد اما اگر این تخصص حرفه‌ای شما نیست و تنها قصد دارید برای انجام کارهای کوچک از این تگ‌ها استفاده کنید، امیدواریم مطلب مفیدی برای شما بوده باشد. برای آگاهی از دوره‌های آموزشگاه دارکوب، می‌توانید به سایت ما مراجعه نمایید. درضمن، لطفا نظرات خود را برای ما بنویسید و به بهبود مطالب، کمک کنید.