এইচটিএমএল (হাইপার টেক্সট মারকআপ ল্যাঙ্গুয়েজ) এর এলিমেন্টগুলো সাধানত "ব্লক-লেভেল" এলিমেন্ট অথবা "ইনলাইন" এলিমেন্ত । একটি ব্লক-লেভেল এলিমেন্ট তার প্যারেন্ট এলিমেন্তটর{কন্তাইনার} সমস্ত জায়গা দখল করে , সেজন্য একটি "ব্লক" বানানো হয় ।এগুলো বুজানোর জন্য এই প্রবন্ধটি সাহায্য করবে।
ব্রাউজারস এলিমেন্টর আগে এবং পরে এক নিওলাইনের সাথে ব্লক-লেভেল এলেমেন্টকেদেখায়।. নিচের উদাহরন ব্লক-লেভেল এলেমেন্টর প্রভাবের ব্যবহারিক প্রমান দেয়।
ব্লক-লেভেল এলিমেন্টস
এইচটিএমএল
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
সিএসএস
p { background-color: #8ABB55; }
ব্যবহারবিধি
- ব্লক-লেভেল এলিমেন্টস কখনো
<body>এলিমেন্টের ভিতরে আসে।
ব্লক-লেভেল বনাম. ইনলাইন
ব্লক-লেভেল এলিমেন্টস এবং ইনলাইনের মধ্যে দুইটি বিশেষ পার্থক্য আসে।:
- ফরম্যাটিং
- বাই ডিফল্ট,ব্লক-লেভেল এলিমেন্টসনতুন লাইনেই শুরু করে, কিন্ত ইনলাইন এলিমেন্টস একটি লাইনের যেকোনো জায়গা থেকে শুরু করতে পারে।
- কনটেন্ট মডেল
- সাধারণত, ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস এবং বাকি ব্লক-লেভেল এলিমেন্টসকে ধরে রাখে। স্বভাবত গঠনগত স্বাতন্ত্র হল ঐ ধারনা যা ব্লক-লেভেল এলিমেন্টস ইনলাইন এলিমেন্টস থেকেও "বড়" কাঠামো তৈরি করে।
ব্লক-লেভেলের স্বাতন্ত্র বনাম.ইনলাইন এলিমেন্টস এইচটিএমএলের সবিস্তার বিবরণীকে ৮.০১ পর্যন্ত ব্যবহার করা হয়। এইচটিএমএল৫ এ,এই বিনারি স্বাতন্ত্রকে আরো জটিল কন্টটেন্ট ক্যাটেগরিস সেটে প্রতিস্থাপন করা হয়।এইচটিএমএল৫ এ "ব্লক-লেভেল" ক্যাটেগরিটি মোটামোটিভাবে ফ্লও কনটেন্ট ক্যাটাগরিতে সারা দেয়, যখন "ইনলাইন" ফ্রাসিং কনটেন্ট এ সারা দেয়, কিন্তু কোন বাড়তি ক্যাটাগরি নেই।
এলিমেন্টস
নিচে এইচটিএমএলব্লক-লেভেল এলিমেন্টসের সম্পূর্ণ তালিকা দেওয়া হল (যদিও "ব্লক-লেভেল" ব্যাখ্যা করা হইনই ঐএলিমেন্টের যা এইচটিএমএল৫ এ নতুন)।
<address>- Contact information.
<article>HTML5- Article content.
<aside>HTML5- Aside content.
<blockquote>- Long ("block") quotation.
<canvas>HTML5- Drawing canvas.
<dd>- Definition description.
<div>- Document division.
<dl>- Definition list.
<fieldset>- Field set label.
<figcaption>HTML5- Figure caption.
<figure>HTML5- Groups media content with a caption (see
<figcaption>). <footer>HTML5- Section or page footer.
<form>- Input form.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>- Heading levels 1-6.
<header>HTML5- Section or page header.
<hgroup>HTML5- Groups header information.
<hr>- Horizontal rule (dividing line).
<li>- List item.
<main>- Contains the central content unique to this document.
<nav>- Contains navigation links.