HTML5 এর নতুন যত ফিচার

HTML5 এর নতুন যত ফিচার

প্রযুক্তি এগিয়ে চলছে, তার চলার গতি বাড়ছে আর দ্রুত। শুধু দ্রুত নয় বরং অত্যাদিক গতিতে বর্তমান প্রযুক্তি জগত এগিয়ে চলছে। আপনি যদি এই বিষয় সম্বন্ধে খুব বেশি আগ্রহী এবং ফাস্ট না হন তাহলে খুব দ্রুত আপনার সময় ও শেষ হইয়ে আসবে। আর সেই গতির পালে হাওয়া দিতেই এসেছে HTML5 এবং এর অসাধারণ কিছু ফিচার।

আজকের লেখাতে চেষ্টা করব সেই নতুন ফিচার গুলো নিয়েই বিস্তারিত কথা বলার

HTML5 এর নতুন যত ফিচার
 HTML5 এর নতুন যত ফিচার

কিন্তু HTML5 এর আবার কি দরকার?

HTML5 আসার সঙ্গে সঙ্গে স্ট্যাটিক এবং ডাইনামিক ওয়েব সাইট তৈরি হয়েছে এখন আর সহজ এবং আধুনিক। অডিও, ভিডিও এবং বিভিন্ন ধরনের এনিমেশন সেটাও আবার জাভাস্ক্রিপ্ট ছাড়াই এখন সম্ভব শুধুমাত্র HTML5 এর মাধ্যমে।

তাছাড়া HTML5 এর সবথেকে জনপ্রিয় এবং অতি প্রয়োজনীয় ফিচার হচ্ছে থার্ড পার্টি প্লাগিন ছাড়াই খুব সহজেই সাইটকে রেস্পন্সিভ করে ফেলা। স্মার্টফোন কিংবা ট্যাব্ললেট কিংবা ডেস্কটপ সব স্ক্রিনের সহজেই ফিট করবে এবং এক্সপেরিয়েন্স ও বেটার হবে এমন ওয়েবসাইট তৈরি করার মতো কঠিন কাজ সহজ করেছে HTML5

কি কি ফিচার আছে?

১। ভিডিও এবং অডিও

ভিডিও এবং অডিও একদম নতুন দুইটি ট্যাগ যার মাধ্যমে আপনি সহজেই আপনার ওয়েব সাইটে অডিও এবং ভিডিও এড করতে পারবেন। ইউটিউব ও তাদের ভিডিও ওয়েবসাইতে এম্বডেড করে শেয়ার করার লক্ষ্যে এখন শর্টকোড দিয়ে থাকে। যার মাধ্যমে ওয়েবসাইটকে এখন আর ভালোভাবে মাল্টিমিডিয়ার সঙ্গে সংযুক্ত করা সম্ভব হয়েছে।

শুধুমাত্র ভিডিও নয় বরং অডিও ও চাইলে এম্বডেড করা সম্ভব খুব সহজেই।

২। Nav

বর্তমানে সবধরনের ওয়েবসাইটের একটা কমন বৈশিষ্ঠ্য হচ্ছে এর ন্যাভিগেশন বার। ইন্টারনাল বিভিন্ন পেজ এর লিংক ই মূলত ন্যাভিগেশন। নানান ভাবে এই হাইপারলিংক গুলো অর্গানাইজ করা সম্ভব। লিস্ট কিংবা টেবিল এর ব্যবহার ও বেশি জনপ্রিয় এক্ষেত্রে। কিন্তু ওয়েব ক্রলার কে স্পেসিফাই করে দিতে এবং HTML ফাইলের গঠন সুদর্শন রাখতে নতুন এই Nav সিম্যান্টিক এলিমেন্ট দিনে দিনে বহুল জনপ্রিয় হচ্ছে।

৩। Header

একটা মডার্ন ওয়েবসাইটের অনেকগুলো পার্ট থাকে এবং সেই পার্টগুলো সাধারণ ডিভ এলিমেন্ট দিয়েই আলাদা করা যায়। কিন্তু সেক্ষেত্রে নানা নামের ক্লাস নেম এবং আইডি নেম এর ঝামেলা পোহাতে হয়। অতচ HTML5 এর নতুন সিম্যান্টিক ফিচারের মাধ্যমে খুব সহজেই আপনি আপনার ওয়েব সাইটের গঠন স্পেসিফাই করে দিতে পারবেন। এবং ওয়েবসাইটের হেডার বা ব্যানার, টাইটেল এবং ন্যাভ যে অংশে থাকে সেই সম্পুর্ন অংশকে এক সঙ্গে header ট্যাগ এর মধ্যে রেখে পুরো ডকুমেন্ট কে খুব সহজেই সুগঠিত রাখা যায়। এবং সেই সাথে ওয়েব ক্রলার ও সহজেই ওয়েব সাইটের সব অংশ চিনে নিতে পারে।

আর তাছাড়া সাইটের এক্সেসিবিলিটি বৃদ্ধি করতেও এই সিম্যান্টিক এর প্রয়োগ খুব জনপ্রিয়।

৪। Canvas

