HTML5 এর বেসিক স্ট্রাকচার দেখতে নিচের কোডটি লক্ষ্য করুন। এটি একটি সাধারণ HTML5 ডকুমেন্টের মৌলিক গঠন প্রদর্শন করে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<header>
<h1>Welcome to HTML5</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Section Title</h2>
<p>This is a paragraph inside a section.</p>
</section>
<article>
<h2>Article Title</h2>
<p>This is an article paragraph.</p>
</article>
</main>
<footer>
<p>© 2024 Your Company</p>
</footer>
</body>
</html>
কোড ব্যাখ্যা:
<!DOCTYPE html>: এটি ডকুমেন্টের প্রকার নির্ধারণ করে এবং ব্রাউজারকে জানায় যে এটি একটি HTML5 ডকুমেন্ট।<html lang="en">: HTML ট্যাগে ভাষা অ্যাট্রিবিউট সেট করে যা সার্চ ইঞ্জিন এবং ব্রাউজারের জন্য সহায়ক।<head>: এই সেকশনে মেটা ডেটা, পেজের শিরোনাম, এবং CSS/JS ফাইল লিঙ্ক থাকে।<meta charset="UTF-8">: UTF-8 এনকোডিং ব্যবহার করে ডকুমেন্টটি যাতে সমস্ত ইউনিকোড অক্ষর সঠিকভাবে প্রদর্শিত হয়।<meta name="viewport" content="width=device-width, initial-scale=1.0">: এটি মোবাইল ডিভাইসের জন্য রেসপন্সিভ ডিজাইন নিশ্চিত করতে ব্যবহৃত হয়।<title>: ব্রাউজারের ট্যাবে প্রদর্শিত শিরোনাম সেট করে।
<body>: এই ট্যাগে পেজের মূল কন্টেন্ট থাকে যা ইউজাররা দেখতে পাবে।<header>: সাইটের শিরোনাম বা মেনু রাখা যায়।<nav>: নেভিগেশন মেনু তৈরি করতে ব্যবহৃত হয়।<main>: মূল কন্টেন্ট রাখার জন্য।<section>এবং<article>: কন্টেন্ট সেগমেন্ট করার জন্য।<footer>: ফুটার কন্টেন্ট যেমন কপিরাইট তথ্য।
এই HTML5 বেসিক স্ট্রাকচারটি প্রাথমিকভাবে ওয়েব পেজ তৈরি করার জন্য আদর্শ।
Content added By