تگ ها و ویژگی ها در HTML | درس 5

درس 5 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

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

در این درس با مثال های قابل اجرا یاد می گیرید تگ آغازین و پایانی چگونه نوشته می شوند، محتوا در کدام بخش قرار می گیرد، ویژگی چه اطلاعاتی به عنصر اضافه می کند و مقدار ویژگی را چگونه داخل کوتیشن می نویسیم. اگر هنوز ساختار سند را تمرین نکرده اید، ابتدا درس 4: ساختار سند HTML و عناصر head و body را انجام دهید. زمان پیشنهادی این درس همراه تمرین حدود 50 تا 70 دقیقه است.

در پایان این درس چه چیزی یاد می گیرید؟

• تفاوت تگ، عنصر و ویژگی را با مثال توضیح می دهید.
• تگ آغازین، محتوا و تگ پایانی را تشخیص می دهید.
• ویژگی را با نام، علامت مساوی و مقدار داخل کوتیشن می نویسید.
• چند ویژگی را با فاصله در یک تگ قرار می دهید.
• ویژگی عمومی و ویژگی مخصوص یک عنصر را می شناسید.
• ویژگی Boolean مانند disabled را درست به کار می برید.
• خطاهای رایج تگ ها و ویژگی ها را پیدا می کنید.

تگ HTML چیست؟

تگ یک نشانه در کد HTML است که نام آن داخل علامت های کوچک تر و بزرگ تر قرار می گیرد. برای نمونه، تگ آغازین پاراگراف به شکل <p> و تگ پایانی آن به شکل </p> نوشته می شود. مرورگر با خواندن این نشانه ها می فهمد هر بخش از محتوا چه نقشی دارد.

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

در این مثال، <p> شروع پاراگراف و </p> پایان آن را مشخص می کند. اسلش در تگ پایانی نشان می دهد اثر عنصر در این نقطه تمام می شود.

عنصر HTML چیست و چه تفاوتی با تگ دارد؟

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

<p>یادگیری HTML از شناخت عناصر شروع می شود.</p>

• تگ آغازین: <p>
• محتوا: یادگیری HTML از شناخت عناصر شروع می شود.
• تگ پایانی: </p>
• عنصر کامل: مجموع سه بخش بالا

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

تگ آغازین و تگ پایانی چگونه نوشته می شوند؟

نام عنصر در تگ آغازین و پایانی باید یکسان باشد. تگ پایانی یک اسلش پیش از نام عنصر دارد. بهتر است نام تگ ها را با حروف کوچک انگلیسی بنویسید؛ این روش خوانایی و هماهنگی کد را بهتر می کند.

<h2>خدمات استودیو آفتاب</h2>
<p>ما سایت های شرکتی و فروشگاهی طراحی می کنیم.</p>
<strong>مشاوره اولیه رایگان است.</strong>

در نمونه بالا، h2 یک عنوان سطح دوم، p یک پاراگراف و strong متنی با اهمیت زیاد می سازد. در درس های بعدی کاربرد معنایی این عناصر را کامل تر بررسی می کنیم.

ویژگی HTML چیست؟

ویژگی یا Attribute اطلاعات بیشتری درباره یک عنصر ارائه می دهد یا رفتار آن را تنظیم می کند. ویژگی داخل تگ آغازین نوشته می شود و بخشی از محتوای قابل مشاهده عنصر نیست. نمونه زیر یک لینک با ویژگی href است:

<a href="https://example.com">مشاهده سایت نمونه</a>

• a نام عنصر است.
• href نام ویژگی است.
• https://example.com مقدار ویژگی است.
• متن «مشاهده سایت نمونه» محتوای عنصر است.

ویژگی href به مرورگر می گوید پس از کلیک روی لینک، کاربر باید به چه آدرسی برود. اگر href را حذف کنید، عنصر a مقصد مشخصی ندارد.

ساختار صحیح نوشتن ویژگی ها

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

<element attribute="value">Content</element>

می توانید برای مقدار ویژگی از کوتیشن دوتایی یا تکی استفاده کنید، اما در یک مقدار آن ها را مخلوط نکنید. در این دوره برای هماهنگی مثال ها از کوتیشن دوتایی استفاده می کنیم.

<p title="توضیح کوتاه درباره متن">
  نشانگر ماوس را روی این متن ببرید.
</p>

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

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

<a
  href="https://example.com"
  target="_blank"
  rel="noopener"
  title="باز کردن سایت نمونه"
>
  مشاهده سایت نمونه
</a>

href مقصد را تعیین می کند، target با مقدار _blank لینک را در تب جدید باز می کند، rel با مقدار noopener ارتباط ناخواسته میان صفحه جدید و مبدا را محدود می کند و title توضیح تکمیلی می دهد.

ویژگی عمومی و ویژگی مخصوص عنصر