ক্যানভাস একটা নতুন HTML ট্যাগ যেটা HTML এর নতুন 5 ভার্সন এ এসেছে। মূলত ড্রয়িং বা এরকম পেইন্টিং এর কাজের জন্য Canvas  ব্যবহার করা হয়। গ্রাফ, ভেক্টর আর্ট এবং সাধারণ ভিজুয়াল ইমেজ এর ক্ষেত্রেও এই ব্যপক চাহিদা।

৫। Footer

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

৬। ইনপুট ট্যাগের কিছু নতুন টাইপ

input মূলত পুরনো HTML এর একটা এলিমেন্ট যেটা দিয়ে সহজেই ইউজারের থেকে ডেটা ইনপুট নেয়া যায়। তবে সেই পুরনো এলিমেন্ট কে HTML 5 এ এসে নতুন এবং আধুনিক রূপ দেয়া হয়েছে। নতুন ধরনের টাইপ যেমন email, week, url, color, time, date সহ আর অনেক অনেক ধরনের টাইপ এখন HTML5 এ এসেছে। এছাড়া আর বেশি কিছু নতুন ভ্যালুও এখানে যুক্ত হয়েছে।

৭। Placeholder

এটাই ইনপুট ট্যাগ এর একটা নতুন বৈশিষ্ঠ্য যেটা পুরনো HTML ভার্সনে ছিল না। নতুন ইউজারের জন্য অনেক সময় কোন ফর্ম বা ইনপুট ফিল্ড পুরন করা বেশ কষ্ট সাধ্য হয়ে থাকে। সেক্ষেত্রে প্লেসহোল্ডার একটা আশির্বাদ স্বরূপ। Placeholder এর মাধ্যমে ইনপুট ফিল্ড এর মধ্যেই ইউজার কে নির্দেশন দেয়া যায় যে কিভাবে ইনপুট ফিল্ড পূরণ করতে হবে।

৮। Required Attribute

এটাও আরেক্টি ইনপুট এলিমেন্ট এর বৈশিষ্ঠ্য। অনেক সময় কোন একটা ফিল্ড এ ইউজারের ডেটা অবশ্যই পূরণ করাতে হয়। সেক্ষেত্রে আমরা সাধারণত জাভাস্ক্রিপ্ট এর মাধ্যমে চেক করি যে কোন ডেটা আছে কিনা এবং সেই কন্ডিশন এর উপর ভিত্তি করে মেসেজ দেয়। অতচ সেম কাজ এখন HTML5 এসে হয়েছে কয়েক গুন সহজ। এখন কয়েক লাইনের জাভাস্ক্রিপ্ট কোড মাত্র একটা ওয়ার্ড required দিয়েই করা সম্ভব। টেক্সট, ইমেইল কিংবা যেকোন ধরনের ইনপুট টাইপের জন্যই এই এট্রিবিউট কাজ করবে।

৯। reverse link

আমরা a href এর মাধ্যমে সহজেই কোন লিংক পেজে এড করতে পারি। কিন্তু আবার একই পেজে ফিরে আসার কাজটা করতে হয় সাইটের ব্যাকেন্ড এ। কিন্তু HTML5.1 এ নতুন একটি ফিচার এসেছে reverse link. অর্থাৎ শুধুমাত্র rev শব্দটা লিখেই চাইলে পুরো লিংক টার রিভার্স ও করা সম্ভব।

১০। এক্সেসিবিলিটি

অনেক সময় যারা স্বাভাবিক ভাবে অক্ষম তাদের জন্য ওয়েব সাইট ব্যবহার করা হয়েছে বেশ কঠিন। তাই তাদের কথা চিন্তা করে নতুন ধারনা “এক্সেসিবিলিটি” -র পরিচয় পেয়েছে ডেভেলপার জগত। এখন থেকে সাইটের পারফরম্যান্স ভালো করতে চাইলে এক্সেসিবিলিটির দিকেও নজর দিতে হবে। অর্থাৎ কোন ইমেজের অল্টারনেটিভ ট্যাগ আছে কিনা কিংবা কোন বাটন এর এরিয়া এট্রিবিউট আছেকিনা এ সবকিছুই সাইটের এক্সেসিবিলিটি বৃদ্ধি করতে সাহায্য করে।

পরিশেষে

HTML5 আসার পর থেকে ওয়েব পাড়ায় নতুন নতুন সম্ভাবনা জেগে উঠেছে। আগের পদ্ধতিতে যেই কাজ ছিল অতিশয় কঠিন এখন সেই সেম কাজ খুব সহজেই করা যায়। আমাদের জীবন কে সহজ এবং ওয়েব এক্সপেরিয়েন্স আর বেটার করতে তাই HTML5 এ যুক্ত হয়েছে অনেক অনেক নতুন ফিচার। আর সেই ফিচারগুলোর মধ্য থেকেই খুব জনপ্রিয় এবং উপকারী ১০ টি ফিচার নিয়েই আজকের আর্টিকেল।

যেকোন মতামত কিংবা পরামর্শ জানাতে কমেন্ট করুন এবং ভালো লাগলে বন্ধুদের সঙ্গে শেয়ার করুন। ধন্যবাদ।

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *