এইচটিএমএল স্ট্রাকচার ওয়েব পেজ তৈরিতে গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি সংজ্ঞায়িত করে কিভাবে বিষয়বস্তু একটি ওয়েবপেজে সংগঠিত এবং প্রদর্শিত হয়। এখানে মৌলিক HTML কাঠামোর একটি ভূমিকা রয়েছে:
1. Doctype
ডকটাইপ(ডকুমেন্ট টাইপ ডিক্লারেশন) ওয়েবপৃষ্ঠাটি যে HTML সংস্করণ ব্যবহার করছে তা সংজ্ঞায়িত করে। এটি HTML ফাইলের শুরুতে স্থাপন করা উচিত।
2. html ট্যাগ
html ট্যাগ হল প্রতিটি HTML ফাইলের মূল উপাদান। এটি ওয়েবপৃষ্ঠার সম্পূর্ণ বিষয়বস্তুকে এনক্যাপসুলেট করে।
3. head ট্যাগ
হেড ট্যাগে ওয়েবপৃষ্ঠা সম্পর্কে তথ্য রয়েছে যা ব্রাউজারে সরাসরি প্রদর্শিত হয় না। এখানেই পৃষ্ঠার শিরোনাম, মেটা ট্যাগ, CSS এবং JavaScript ফাইলের লিঙ্ক এবং অন্যান্য বিভিন্ন উপাদান সংজ্ঞায়িত করা হয়।
4. body ট্যাগ
বডি ট্যাগে ওয়েবপেজে প্রদর্শিত সমস্ত বিষয়বস্তু থাকে। এখানেই টেক্সট, ছবি, ভিডিও, লিঙ্ক এবং অন্যান্য ইউজার ইন্টারফেসের উপাদানের মতো উপাদানগুলিকে সংজ্ঞায়িত করা হয়।
5. নেস্টেড ট্যাগ
এইচটিএমএল ওপেনিং এবং ক্লোজিং ট্যাগ সহ একটি শ্রেণিবদ্ধ কাঠামো ব্যবহার করে। শিশু ট্যাগগুলি পিতামাতার ট্যাগের ভিতরে স্থাপন করা হয়। উদাহরণস্বরূপ, p ট্যাগ(অনুচ্ছেদ) স্প্যান ট্যাগ(ইনলাইন টেক্সট), শক্তিশালী ট্যাগ(বোল্ড টেক্সট) এবং অন্যান্য অনেক ট্যাগ থাকতে পারে।
6. সাধারণ ট্যাগ
HTML বিষয়বস্তু বিন্যাস এবং প্রদর্শনের জন্য ট্যাগের একটি পরিসর প্রদান করে। উদাহরণস্বরূপ, h1-h6 ট্যাগ(শিরোনাম), p ট্যাগ(অনুচ্ছেদ), img ট্যাগ(চিত্র), একটি ট্যাগ(লিঙ্ক), এবং আরও অনেক।
এখানে একটি সম্পূর্ণ HTML পৃষ্ঠা কাঠামোর একটি উদাহরণ রয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Me</h2>
<p>I am a web developer passionate about creating amazing websites.</p>
</section>
<section>
<h2>My Projects</h2>
<ul>
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</section>
</main>
<footer>
<p>© 2022 My Webpage. All rights reserved.</p>
</footer>
</body>
</html>
উপরের উদাহরণে, আমাদের মূল উপাদান যেমন doctype, html ট্যাগ, head ট্যাগ এবং body ট্যাগ সহ একটি সম্পূর্ণ HTML পৃষ্ঠা রয়েছে। হেড বিভাগে, আমরা পৃষ্ঠার শিরোনাম, ব্যবহার করা CSS এবং JavaScript ফাইলগুলি সংজ্ঞায়িত করি। মূল অংশে ওয়েবপৃষ্ঠার বিষয়বস্তু প্রদর্শনের জন্য শিরোনাম, প্রধান এবং ফুটারের মতো উপাদান রয়েছে।
সঠিক HTML কাঠামো ব্যবহার করে, আপনি সুসংগঠিত, পাঠযোগ্য এবং ইন্টারেক্টিভ ওয়েব পেজ তৈরি করতে পারেন।