<p></p>

p tag ကို Paragraph ပုံစံစာတွေရေးချင်တဲ့နေရာမျာသုံးပါတယ်။
(ဥပမာ - <p>Hello! My name is J-My. I am 25 year old.</p>)
ဒါဆိုရင် p tag ထဲမှာရေးထားတာတွေကို Paragraph အနေနဲ့ဖော်ပြသွားမှာ။သိပ်မသိသာပေမဲ့အရမ်းအသုံးဝင်ပါတယ်။

<span></span>

span tag ကိုစာလုံးကိုခွဲပြီး effect ထည့်ချင်တဲ့အခါမှာသုံးပါတယ်။
(ဥပမာ - <p>I say <span>Hello World!</span></p>)
ဒါဆိုရင် Hello World! ကို CSS နဲ့ကိုယ်ကြိုက်တဲ့ effect ထည့်လို့ရပါပြီ။

<center></center>

ဒီ tag ကို browser ရဲ့အလယ်မှာပေါ်စေချင်တဲ့အခါမှာသုံးပါတယ်။
(ဥပမာ - <center>Hello World!</center>)
ဒါဆိုရင် Hello World! က browser ရဲ့အလယ်မှာတည့်တည့်မှာသွားပေါ်မှာပါ။

<pre></pre>

pre ကထူးခြားတဲ့ tag ဖြစ်ပါတယ်။ တခြား Programming ဘာသာစကားတေွကိုရေးတဲ့အခါအလုပ်လုပ်သွားပါတယ်။ အလုပ်မလုပ်ချင်ဘူး။စာသားအတိုင်းဘဲပေါ်စေချင်တယ်ဆိုရင်တော့ pre ကိုသုံးပါတယ်။
(ဥပမာ - <pre><p>Hello World!</p></pre>)
ဒီလိုဆို Hello World! ကို Paragraph အတိုင်းဖော်ပြပါလိမ့်မယ်။ ဒါပင်မဲ့ pre tag နဲ့ရေးထားတာမို့လို့ရေးထားတဲ့အတိုင်း <p>Hello World!</p> အဖြစ်ဖော်ပြပါလိမ့်မယ်။

<div></div>

div ကို Web page တွေရေးသားတဲ့နေရာမှာသုံးပါတယ်။ content တစ်ခုနဲ့တစ်ခု division ပိုင်းခြားပြီးပြချင်တဲ့အခါမျိုးကိုယ့်ရဲ့ UL ကို layout ချတဲ့အခါတွေမှာသုံးပါတယ်။
(ဥပမာ - <div></div>)
အတော်သုံးများပြီး Web developer တွေအကြိုက်တွေ့ရတဲ့အထိသုံးလို့ကောင်းပါတယ်။ဒါပင်မဲ့အသုံးများတာနဲ့အညီမသုံးသင့်တာတွေပါသုံးမိနေကြပါတယ်။စာပိုဒ်ဖွဲ့တဲ့နေရာကအစ div ကိုသုံးနေကြပါတယ်။အမှန်တော့စာပိုဒ်ဖွဲ့ရင် p tag ကိုသုံးရမျာပါ။
ဒါ့ကြောင့် div ကိုသူ့နေရာနဲ့သူသုံးသင့်ကြောင်းပြောပြလိုက်ရပါတယ်။

အဖွင့်အပိတ်မပါသော tag များ

HTML tag တွေဟာအဖွင့်တစ်ကွင်းအပိတ်တစ်ကွင်းပါပါတယ်။ ဒါပင်မဲ့မပါတာတွေလည်းရှိပါတယ်။ အပိတ်မပါတဲ့ tag တစ်ချို့ကိုအောက်မှာဖော်ပြလိုက်ပါတယ်။

<br> - br tag ကိုတစ်ကြောင်းကျော်တဲ့နေရာမှာသုံးပါတယ်။
<hr> - hr tag က horizontal line ကိုပြောတာပါ။
<img> - img ကမိမိ pag မှာဓာတ်ပုံတွေထည့်တဲ့နေရာမှာသုံးပါတယ်။
မှတ်ချက် - သူ့မှာတော့နောက်ကမျဥ်းတစ်ကြောင်းပိတ်ပေးလို့လည်းရသလိုမပိတ်ရင်လည်းရပါတယ်။
(ဥပမာ - <img/> or <img>)

img အကြောင်းအကျယ်တဝင့်ဆွေးနွေးခြင်း
အခုတော့ <img> အကြောင်းကိုပြောတော့မှာပါ။သူက Website တွေအတွက်အလွန်အရေးပါတဲ့ tag ဖြစ်ပါတယ်။

