এইচটিএমএল-এর সাম্প্রতিক প্রবণতা

এই নিবন্ধটি এইচটিএমএল-এর সাম্প্রতিক প্রবণতা ব্যাখ্যা করে।

এটি সেই ট্যাগগুলি ব্যাখ্যা করে যেগুলি তুলনামূলকভাবে সাম্প্রতিক সময়ে HTML5-এ যোগ করা হয়েছে।

YouTube Video

এইচটিএমএল-এর সাম্প্রতিক প্রবণতা

<template> ট্যাগ

 1<template id="myTemplate">
 2    <div>
 3        <p>Hello, this is a reusable template!</p>
 4    </div>
 5</template>
 6<button onclick="useTemplate()">Use Template</button>
 7<div id="container"></div>
 8<script>
 9    function useTemplate() {
10        const template = document.getElementById('myTemplate');
11        const clone = template.content.cloneNode(true);
12        document.getElementById('container').appendChild(clone);
13    }
14</script>

• <template> ট্যাগটি পুনরায় ব্যবহারযোগ্য HTML টুকরা সংজ্ঞায়িত করতে ব্যবহৃত হয় যা JavaScript দ্বারা সক্রিয় না হওয়া পর্যন্ত লুকানো থাকে।

• <template> ট্যাগ ব্যবহার করে, আপনি কার্ড বা তালিকার আইটেমের মতো পুনঃব্যবহারযোগ্য UI উপাদানগুলি গতিশীলভাবে তৈরি করতে পারেন। এটি কোডের পুনরাবৃত্তি কমাতে এবং বৃহৎ পরিসরের অ্যাপ্লিকেশনগুলিতে রক্ষণাবেক্ষণযোগ্যতা উন্নত করতে সাহায্য করে।

• এই উদাহরণে, 'Use Template' বোতামে ক্লিক করলে <template> ট্যাগের বিষয়বস্তু প্রদর্শিত হয়।

<slot> ট্যাগ

 1<template id="myElementTemplate">
 2    <slot name="header">Default Header</slot>
 3    <main>Default Content</main>
 4    <slot name="footer">Default Footer</slot>
 5</template>
 6<my-element>
 7    <p slot="header">Header Content</p>
 8    <p slot="footer">Footer Content</p>
 9</my-element>
10<script>
11    class MyElement extends HTMLElement {
12        constructor() {
13        super();
14        const shadow = this.attachShadow({ mode: 'open' });
15        shadow.innerHTML = document.getElementById('myElementTemplate').cloneNode(true).innerHTML;
16        }
17    }
18    customElements.define('my-element', MyElement);
19</script>

• <slot> ট্যাগ একটি ওয়েব কম্পোনেন্টের মধ্যে একটি প্লেসহোল্ডার হিসাবে কাজ করে যা প্রধান উপাদান থেকে প্রেরিত সামগ্রী প্রদর্শন করে।
  • যদি কোনো স্লটের জন্য কোনো সামগ্রী প্রয়োগ না করা হয়, তাহলে ফallback সামগ্রী (ডিফল্ট সামগ্রী যা <slot> ট্যাগের ভিতর সরাসরি লেখা থাকে) প্রদর্শিত হবে।
• এই উদাহরণে, নামযুক্ত স্লটগুলি (header এবং footer) <template> উপাদানের ভিতরে সংজ্ঞায়িত করা হয়েছে।
• <my-element> একটি ব্যবহারকারী-সংজ্ঞায়িত কাস্টম HTML উপাদান। এই উপাদানের ভিতরের <p> ট্যাগের slot বৈশিষ্ট্যটি স্লটের নাম এবং যে সামগ্রী স্লটে প্রবেশ করানো হবে তা নির্দিষ্ট করে।

<dialog> ট্যাগ

 1<dialog id="exampleDialog">
 2    <p>This is a dialog box.</p>
 3    <button id="closeButton">Close</button>
 4</dialog>
 5
 6<button id="openButton">Open Dialog</button>
 7
 8<script>
 9    const dialog = document.getElementById('exampleDialog');
10    const openButton = document.getElementById('openButton');
11    const closeButton = document.getElementById('closeButton');
12
13    openButton.addEventListener('click', () => dialog.showModal());
14    closeButton.addEventListener('click', () => dialog.close());
15</script>

• <dialog> ট্যাগটি মডাল বা পপ-আপের মতো ইন্টারেক্টিভ উইন্ডো সংজ্ঞায়িত করতে ব্যবহৃত হয়। আপনি JavaScript ব্যবহার করে খোলা এবং বন্ধ করা নিয়ন্ত্রণ করতে পারেন।

• এই উদাহরণে, 'Open Dialog' বোতামে ক্লিক করলে ডায়ালগটি প্রদর্শিত হয়।

<input> ট্যাগের inputmode বৈশিষ্ট্য

1<label for="phone">Phone Number:</label>
2<input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number">

• <input> ট্যাগের inputmode বৈশিষ্ট্য স্পর্শ-যন্ত্রে প্রদর্শিত ভার্চুয়াল কিবোর্ডের ধরণ নির্ধারণ করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। যেমন, inputmode="tel" ফোন নম্বর প্রবেশের জন্য একটি সংখ্যাসূচক কিবোর্ড প্রদর্শন করে।
• inputmode বৈশিষ্ট্য শুধুমাত্র ভার্চুয়াল কিবোর্ডের প্রদর্শন সামঞ্জস্য করার জন্য এবং এটি ইনপুট সামগ্রী নিশ্চিত করে না। ইনপুট সীমাবদ্ধতা প্রয়োগ করতে, আপনাকে type বৈশিষ্ট্য বা জাভাস্ক্রিপ্ট যাচাইকরণ ব্যবহার করতে হবে।
• যেহেতু সমস্ত ব্রাউজার এবং ডিভাইস এটি সম্পূর্ণরূপে সমর্থন করে না, তাই উপযুক্ত প্রাথমিক উপায় প্রস্তুত করা সর্বোত্তম।
• inputmode বৈশিষ্ট্য নিম্নলিখিত মানসমূহ গ্রহণ করতে পারে। প্রতিটি মান একটি নির্দিষ্ট ইনপুট ধরন বা ভার্চুয়াল কিবোর্ড প্রদর্শনের জন্য ব্যবহৃত হয়।

theme-color হল <meta> ট্যাগের একটি অ্যাট্রিবিউট

1<meta name="theme-color" content="#4CAF50">
2<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
3<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

• theme-color অ্যাট্রিবিউটটি <meta> ট্যাগের মাধ্যমে সামঞ্জস্যপূর্ণ মোবাইল ব্রাউজারে ঠিকানা বার এবং UI এর রং কাস্টমাইজ করতে ব্যবহৃত হয়।
• উদাহরণস্বরূপ, এটি media অ্যাট্রিবিউট ব্যবহারের মাধ্যমে ডার্ক মোড এবং লাইট মোডের মধ্যে পরিবর্তন করতে পারে।

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

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video