All HTML Tags

আমরা জানি যে এইচ.টি.এম. এল এর ট্যাগ কি এবং এগুলো কিভাবে কাজ করে। এখন আমরা এইচ.টি.এম. এল এর সকল প্রকার ট্যাগ এর লিস্ট এবং এর ব্যবহার বিধি দেখব।
এখন এই সব ট্যাগ গুলো আমারা একটা সেকশনে ভাগ করে দেখাবো।

Main Root

1. <html>

এইচ.টি.এম.এল এর প্রধান ট্যাগ (Main Root) হচ্ছে <html>. এই ট্যাগ মূলত এইচ.টি.এম.এল ফাইলের প্রধান ট্যাগ এবং আর অন্যান্য সকল ট্যাগ এর ভিতরেই থাকবে।

Document metadata

Document metadata এর জন্য আমরা কিছু ট্যাগ ব্যবহার করে থাকি।

মেটাডাটা মূলক একটা এইচ.টি.এম.এল ফাইলের তথ্য সংরক্ষন বা প্রদান করে। যেমন- ফাইলে স্টাইলশিট, স্ক্রিপ্ট এবং অন্যান্য আরো কিছু তথ্যা যা সার্চ ইঞ্জেিনের জন্য ব্যবহার করা হয়। চলুন আমরা Document metadata এর জন্য কি কি ট্যাগ ব্যবহার করা হয় তা দেখে আসি।

1. <base>

এই <base> ট্যাগ এইচ.টি.এম.এল ফাইলের যত রকম রিলেটিভ ইউআরএল আছে তাদের একটা প্রধান ইউ.আর.এল নির্ধারন করে থাকে।

2. <head>

<head> ট্যাগ একটি এইচ. টি. এম. এল ফাইলের সাধারন তথ্য প্রদান করে থাকে। যেমন- এই ফাইলের টাইটেল । এই <head> ট্যাগের মধ্যেই আপনাকে stylesheet, scripts, meta ট্যাগ ব্যবহার করতে হয়।
ভিডিও টিউটোরিয়াল দেখত চাইলে এখানে ক্লিক করুন।

3. <link>

এই <link> ট্যাগটি Html এর External Resource Link element এর জন্য ব্যবহার করা হয়। মানে আপনি যদি কোন External Resource Link ব্যবহার করেন তাহলে বর্তমান ফাইল এবং এই External Resource Link এর সাথে  সম্পর্ক।

4. <meta>

<meta> ট্যাগ Html এর ফাইলের তথ্য প্রদর্শন করার জন্য ব্যবহার করা হয়ে থাকে। যেমন description, keywords, author of the document, last modified, and other metadata. এই ট্যাগ গুলো মূলত browsers অথবা Search Engine Optimization এর জন্য ব্যবহার করা হয়।

5. <style>

এই ট্যাগর মাধ্যমে আপনি html ফাইলে CSS code ব্যবহার করতে পারবেন। এই ট্যাগটি আপনি html এর head section অথবা html এর অন্য কোন ট্যাগের এট্রিবিউট হিসেবে ব্যবহার করে CSS code লিখতে পারবেন।

6. <title>

এই ট্যাগের মাধ্যমে আপনি html ফাইলের title নির্ধারন করে দিতে পারেন। এই title ব্রাউজারের টাইটেল বার অথবা page tab এ দেখা যাবে।

Sectioning Root

“Sectioning Root” এর জন্য অমরা একটি ট্যাগ ব্যবহার করে থাকি।

  1. <body>

এই ট্যাগের ভিতরেই আমরা আমাদের Html page এর সকল content লিখে থাকি যা ব্রাউজারে প্রদর্শন হয়ে থাকে।

Content Sectioning

এই Content sectioning এ আমরা কিছু ট্যাগ ব্যবহার করে থাকি যা আমাদের ফাইলে সকল content কে বিভিন্ন ভাবে প্রদর্শন করে থাকে।

  1. <address>

এই ট্যাগের মাধ্যমে আপনি আপনার contact information ওয়েবসাইটে দেখাতে পারবেন।

2. <article>

এই ট্যাগ আপনার ওয়েবসাইটের একটি content এর section এর জন্য ব্যবহার করা হয় যা মূলত স্বয়ংসম্পূর্ণ। যেমন- আপনি যদি কোন newspaper অথবা magazine এর জন্য কোন article লিখেন তাহলে এই ট্যাগটি ব্যবহার করতে পারেন।

