آموزش عناصر HTML

نویسنده : نسرین سلیمانی
آخرین به روزرسانی : ۳۰ مهر ۱۴۰۳

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

برچسب‌های اصلی HTML

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

تگ html

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

نکات مهم:

تمام عناصر صفحه باید در داخل تگ <html> قرار بگیرند.

این تگ به مرورگر کمک می‌کند تا سند HTML را به درستی شناسایی کند.

می‌توان به این تگ ویژگی‌هایی اضافه کرد، مانند lang برای تعیین زبان صفحه. به عنوان مثال:

<html lang="fa">

این خط مشخص می‌کند که زبان محتوای صفحه فارسی است.

تگ head

تگ <head> شامل اطلاعاتی است که برای مرورگر مفید است اما مستقیماً به کاربر نشان داده نمی‌شود. این بخش شامل متاداده‌ها، فایل‌های CSS و جاوا اسکریپت، و همچنین تگ‌هایی است که اطلاعات مربوط به صفحه وب را در اختیار موتورهای جستجو قرار می‌دهند. به عبارت دیگر، تگ <head> اطلاعاتی را فراهم می‌کند که به توصیف صفحه و منابع خارجی آن کمک می‌کند.

مهم‌ترین تگ‌های داخل <head>:

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

مثال:

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

<meta charset="UTF-8">

یا برای تعریف کلمات کلیدی که به موتورهای جستجو کمک می‌کند تا محتوای صفحه را بهتر شناسایی کنند:

<meta name="keywords" content="HTML, CSS, آموزش, طراحی وب">

<link rel="stylesheet" href="styles.css">

<script src="app.js"></script>

تگ body

تگ <body> یکی از مهم‌ترین عناصر HTML است که تمامی محتوای قابل نمایش صفحه درون آن قرار می‌گیرد. هر چیزی که کاربر در صفحه می‌بیند (مانند متن، تصاویر، لینک‌ها و دکمه‌ها) درون این تگ تعریف می‌شود. به عبارت دیگر، محتوای درون تگ <body> همان چیزی است که هنگام بارگذاری صفحه، در مرورگر نمایش داده می‌شود.

نکات مهم:

تمامی تگ‌های مربوط به محتوای صفحه مانند <h1>, <p>, <img>, <a>, <div> و غیره درون تگ <body> قرار می‌گیرند.

محتوای درون تگ <body> به‌طور مستقیم با کاربر تعامل دارد و می‌تواند شامل هر چیزی باشد که برای نمایش، تعامل یا داده‌ها مورد نیاز است.

مثال:

<body>
  <h1>به صفحه ما خوش آمدید!</h1>
  <p>این اولین پاراگراف در صفحه است.</p>
  <img src="image.jpg" alt="توضیح تصویر">
</body>

ویژگی‌های مهم در تگ‌های اصلی

هر یک از این تگ‌ها می‌تواند ویژگی‌هایی داشته باشد که به آن‌ها عملکرد بیشتری می‌بخشد. در ادامه به برخی از این ویژگی‌ها اشاره می‌کنیم:

lang در تگ <html>: برای تعیین زبان محتوای صفحه استفاده می‌شود که می‌تواند به بهبود دسترسی و سئو کمک کند.

مثال:

<html lang="fa">

charset در تگ <meta>: تعیین می‌کند که صفحه با چه نوع کدگذاری متنی بارگذاری شود. برای محتوای فارسی، UTF-8 یک استاندارد جهانی است.

viewport در تگ <meta>: برای تنظیم نمایش صفحه در دستگاه‌های مختلف، به‌ویژه موبایل، از این تگ استفاده می‌شود:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

تگ‌های ساختاری HTML

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

تگ‌های عنوان (Heading Tags: h1 تا h6)

تگ‌های عنوان (<h1> تا <h6>) از مهم‌ترین و پرکاربردترین عناصر HTML هستند که برای سازماندهی و سلسله‌مراتب بخش‌های مختلف محتوا به کار می‌روند. این تگ‌ها به محتوا نظم و ساختار می‌دهند و به موتورهای جستجو کمک می‌کنند تا موضوعات اصلی و فرعی یک صفحه را شناسایی کنند.

<h1>: عنوان اصلی صفحه یا محتوا است. این تگ تنها یک بار در هر صفحه باید استفاده شود. از آنجا که <h1> بالاترین سطح عنوان است، باید برای مهم‌ترین بخش محتوا به کار رود.