بعضی ویژگی ها عمومی هستند و روی بسیاری از عناصر HTML قابل استفاده اند. class، id، title، lang و dir نمونه هایی از ویژگی های عمومی هستند. در مقابل، برخی ویژگی ها برای عناصر خاص معنا دارند؛ برای مثال href با عنصر a و src و alt با عنصر img استفاده می شوند.

<p class="intro" id="welcome-text">
  به دوره آموزش HTML و CSS خوش آمدید.
</p>

• class برای گروه بندی عناصر و انتخاب آن ها در CSS یا JavaScript کاربرد دارد.
• id یک شناسه برای عنصر تعریف می کند و در یک سند باید یکتا باشد.
• title اطلاعات تکمیلی می دهد، اما جای متن واضح را نمی گیرد.
• lang زبان محتوا و dir جهت پایه متن را مشخص می کند.

در بخش CSS دوره به شکل عملی از class و id استفاده خواهیم کرد. در پروژه واقعی نیز ساختار منظم class ها نگهداری صفحه را آسان تر می کند؛ موضوعی که هنگام ارزیابی کیفیت طراحی سایت وردپرس اهمیت دارد.

ویژگی Boolean چیست؟

بعضی ویژگی ها حالت روشن یا خاموش دارند. وجود ویژگی به معنی فعال بودن آن است و نبودن آن حالت غیرفعال را نشان می دهد. disabled یکی از نمونه های رایج است:

<input type="text" value="قابل ویرایش">
<input type="text" value="غیر قابل ویرایش" disabled>

ورودی دوم به دلیل وجود disabled غیرفعال است. نوشتن disabled="false" آن را فعال نمی کند؛ وجود خود ویژگی همچنان حالت disabled را روشن نگه می دارد. برای فعال کردن ورودی باید ویژگی حذف شود.

عناصر بدون تگ پایانی

همه عناصر از الگوی تگ آغازین، محتوا و تگ پایانی پیروی نمی کنند. بعضی عناصر نمی توانند محتوای داخلی داشته باشند و Void Element نامیده می شوند. img، br، hr، input، meta و link از این گروه هستند.

<img src="images/team.jpg" alt="اعضای تیم استودیو آفتاب">
<br>
<input type="email" name="email">

برای این عناصر تگ پایانی جداگانه ننویسید. در HTML نوشتن اسلش پیش از علامت پایانی، مانند <br />، ضروری نیست.

تو در تو نوشتن عناصر

یک عنصر می تواند داخل عنصر دیگر قرار بگیرد. در این حالت باید عنصری را که آخر باز کرده اید، زودتر ببندید. ساختار زیر درست است:

<p>
  برای دیدن خدمات، <a href="services.html"><strong>این لینک</strong></a> را باز کنید.
</p>

ابتدا p، سپس a و بعد strong باز شده اند. بنابراین ابتدا strong، سپس a و در پایان p بسته می شوند. تگ ها نباید روی یکدیگر هم پوشانی نامنظم داشته باشند.

پروژه عملی: کارت معرفی ساده بسازید

1. پوشه lesson-04 را کپی کنید و نام نسخه جدید را lesson-05 بگذارید.
2. ساختار کامل سند درس قبل را حفظ کنید.
3. داخل main یک section با class برابر profile-card بسازید.
4. داخل آن یک عنوان، پاراگراف و لینک قرار دهید.
5. برای لینک href، target، rel و title بنویسید.
6. یک ورودی غیرفعال برای مشاهده ویژگی Boolean اضافه کنید.
7. فایل را ذخیره کنید و نتیجه را در مرورگر ببینید.

<main>
  <section class="profile-card" id="studio-profile">
    <h1>استودیو آفتاب</h1>
    <p title="معرفی کوتاه استودیو">
      ما برای کسب و کار های محلی وب سایت طراحی می کنیم.
    </p>
    <a
      href="https://example.com"
      target="_blank"
      rel="noopener"
    >
      مشاهده نمونه کار
    </a>
    <input type="text" value="ثبت نام به زودی" disabled>
  </section>
</main>

در این مرحله class ظاهر خاصی ایجاد نمی کند، چون هنوز قانون CSS مربوط به آن را ننوشته ایم. هدف فعلی شناخت ساختار و ویژگی ها است.

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

پس از ذخیره فایل، صفحه را تازه سازی کنید. عنوان، پاراگراف، لینک و ورودی غیرفعال باید دیده شوند. روی لینک کلیک کنید و باز شدن تب جدید را بررسی کنید. سپس با Inspect مرورگر عنصر a را انتخاب کنید و ویژگی های آن را در بخش Elements ببینید.

اگر تغییرات نمایش داده نمی شوند، مطمئن شوید همان فایل index.html را ویرایش کرده اید. مسیر فایل و نام پوشه پروژه را بررسی کنید. مراحل ساخت پوشه و باز کردن فایل را در درس 3 ساختار پوشه ها تمرین کرده ایم.

اشتباه های رایج در تگ ها و ویژگی ها

