جزئیات عناصر HTML

html element details
20 آبان 1403

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

هر عنصر HTML از یک تگ شروع و یک تگ پایان (به جز برخی عناصر خاص مثل <br> یا <img>) تشکیل شده و معمولاً به یک متن یا عنصر دیگر محتوا می‌دهد. مثلاً عنصر <p> یک پاراگراف را نمایش می‌دهد.

در HTML، شما می‌توانید از ویژگی‌ها (Attributes) برای تعریف رفتار یا ظاهر عناصر استفاده کنید. مثلاً در یک عنصر <a> با استفاده از ویژگی href می‌توانید یک لینک به یک آدرس اینترنتی مشخص کنید.

علاوه بر این، HTML5 امکانات جدیدی مثل عناصر <article>، <section> و غیره اضافه کرده که به شما در ساختاردهی بهتر مطالب کمک می‌کند.

برای بهتر فهمیدن این عناصر، بریم سراغ یک مثال ساده که یک فرم تماس با استفاده از HTML ایجاد می‌کنه.

نمونه کد: ایجاد فرم تماس با HTML


<form action="/submit-form" method="post">
    <label for="name">اسم:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">ایمیل:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="message">پیام:</label>
    <textarea id="message" name="message" required></textarea>
    <br>
    <button type="submit">ارسال</button>
</form>

بخش به بخش کد:

<form>     برچسب <form> یک فرم وب جدید ایجاد می‌کنه و ویژگی action در اون نشون می‌ده که داده‌ها به کجا باید ارسال بشن.
<label>     برچسب <label> به کاربر اطلاعات بیشتری درباره ورودی ارائه می‌کنه و با استفاده از ویژگی for ورودی مربوطه را معرفی می کنه.
<input>     برچسب <input> برای انواع مختلف ورودی‌ها استفاده می‌شه، و ویژگی type نوع داده قابل ورود را تعیین می‌کنه (مثل text، email).
<textarea>     برچسب <textarea> برای ورود متن طولانی‌تر کاربرد داره و ویژگی name تعیین می‌کنه که چطور داده در پشت پرده ارسال بشه.
<button>     در نهایت، برچسب <button> امکان ارسال فرم را فراهم می‌کنه.

سوالات متداول

؟

چطور می‌توانم یک فرم با استفاده از HTML بسازم؟

؟

چطور می‌توانم عناصر HTML را استایل دهم؟

؟

آیا همه مرورگرها از عناصر HTML5 پشتیبانی می‌کنند؟