<h2>: زیرعنوان‌های اصلی صفحه را نشان می‌دهد و می‌تواند چندین بار در صفحه استفاده شود. هر صفحه می‌تواند چندین بخش مختلف داشته باشد که هر کدام از یک عنوان سطح دوم (<h2>) استفاده می‌کنند.

<h3> تا <h6>: این تگ‌ها برای عناوین فرعی‌تر و کوچک‌تر به کار می‌روند. به ترتیب، هر چه عدد بیشتر باشد، اهمیت و اندازه عنوان کمتر خواهد بود. مثلاً:

<h3> برای زیرعنوان‌های یک بخش که با <h2> شروع شده استفاده می‌شود.
<h4>، <h5>, و <h6> برای سرفصل‌های جزئی‌تر به کار می‌روند.

نکته مهم:

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

مثال:

<h1>عنوان اصلی صفحه</h1>
<h2>بخش اول</h2>
<h3>زیر بخش اول</h3>
<h2>بخش دوم</h2>
<h3>زیر بخش دوم</h3>

تگ پاراگراف (p)

تگ <p> برای نمایش و سازماندهی پاراگراف‌ها استفاده می‌شود. این تگ یکی از پرکاربردترین تگ‌های HTML است که به‌طور خودکار قبل و بعد از خود فضای خالی ایجاد می‌کند تا خوانایی متن‌ها را افزایش دهد. هر زمان که بخواهید بخشی از متن را در یک پاراگراف جدید نمایش دهید، از تگ <p> استفاده می‌کنید.

ویژگی‌ها:

تگ <p> به‌طور پیش‌فرض یک خط خالی قبل و بعد از متن خود ایجاد می‌کند، که باعث تفکیک بهتر پاراگراف‌ها می‌شود.
می‌تواند محتوای مختلفی مانند متن، لینک، و حتی تصاویر را شامل شود.

مثال:

<p>این یک پاراگراف است. محتوای داخل این تگ به عنوان یک پاراگراف مستقل نمایش داده می‌شود.</p>

تگ‌های معنایی (Semantic Tags: article ,section , nav , aside , header, footer)

تگ‌های معنایی (Semantic Tags) به منظور افزایش خوانایی کد و همچنین بهبود سئو و دسترس‌پذیری صفحات وب معرفی شده‌اند. این تگ‌ها جایگزین مناسبی برای استفاده بیش از حد از تگ‌های عمومی مانند <div> هستند. هر یک از این تگ‌ها معنای مشخصی دارند که به مرورگر و موتورهای جستجو کمک می‌کنند تا ساختار و محتوای صفحه را بهتر درک کنند.

تگ <article>

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

ویژگی‌ها:

مناسب برای مقالات، پست‌های وبلاگ، نظرات کاربران، و هر نوع محتوای قابل توزیع.
هر <article> می‌تواند شامل عنوان، پاراگراف‌ها، تصاویر، و سایر عناصر باشد.
مثال:

<article>
    <h2>عنوان مقاله</h2>
    <p>این مقاله درباره موضوع خاصی است و به صورت مستقل قابل فهم و استفاده است.</p>
</article>

تگ <section>

تگ <section> برای تقسیم‌بندی صفحه به بخش‌های مختلف استفاده می‌شود. هر بخش ممکن است شامل محتوای مرتبط با یک موضوع خاص باشد و این تگ معمولاً با یک عنوان همراه است.

ویژگی‌ها:

از این تگ برای گروه‌بندی بخش‌های مرتبط با هم در یک صفحه استفاده می‌شود.
تگ <section> می‌تواند شامل چندین پاراگراف، عناوین، تصاویر و سایر عناصر باشد.
مثال:

<section>
    <h2>بخش اول</h2>
    <p>این بخش مربوط به موضوع خاصی است که در آن به جزئیات موضوع پرداخته می‌شود.</p>
</section>

تگ <nav>

تگ <nav> برای ایجاد نوار ناوبری استفاده می‌شود و شامل لینک‌هایی است که کاربران را به بخش‌های مختلف وب‌سایت هدایت می‌کنند.

ویژگی‌ها:

مناسب برای نوارهای ناوبری یا لینک‌های مهم که کاربر را به صفحات دیگر هدایت می‌کنند.
در هر صفحه‌ای که لینک‌های ناوبری وجود دارد، از تگ <nav> استفاده کنید.
مثال:

<nav>
    <ul>
        <li><a href="home.html">صفحه اصلی</a></li>
        <li><a href="about.html">درباره ما</a></li>
    </ul>
</nav>

تگ <aside>

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

ویژگی‌ها:

برای محتوای اضافی که مرتبط با محتوای اصلی است ولی بخش مستقیمی از آن نیست.
معمولاً در کنار محتوای اصلی صفحه نمایش داده می‌شود.
مثال:

<aside>
    <p>این یک محتوای جانبی است که به محتوای اصلی مرتبط است اما جزو آن نیست.</p>
</aside>

تگ <header> و <footer>

تگ‌های <header> و <footer> برای تعریف سرصفحه و پاصفحه یک سند یا بخش استفاده می‌شوند. این تگ‌ها معمولاً شامل عناوین، منوهای ناوبری، اطلاعات کپی‌رایت، یا لینک‌های اجتماعی هستند.

<header>: برای بخش سرصفحه‌ای که معمولاً شامل لوگو، منوی ناوبری، و عنوان صفحه است.

مثال:

<header>
    <h1>وب‌سایت من</h1>
    <nav>
        <ul>
            <li><a href="home.html">صفحه اصلی</a></li>
            <li><a href="about.html">درباره ما</a></li>
        </ul>
    </nav>
</header>

<footer>: برای پاصفحه‌ای که معمولاً شامل اطلاعات کپی‌رایت، لینک‌های مربوطه، و اطلاعات تماس است.

مثال:

<footer>
    <p>&copy; 2024 تمامی حقوق محفوظ است.</p>
</footer>

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

تگ‌های متنی HTML

تگ‌های متنی HTML به ما این امکان را می‌دهند که بخش‌های خاصی از متن را برجسته کرده و به مرورگر یا موتورهای جستجو معنا و تأکید بیشتری در مورد آن قسمت از متن بدهیم. تگ‌های متنی معمولاً برای تأکید، برجسته‌سازی، تعریف اصطلاحات، و نمایش صحیح متن در وب استفاده می‌شوند. در این بخش به صورت جامع‌تر به بررسی تگ‌های مهم متنی HTML مانند <em>, <strong>, <mark>, و <abbr> می‌پردازیم.

تأکید (em, strong)

تگ‌های <em> و <strong> برای نشان دادن تأکید در متن استفاده می‌شوند. هر دوی این تگ‌ها به مرورگرها، کاربران، و موتورهای جستجو اطلاعات خاصی در مورد اهمیت بخشی از متن می‌دهند. با این حال، بین این دو تگ تفاوت معنایی و ظاهری وجود دارد که آن‌ها را از هم متمایز می‌کند.

تگ em (تأکید متوسط)

تگ <em> مخفف “emphasis” است و برای نشان دادن تأکید متوسط یا معمولی بر روی بخشی از متن استفاده می‌شود. این تگ به مرورگر می‌گوید که متن داخل آن باید با تأکید ملایم‌تری نمایش داده شود. به‌طور پیش‌فرض، مرورگرها این تگ را به‌صورت ایتالیک (italic) نمایش می‌دهند.

کاربرد اصلی:

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

<p>این جمله شامل <em>تأکید</em> بر یک کلمه است.</p>

نمایش: این جمله شامل تأکید بر یک کلمه است.

تگ strong (تأکید قوی)

تگ <strong> برای تأکید قوی‌تر بر روی بخشی از متن استفاده می‌شود. برخلاف تگ <em>، این تگ به مرورگر می‌گوید که این بخش از متن باید برجسته‌تر شود و به صورت بولد (bold) نمایش داده شود. علاوه بر این، این تگ تأکید بیشتری را به موتورهای جستجو و خوانندگان منتقل می‌کند، به طوری که بخش مورد نظر اهمیت بیشتری دارد.

کاربرد اصلی:

وقتی می‌خواهید بخشی از متن را برجسته کنید که از اهمیت ویژه‌ای برخوردار است.
معمولاً این تأکید نشان‌دهنده موضوعاتی حیاتی یا مهم است که باید توجه بیشتری به آن‌ها شود.
مثال:

<p>این جمله شامل <strong>تأکید قوی</strong> بر یک کلمه است.</p>

نمایش: این جمله شامل تأکید قوی بر یک کلمه است.

تفاوت معنایی بین em و strong