3. <aside>

এই ট্যাগের মাধ্যমে আপনি ওয়েবসাইটের Main Content এর পাশাপাশি অন্য কোন Content দেখাতে পারবেন। এখানে অন্য কোন Content বলতে বোঝানো হয়েছে যে কোন বিজ্ঞাপন বা লেখকের পরিচিতি বা কোন Article এর শর্ট লিংক ইত্যাদি। এই ট্যাগটি মূলত Main Content এর সাইডে ব্যবহার করা হয়।

4. <footer>

আমরা কোন ওয়েবসাইটের নিচে যে অংশটুকু দেখে থাকি যেমন- একটি ওয়েবসাইটের সংক্ষিপ্ত বিবরন বা কপিরাইট তথ্য বা মূল ওয়েবসাইটরে সকল / কিছু লিংক- এই সব content দেখানোর জন্য আমরা footer ট্যাগটি ব্যবহার করে থাকি।

5. <header>

এই header ট্যাগটি ব্যবহার করা হয় ওয়েবসাইটের উপরের অংশটুকু দেখানো জন্য। যেমন- লোগো, মূল সাইটের লিংক, সার্চ ফর্ম, ব্যানার ইত্যাদি। এই সকল content গুলো দেখানো জন্য আমরা header ট্যাগটি ব্যবহার করে থাকি।

6. <h1> <h2> <h3> <h4> <h5> <h6>

কোন section এর heading যদি আপনি দেখাতে চান তাহলে এই <h1> , <h2>, <h3>,
<h4>, <h5> এবং <h6> এই ট্যাগ ছয়টি ব্যবহার করতে পারেন।

7. <hgroup>

একটি section এ অনেকগুলো heading ট্যাগ ব্যবহার করার জন্য এই ট্যাগটি ব্যবহার করা হয়।

8. <main>

একটি ওয়েবসাইটের কোন মূল content দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়। এই মূল content টি অবশ্যই ইউনিক কোন content হতে হবে।

9. <nav>

এই ট্যাগটির মাধ্যমে আপনি একটি section নির্দেশ করতে পারেন যেখানে মূলত আমরা আমাদের ওয়েবসাইটের মূল লিংক গুলো দিয়ে থাকি।

10. <section>

section ট্যাগ একটি Html Document এ কোন একটি section এর জন্য ব্যবহার করা হয়। যেমন- header area, footer area বা অন্য কোন area এর জন্য।

Text Content

Html এ textual content এর জন্য আমরা অনেকগুলো ট্যাগ ব্যবহার করি। চলুন সেগুলো দেখে আসি।

  1. <blockquote>

এই ট্যাগ একটি content এর section নির্দেশ করে যা অন্য কোন source থেকে quoted আকারে থাকে। মূলত যে content ব্যবহার করা হবে তা ডান দিক হতে একটু জায়গা ছেড়ে দিবে।

2. <dd>

এই ট্যাগটি কোন একটি term (<dt>) এর সম্পূর্ণ বর্ণনা প্রদান করে থাকে।

3. <dir>

এই ট্যাগটি কোন document অথবা file এর container হিসেবে ব্যবহার করা হয়। তবে, এই ট্যাগ আর ব্যবহার হচ্ছে না।

4. <div>

html ফাইলে কোন একটা content এর container এর জন্য এই ট্যাগটি ব্যবহার করা হয়।

5. <dt>

এই ট্যাগটি কোন একটা description term এর জন্য ব্যবহার করা হয়। এর term ভিতর description লিখতে হয়।

6. <dl>

এই ট্যাগটি কোন একটা description list এর জন্য ব্যবহার করা হয়। এর ভিতর term এবং এই term এর জন্য description লিখতে হয়।

7. <figcaption>

html এ figure ট্যাগের caption দেওয়ার জন্য এই figcaption ট্যাগটি ব্যবহার করা হয়।

8. <figure>

এই ট্যাগটি কোন self-contained content কে নির্দেশ করে। যেমন- কোন illustrations, diagrams, photos, code listings, etc.

9. <hr>

html ফাইলে কোন content আলাদা করে দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়। এই ট্যাগ ব্যবহারের মাধ্যমে একটি horizontal line দেখানো হয়।

10. <li>

কোন item কে list আকারে দেখানো জন্য এই ট্যাগটি ব্যবহার করা হয়। তবে এই ট্যাগটি অবশ্যই একটি parent ট্যাগের ভিতর থাকতে হবে যেমন – <ul> অথবা <ol>

