আসসালামু আলাইকুম। HTML টিউটোরিয়ালের তৃতীয় পর্বে আপনাদের সবাইকে স্বাগতম। আগের দুটি পর্বে আমরা ওয়েব ডেভেলপমেন্টের প্রাথমিক ধারণা এবং একটি HTML ফাইলের মৌলিক গঠন বা স্ট্রাকচার কীভাবে তৈরি করতে হয়, তা খুব সহজভাবে শিখেছি। আমরা দেখেছি কীভাবে কোড এডিটর সেটআপ করতে হয় এবং ব্রাউজারে প্রথম কোড রান করতে হয়। আশা করি আপনারা সেই বিষয়গুলো খুব ভালোভাবে বুঝতে পেরেছেন এবং নিজের কম্পিউটারে প্র্যাকটিস করেছেন।
আপনারা যারা আগের পর্ব গুলি দেখেননি,তারা নিচের লিংক থেকে দেখে নিন।
HTML Tutorial Bangla পর্ব ০১ | HTML Introduction বিস্তারিত শিখুন
HTML Tutorial Bangla পর্ব ০২ – HTML Basic Examples (সহজ বাংলা গাইড)
আজকের পর্বে আমরা HTML-এর সবচেয়ে গুরুত্বপূর্ণ দুটি স্তম্ভ নিয়ে আলোচনা করব। এই দুটি বিষয় হলো HTML Elements এবং HTML Attributes। আপনি যদি একটি ওয়েবসাইটকে একটি পূর্ণাঙ্গ বাড়ি হিসেবে কল্পনা করেন, তবে এই এলিমেন্ট এবং অ্যাট্রিবিউটস হলো সেই বাড়ির ইঁট, পাথর, দরজা এবং জানালার বৈশিষ্ট্য। এগুলো ছাড়া কোনো ওয়েব পেজ তৈরি করা অসম্ভব। তাই একজন প্রফেশনাল ফ্রন্টএন্ড ওয়েব ডেভেলপার হতে হলে এবং সার্চ ইঞ্জিনের ফ্রেন্ডলি (SEO) কোড লিখতে হলে এই দুটি বিষয় খুব গভীরভাবে বোঝা জরুরি। চলুন একদম নতুনদের মতো করে ধাপে ধাপে সহজ ভাষায় আজকের ক্লাসটি শুরু করি।
HTML Element কী?
সহজ ভাষায় বলতে গেলে, একটি HTML ফাইলে আমরা যা কিছু লিখি এবং যা ব্রাউজারকে নির্দেশ দেয় যে ভেতরের লেখা বা কনটেন্টটি কীভাবে স্ক্রিনে দেখাতে হবে, তার সম্পূর্ণ গঠনকেই HTML Element বলা হয়। অর্থাৎ, একটি এলিমেন্ট হলো শুরু থেকে শেষ পর্যন্ত পুরো একটি অংশ যা ব্রাউজারে কন্টেন্ট ফুটিয়ে তোলে।
বাস্তব একটি উদাহরণ দেওয়া যাক। মনে করুন, আপনি খাতায় একটি সাধারণ প্যারাগ্রাফ লিখতে চান। এর জন্য আপনি একটি নতুন লাইন শুরু করেন এবং লেখা শেষ হলে দাড়ি বা ফুলস্টপ দিয়ে শেষ করেন। HTML-এর ক্ষেত্রেও ঠিক একই নিয়ম। ব্রাউজারকে বোঝানোর জন্য যে এটি একটি প্যারাগ্রাফ, আমাদের একটি নির্দিষ্ট নিয়ম মেনে শুরু এবং শেষ করতে হয়। এই শুরু, মাঝের লেখা এবং শেষ—সবকিছু মিলিয়েই তৈরি হয় একটি এলিমেন্ট।
মনে রাখবেন: HTML Element হলো সম্পূর্ণ গঠন, আর HTML Tag হলো সেই গঠনের একটি অংশ। নতুনরা প্রায়ই ট্যাগ এবং এলিমেন্টকে একই মনে করে ভুল করেন, যা মোটেও সঠিক নয়।
HTML Tag এবং HTML Element-এর পার্থক্য
এই বিষয়টি পরিষ্কার হওয়া অত্যন্ত জরুরি। ট্যাগ (Tag) হলো কেবল সেই সংকেত বা কোড যা কৌণিক ব্র্যাকেটের (যেমন p বা /p) ভেতরে থাকে। আর এলিমেন্ট হলো সেই ট্যাগসহ ভেতরের সম্পূর্ণ কনটেন্ট। উদাহরণস্বরূপ, p হলো একটি শুরুর ট্যাগ (Opening Tag), এবং /p হলো একটি শেষের ট্যাগ (Closing Tag)। কিন্তু এই দুটি ট্যাগের মাঝখানে যখন আমরা কোনো লেখা বসাই, তখন সেই ট্যাগ এবং লেখা মিলিয়ে সম্পূর্ণ অংশটিকে একত্রে একটি HTML Element বলা হয়।
HTML Element Structure (গঠন)
একটি আদর্শ HTML এলিমেন্ট কীভাবে গঠিত হয়, তা বুঝতে নিচের উদাহরণটি লক্ষ্য করুন। এখানে ওয়ার্ডপ্রেস ক্লাসিক এডিটরে কোড যেন সরাসরি রান না হয়ে টেক্সট হিসেবে দেখায়, সেজন্য আমরা নির্দিষ্ট এনকোডিং ফরম্যাট ব্যবহার করছি:
<p>আমি HTML শিখছি।</p>
এই ছোট্ট কোডের অংশটিকে আমরা যদি ব্যবচ্ছেদ করি, তবে এর তিনটি প্রধান অংশ দেখতে পাব:
- Opening Tag (শুরুর ট্যাগ): এখানে p হলো ওপেনিং ট্যাগ। এটি লেস-দ্যান এবং গ্রেটার-দ্যান চিহ্নের ভেতরে নির্দিষ্ট অক্ষরের মাধ্যমে ব্রাউজারকে বলে যে এখান থেকে একটি প্যারাগ্রাফ এলিমেন্ট শুরু হলো।
- Content (মূল বিষয়বস্তু): ট্যাগের মাঝখানে থাকা “আমি HTML শিখছি।” লেখাটি হলো কনটেন্ট। এটিই মূলত ভিজিটররা ওয়েবসাইটে দেখতে পান।
- Closing Tag (শেষের ট্যাগ): এখানে /p হলো ক্লোজিং ট্যাগ। ওপেনিং ট্যাগের মতোই দেখতে হলেও এর শুরুতে একটি ফরওয়ার্ড স্ল্যাশ (/) থাকে। এটি ব্রাউজারকে জানায় যে এলিমেন্টটির সমাপ্তি এখানেই।
যখন এই তিনটি অংশ সুনির্দিষ্ট নিয়মে একসাথে যুক্ত হয়, তখনই একটি সম্পূর্ণ HTML Element তৈরি হয়। ব্রাউজার এই পুরো স্ট্রাকচারটি ব্যাকএন্ডে পড়ে এবং স্ক্রিনে শুধু মাঝের কনটেন্টটুকু ফুটিয়ে তোলে।
HTML Nested Elements (নেস্টেড এলিমেন্ট)
Nested শব্দটির অর্থ হলো একটার ভেতরে আরেকটা। যখন একটি HTML এলিমেন্টের ভেতরে অন্য এক বা একাধিক HTML এলিমেন্ট রাখা হয়, তখন তাকে Nested Element বলা হয়। বাস্তব জীবনে যেমন একটি বড় বক্সের ভেতরে ছোট ছোট বক্স রাখা যায়, ঠিক তেমনি HTML-এও একটি বড় এলিমেন্টের ভেতরে ছোট এলিমেন্ট রাখা অত্যন্ত সাধারণ একটি বিষয়। পুরো ওয়েবসাইটের লেআউট মূলত এই নেস্টেড পদ্ধতির ওপর ভিত্তি করেই তৈরি হয়।
নিচের উদাহরণটি মনোযোগ দিয়ে দেখুন:
<p>আমি <strong>HTML</strong> শিখছি।</p>
চলুন এই কোডটি লাইন বাই লাইন এবং অংশ ধরে ব্যাখ্যা করি:
- এখানে মূল বা প্যারেন্ট এলিমেন্ট হলো প্যারাগ্রাফ ট্যাগ বা p।
- এই প্যারাগ্রাফের ভেতরে “আমি” লেখার পর আমরা আরেকটি নতুন এলিমেন্ট যোগ করেছি, যা হলো strong।
- strong ট্যাগটি ব্যবহার করা হয় কোনো লেখাকে বোল্ড বা মোটা করে দেখানোর জন্য এবং এটি সার্চ ইঞ্জিনের কাছে লেখার গুরুত্ব বাড়ায়।
- এখানে “HTML” শব্দটি strong এবং /strong ট্যাগের ভেতরে রয়েছে, যার মানে এটি একটি চাইল্ড এলিমেন্ট হিসেবে কাজ করছে।
- সবশেষে মূল প্যারাগ্রাফ ট্যাগটি /p দিয়ে বন্ধ করা হয়েছে।
ব্রাউজার যখন এই কোডটি রান করবে, তখন সে পুরো লাইনটি প্যারাগ্রাফ হিসেবে দেখাবে, তবে “HTML” শব্দটিকে আলাদাভাবে গাঢ় বা মোটা অক্ষরে প্রদর্শন করবে। নেস্টেড এলিমেন্ট ব্যবহারের সময় মনে রাখতে হবে, যে ট্যাগটি সবার পরে শুরু হয়েছে, সেটি সবার আগে বন্ধ করতে হবে।
Empty HTML Elements (খালি এলিমেন্ট)
সব HTML এলিমেন্টের কিন্তু শুরু এবং শেষ থাকে না। কিছু এলিমেন্ট আছে যাদের কোনো ভেতরের কনটেন্ট বা লেখা থাকে না এবং এদের কোনো ক্লোজিং ট্যাগও প্রয়োজন হয় না। এই ধরনের এলিমেন্টগুলোকে বলা হয় Empty Elements বা Void Elements।
যেহেতু এদের কোনো কনটেন্ট থাকে না, তাই এদের বন্ধ করার জন্য আলাদা করে কোনো স্ল্যাশ ট্যাগ লিখতে হয় না। নিচে কয়েকটি বহুল ব্যবহৃত Empty Element-এর বাস্তব ব্যবহার আলোচনা করা হলো:
১. br Tag (Line Break)
এই ট্যাগটি ব্যবহার করা হয় টেক্সটের মধ্যে একটি নতুন লাইন তৈরি করার জন্য। আমরা যখন সাধারণ লেখায় এন্টার প্রেস করে নিচের লাইনে যাই, HTML কোডে কিন্তু তা কাজ করে না। কোডে নতুন লাইনে যাওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।
হ্যালো ঢাকা।<br>হ্যালো বাংলাদেশ।
২. hr Tag (Horizontal Rule)
এই ট্যাগের মাধ্যমে ওয়েব পেজে একটি আনুভূমিক বা সোজা দাগ টানা হয়। সাধারণত একটি বিষয়ের আলোচনা শেষ করে অন্য বিষয়ে যাওয়ার সময় ভিজ্যুয়াল বিভক্তি তৈরি করতে এটি ব্যবহার করা হয়।
<h3>প্রথম অধ্যায়</h3><p>এখানে প্রথম অধ্যায়ের আলোচনা রয়েছে।</p><hr><h3>দ্বিতীয় অধ্যায়</h3>
৩. img Tag (Image Element)
ওয়েব পেজে কোনো ছবি প্রদর্শন করার জন্য এই ট্যাগ ব্যবহৃত হয়। ছবির কোনো নিজস্ব টেক্সট কনটেন্ট হয় না, বরং ছবির সোর্স বা লিংকটি এর ভেতরেই দিয়ে দিতে হয়, তাই এর কোনো ক্লোজিং ট্যাগের দরকার নেই।
<img src="image.jpg" alt="সুন্দর দৃশ্য">
HTML Attributes কী?
এতক্ষণ আমরা এলিমেন্ট সম্পর্কে জানলাম। এবার জানা যাক Attributes সম্পর্কে। সহজ ভাষায় বলতে গেলে, HTML Attributes হলো এলিমেন্টের কিছু অতিরিক্ত তথ্য বা বৈশিষ্ট্য প্রকাশের মাধ্যম। একটি এলিমেন্ট কীভাবে কাজ করবে বা ব্রাউজারে কীভাবে প্রদর্শিত হবে, তা নিয়ন্ত্রণ করার জন্য অ্যাট্রিবিউট ব্যবহার করা হয়।
বাস্তব উদাহরণ দিলে বিষয়টি পানির মতো সহজ হয়ে যাবে। মনে করুন, “মানুষ” হলো একটি HTML Element। এখন এই মানুষের চোখ কালো হতে পারে, উচ্চতা ৫ ফুট ১০ ইঞ্চি হতে পারে, কিংবা গায়ের রঙ ফর্সা হতে পারে। এই যে চোখ, উচ্চতা বা গায়ের রঙ—এগুলো হলো মানুষের অতিরিক্ত বৈশিষ্ট্য বা Attributes। ঠিক একইভাবে একটি HTML ট্যাগের অতিরিক্ত বৈশিষ্ট্য নির্ধারণ করতে আমরা কোডে অ্যাট্রিবিউট ব্যবহার করি।
মনে রাখবেন: সমস্ত HTML Attributes সবসময় এলিমেন্টের Opening Tag (শুরুর ট্যাগ)-এর ভেতরে লিখতে হয়। এগুলো কখনো Closing Tag-এ ব্যবহার করা যায় না।
অ্যাট্রিবিউটের সাধারণ সিনট্যাক্স বা লেখার নিয়ম হলো প্রথমে অ্যাট্রিবিউটের নাম লিখতে হয়, তারপর একটি সমান চিহ্ন (=) দিয়ে ডাবল কোটেশনের মধ্যে তার মান বা ভ্যালু লিখে দিতে হয়। যেমন: class=”value”।
HTML Attribute Structure (গঠন)
একটি প্রফেশনাল উদাহরণ দিয়ে অ্যাট্রিবিউটের গঠনটি বুঝে নেওয়া যাক:
<a href="https://example.com">Visit Website</a>
এখানে a ট্যাগটি একটি হাইপারলিংক তৈরি করার জন্য ব্যবহার করা হয়েছে। চলুন এর ভেতরকার উপাদানগুলো বিশদভাবে জানি:
- href Attribute: এখানে href (Hypertext Reference) হলো অ্যাট্রিবিউটের নাম। এটি ব্রাউজারকে নির্দেশ করে যে ব্যবহারকারী এই লিংকে ক্লিক করলে তাকে কোন ওয়েবসাইটে নিয়ে যাওয়া হবে।
- Value (মান): “https://example.com” হলো সেই নির্দিষ্ট ওয়েবসাইটের ঠিকানা বা ভ্যালু, যা সমান চিহ্নের পর ডাবল কোটের ভেতর সুরক্ষিতভাবে বসানো হয়েছে।
- Opening Tag-এর অবস্থান: লক্ষ্য করুন, সম্পূর্ণ href=”https://example.com” অংশটি কিন্তু a ট্যাগের শুরুতেই বসেছে, কোনোভাবেই লিংকের শেষে বা বাইরে নয়। এর ফলে ব্রাউজার সহজেই বুঝতে পারে যে “Visit Website” লেখাটিতে ক্লিক করলে কোন লিংকে রিডাইরেক্ট করতে হবে।
Common HTML Attributes (বহুল ব্যবহৃত অ্যাট্রিবিউটস)
ওয়েব ডেভেলপমেন্টে প্রতিদিন আমাদের অসংখ্য অ্যাট্রিবিউট ব্যবহার করতে হয়। নিচে এমন কিছু গুরুত্বপূর্ণ এবং কমন অ্যাট্রিবিউট নিয়ে বিস্তারিত আলোচনা করা হলো যা আপনার নিয়মিত প্রয়োজন হবে:
১. id
একটি নির্দিষ্ট এলিমেন্টকে ইউনিক বা অনন্য চেনার জন্য এটি ব্যবহৃত হয়। একটি পেজে একটি নাম দিয়ে কেবল একটিই আইডি থাকতে পারে। এটি সিএসএস স্টাইলিং এবং জাভাস্ক্রিপ্টে এলিমেন্ট ধরতে বেশি ব্যবহৃত হয়।
<p id="main-header">এটি আমাদের প্রধান অনুচ্ছেদ।</p>
২. class
আইডির মতোই এটিও এলিমেন্টকে আইডেন্টিফাই করে, তবে একটি ক্লাস নাম আপনি একটি পেজের একাধিক এলিমেন্টে ব্যবহার করতে পারবেন। সিএসএস দিয়ে একসাথে অনেকগুলো এলিমেন্টের ডিজাইন পরিবর্তন করার জন্য এটি সেরা মাধ্যম।
<p class="text-blue">প্রথম নীল লেখা।</p><p class="text-blue">দ্বিতীয় নীল লেখা।</p>
৩. style
কোনো এলিমেন্টের সরাসরি ভেতরেই সিএসএস কোড লিখে তার রঙ, ফন্ট, সাইজ ইত্যাদি ডিজাইন করার জন্য ইনলাইন স্টাইল হিসেবে এটি ব্যবহৃত হয়।
<p style="color: red; font-size: 20px;">এটি একটি লাল রঙের বড় লেখা।</p>
৪. title
এই অ্যাট্রিবিউটটি এলিমেন্ট সম্পর্কে একটি টুলটিপ বা অতিরিক্ত তথ্য দেখায়। ব্যবহারকারী যখন মাউসের কার্সার ওই এলিমেন্টের ওপর নিয়ে যান, তখন একটি ছোট বক্সে এই লেখাটি ভেসে ওঠে।
<p title="টিউটোরিয়াল পর্ব ৩">মাউস এখানে আনুন।</p>
৫. href
লিংক তৈরি করার ট্যাগে গন্তব্যস্থলের ঠিকানা যুক্ত করতে এটি ব্যবহৃত হয়, যা আমরা একটু আগেই বিস্তারিত দেখেছি।
<a href="https://www.google.com">গুগল সার্চ</a>
৬. src
img বা ছবির ট্যাগে ছবির সঠিক উৎস বা পাথ (Path) দেখিয়ে দেওয়ার জন্য এটি ব্যবহার করা বাধ্যতামূলক।
<img src="logo.png" alt="কোম্পানি লোগো">
৭. alt
এর পূর্ণরূপ হলো Alternative Text। যদি কোনো কারণে (যেমন স্লো ইন্টারনেট) ব্রাউজারে ছবিটি লোড না হয়, তবে এই টেক্সটটি সেখানে প্রদর্শিত হবে। তাছাড়া এটি এসইও (SEO) এবং দৃষ্টি প্রতিবন্ধীদের স্ক্রিন রিডারের জন্য অত্যন্ত গুরুত্বপূর্ণ।
<img src="cat.jpg" alt="একটি সাদা বিড়াল ঘুমাচ্ছে">
৮. width এবং height
ছবি বা ভিডিও এলিমেন্টের চওড়া (Width) এবং উচ্চতা (Height) পিক্সেলে নির্ধারণ করে দেওয়ার জন্য এই দুটি অ্যাট্রিবিউট ব্যবহার করা হয়।
<img src="banner.jpg" width="500" height="300" alt="ব্যানার ছবি">
৯. target
একটি লিংকে ক্লিক করলে সেটি একই ট্যাবে খুলবে নাকি নতুন কোনো ট্যাবে খুলবে, তা নির্ধারণ করা হয় এই অ্যাট্রিবিউটের মাধ্যমে। নতুন ট্যাবে খুলতে চাইলে ভ্যালু হিসেবে _blank দিতে হয়।
<a href="https://example.com" target="_blank">নতুন ট্যাবে খুলুন</a>
১০. lang
পুরো ওয়েব পেজটি বা কোনো নির্দিষ্ট এলিমেন্টটি কোন ভাষায় লেখা, তা ব্রাউজার এবং সার্চ ইঞ্জিনকে জানানোর জন্য এটি ব্যবহৃত হয়। এটি সাধারণত html ট্যাগে ব্যবহার করা হয়।
<html lang="bn">
Global Attributes
HTML-এ কিছু কিছু অ্যাট্রিবিউট আছে যা নির্দিষ্ট কিছু ট্যাগের জন্য সংরক্ষিত (যেমন src শুধু ইমেজ বা ভিডিওতে কাজ করে)। কিন্তু এমন কিছু অ্যাট্রিবিউট আছে যা পৃথিবীর যেকোনো HTML ট্যাগের ভেতরেই ব্যবহার করা যায়। এদেরকে বলা হয় Global Attributes।
গ্লোবাল অ্যাট্রিবিউটগুলো অত্যন্ত গুরুত্বপূর্ণ কারণ এগুলো কোডের সার্বিক সামঞ্জস্য বজায় রাখে। যেমন—id, class, style, title, lang, dir (লেখার দিক যেমন ডান থেকে বাম বা বাম থেকে ডান) ইত্যাদি হলো গ্লোবাল অ্যাট্রিবিউটের চমৎকার উদাহরণ। আপনি চাইলে একটি প্যারাগ্রাফেও আইডি দিতে পারেন, আবার একটি ইমেজে বা টেবিল ট্যাগেও আইডি দিতে পারেন। এটি কোডকে অনেক বেশি ফ্লেক্সিবল করে তোলে।
Boolean Attributes
কিছু অ্যাট্রিবিউট এমন রয়েছে যাদের কোনো নির্দিষ্ট ভ্যালু বা মানের প্রয়োজন হয় না। এদের উপস্থিতি বা অনুপস্থিতিই ব্রাউজারের কাছে একটি বিশেষ অর্থ বহন করে। এদেরকে Boolean Attributes বলা হয়। যদি ট্যাগটির ভেতরে অ্যাট্রিবিউটের নামটি শুধু লিখে দেওয়া হয়, তবে ব্রাউজার ধরে নেয় এর মান “True” বা সত্য।
নিচে ৫টি প্রধান বুনিয়ান অ্যাট্রিবিউটের বাস্তব ব্যবহার দেখানো হলো:
- disabled: এটি কোনো ইনপুট ফিল্ড বা বাটনকে অকার্যকর বা নিষ্ক্রিয় করে দেয় যাতে ব্যবহারকারী সেখানে ক্লিক বা টাইপ করতে না পারেন।
<button disabled>সাবমিট করুন</button> - checked: ফরম লোড হওয়ার সাথে সাথেই কোনো রেডিও বাটন বা চেকবক্সকে স্বয়ংক্রিয়ভাবে টিক চিহ্ন যুক্ত বা সিলেক্টেড রাখতে এটি ব্যবহৃত হয়।
<input type="checkbox" checked> আমি শর্তাবলীতে রাজি। - selected: ড্রপডাউন মেনুর কোনো একটি নির্দিষ্ট অপশনকে আগে থেকেই সিলেক্ট করে রাখার জন্য এটি ড্রপডাউনের ভেতর ব্যবহার করা হয়।
<option selected>বাংলাদেশ</option> - required: ফরম সাবমিট করার আগে ব্যবহারকারীকে অবশ্যই ওই ঘরটি পূরণ করতে বাধ্য করার জন্য এটি ব্যবহৃত হয়। ঘরটি খালি রাখলে ফরম সাবমিট হবে না।
<input type="email" required> - readonly: এটি কোনো ইনপুট ফিল্ডের লেখাকে শুধু পড়ার উপযোগী করে তোলে。 ব্যবহারকারী ভেতরের লেখা দেখতে পাবেন, কিন্তু কোনো পরিবর্তন বা এডিট করতে পারবেন না।
<input type="text" value="SAMIM100" readonly>
Attribute Values: Quoting Rules
অ্যাট্রিবিউটের মান বা ভ্যালু লেখার সময় কোটেশন মার্ক বা উদ্ধৃতি চিহ্নের ব্যবহার নিয়ে নতুনদের মনে অনেক প্রশ্ন থাকে। চলুন প্রফেশনাল নিয়মটি জেনে নিই:
Double Quote vs Single Quote
HTML-এ অ্যাট্রিবিউটের ভ্যালুর দুপাশে ডাবল কোটেশন (“”) ব্যবহার করা সবচেয়ে সাধারণ এবং স্ট্যান্ডার্ড নিয়ম। তবে আপনি চাইলে সিঙ্গেল কোটেশনও (”) ব্যবহার করতে পারেন, ব্রাউজার দুটিকেই সমানভাবে গ্রহণ করে। কিন্তু যদি ভ্যালুর নিজের ভেতরেই কোনো ডাবল কোটেশন থাকে, তবে বাইরে সিঙ্গেল কোটেশন ব্যবহার করতে হবে, অথবা এর উল্টোটা করতে হবে।
<p title='তিনি বললেন, "HTML শেখা সহজ"'>উদ্ধৃতি দেখুন</p>
কোটেশন ছাড়া কি লেখা যায়?
হ্যাঁ, যদি অ্যাট্রিবিউটের ভ্যালুর মধ্যে কোনো স্পেস বা খালি জায়গা না থাকে, তবে কোটেশন ছাড়াও কোড কাজ করবে। যেমন: <a href=https://example.com> সঠিক। কিন্তু যদি ভ্যালুর মাঝে কোনো স্পেস থাকে, যেমন: <a class=text blue>, তবে ব্রাউজার বিভ্রান্ত হয়ে যাবে এবং কোড ভেঙে যাবে।
মনে রাখবেন: কোডকে শতভাগ ত্রুটিমুক্ত ও প্রফেশনাল রাখতে সবসময় ডাবল কোটেশন (” “) ব্যবহার করাই হলো Best Practice বা সর্বোত্তম নিয়ম।
Real Life Examples (বাস্তব উদাহরণ)
আমরা এতক্ষণ যা কিছু শিখলাম, এবার সেগুলোর সমন্বয়ে ৫টি বাস্তব কোড এক্সাম্পল ও তার সহজ ব্যাখ্যা দেখে নেওয়া যাক:
Example 1: একটি সম্পূর্ণ কার্যকরী হাইপারলিংক (Link)
<a href="https://forumbd24.com" target="_blank" title="আমাদের ফোরামে ভিজিট করুন">Visit ForumBD24</a>
ব্যাখ্যা: এখানে a ট্যাগে তিনটি অ্যাট্রিবিউট ব্যবহার করা হয়েছে। href দিয়ে ওয়েবসাইটের লিংক দেওয়া হয়েছে, target=”_blank” এর কারণে লিংকটি নতুন ট্যাবে ওপেন হবে এবং title অ্যাট্রিবিউটটি মাউস রাখলে একটি সুন্দর বিবরণ দেখাবে।
Example 2: এসইও ফ্রেন্ডলি ইমেজ (Image)
<img src="images/laptop.jpg" alt="টেবিলের ওপর একটি আধুনিক ল্যাপটপ রাখা আছে" width="600" height="400">
ব্যাখ্যা: এই ইমেজ এলিমেন্টে src দিয়ে ছবির সঠিক ফোল্ডার পাথ দেখানো হয়েছে। alt অ্যাট্রিবিউটের মাধ্যমে ছবিটির একটি চমৎকার বর্ণনা দেওয়া হয়েছে যা গুগলে ইমেজ সার্চে র্যাংক করতে সাহায্য করবে। এবং width ও height দিয়ে ছবির সাইজ সুনির্দিষ্ট করা হয়েছে।
Example 3: স্টাইলিশ সাবমিট বাটন (Button)
<button type="submit" style="background-color: green; color: white; padding: 10px 20px; border: none;">নিবন্ধন করুন</button>
ব্যাখ্যা: এখানে বাটনের ধরন বোঝাতে type=”submit” ব্যবহার করা হয়েছে। বাটনটিকে আকর্ষণীয় করতে style অ্যাট্রিবিউটের ভেতরে ইনলাইন সিএসএস ব্যবহার করে ব্যাকগ্রাউন্ড সবুজ এবং লেখার রঙ সাদা করা হয়েছে।
Example 4: বাধ্যতামূলক ইমেইল ইনপুট ফিল্ড (Input Field)
<input type="email" id="user-email" class="form-control" placeholder="আপনার ইমেইল লিখুন" required>
ব্যাখ্যা: এটি একটি আধুনিক ফর্ম ইনপুট। type=”email” নিশ্চিত করে যে এখানে শুধু ইমেইলই দেওয়া যাবে। ইউনিক আইডেন্টিটির জন্য id এবং ডিজাইনের জন্য class দেওয়া হয়েছে। এছাড়া খালি ঘরে হালকা লেখা দেখানোর জন্য placeholder এবং ঘরটি পূরণ করা বাধ্যতামূলক করতে বুুলিয়ান অ্যাট্রিবিউট required ব্যবহার করা হয়েছে।
Example 5: বিশেষ ডিজাইনের প্যারাগ্রাফ (Paragraph with Style)
<p id="accent-paragraph" style="font-family: Arial; line-height: 1.6; color: #333;" lang="bn">সঠিকভাবে কোড শেখাই আমাদের মূল লক্ষ্য।</p>
ব্যাখ্যা: এই অনুচ্ছেদটিতে lang=”bn” দিয়ে বোঝানো হয়েছে এটি বাংলা ভাষার এলিমেন্ট। style অ্যাট্রিবিউটের মাধ্যমে ফন্ট ফ্যামিলি এরিয়াল, লাইনের মধ্যকার দূরত্ব ১.৬ এবং টেক্সটের রঙ হালকা কালো বা অফ-ব্ল্যাক করা হয়েছে।
Comparison Table (তুলনামূলক টেবিল)
ঝটপট পুরো ক্লাসের সারাংশ মনে রাখার জন্য নিচে HTML Element এবং Attribute-এর মধ্যকার পার্থক্য টেবিল আকারে দেওয়া হলো:
| বিষয় | HTML Element | HTML Attribute |
|---|---|---|
| সংজ্ঞা | ট্যাগ এবং কনটেন্টসহ পুরো উপাদানটির সমষ্টি। | এলিমেন্টের অতিরিক্ত বৈশিষ্ট্য বা তথ্য প্রকাশের মাধ্যম। |
| অবস্থান | কোডের মূল বডিতে শুরু থেকে শেষ পর্যন্ত বিস্তৃত থাকে। | সবসময় শুধুমাত্র এলিমেন্টের ওপেনিং ট্যাগের ভেতরে বসে। |
| কাজ | ওয়েব পেজের মূল কন্টেন্ট এবং স্ট্রাকচার তৈরি করা। | এলিমেন্টের কার্যকারিতা, আচরণ বা ডিজাইন পরিবর্তন করা। |
| Example | hello |
href="url", id="main" |
নতুনদের সাধারণ ভুল ও সমাধান
কোডিং শেখার শুরুতে ভুল হওয়া খুবই স্বাভাবিক। তবে প্রফেশনালদের মতো কোড লিখতে হলে কিছু ভুল এড়িয়ে চলতে হবে:
- ভুল ১: Attribute বানান ভুল করা। অনেকে href-এর জায়গায় herf বা src-এর জায়গায় scr লিখে বসেন। এর ফলে লিংক বা ছবি কাজ করে না।সমাধান: টাইপ করার সময় সতর্ক থাকুন এবং কোড এডিটরের স্বয়ংক্রিয় সাজেশন ব্যবহার করুন।
- ভুল ২: কোটেশন ঠিকমতো বন্ধ না করা। যেমন ভ্যালু লেখার পর শেষের ডাবল কোটেশনটি দিতে ভুলে যাওয়া।সমাধান: প্রতিটি কোটেশন মার্ক জোড়ায় জোড়ায় আছে কিনা তা রিভিউ করার অভ্যাস গড়ে তুলুন।
- ভুল ৩: ভুল ট্যাগে ভুল অ্যাট্রিবিউট ব্যবহার। যেমন প্যারাগ্রাফ ট্যাগের ভেতর src ব্যবহার করা। প্যারাগ্রাফে সোর্সের কোনো কাজ নেই।সমাধান: কোন ট্যাগের জন্য কোন অ্যাট্রিবিউট নির্দিষ্ট, তা বারবার প্র্যাকটিস করে মুখস্থ বা আয়ত্তে রাখুন।
- ভুল ৪: এক পেজে একই id একাধিকবার ব্যবহার করা। এটি কোডকে ইনভ্যালিড করে তোলে।সমাধান: একই পেজে একাধিক এলিমেন্টে একই স্টাইল দিতে চাইলে আইডির পরিবর্তে class ব্যবহার করুন।
- ভুল ৫: ইমেজে alt অ্যাট্রিবিউট না দেওয়া। এতে ওয়েবসাইটের এসইও স্কোর কমে যায়।সমাধান: ছবি ছোট বা বড় যাই হোক না কেন, সবসময় অর্থপূর্ণ টেক্সটসহ alt অ্যাট্রিবিউট ব্যবহার করুন।
প্রফেশনাল কোড লেখার নিয়ম
একজন দক্ষ Frontend Web Developer সবসময় স্ট্যান্ডার্ড মেনে কোড লেখেন। আপনার কোড যেন প্রফেশনাল দেখায় সেজন্য নিচের নিয়মগুলো মেনে চলুন:
- Lowercase Attribute: HTML-এ অ্যাট্রিবিউটের নাম বড় হাতের বা ছোট হাতের দুরকমই লেখা গেলেও, প্রফেশনাল নিয়ম হলো সবসময় ছোট হাতের অক্ষরে (Lowercase) লেখা। যেমন: ID=”main” না লিখে id=”main” লিখুন।
- Proper Indentation & Clean Code: ネস্টেড এলিমেন্ট ব্যবহারের সময় ভেতরের কোডগুলোকে একটি ট্যাব বা স্পেস দিয়ে ডানে সরিয়ে লিখুন। এতে কোডের রিডাবিলিটি বা পঠনযোগ্যতা বাড়ে।
- Meaningful id and class Names: আইডি বা ক্লাসের নাম দেওয়ার সময় আন্দাজে নাম না দিয়ে কাজের সাথে মিল রেখে নাম দিন। যেমন: লাল লেখার জন্য class=”red-text” দেওয়া বুদ্ধিমানের কাজ।
- Accessibility and SEO: ওয়েবসাইটের এক্সেসিবিলিটি বাড়াতে প্রতিটি ইমেজে বাধ্যতামূলক alt ব্যবহার করুন এবং জটিল এলিমেন্টগুলোতে টুলটিপ দেখানোর জন্য title অ্যাট্রিবিউট যুক্ত করুন।
সারসংক্ষেপ
আজকের পর্বে আমরা যা যা শিখলাম তার একটি দ্রুত রিভিশন দিয়ে নেওয়া যাক। আমরা জেনেছি HTML Element হলো শুরু ও শেষ ট্যাগসহ ভেতরের সব লেখার একটি কমপ্লিট প্যাকেজ। আমরা দেখেছি কীভাবে এলিমেন্টগুলো একটার ভেতর আরেকটা নেস্টেড অবস্থায় কাজ করে এবং কিছু ব্যতিক্রমী Empty Element সম্পর্কেও জেনেছি যাদের কোনো শেষ ট্যাগ থাকে না। এরপর আমরা শিখেছি কীভাবে Attributes ওপেনিং ট্যাগের ভেতর বসে এলিমেন্টকে অতিরিক্ত ক্ষমতা বা বৈশিষ্ট্য প্রদান করে। পাশাপাশি আমরা গ্লোবাল, বুুলিয়ান অ্যাট্রিবিউট এবং কোড লেখার সর্বোত্তম নিয়ম বা Best Practices বিস্তারিত জেনেছি।
প্রায়শই জিজ্ঞাসিত প্রশ্ন ও উত্তর
১. HTML ট্যাগ এবং এলিমেন্ট এর মধ্যে মূল পার্থক্য কী?
উত্তর: ট্যাগ হলো কেবল কৌণিক ব্র্যাকেটের ভেতরের কোড সংকেত (যেমন p)। আর এলিমেন্ট হলো সেই ট্যাগ এবং তার মাঝখানের কনটেন্টসহ সম্পূর্ণ অংশ।
২. সব HTML এলিমেন্টের কি ক্লোজিং ট্যাগ থাকে?
উত্তর: না, সব এলিমেন্টের ক্লোজিং ট্যাগ থাকে না। যেগুলোর থাকে না সেগুলোকে Empty Elements বলা হয়, যেমন: br, hr, img।
৩. আমি কি একটি ট্যাগের ভেতর একাধিক অ্যাট্রিবিউট ব্যবহার করতে পারি?
উত্তর: হ্যাঁ, অবশ্যই পারেন। একটি স্পেস বা খালি জায়গা ছেড়ে আপনি যত খুশি অ্যাট্রিবিউট একটি ওপেনিং ট্যাগের ভেতর লিখতে পারেন।
৪. বুুলিয়ান অ্যাট্রিবিউট (Boolean Attribute) বলতে কী বোঝায়?
উত্তর: যেসব অ্যাট্রিবিউটের কোনো ভ্যালু বা মানের প্রয়োজন হয় না, শুধু নাম লিখলেই কার্যকর হয় (যেমন required বা disabled), সেগুলোকে বুুলিয়ান অ্যাট্রিবিউট বলে।
৫. অ্যাট্রিবিউটের মান লেখার সময় কি ডাবল কোটেশন দেওয়া বাধ্যতামূলক?
উত্তর: টেকনিক্যালি বাধ্যতামূলক না হলেও, কোডকে সুন্দর, স্ট্যান্ডার্ড এবং এসইও ফ্রেন্ডলি রাখতে সবসময় ডাবল কোটেশন ব্যবহার করাই প্রফেশনাল নিয়ম।
৬. id এবং class এর মধ্যে প্রধান পার্থক্য কী?
উত্তর: একটি পেজে একটি আইডি নাম মাত্র একবারই ব্যবহার করা যায় (ইউনিক)। কিন্তু একটি ক্লাস নাম একই পেজের অনেকগুলো এলিমেন্টে বারবার ব্যবহার করা সম্ভব।
৭. alt অ্যাট্রিবিউট ব্যবহার করা কেন এত জরুরি?
উত্তর: কোনো কারণে ছবি লোড না হলে তার বিকল্প লেখা দেখাতে, সার্চ ইঞ্জিনকে ছবি সম্পর্কে বোঝাতে (SEO) এবং অন্ধ মানুষদের স্ক্রিন রিডার ডিভাইসের সুবিধার জন্য এটি অত্যন্ত জরুরি।
৮. Global Attributes বলতে কী বোঝায়?
উত্তর: যেসব অ্যাট্রিবিউট নির্দিষ্ট কোনো ট্যাগের জন্য সীমাবদ্ধ নয়, বরং HTML-এর যেকোনো এলিমেন্টে সমানভাবে ব্যবহার করা যায়, তাদের গ্লোবাল অ্যাট্রিবিউট বলে। যেমন: id, class, style।
References (তথ্যসূত্র ও বিশ্বস্ত উৎস)
এই অধ্যায়ের বিষয়গুলো আরও গভীরভাবে শিখতে এবং নিয়মিত প্র্যাকটিস করতে আপনি নিচের অফিশিয়াল ডকুমেন্টেশনগুলো ভিজিট করতে পারেন:
- W3Schools HTML Elements: www.w3schools.com
- MDN Web Docs – HTML Attributes: developer.mozilla.org
- WHATWG HTML Living Standard: html.spec.whatwg.org
- W3C HTML Documentation: www.w3.org