alt - ကို img tag အထဲမှာရေးရပါတယ်။ မတော်လို Website အတွက် Photo ရှာမတွေ့တော့ရင် alt မှာရေးထားတာတွေကို Website မှာပြသွားမှာပါ။
<img alt = 'hello Wold!'>

src - က Website အတွက် Photo တစ်ခုလိုချင်တယ်ဆိုပါဆို။ ဒါဆိုရင် src ကနေပြီး Photo လမ်းကြောင်းကိုလှမ်းချိန်ပေးရပါတယ်။
<img src = 'Photo လမ်းကြောင်းရေးပါ။' >
Photo လမ်းကြောင်းကိုချိန်တဲ့အခါချိန်တဲ့အနည်းနှစ်မျိုးရှိပါတယ်။Photo ကိုတစ်ခါထဲ Website အတွက်ထည့်ပေးလိုက်တာ (သိုမဟုတ်) အင်တာနက်ကနေလှမ်းချိတ်တာတိုဖြစ်ပါတယ်။

1. Photo ကိုတစ်ခါထဲ Website အတွက်ထည့်ပေးနည်း။
(ဥပမာ - ကိုယ်က Photo အတွက်ဖိုင်တစ်ခုနဲ့သက်သက်ထည့်သိမ်းထားတယ်ဆိုပါဆို။ဒါဆိုအဲ့ဖိုင်ကိုအတိအကျလှမ်းချိတ်ပေးရပါမယ်။ )
ဖိုင်Aထဲမှာဖိုင်Bနဲ့ဖိုင်Cရှိတယ်ဆိုပါဆို။ ကိုကဖိုင်Bထဲမှာဖိုင်Cမှာကဓာတ်ပုံရှိတယ်။ဒါ../နဲ့ချိတ်ရတယ်။
<img src = '../C/A.png'>
../ အဓိပ္ပာယ်ကဒီဖိုင်ထဲကနေထွက်ဆိုပြီးအဓိပ္ပာယ်ရတယ်။ပြီးရင် C လိုရေးတာဟာ C ဖိုင်ထဲဝင်ဆိုတဲ့အဓိပ္ပာယ်ပါ။ပြီးရင် Photo ရဲ့နာမည်ကိုအတိအကျရေးပေးပါ။နာမည်တွင်မကပါဘူး Photo ရဲ့ file type ကိုပါအတိအကျရေးပေးပါ။ မှာမယ်ဆိုရင်ပေါ်မှာမဟုတ်ပါဘူး။
A - ဟာဓာတ်ပုံနာမည်ဖြစ်ပါတယ်။
.png - ဟာ Photo ရဲ့ file type ဖြစ်ပါတယ်။