11. <ol>

কোন item কে order আকারে দেখানো জন্য এই ট্যাগটি ব্যবহার করা হয়। যেমন- ১, ২, ৩ ইত্যাদি।

12. <pre>

preformatted text দেখানো জন্য এই ট্যাগটি ব্যবহার করা হয়।

13. <p>

কোন paragraph লিখার জন্য এই ট্যাগটি ব্যবহার করা হয়।

14. <ul>

কোন item কে unordered list আকারে দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়। এর ফলে item গুলো বুলেট চিহ্ন আকারে থাকে।

Inline Text Semantics

আমরা কোন word, line, বা text এর meaning, structure, অথবা style করার জন্য নিচের ট্যাগগুলো ব্যবহার করে থাকি।

  1. <a>

এই ট্যাগটির মাধ্যমে আমরা Html ফাইলে hyperlink করে থাকি। hyperlink বলতে বুঝানো হচ্ছে যে কোন লেখা বা ছবির সাথে কোন লিংক করা যাতে করে যখন আমরা ঐ লিংকে ক্লিক করব তখন অন্য আরেকটি পেজ অথবা ওয়েবসাইটে চলে আসবে।

2. <abbr>

কোন বড় লেখার abbreviation দেখার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগের ভিতরে এট্রিবিউট হিসেবে tittle ব্যবহার করলে সম্পূর্ণ লেখাটি দেখা যাবে।

3. <b>

কোন লেখাতে মোটা করে অথবা Bold করে দেখার জন্য এই ট্যাগটি ব্যবহার করা হয়।

4. <bdi>

একটা বাক্যের মধ্যে আপনি যদি কোন শব্দকে বিপরীত দিকে শুরু করতে চান তাহলে এই ট্যাগটি ব্যবহার করতে হবে।

5. <bdo>

কোন একটা লেখার default directionality পরিবর্তন করার জন্য এই ট্যাগটি ব্যবহার করা হয়।

6. <br>

কোন একটি লেখার মধ্যে line break দেওয়ার জন্য এই ট্যাগটি ব্যবহার করা হয়।

7. <cite>

কোন একটা কাজের title দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

8. <code>

এই ট্যাগের মাধ্যমে আপনি fragments of program code, variables আপনার Html ফাইলে দেখাতে পারবেন। ব্রাউজারে এই code অথবা variables টি monospaced font এ দেখা যাবে।

9. <data>

এই ট্যাগটি data processors এর জন্য machine-readable VALUE এবং browser এ rendering করার জন্য human-readable VALUE প্রদান করে থাকে।

10. <dfn>

এই ট্যাগটি কোন একটি term এর instance প্রদান করে থাকে।

11. <em>

কোন লেখাকে emphasized আকারে দেখানো জন্য এই ট্যাগটি ব্যবহার করা হয়।

12. <i>

কোন লেখাকে italic আকারে দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

13. <kbd>

computer keyboard এর input দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

14. <mark>

কোন একটা লেখাকে mark অথবা highlight করে দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

15. <q>

কোন একটা লেখার বামে এবং ডানে quotation mark দেওয়ার জন্য এই ট্যাগটি ব্যবহার করা হয়।

16. <s>

কোন একটা লেখার উপরে একটা লাইন টানার বা কাটার জন্য এই ট্যাগটি ব্যবহার করা হয়।

17. <samp>

computer program থেকে sample output দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়

18. <small>

লেখাকে ছোট করে দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

19. <span>

এই ট্যাগটি একটি generic inline container যা কোন একটি paragraph এর কিছু অংশকে
style করার জন্য ব্যবহার করা হয়।

20. <strong>

কোন লেখাকে মোটা করে বা bold করে দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

21. <sub>

subscript text দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়। যার ফলে normal line থেকে half character নিচে লেখা দেখা যায়।

22. <sup>

superscript text দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়। যার ফলে normal line থেকে half character উপরে লেখা দেখা যায়।

23. <time>

Human readable “date/time” দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

24. <tt>

teletype text দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

25. <u>

কোন লেখার নিচে underline দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

26. <var>

কোন variable এর name দেওয়ার জন্য এই ট্যাগটি ব্যবহার করা হয়।

27. <wbr>

একটি বাক্যের কোথায় line break টা হবে তা এই ট্যাগের মাধ্যমে নির্ধারন করা যায়।

