خاصیت ID چیست؟ آیا میتوانیم از خاصیت ID در تمامی تگ های HTML استفاده کنیم؟ تفاوت ID ها با Class ها در html چیست؟ در این مقاله با ID ها آشنا می‌شویم و تفاوت آی دی با کلاس را بررسی میکنیم.
سرفصل‌های پست
خاصیت ID در HTML
در مقاله قبلی با کلاس ها آشنا شدیم و نحوه استفاده از آن‌ها را بررسی کردیم. در این مقاله می‌خواهیم در رابطه با آی دی ها صحبت کنیم.
با توجه به تعریف تعیین شده در w3c ، خاصیت ID یک شناسه یکتا برای تگ محسوب می شود. این خاصیت ساده کارایی بسیار زیادی در سطح وب دارد. از جمله کار هایی که می توان با خاصیت id انجام داد به شرح زیر هستند:
- انتخاب کننده Style Sheet : بیشترین استفاده خاصیت id در اینجا است. به خاطر یکتا بودن مقدار داخل id می توان مطمئن بود استایل تعریف شده فقط برای یک تگ خاص اعمال می شود. نقطه منفی استفاده از خاصیت id برای استایل این است که به اختصاصی سازی زیادی نیاز دارد. که این امر به خودی خود به زمان زیادی نیاز دارد و حتی در هنگام تغییر استایل برای یک تگ می تواند چالشی جدی باشد. به همین دلیل روش های جدید برپایه استفاده از کلاس ها برای تعیین استایل هستند. از id برای هدف های کلی تعیین استایل استفاده می شود.
- برای لینک دهی به بخش خاص صفحه: مرورگر های وب به شما اجازه می دهند تا به قسمت خاصی از صفحه وب با استفاده از شناسه تعیین شده برای یک تگ حرکت کنید. برای این کار شما به سادگی شناسه تگ مورد نظر را به انتهای URL صفحه اضافه می کنید. حالت دیگر این است که پس از نوشتن شناسه برای یک تگ، از تگ a استفاده کنید و در ابتدای مقدار href یک علامت # و سپس مقدار شناسه از پیش تعیین شده را بنویسید.
- مرجعی برای یک اسکریپت: در این حالت اگر شما در حال نوشتن توابع جاوا اسکریپت هستید، مطمئنا نیاز به اعمال تغییر در تگ های موجود در صفحه دارید. برای این امر کافیست یک شناسه یکتا برای تگ مورد نظر در نظر بگیرید و در اسکریپت از آن استفاده کنید.
- سایر فرآیند ها: خاصیت id به شما اجازه انعطاف پذیری بالایی در استفاده از تگ ها را می دهد. به عنوان مثال قصد دارید بخشی از محتوای صفحه وب را در یک دیتابیس ذخیره کنید. برای اینکار می توانید از مقدار های تعیین شده خاصیت آی دی برای شناسایی هر تگ استفاده کنید.
قوانین استفاده از خاصیت آی دی
برای مقدار دهی خاصیت id قوانینی وجود دارند که رعایت آن ها برای حفظ عملکرد صفحه وب ضروری است.
- مقدار id باید با حروف a-z یا A-Z آغاز شوند.
- کاراکتر های دنباله می توانند از حروف،اعداد و بعضی از علامت های خاص(-,_,:,.) باشند
- هر مقدار خاصیت آی دی در سراسر صفحه باید یکتا باشد.
بخش “ارتباط با ما” و خاصیت ID :
<p id="contact-section">ارتباط با ما میزفا </p>
برای پرش به بخش ارتباط با ما برای استایل دهی می توان از یکی از کد های زیر استفاده کرد
div#contact-section { background: #0cf;}
یا
#contact-section { background: #0cf;}
در مثال های بالا تفاوتی ندارد از کدام یک استفاده می کنید. در کد اول یک تگ div به عنوان هدف در نظر گرفته شده است. و در کد دوم همچنان تگ مورد نظر با شناسه “contact-section” مورد هدف است.
برای دسترسی به یک تگ از طریق جاوا اسکریپت، باید از تابع getElementById() استفاده کنید.
document.getElementById("contact-section")
همچنین برای اینکه بتوانیم از بخشی از صفحه به ارتباط با ما منتقل شویم، میتوانیم از آی دی ها استفاده کنیم که در مثال زیر نمونه را مشاهده می‌کنید:
<a href="#contact-section"> بخش تماس با ما </a>
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
با استفاده از صفت id به صورت خیلی خلاصه چه کار هایی میتوان انجام داد؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله به صورت کلی با مبحث ID ها آشنا شدیم، در نظر داشته باشید که اطلاعات بیشتری را در رابطه با آی دی ها و کلاس ها می‌توانید در مقاله آشنایی با کلاس ها و آیدی ها دوست عزیزم نوید معدن نژاد در دوره آموزش CSS بخوانید.
این مقاله هم به پایان رسید. اگر سوال، پیشنهاد یا انتقادی داشتید برامون حتما بنویسید تا بتونیم مقالات و خدمات بهتری را ارائه کنیم.
تا مقاله بعدی و آشنایی کامل با Attribute های HTML فعلا…
17 پاسخ
سلام
پاسخ سوال:
با صفت id می توانیم برای تگ یا تگ های مورد نظرمان یک شماره شناسایی اختصاصی همچون کد ملی اختصاص دهیم و با استفاده از آن، تغییرات و دستورات مدنظر را اختصاصا روی آن تگ اعمال کنیم ، مثل تغییر استایل یا آدرس دهی برای لینک شدن به تگ یا اعمال اسکریپت روی تگ مدنظرمان یا ذخیره بخش خاصی از صفحه درون پایگاه داده هایمان و سایر فرآیندهای ابتکاری
با استفاده از صفت id می توان کارهای زیر را انجام داد:
1-انتخاب کننده style sheet… برای استایل دهی
2- برای لینک دهی به بخشی از صفحه
3-مرجعی برای کدهای جاوا اسکریپت
سلام جواب سوال : از صفت آیدی میتونیم برای استایل دهی استفاده کنیم منتها مثل کلاس نیست که بشه برای چند تا تگ اعمالش کرد ینی اختصاصی تره بعد برای لینک دادن به بخشی از یک صفحه وب مثل قسمت کامنت ها و در جاوا اسکریپتم میشه ازش استفاده کرد که به عنوان ارجاع دهنده کار میکنه!
سلام فرهان. درست نوشتی و هدیه‌ات را به زودی برات فعال میکنیم.
پاسخ پایان ترم
صفت id یک صفت یکتا و منحصر بفرد است که لینک برای لینک دهی به صفحه است و کار های دیگری هم هست
سلام کیان درست گفتی. ممنونم.
خاصیت id به شما اجازه انعطاف پذیری بالایی در استفاده از تگ ها را می دهد
مرجع اسکریپت ها
برای لینک دهی به بخش خاص صفحه
سلکتور Style Sheet
سلام علی اکبر، بسیار عالی. ممنونم.
مرجع اسکریپت ها
برای لینک دهی به بخش خاص صفحه
سلکتور Style Sheet
سلام محمد، درسته و به زودی هدیه‌ات را در میزفا آکادمی دریافت می‌کنی.
لینکدهی به بخش خاص
برای لینک دهی به بخش خاص صفحه
سلکتور Style Sheet
سایر فرآیند ها
سلام و خسته نباشید خدمت شما
ابتدا بابت اموزش های مفیدتون تشکر میکنم
و دوم اینکه برای استفاده از class ابتدا باید css یاد بگیریم ؟
id چطور؟
سلام امیر جان، بله برای استفاده ازشون باید حداقل آشنایی با CSS داشته باشید.
البته که برای استفاده از id ها در مواردی که نیازی به استایل نباشه میتونید استفاده بکنید که لینک درون صفحه ایجاد کنید ولی باز من پیشنهاد میکنم، بعد از یادگیری HTML حتما برید سراغ CSS.
سلام و خدا قوت
ممنونم از سایت خوبتون
همه آموزشها خوبن و به ترتیب و نظم گفته شده ن، که این عالیه فقط تو این آموزش انگار یادتون رفته ، تفاوت کلاس و آی دی رو بگید، من حیلی کنجکاو بودم ببینم آخرش تفاوت آی دی با کلاس بالاخره چی شد ؟! 🙂 که دیدم کلا آموزش تموم شد 🙁 ممنون میشم تفاوتشو برا بقیه بذارید :)) موفق باشید باز هم سپاس و تشکر
سلام فرشته عزیز، مقاله آشنایی با کلاس ها و آی دی ها در CSS را مطالعه کن. نوید کامل توضیح داده برای همین دیگه من تکرارش نکردم.
با سلام و درود و تشکر…
ای کاش به مخاطب یه دورنمای خوب از آی دی ها میدادید بعد وارد جزئیات می شدید
یعنی اول تعریف دقیق و چند مثال کاربردی واضح می کردید که اصلا خود id ها چی هستند بعد کاربردشو بیان می کردید
مث بحث class ها…
البته این سطح توقع بالا رو خودتون به مخاطب الغا کردید چون مابقی آموزش ها بسیار مفید بوده
سلام سید کاظم عزیز، بله درسته، ما هم داریم تک تک از مقالات اولمون، مقالات رو بررسی میکنیم و این مقاله هم از سری مقالاتی هست که به زودی بروزرسانی میشه.