IT Nirmanওয়েব ডিজাইনার হওয়ার জন্য HTML শেখা আবশ্যক। আপনি যদি এইচটিএমএল না জানেন তবে কখনই দক্ষ ওয়েব ডিজাইনার হতে পারবেন না। এইচটিএমএল শিখতে হলে এইচটিএমএল এলিমেন্ট সম্পর্কে পূর্ণাঙ্গ জানতে হবে।
HTML এর উপর বেশ কিছু আর্টিকেল ইতোমধ্যেই প্রকাশ করেছি। আপনি যদি HTML শিখতে আগ্রহী থাকেন, তবে এই আর্টিকেলটিও আপনার জন্য খুবই গুরুত্বপূর্ণ।
আজ আমি HTML Element সম্পর্কে আপনাকে ধারণা দিতে দেবো। যারা নতুন ওয়েব ডিজাইন শিখছেন তারা মনোযোগ সহকারে আর্টিকেলটি পড়ুন।
Table of Contents
এইচটিএমএল এলিমেন্ট কি?
HTML প্রোগ্রামে ব্যবহৃত যে কোন ট্যাগ এবং মাঝের কন্টেন্টসহ সবকিছুকেই এলিমেন্ট (Element) বলে।
উদাহরণ স্বরূপঃ <h1> Simple text </h1> । এখানে Simple text হলো প্রথম হেডার (Header)। আর <h1> Simple text </h1> পুরো লেখাটাই একটি এলিমেন্ট।
HTML এর কোন ট্যাগের যখন পরিপূর্ণ ব্যবহার হয় তখন ঐ পুরো ট্যাগ এর ব্যবহারকে একটি এলিমেন্ট বলে।
HTML Element এর বৈশিষ্ট্য
✔ ওপেনিং (Opening) ট্যাগ দিয়ে শুরু হয়, এবং –
✔ ক্লোজিং (Closing) ট্যাগ দিয়ে শেষ হয়।
✔ Opening এবং Closing ট্যাগ এর মাঝে এলিমেনট কন্টেন্ট থাকে।
✔ এইচটিএমএল প্রোগ্রামে কিছু কিছু ট্যাগ বা এলিমেন্ট আছে, যে এলিমেন্ট গুলোর শেষ ট্যাগ নেই। যেমনঃ <br>, <img> ইত্যাদি। এগুলোর Closing ট্যাগ না থাকায় এই ধরণের ট্যাগকে Empty ট্যাগ বলা হয়।
- জানুনঃ এইচটিএমএল ট্যাগ কাকে বলে?
এইচটিএমএল নেন্টেড এলিমেন্ট
HTML ডকুমেন্টর তৈরির ক্ষেত্রে এইচটিএমএল এলিমেন্ট নেস্টেড হতে পারে। অর্থাৎ একটি এলিমেন্টের ভেতর আরেকটি এলিমেন্ট থাকতে পারে।
যে কোন ধরণের এইচটিএমএল ডকুমেন্টই নেস্টেড এলিমেন্ট দিতেই গঠিত হয়।
এইচটিএমএল পেজের একটি গুরুত্বপূর্ণ অংশ হলো <head> ট্যাগ বা <head> এলিমেন্ট। এই এলিমেন্টটি বিভিন্ন ধরণের নেস্টেড এলিমেন্ট বহন করে।
<head> …</head> এর মাঝে অর্থাৎ নেস্টেড এলিমেন্ট হিসেবে <title>, <link>, <meta> , <style> এর সকল গুরুত্বপূর্ণ ট্যাগসমূহ রাখা হয়।
এইচটিএমএল এলিমেন্ট (HTML Element) মূলত ওয়েবপেজের কাজে ব্যবহৃত হয়।
তাই এলিমেন্ট গুলোকে সুনিপুণ ভাবে বিন্যাসের মাধ্যমে এইচটিএমএল ডকুমেন্টের যাবতীয় তথ্য ব্রাউজারে প্রদর্শন করার পাশাপাশি সার্চ ইঞ্জিন অপটিমাইজেশনের মতো গুরুত্বপূর্ণ কাজও এলিমেন্টের মাধ্যমে সম্পাদন করা হয়।
গুরুত্বপূর্ণ কথাঃ
আপনি যখন কোন এইচটিএমএল ডকুমেন্ট নিয়ে কাজ করবেন, তখন ব্যবহারে আপনাকে বিশেষ দৃষ্টি রাখবে হবে। অর্থাৎ, এইচটিএমএল কোডিং করার সময় কোড ভুল লিখা যাবে না।
মনে করুন, এমন একটি এইচটিএমএল ট্যাগ কোড করছেন যেটার ওপেনিং এবং ক্লোজিং ট্যাগ রয়েছে। আপনি যদি ওপেনিং ট্যাগ দেওয়ার পর ক্লোজিং ট্যাগ দিতে ভুলে যান, তবে কিন্তু আপনার কাঙ্খিত এইচটিএমএল ডকুমেন্টটির ফলাফল ভুল আসবে।
তাই এই ধরণের অপ্রত্যাশিত ভুল এড়াতে বিশেষ দৃষ্টি দিয়ে কোডিং করতে হবে।
আবার এইচটিএমএল এর কোড লেখার ক্ষেত্রে সর্বদায় ছোট অক্ষর ব্যবহার করুন। যদিও এইচটিএমএল ট্যাগগুলোর কেস সেন্সিটিভ নয়।
তবে আপনাকে প্রফেশনাল মানের ওয়েব ডিজাইনার বা কোডিং এক্সপার্ট হওয়ার জন্য কোডিং এর স্ট্যান্ডার্ড রুলস ফলো করাটাই বেটার।
মনে করুন আপনি একটি প্যারাগ্রাফ ট্যাগ নিয়ে কাজ করছেনঃ কোড করতে গিয়ে <P> এবং </p> এভাবে লিখলেন, এটা যদিও এইচটিএমএল কোডিংয়ে কোন সমস্যা তৈরি করবে না, তবুও কিন্তু এভাবে বড় অক্ষর এবং ছোট অক্ষর মিশ্রণ করা বা শুধুই বড় অক্ষর দিয়ে কোডিং করা ঠিক না।
এইচটিএমএল ডকুমেন্ট তৈরির ক্ষেত্রে W3C কর্তৃক ছোটহাতের অক্ষর ব্যবহারের পরামর্শ দেয়। তাছাড়া XHTML-এর মত স্ট্রিক্ট ডকুমেন্টের জন্য ছোটহাতের অক্ষর (Lowercase letter) ব্যবহার করতে হয়।
যাইহোক, আমি আশা করছি আপনারা এই এইচটিএমএল এলিমেন্ট টিউটোরিয়ালটি বেশ উপভোগ করতে পেরেছেন। এই বিষয়ে যদি কোন প্রশ্ন থাকে তবে কমেন্ট করতে ভুলবেন না। সবাইকেই ধন্যবাদ।
Add comment