Image and Multimedia

Image and Multimedia এর জন্য আমরা কিছু ট্যাগ ব্যবহার করে থাকি। চলুন সেগুলো দেখে আসি।

  1. <area>

image-map এর ভিতরে area বলে দেওয়ার জন্য এই ট্যাগটি ব্যবহার করা হয়।

2. <audio>

কোন audio ফাইল চালানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

3. <img>

কোন ছবি দেখানো জন্য এই ট্যাগটি ব্যবহার করা হয়।

4. <map>

client-side image-map দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়। এখানে image-map বলতে কোন একটি image এর click able areas কে বুঝানো হয়েছে।

5. <track>

audio অথবা video ফাইল চালানো সময় আপনি যদি কোন লেখা দেখাতে চান যেমন- subtitles, caption files or other files containing text তাহলে এই ট্যাগটি ব্যবহার করতে হবে।

6. <video>

কোন video ফাইল দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

Embedded Content

html এ multimedia content এর পাশাপাশি Embedded content এর জন্য আমরা কিছু ট্যাগ ব্যবহার করে থাকি। চলুন দেখে আসি

  1. <applet>

html ফাইলে এ Java applet ব্যবহার করার জন্য এই ট্যাগটি ব্যবহার করা হয়। তবে এই ট্যাগটি এখন আর ব্যবহৃত হচ্ছে না। তার বদলে আপনি object ট্যাগটি ব্যবহার করতে পারেন।

2.

এই ট্যাগটি ব্যবহারে মাধ্যমে আপনি html ফাইলে external application ব্যবহার করতে পারবেন। যেমন- plug-in

3. <iframe>

বর্তমান ফাইলে অন্য কোন html ফাইল বা ওয়েবসাইট দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

4. <object>

html ফাইল এ embed multimedia যেমন audio, video, Java applets, ActiveX, PDF, and Flash ব্যবহার করার জন্য এই ট্যাগটি ব্যবহার করা হয়।

5. <param>

<object> ট্যাগের parameters দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।

6. <picture>

ওয়েবসাইটে বিভিন্ন ডিভাইসের জন্য বিভিন্ন ইমেজ দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

7. <source>

<picture>, <audio>, <video> ট্যাগের multiple media resources দেওয়ার জন্য এই ট্যাগটি ব্যবহার করা হয়।

Scripting

html ফাইলে scripting languages যেমন JavaScript ব্যবহার করা জন্য আমরা কিছু ট্যাগ ব্যবহার করে থাকি। চলুন দেখে আসি।

1.<canvas>

html ফাইলে graphics অথবা animations দেখানোর জন্য এই ট্যাগটি ব্যবহার করা হয়।

2. <noscript>

আপনার ব্রাউজার যদি script type সাপোর্ট না করে বা scripting disabled থাকে তাহলে alternative content হিসেবে এই ট্যাগ ব্যবহার করা হয়।

3. <script>

client-side script যেমন- JavaScript ব্যবহার করার জন্য এই ট্যাগ ব্যবহার করা হয়।

Demarcating Edits

Demarcating edits সেকশনে কিছু ট্যাগ আছে যা আপনার লেখার কিছু অংশকে পরিবর্তন করে থাকে

1. <del>

কোন একটা লেখার উপর দাগ অথবা কাটার জন্য এই ট্যাগ ব্যবহার করা হয়।

2. <ins>

কোন একটা লেখার নিছে দাগ দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।

Table Contents

tabular data এর জন্য আমরা কিছু ট্যাগ ব্যবহার করে থাকি। চলুন দেখে আসি-

1. <caption>

কোন একটা টেবিলের caption দেওয়ার জন্য এই ট্যাগ ব্যবহার কর হয়।

2. <col>

table এর প্রত্যেকটা column এর column properties দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়। এই ট্যাগটি <colgroup> ট্যাগের ভিতরে দিতে হয়।

3. <colgroup>

table এর এক বা একাধিক columns formatting করার জন্য এই ট্যাগ ব্যবহার করা হয়।

4. <tbody>

HTML টেবিলের body content কে group করার জন্য এই ট্যাগ ব্যবহার করা হয়।.

5. <td>

HTML টেবিলে cell দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।

6. <tfoot>

HTML টেবিলের footer content কে group করার জন্য এই ট্যাগ ব্যবহার করা হয়।.

7. <th>

HTML টেবিলে header cell দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।