تگ <em> برای تأکیدهای متوسط و متنی است که ممکن است تغییر لحن در گفتار را نشان دهد.
تگ <strong> برای تأکید قوی‌تر و متنی است که به‌طور خاص نیاز به برجسته‌سازی دارد.

برجسته‌سازی متن (mark, abbr)

علاوه بر تأکید، HTML ابزارهایی برای برجسته‌سازی و توضیح اصطلاحات یا بخش‌های خاصی از متن ارائه می‌دهد. دو تگ مهم در این زمینه عبارتند از <mark> و <abbr>.

تگ mark (برجسته‌سازی متن)

تگ <mark> برای هایلایت کردن یا برجسته‌سازی بخشی از متن استفاده می‌شود. این تگ معمولاً برای متن‌هایی به کار می‌رود که می‌خواهید به‌طور خاص جلب توجه کنند. مرورگرها به‌طور پیش‌فرض متن داخل تگ <mark> را با پس‌زمینه زرد رنگ نمایش می‌دهند که مشابه هایلایت کردن یک بخش از متن در اسناد چاپی است.

کاربرد اصلی:

برای برجسته کردن بخش‌های مهمی از متن که توجه کاربر را جلب کند.
برای اشاره به متن‌های مهم در یک مقاله یا سند.
مثال:

<p>این جمله شامل <mark>متن برجسته</mark> است.</p>

نمایش: این جمله شامل <mark>متن برجسته</mark> است.

موارد استفاده:

نمایش کلمات کلیدی در یک مقاله.
اشاره به بخش‌های مهم یا نکات کلیدی که باید کاربر به آن توجه کند.

تگ <abbr> (مخفف‌ها)

تگ <abbr> برای تعریف مخفف‌ها و اصطلاحات به کار می‌رود. وقتی از این تگ استفاده می‌شود، مرورگرها معمولاً متن مخفف را زیرخط‌دار نمایش می‌دهند و با قرار گرفتن موس روی آن، توضیح کامل یا معنی مخفف نمایش داده می‌شود. این ویژگی به کاربران کمک می‌کند تا مخفف‌ها و اصطلاحات تخصصی را بهتر درک کنند.

کاربرد اصلی:

برای توضیح مخفف‌ها یا اختصاراتی که ممکن است کاربران با آن‌ها آشنا نباشند.
بهبود دسترس‌پذیری صفحات وب و کمک به موتورهای جستجو در درک بهتر متن.
مثال:

<p>HTML مخفف <abbr title="HyperText Markup Language">HTML</abbr> است.</p>

مزیت اصلی:

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

استفاده از تگ‌های متنی HTML برای تأکید و برجسته‌سازی متن باعث افزایش خوانایی و درک بهتر محتوا توسط کاربران می‌شود. تگ‌های <em> و <strong> ابزارهای مناسبی برای ایجاد تأکیدهای مختلف در متن هستند، در حالی که تگ‌های <mark> و <abbr> به شما کمک می‌کنند تا بخش‌های خاصی از متن را برجسته کنید یا مخفف‌ها و اصطلاحات را برای کاربران توضیح دهید. درک درست این تگ‌ها و استفاده‌ی مناسب از آن‌ها به بهبود تجربه کاربری و سئو وب‌سایت شما کمک می‌کند.

نتیجه‌گیری

در این مقاله، به بررسی جامع عناصر HTML و تگ‌های متنی آن پرداختیم که برای ساختاردهی و برجسته‌سازی محتوا در صفحات وب ضروری هستند. از تگ‌های ساختاری مانند عناوین و پاراگراف‌ها گرفته تا تگ‌های معنایی که به محتوای صفحه معنا و ارتباط بهتری می‌بخشند، هر کدام نقش مهمی در بهبود تجربه کاربری و سازماندهی اطلاعات ایفا می‌کنند. همچنین، تگ‌های متنی مانند <em>, <strong>, <mark> و <abbr> به ما این امکان را می‌دهند که متن‌ها را به‌طور دقیق‌تر و هدفمندتر به نمایش بگذاریم، تأکید کنیم و بخش‌های خاصی از محتوا را برجسته نماییم.

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

مقدمه‌ای بر HTML ▼

آموزش ویرایشگرهای HTML ▼

آموزش عناصر HTML ▼

آموزش ویژگی‌ها (Attributes) در HTML ▼

آموزش لینک‌ها و پیمایش در HTML ▼