এইচটিএমএল এর প্রতিটি এলিমেন্ট ব্রাউজারকে এক একটা নির্দেশনা দেয় যে তার ভিতরে থাকা কনটেন্টকে কিভাবে প্রদর্শন করবে। যেমন <hr/> এলিমেন্ট ব্রাউজারকে বলে একটা আড়াআড়ি লাইন দেখাও। আবার <h1></h1> বলে একটা বড় ফন্টের শিরোনাম তৈরী কর ইত্যাদি।
অনেক এলিমেন্ট আছে যারা ব্রাউজারকে যেটা বলে সেটার সাথে আরো নতুন কিছু যোগ করে দেয়া যায়। এই যে একটা এলিমেন্টে নতুন তথ্য যোগ করলেন এটাকে সেই এলিমেন্টের এট্রিবিউট বলে। h1 এলিমেন্ট যখন ব্রাউজারকে বড় ফন্টের শিরোনাম প্রদর্শন করতে বলবে তখন এট্রিবিউট দিয়ে সেই শিরোনামটির রং কি হবে তাও বলে দিতে পারেন। যেমন
<h1 style="color:yellow;">HTML Attribute tutorial</h1>** এট্রিবিউট লেখার নিয়ম হচ্ছে প্রথমে এট্রিবিউটটির নাম এরপর সমান চিহ্ন (=) দিয়ে কোটেশনের (” বা ”) ভিতর এর মান। (সব ছোট হাতের অক্ষরে)
মুলত ৩ ধরনের এট্রিবিউট গ্রপ আছে যেগুলি একটা এলিমেন্টে থাকতে পারে। এর মধ্যে কোর এট্রিবিউট (core attribute) এর ব্যবহার সবচেয়ে বেশি দেখবেন।
id, class, title, style হল কোর এট্রিবিউট। এরপর থেকে পরের টিউটোরিয়ালগুলিতে এই এট্রিবিউটগুলিকে গ্লোবাল এট্রিবিউট বলা হবে। HTML 5 এ বেশকিছু নতুন এট্রিবিউট এসেছে যেমন contenteditable, contextmenu, draggable, dropzone ইত্যাদি নিয়ে পরে বিস্তারিত আলোচনা হবে। এখানে মনে রাখুন গ্লোবাল এট্রিবিউট কয়েকটি HTML এলিমেন্ট ছাড়া সব এলিমেন্টে ব্যবহার করা হয় বা যায়।
ইন্টারন্যাশলাইজেশান এট্রিবিউট হচ্ছে dir, lang এগুলি
এবং UI event এট্রিবিউট আছে যেমন onclick, ondoubleclick, onmouseout, onkeypress ইত্যাদি। এর থেকে সব টিউটোরিয়ালে এগুলিকে ইভেন্ট এট্রিবিউট বলা হবে। তবে একটা জিনিস মনে রাখুন যে ইভেন্ট এট্রিবিউটগুলি শুধু জাভাস্ক্রিপ্ট এর কাজ এর জন্য ব্যবহৃত হয়।
id, class দিয়ে এলিমেন্টের নাম দেয়া যায় পরে সেই নাম ধরে সিএসএস স্টাইলিং করা হয়। এগুলি সিএসএস টিউটোরিয়ালে আছে।
title এট্রিবিউট কোন এলিমেন্টের দিলে এটা দিয়ে টুলটিপ আকারে তথ্য প্রদর্শন করা যায় যেমন
<h2 title="Hello CodesTrickz">Bangladesh is a country of natural beauty</h2>Bangladesh is a country of natural beauty এর উপরে মাইস নিয়ে যান তাহলে “Hello CodesTrickz” লেখাটি টুলটিপ আকারে দেখতে পাবেন।
style এট্রিবিউটতো প্রথম উদাহরনেই দেখালাম, এখানে শুধু রং পরিবর্তন করেছি আপনি চাইলে আর অনেক সিএসএস প্রোপার্টিজ ব্যবহার করতে পারেন।