HTML Elements
একটি HTML এলিমেন্ট বা উপাদান সাধারনত একটি স্টার্ট ট্যাগ, কিছু কনটেন্ট এবং একটি শেষ ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়।
অর্থাৎ একটি ট্যাগের শুরু থেকে শেষ পর্যন্ত এবং এর ভেতরের উপাদার গুলো নিয়ে হয় এক একটি এইচটিএমএল এলিমেন্ট:
<tagname>Content goes here...</tagname>
এইচটিএমএল এলিমেন্ট শুরু ট্যাগ থেকে শেষ ট্যাগ পর্যন্ত সমস্ত কিছু, উদাহরন স্বরুপ
<h1>একটি হেডিং</h1> <p>একটি প্যারাগ্রাফ.</p>
| শুরু ট্যাগ | কন্টেন্ট | শেষ ট্যাগ বা ক্লোজিং ট্যাগ |
| <h1> | একটি হেডিং | </h1> |
| <p> | একটি প্যারাগ্রাফ | </p> |
| <br> | — | — |
কিছু কিছু ট্যাগ এর ক্লোজিং ট্যাগ থাকেনা । যেমন উপরের <br> এবং এর আগের আলোচনার <img> ট্যাগ।
নোট: কিছু HTML Tag এর End Tag বা শেষ ট্যাগ নেই । এবং এগুলোর কন্টেন্ট ও নেই, তবে এট্রিবিউট যোগ করা যায় না পরবর্তি টিউটোরিয়ার আলোচনা করা হয়েছে ।
নেস্টেড এইচটিএমএল এলিমেন্ট
এইচটিএমএল উপাদানগুলি নেস্ট করা যায় (এর অর্থ এই যে উপাদানগুলিতে অন্যান্য উপাদান থাকতে পারে)
<html> ট্যাগটির ভেতরে অন্য সব ট্যাগ নেস্টেড আকারে থাকে । নিচের কোড ব্লাক টি দেখুন
<!DOCTYPE html> <html> <body> <h1>আমার প্রথম হেডিং</h1> <p>আমার প্রথম প্যারাগ্রাফ.</p> </body> </html>
উপরের কোড এর ব্যাখ্যা
<html> এলিমেন্টটি মূল এলিমেন্ট এবং এটি পুরো এইচটিএমএল ডকুমেন্টকে সংজ্ঞায়িত করে।
এটিতে একটি শুরুর ট্যাগ <html> এবং একটি শেষ ট্যাগ </ html> রয়েছে। তারপরে, <html> ট্যাগটির ভিতরে একটি <body> ট্যাগ রয়েছে:
<body> <h1>আমার প্রথম হেডিং</h1> <p>আমার প্রথম প্যারাগ্রাফ.</p> </body>
<body> এলিমেন্ট টি ডকুমেন্টের বডি সংজ্ঞায়িত করে।
এটিতে একটি <body> এবং একটি শেষ ট্যাগ </body> ট্যাগ রয়েছে। তারপরে <body> tag এর ভিতরে আরও দুটি ট্যাগ রয়েছে: <h1> এবং <p>
<h1>আমার প্রথম হেডিং</h1> <p>আমার প্রথম প্যারাগ্রাফ.</p>
<h1> এলিমেন্টটি একটি শিরোনামকে সংজ্ঞায়িত করে। এটিতে একটি শুরুর ট্যাগ <h1> এবং একটি শেষ ট্যাগ </ h1> রয়েছে:
<h1>আমার প্রথম হেডিং</h1>
<p> উপাদান অনুচ্ছেদে সংজ্ঞায়িত করে। এটিতে একটি শুরুর ট্যাগ <p> এবং একটি শেষ ট্যাগ </ p> রয়েছে:
<p>আমার প্রথম প্যারাগ্রাফ.</p>
ক্লোজিং বা শেষ ট্যাগ কখনওই এড়িয়ে যাবেন না
আপনি ক্লোজিং ট্যাগটি ভুলে গেলেও কিছু HTML Element সঠিকভাবে প্রদর্শিত হবে Modern Web Borwser গুলোতে:
<!DOCTYPE html> <html> <body> <h1>আমার প্রথম হেডিং <p>আমার প্রথম প্যারাগ্রাফ. </body> </html>
আরপরও কখনই যে সব ট্যগের ক্লোজিং ট্যাগ আছে টা ক্লোজ করতে ভুলবেন না । কারন অনেক সময় অটো ক্লোজ হয়ে যায় অন্য একটি নেস্টেট ট্যাগ এর সাথে এবং ওয়েব সাইট এর গঠন পুরাই নস্ট করে ফেলে ।
ক্লোজিং ট্যাগ বিহিন ট্যাগ
কোনও বিষয়বস্তুবিহীন এইচটিএমএল উপাদানগুলিকে খালি উপাদান বলা হয়।
<br> ট্যাগটি একটি লাইন বিরতি সংজ্ঞায়িত করে এবং এটি একটি ক্লোজিং ট্যাগ ছাড়াই একটি খালি উপাদান।
<p>আমার প্রথম প্যারাগ্রাফ. <br>আমি নিজে নিজই HTML শিখবো</p>
এইচটিএমএল কেস সেনসিটিভ নয়
আমরা কোড করার সময় সাধারনত ছোট হাতের বা বড় হাতের মিক্স করিনা কারন অনেক প্রগ্রামিং ল্যাংগুয়েজ ই Case Sansetive. কিন্তু HTML কেস সেনসেটিভ নয় । অর্থাৎ আপনি <HTML> বা <html> যে কোনটাই ব্যবহার করতে পারেন কিংবা দুটোই একসাথে ।
*** তবে W3C ছোট অক্ষরে কোড করার পক্ষে এবং আমরা ও ছোট অক্ষরে অর্থাৎ lower case এ HTML Code করে থাকি ।
* HTML এলিমেন্ট দুই ধরনের হয় । HTML এলিমেন্টের ধরন এ বিস্তারিত দেখুন ।