8. <thead>

HTML টেবিলে header content কে group করার জন্য এই ট্যাগ ব্যবহার করা হয়।

9. <tr>

HTML টেবিলে row দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।

Forms

এই Forms সেকশনে HTML Form এর জন্য আমরা কিছু ট্যাগ ব্যবহার করে থাকি। আর সেগুলো হলো-

1. <button>

HTML ফাইলে কোন button দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

2. <datalist>

<input> ট্যাগের জন্য list of pre-defined options দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

3. <fieldset>

HTML এ অনেকগুলো ট্যাগ একসাথে দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

4.<form>

HTML form তৈরী করা জন্য এই ট্যাগ ব্যবহার করা হয়।

5. <input>

HTML form এ user input বক্স দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

6. <label>

<button>, <input>, <meter>, <output>, <progress>, <select>, এবং <textarea> ট্যাগের label এর জন্য এই ট্যাগ ব্যবহার করা হয়।

7. <legend>

<fieldset> ট্যাগের caption এর জন্য এই ট্যাগ ব্যবহার করা হয়।

8. <meter>

নির্দিষ্ট একটা range এ scalar measurement দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

9.<optgroup>

“group related options” drop-down list আকারে দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

10. <option>

select ট্যাগে option দেখানোর জন্য এই ট্যাগ ব্যবাহার করা হয়।

11. <output>

কোন calculation এর result দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

12. <progress>

কোন একটা কাজের progress দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

13. <select>

drop-down list দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

14. <textarea>

multi-line text input দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

Interactive Elements

Interactive elements সেকশনে আমরা কিছু ট্যাগ ব্যবহার করে থাকি। সেগুলে হলো-

1. <details>

কোন একটা লেখার additional details দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

2. <dialog>

dialog box অথবা window দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

3. <menu>

context menus, toolbars and listing form controls and commands এর জন্য এই ট্যাগ ব্যবহার করা হয়।

4. <menuitem>

command/menu item এর জন্য এই ট্যাগ ব্যবহার করা হয়।

5. <summary>

<details> ট্যাগের visible heading দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

Obsolete and deprecated Elements

HTML এ কিছু পুরোনো ট্যাগ রয়েছে তা ব্যবহার করা উচতি নয়। চলুন দেখে আসি ট্যাগগুলো-

1. <acronym>

কোন বড় লেখার ছোট অংশকে দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়। ছোট অংশ বলতে বুঝানো হচ্ছে যে আদ্যক্ষর।

2. <applet>

HTML ফাইলে Java applet দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

3. <basefont>

HTML ফাইলে default text-color, font-size, or font-family set করার জন্য এই ট্যাগ ব্যবহার করা হয়।

4. <bgsound>

background কোন soundtrack চালানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

5. <big>

bigger text দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

6. <blink>

কোন লেখাকে Blinking করার জন্য এই ট্যাগ ব্যবহার করা হয়।

7. <center>

কোন লেখাকে মাঝখানে আনার জন্য এই ট্যাগ ব্যবহার করা হয়।

8. <command>

command দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।

9. <content>

10. <dir>

files and/or folders এর directory সেট করার জন্য এই ট্যাগ ব্যবহার করা হয়।

11. <element>

HTMLএর নতুন custom DOM elements তৈরী করার জন্য এই ট্যাগ ব্যবহার করা হয়।

12. <font>

কোন একটা content এর font size, color and face ইত্যাদি সেট করার জন্য এই ট্যাগ ব্যবহার করা হয়।

13. <frame>

<frameset>. ট্যাগের মধ্যে নির্দিষ্ট একটা window দেখানেরা জন্য এই ট্যাগ ব্যবহার করা হয়।

14. <frameset>

অনেকগুলো <frame> কে একসাথে দেখানের জন্য এই ট্যাগ ব্যবহার করা হয়।

15. <image>

কোন ছবি দেখানের জন্য এই ট্যাগ ব্যবহার করা হয়।

16. <isindex>

17. <keygen>

18. <listing>

19. <marquee>

কোন একটা লেখাকে এক পাশ থেকে অন্য পাশে scrolling আকারে দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়।

20. <menuitem>

21. <multicol>

22. <nextid>

23. <nobr>

24. <noembed>

25. <noframes>

26. <plaintext>

27. <shadow>

28. <spacer>

29. <strike>

30. <tt>

31. <xmp>

Leave a Comment