HTML Block & Inline

HTML Element တိုင်းမှာ Element အမျိုးအစားပေါ်မူတည်ပြီးတော့ Webpage ကြည့်ရှုသူကို ဘယ်လို ဖေါ်ပြပေးရမယ်ဆိုတာကို သတ်မှတ်ထားတာတွေ ရှိပြီးသားပါ။

အဓိကအားဖြင့် အဲဒီလို သတ်မှတ်ထားတဲ့ တန်ဖိုး (၂) ခုရှိပါတယ်။ အဲဒါတွေကတော့ Block နှင့် Inline ဆိုပြီးတော့ ဖြစ်ပါတယ်။

---

Block-Level Elements

Block-Level Elemnets များဟာ အမြဲတန်း စာကြာင်းအသစ်တစ်ကြောင်းကနေစပြီး သူယူလို့ရတဲ့ အကျယ်ကို အပြည့်ယူပါတယ်။

ဆိုလိုတဲ့သဘောကတော့ အလျှားလိုက်အားဖြင့် နေရာအပြည့်ယူပြီး သီးခြားရပ်တည်ပါတယ်။ သူရဲ့ ရှေ့နဲ့ နောက်မှာ အခြား Element တွေကို နေရာယူခွင့်မပေးပါဘူး။

ဒီအောက်က ဥပမာကို ကြည့်ပါ။ စာကြောင်းက ဆုံးသွားပြီးနောက်မှာ နေရာအလွတ်ရှိနေသေးပေမယ့်။ အဲဒိနေရာလွတ်ကိုပါ သူနေရာအဖြစ် ယူလိုက်ပါတယ်။ အခြား Element တွေကို ဝင်နေရာယူခွင့်မပေးပါဘူး။

<div> Element ဟာ Block-Level Element တစ်ခုဖြစ်ပါတယ်။

Example

1. <div> Hello Wrold </div>

‌Try it Yourself!

ဒီအောက်ကမှာတော့ Block-Level Elements တွေကို စာရင်းလုပ်ထားပါတယ်။

<address>

<article>

<aside>

<blockquote>

<canvas>

<dd>

<div>

<dl>

<dt>

<fieldset>

<figcaption>

<figure>

<footer>

<form>

<h1>--<h6>

<header>

<hr>

<li>

<main>

<nav>

<noscript>

<ol>

<p>

<pre>

<section>

<table>

<tfoot>

<ul>

<video>

---

Inline Element

Inline Element တွေကတော့ စာကြောင်းအသစ်က မစတင်သလို, နောက်ကိုလည်း နေရာမပြည့်မယူပါဘူး။ သူ့ Content ရှိသလောက်သာ နေရာယူပါတယ်။

အောက်က ဥပမာမှာကြည့်ပါ။

<span> Element ဟာ Inline-Level Element တစ်ခုဖြစ်ပါတယ်။

Example

1. <span> Hello World </span>

Try it Yourself!

ဒီအောက်မှာတော့ Inline Element တစ်ချို့ကို စာရင်းလုပ်ထားပါတယ်။

<a>

<abbr>

<acronym>

<b>

<bdo>

<big>

<br>

<button>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<object>

<output>

<q>

<samp>

<script>

<select>

<small>

<span>

<strong>

<sub>

<sup>

<textarea>

<time>

<tt>

<var>

---

The <div> Element

<div> Element ဟာ အသုံးအများဆုံး HTML Element လိုတောင်ပြောလို့ရမယ်ထင်ပါတယ်။

<div> ကို HTML Element တွေကို အုပ်စုဖွဲတဲ့အခါမှာ သုံးပါတယ်။

<div> မှာ ထူးထူးခြားခြား Attribute တွေသုံးလို့မရပါဘူး။ Element အားလုံး နှင့် ဆိုင်တဲ့ style, class, id စတဲ့ Attribute တွေဘဲ သုံးလို့ရပါတယ်။

CSS အသုံးပြုတဲ့အခါမှာတော့ <div> ဟာ ဒီဇိုင်းအုပ်စုတွေ ဖွဲဖို့ အတွက် အသုံးများပါတယ်။

Example Code

1. <div style="background-color: black; color: white; padding: 20px;">

2.      <h2> London </h2>

3.      <p> London is the capital city of England. It is the most

4.           populous city in the United Kingdom, with a

5.           metropolitan area of over 13 million inhabitants. </p>

6. </div>

Try it Yourself!

---

The <span> Element

<span> Element ကို Text တွေ၊ Document တွေထဲမှာ Inline အနေနဲ့ အုပ်စုဖွဲ့ဖို့ အတွက် အသုံးပြုပါတယ်။

<span> မှာလည်း ထူးခြားတဲ့ Attribute တွေမရှိဘဲ၊ style, class, id Attribute တွေသာ သုံးလို့ရပါတယ်။

CSS နဲ့တွဲသုံးတဲ့အခါမှာတော့ <span> ဟာ Text တွေအတွက် ဒီဇိုင်းထည့်ဖို့အတွက် အသုံးများလာပါတယ်။

Example Code

1. <p> My mother has <span style="color: blue; font-weight: bold;"> Blue </span> eyes and my father has <span style="color: darkolivergreen; font-weight: bold;"> dark green </span> eyes.</p>

Try it Yourself!

---

Chapter Summery

• Block နှင့် Inline ဆိုပြီး html element တွေဖေါ်ပြတဲ့ပုံစံ နှစ်မျိုးရှိတယ်။
• Block-level Element မှာဆိုရင် အလျှားလိုက်နေရာတစ်ခုလုံးကို အပြည့်ယူလိုက်တယ်။
• Inline element ကတော့ သူ့ Content စာဘဲနေရာယူပြီး ရှေ့နဲ့နောက်မျာ အခြား Element တွေကိုနေရာပေးတယ်။
• <div> element က Block-level Element ဖြစ်ပြီး html element တွေအုပ်စုဖွဲ့ဖို့အတွက် အသုံးများတယ်။
• <span> ကတော့ inline element ဖြစ်ပြီး text တွေကို ဒီဇိုင်းလုပ်နိုင်ဖို့အတွက် အသုံးများတယ်။