X

X

X

HTML ইলামেন্ট


HTML ইলামেন্ট

একটি HTML সাধারণত একটি  start ট্যাগ এবং একটি end ট্যাগের সমন্বয়ে গঠিত। এই দুই ট্যাগের মাঝে থাকে ইলামেন্টের কন্টেন্ট:

<tagname>এখানে কন্টেন্ট লিখতে হবে …</tagname>

Start এবং End ট্যাগের পুরোটা মিলে HTML ইলামেন্ট গঠিত হয়:

Start ট্যাগ ইলামেন্ট কন্টেন্ট End ট্যাগ
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> কোনো কন্টেন্ট নাই End ট্যাগ নাই
যেসকল ইলামেন্টের কন্টেন্ট নাই তাদেরকে empty (ফাঁকা) ইলামেন্ট বলে। যেমন ধরুন, নতুন লাইন তৈরি করার জন্য <br> লিখতে হয়। এটি একটি empty ইলামেন্ট। এটি লাইন ব্রেক নির্দেশ করে।

আবদ্ধ (Nested) HTML ইলামেন্ট

একটি ইলামেন্টের ভেতরে আরেকটি ইলামেন্টকে লেখা যায়। ভিতরের ইলমেন্টকে বলা হয় Nested element এবং বাইরেরটিকে বলা হয় Nesting element ।

প্রতিটি HTML document অনেকগুলো Nested (আবদ্ধ) এবং Nesting (আবদ্ধকারী) element দিয়ে গঠিত।

নিচের উদাহরণটি চারটি HTML element নিয়ে গঠিত:

HTML শিরোনাম

<!DOCTYPE html>
<html>
<body>

	<h1>This is heading 1</h1>
	<h2>This is heading 2</h2>
	<h3>This is heading 3</h3>
	<h4>This is heading 4</h4>
	<h5>This is heading 5</h5>
	<h6>This is heading 6</h6>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা

<html> element পুরো ডকুমেন্টকে নির্দেশ করে।

এর একটি start ট্যাগ <html> এবং একটি end tag </html> রয়েছে।

content (<body> element) element নিজেও একটি element.

HTML Headings

<!DOCTYPE html>
<html>
<body>

	<h1>This is heading 1</h1>
	<h2>This is heading 2</h2>
	<h3>This is heading 3</h3>
	<h4>This is heading 4</h4>
	<h5>This is heading 5</h5>
	<h6>This is heading 6</h6>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


<body> element মূল ডকুমেন্টের দৃশ্যমান অংশ নির্দেশ করে।

এর একিটি start tag <body> এবং একটি end tag </body> রয়েছে।

The element content is two other HTML elements (<h1> and <p>).

HTML Headings

<!DOCTYPE html>
<html>
<body>

	<h1>This is heading 1</h1>
	<h2>This is heading 2</h2>
	<h3>This is heading 3</h3>
	<h4>This is heading 4</h4>
	<h5>This is heading 5</h5>
	<h6>This is heading 6</h6>

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


<h1> element একটি শিরোনাম নির্দেশ করে।

End tag ব্যবহার করতে ভুলবেন না।

তবে কিছু কিছু element এর ক্ষেত্রে end tag ব্যবহার না করেলেও সঠিক ফলাফল পাবেন:

HTML Elements without end tag

<!DOCTYPE html>
<html>
<body> 

	<p>This is a paragraph.
	<p>This is a paragraph.

</body>
</html>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

The example above works in all browsers, because the closing tag is considered optional.
এটি প্রায় সব ব্রাউজারে সঠিকভাবে কাজ করে, কারণ end tag এখানে ঐচ্ছিক tag হিসেবে কাজ করে।
তবে কখনো এমনটি করবেন না। মাঝেমধ্যে কিছু কিছু ব্রাউজারে যেমন, সাফারি এবং ইন্টারন্টে এক্সপ্লোরে আপনি ভুল ফলাফল পেতে পারেন।


Empty (ফাঁকা) HTML ইলামেন্ট

কন্টেন্টবিহীন ইলামেন্টকে Empty (ফাঁকা) ইলামেন্ট বলা হয়।

<br> একটি empty element এবং এর end tag নেই। (the <br> ট্যাগ দ্বারা লাইন ব্রেক বোঝায়)।

Empty element সমূহকে <br /> এর মতোও লেখা যায়। লক্ষ্য করুণ start tag-এর ট্যাগ নামের শেষে একটি space দিয়ে ‘/’ ব্যবহার করা হয়েছে।

এভাবে না লিখলেও চলবে কিন্তু যদি আপনার খুব ভালোমানে validation প্রয়োজন হয় তাহলে লিখতে পারেন। এটি মূলত XHTMl সিনট্যাক্স।


সবসময় ট্যাগ নাম ছোটো হাতের অক্ষরে লিখবেন

HTML tag সমূহকে ছোট কিংবা বড় হাতের অক্ষরে লিখতে পারেন। কেননা অন্যান্য প্রোগ্রামিং ভাষার মত এটি strictly typed নয়।
<P> এবং <p> মূলত একই রকম ট্যাগ।

HTML5 এ ছোট হাতের অক্ষরে কোড লিখা বাধ্যতামূলক নয়, কিন্তু W3C এর নির্দেশনা মতে ছোটো হাতের অক্ষরে লিখা ভালো। কেননা ছোট হাতের অক্ষরে ট্যাগ নাম লিখলে খুব সহজে একই কোডকে আপনি XHTML-এ রূপান্তরিত করতে পারবেন। তাছাড়া পৃথিবীর বেশিরভাগ ওয়েব ডেভেলপার ছোট হাতের অক্ষরে কোড লিখেন, সুতরাং আপনি কেনো এর ব্যতিক্রম হবেন?