• تگ پایانی اسلش ندارد: به جای <p> در پایان از </p> استفاده کنید.
• نام تگ آغازین و پایانی متفاوت است: هر دو نام را مقایسه کنید.
• ویژگی خارج از تگ آغازین نوشته شده است: ویژگی باید پیش از علامت بزرگ تر قرار بگیرد.
• میان نام عنصر و ویژگی فاصله نیست: پس از نام عنصر یک فاصله بنویسید.
• علامت مساوی حذف شده است: ویژگی عادی را به شکل name="value" بنویسید.
• کوتیشن ها هماهنگ نیستند: مقدار را با یک نوع کوتیشن باز و بسته کنید.
• چند ویژگی بدون فاصله نوشته شده اند: ویژگی ها را با فاصله جدا کنید.
• تگ ها روی یکدیگر افتاده اند: آخرین عنصر باز شده را زودتر ببندید.
• برای عنصر Void تگ پایانی ساخته شده است: ساختار مخصوص آن عنصر را بررسی کنید.
• id تکراری است: هر id را در سند فقط برای یک عنصر به کار ببرید.

تمرین درس 5: لینک معرفی یک خدمت

داخل فایل lesson-05 یک پاراگراف بنویسید که عبارت «طراحی سایت در ارومیه» را به صفحه خدمات ارومیا دیزاین متصل کند. لینک باید در تب جدید باز شود، rel مناسب داشته باشد و title کوتاهی نیز داشته باشد. سپس یک input غیرفعال با مقدار «ظرفیت این هفته تکمیل است» اضافه کنید. ابتدا بدون دیدن پاسخ تلاش کنید.

<p>
  برای آشنایی با خدمات ما،
  <a
    href="https://urmiadesign.ir/website/"
    target="_blank"
    rel="noopener"
    title="خدمات طراحی سایت ارومیا دیزاین"
  >
    طراحی سایت در ارومیه
  </a>
  را ببینید.
</p>

<input
  type="text"
  value="ظرفیت این هفته تکمیل است"
  disabled
>

ارتباط این درس با پروژه نهایی

در پروژه نهایی سایت شرکتی، هر بخش با عناصر HTML ساخته می شود و ویژگی ها اطلاعات لازم را به عناصر می دهند. لینک های منو مقصد خود را از href می گیرند، تصویرها با src و alt تعریف می شوند، فرم ها از type و name استفاده می کنند و class ها امکان طراحی ظاهر با CSS را فراهم می سازند.

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

این دوره از HTML و CSS شروع می شود و در ادامه به JavaScript، PHP و مباحث عملی تر طراحی و برنامه نویسی وب می رسد. صفحه آموزش و خدمات طراحی سایت در ارومیه مسیر کلی یادگیری و اجرای پروژه را نشان می دهد.

پرسش های متداول تگ ها و ویژگی های HTML

تگ و عنصر HTML یک چیز هستند؟

خیر. تگ نشانه آغاز یا پایان است، اما عنصر معمولا تگ آغازین، محتوا و تگ پایانی را شامل می شود.

ویژگی را داخل تگ پایانی بنویسیم؟

خیر. ویژگی ها داخل تگ آغازین نوشته می شوند. تگ پایانی معمولا فقط اسلش و نام عنصر را دارد.

آیا مقدار ویژگی همیشه باید داخل کوتیشن باشد؟

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

تفاوت class و id چیست؟

class می تواند میان چند عنصر مشترک باشد، اما id باید در همان سند یکتا باشد. هر دو در CSS و JavaScript کاربرد دارند.

آیا ترتیب ویژگی ها مهم است؟

برای بیشتر ویژگی ها ترتیب نتیجه را تغییر نمی دهد. داشتن یک ترتیب ثابت فقط خواندن و نگهداری کد را آسان تر می کند.

چرا disabled بدون مقدار کار می کند؟

disabled یک ویژگی Boolean است. وجود آن حالت غیرفعال را روشن می کند و حذف آن این حالت را بر می دارد.

چک لیست پایان درس

• تگ آغازین و پایانی را از هم تشخیص می دهم.
• تفاوت تگ و عنصر را می دانم.
• ویژگی را داخل تگ آغازین می نویسم.
• نام، مساوی و مقدار ویژگی را درست قرار می دهم.
• مقدار ویژگی را داخل کوتیشن هماهنگ می نویسم.
• چند ویژگی را با فاصله از هم جدا می کنم.
• ویژگی Boolean را از ویژگی معمولی تشخیص می دهم.
• عناصر تو در تو را با ترتیب درست می بندم.
• کد تمرین را در مرورگر و Inspect بررسی کرده ام.

درس قبلی: ساختار سند HTML و عناصر head و body

درس بعد: عنوان ها و پاراگراف ها در HTML

اگر از ابتدای مسیر همراه نشده اید، از درس 1: وب چگونه کار می کند؟ شروع کنید یا تنظیم ویرایشگر را در درس 2 دوره HTML و CSS مرور کنید.