2. အင်တာနက်ကနေလှမ်းချိတ်နည်း။
ဒီနည်းကအတော်လေးအလုပ်ဖြစ်ပါတယ်။ Photo ကိုတစ်ခါထဲ Website အတွက်ထည့်ပေးတာဟာ Website ‌လေးစေတဲ့အပြင်ပုံများလာရင် Website ကိုသုံးရတာဟာထစ်တာ၊လေးတာ၊ပုံမပေါ်တာတွေဖြစ်တတ်ပါတယ်။အင်တာနက်ကနေလှမ်းချိတ်နည်းကတော့အဲ့ဒါတွေမဖြစ်ပါဘူး။အင်နက်မှာမိမိကြိုက်နှစ်သက်ရာပုံကိုရှာပြီး copy link ယူလိုက်ပြီး src ထဲမှာထည့်လိုက်ရုံပါဘဲ။
(ဥပမာ - <img alt = 'အင်တာနက်ကနေလှမ်းချိတ်နည်း။' src = 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FBor5lkRyeGo%2Fhqdefault.jpg&imgrefurl=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBor5lkRyeGo&tbnid=5LRstxhDYEbxBM&vet=12ahUKEwjt4qvrwK73AhXHk9gFHUFQCAAQMygEegUIARDNAQ..i&docid=htz-fo0Xys4-eM&w=480&h=360&q=html%20img&ved=2ahUKEwjt4qvrwK73AhXHk9gFHUFQCAAQMygEegUIARDNAQ' >)

Photo ရဲ့ဆိုဒ်ကိုပြင်ချင်တယ်ဆိုရင် -
img ကိုဒီအတိုင်ချိတ်မယ်ဆိုရင် Photo ရဲ့ရှိပြီးသားဆိုဒ်ကိုဘဲပြမှာပါ။ကိုလိုချင်တဲ့ဆိုဒ်ကိုပြောင်းချင်တယ်ဆိုရင်တော့အောက်ပါအတိုင်းရေးပေးရပါမယ်။
<img alt = 'ဖော်ပြချင်သောအကြောင်းအရာ' src = 'ဓာတ်ပုံလမ်းကြောင်း' width='20%'>
width ကိုပြောင်းလဲလိုက်တာနဲ့သူ့အလိုလို height ကပြောင်းလဲပါလိမ့်မယ်။
width ကို % နဲ့ပေးလိုရပါတယ်။ အခြားဆိုဒ်တွေနဲ့လည်းပေးလိုရပင်မဲ့ % နဲ့ပေးတာဟာပိုပြီးတိကျတယ်ဆိုတာကိုသတိပြုစေချင်ပါတယ်။
% ဟာ broswer ရဲ့မျက်နှာပြင်ကိုရည်ညွှန်းပါတယ်။

အနှစ်ချုပ်ပြောရရင် img tag ကအလွန်အရေးပါပါတယ်။ Website ရဲ့အနှစ်သက်ရတွေထဲကတစ်ခုလည်းဖြစ်ပါတယ်။

list ဆိုတာဘာလဲ။

ဒီတစ်ခေါက်မှာတော့ HTML ရဲ့ List တွေအကြောင်းပြောမှာပါ။ HTML မှာ List ၃မျိုးရှိပါတယ်။တစ်နည်းအားဖြင့် list ဆိုတာက offic software တွေမှာ bullet တပ်တာဘဲဖြစ်ပါတယ်။List၃မျိုးကတော့-

Unordered list
Ordered list
Definition list
စတာတွေဖြစ်ပါတယ်။

Unordered list

Unordered list က တွေထဲမှာ တပ်ချင်တဲ့အခါမှာသုံးပါတယ်။ သူ့ကို အဖွင့်နဲ့အပိတ်အကြားမှာရေးရပါတယ်။ကိုယ်ဖော်ပြချင်တဲ့စာရင်းကိုတော<ul> tag အဖွင့်အပိတ်နဲ့ရေးရပါတယ်။ bullet ကိုပုံစံအမျိုးမျိုးနဲ့ရေးချင်တယ်ဆိုရင်တော့ <ul> tag အဖွင့်ထဲမှာ type ကိုထည့်သွင်းရေးရပါတယ်။type မှာ square, circle, disc စတာတွေကိုထည့်သွင်းပြီး‌ရေးပေးနိုင်ပါတယ်။

(Eg - <ul type='circle'><li>Unordered list</li></ul>)

Ordered list

Ordered listကတော<ol> tag အဖွင့်အပိတ်နဲ့ရေးရပါတယ်။စာတွေရဲ့အရှေ့မှာနံပါတ်တပ်ချင်တဲ့အခါဒါမှမဟုတ်ရောမဂဏန်းအကြီးအသေးတက်ချင်တဲ့အခါစတာတွေမှာအသုံးပြုပါတယ်။type မှာ i,I,1,a,A စတာတွေကိုထည့်သွင်းပြီး‌ရေးပေးနိုင်ပါတယ်။

(Eg- <ol type = 'i' ><li>Ordered list<li><ol>)

သူ့မှာထူးခြားချက်အနေနဲ့ start ပါထည့်‌သွင်းရေးသားနိုင်ပါတယ်။

(Eg- <ol type = 'i' start = '5'><li>Ordered list<li><ol>)
ဒါဆိုရင်ရောမဂဏန်းအသေး i နေမစဘဲ V ကနေစမှာဘဲဖြစ်ပါတယ်။

Definition list

Definition list ကတော့ခေါင်းစဥ်နဲသူ့ရဲ့အကြောင်းကိုပြန်ရှင်းပြတဲ့အခါမှာသုံးပါတယ်။သူ့ကိုတော့ dl tag အဖွင့်အပိတ်နဲ့ရေးရပါတယ်။ထူးခြားချက်အနေနဲ့ dt dd ag အဖွင့်အပိတ်နဲ့ရေးရတာဖြစ်ပါတယ်။dt ကတော့ခေါင်းစဉ်ဖြစ်ပါတယ်။ dd ကတော့ဖော်ပြချက်ဖြစ်ပါတယ်။

(Eg- <dl><dt>ခေါင်းစဥ်<dt><dd>ဖော်ပြချက်<dd><dl>