Text များ နှင့် စာလုံးပုံပြောင်းခြင်း

ဒီအခန်းမှာတော့ HTML မှာ စာသားတွေကို ဘယ်လို ပုံစံချရမလဲဆိုတာကို အဓိကထားပြီး လေ့လာသွားမှာပါ။ ခေါင်းစဉ်ကြီးတွေ (Headings)၊ စာပိုဒ်တွေ (Paragraphs) ဖန်တီးနည်းနဲ့ HTML tag အမျိုးမျိုးသုံးပြီး စာသားပုံစံ ပြောင်းနည်းတွေကို သင်ယူရပါမယ်။ ဒါ့အပြင် List တွေနဲ့ တခြား အရေးကြီးတဲ့ စာသားပုံစံချတဲ့ Element တွေကိုသုံးပြီး ခင်ဗျားရဲ့ အကြောင်းအရာတွေကို ဘယ်လို စနစ်တကျ စီစဉ်မလဲဆိုတာကိုပါ လေ့လာသွားပါမယ် ခင်ဗျာ။

ခေါင်းစဉ်များ (`<h1>` ကနေ `<h6>` အထိ)

HTML မှာ ခေါင်းစဉ် (Headings) တွေကို ခင်ဗျားရဲ့ အကြောင်းအရာတွေကို ပုံစံကျအောင် သတ်မှတ်ဖို့အတွက် သုံးပါတယ်။ ခေါင်းစဉ်တွေက အကြောင်းအရာကို စနစ်တကျဖြစ်စေဖို့အတွက်ရော၊ Google လို ရှာဖွေရေးအင်ဂျင်တွေမှာ အလွယ်တကူ ရှာတွေ့နိုင်ဖို့ (SEO) အတွက်ပါ အင်မတန် အရေးကြီးပါတယ်။

Heading Tags:

HTML မှာ <h1> ကနေ <h6> အထိ ခေါင်းစဉ် အဆင့် ၆ ဆင့် ရှိပါတယ် ခင်ဗျာ။

ဥပမာ -

<h1>This is a Main Heading</h1>
<h2>This is a Subheading</h2>
<h3>This is a Smaller Subheading</h3>

<h1>: စာမျက်နှာရဲ့ အဓိကခေါင်းစဉ်ကြီး (များသောအားဖြင့် Title အတွက်သုံးတယ်)။
<h2>: <h1> အောက်က ခေါင်းစဉ်ငယ်။
<h3> ကနေ <h6>: အရေးပါမှုအလိုက် တဖြည်းဖြည်း သေးသွားတဲ့ ခေါင်းစဉ်ငယ်တွေ။

Headings တွေ ဘာကြောင့် အရေးကြီးသလဲ

Headings တွေက အကြောင်းအရာတွေကို သူ့အဆင့်နဲ့သူ ပုံစံကျအောင် ကူညီပေးပါတယ်။
သူတို့က အသုံးပြုသူတွေရော Search Engine တွေကိုပါ ခင်ဗျား စာမျက်နှာရဲ့ တည်ဆောက်ပုံကို မြန်မြန်ဆန်ဆန် နားလည်အောင် ကူညီပေးပါတယ်။

စာပိုဒ်များ (Paragraphs)

<p> tag ကို စာပိုဒ်တွေ ဖန်တီးဖို့အတွက် သုံးပါတယ်။ စာပိုဒ်တွေက အကြောင်းအရာတွေကို စုစည်းပေးပြီး ဖတ်ရပိုလွယ်ကူအောင် ကူညီပေးပါတယ်။

ဥပမာ:

<p>This is a paragraph of text.</p>
<p>Here is another paragraph.</p>

<p> tag က စာပိုဒ်တွေကို စုစည်းပေးပြီး ဖတ်ရလွယ်ကူအောင် ကူညီပေးပါတယ်။
<p> tag ကိုသုံးတဲ့အခါ၊ Browser က စာပိုဒ်ရဲ့ အပေါ်နဲ့အောက်မှာ နေရာလပ်ကို အလိုအလျောက် ထည့်ပေးတဲ့အတွက် တခြား Element တွေနဲ့ ရှင်းရှင်းလင်းလင်း ခွဲခြားပေးပါတယ်။

Block နှင့် Inline Elements — မျဉ်းဆင်းပုံ ကွာခြားချက်

HTML element တွေကို Block နဲ့ Inline ဆိုပြီး နှစ်မျိုး ခွဲခြားထားပါတယ်။

Block elements (<h1>, <p>, <div>) — သူတို့က တစ်ကြောင်းစာ အပြည့် (Full Width) ယူပြီး နောက်တစ်ကြောင်းကို အလိုအလျောက် ဆင်းသွားပါတယ်။
Inline elements (<strong>, <em>, <a>, <span>) — သူတို့ကတော့ လိုအပ်တဲ့ နေရာလောက်ပဲယူပြီး စာကြောင်းရဲ့ ဘေးမှာပဲ ဆက်ထိုင်နေပါတယ်။