HTML ကျူတိုရီရယ်

HTML ပင်မစာမျက်နှာ HTML နိဒါန်း HTML တည်းဖြတ်သူများ HTML အခြေခံ HTML အစိတ်အပိုင်းများ HTML အရည်အချင်းများ HTML ခေါင်းစီးများ HTML စာပိုဒ်များ HTML ပုံစံများ HTML Formatting HTML ကိုးကားချက်များ HTML မှတ်ချက်များ HTML အရောင်များ HTML CSS HTML လင့်ခ်များ HTML ပုံများ HTML Favicon HTML ဇယားများ HTML စာရင်းများ HTML Block & Inline HTML အတန်းများ HTML ID HTML Iframes HTML JavaScript HTML ဖိုင်လမ်းကြောင်းများ HTML Head HTML အပြင်အဆင် HTML တုံ့ပြန်မှု HTML ကွန်ပျူတာကုဒ် HTML ဝေါဟာရများ HTML ပုံစံလမ်းညွှန် HTML အကြောင်းအရာများ HTML သင်္ကေတများ HTML အီမိုဂျီများ HTML Charset HTML URL ကုဒ် HTML နှင့် XHTML

HTML ပုံစံများ

HTML ပုံစံများ HTML Form Attribute များ HTML ဖောင်ဒြပ်စင်များ HTML ထည့်သွင်းမှု အမျိုးအစားများ HTML ထည့်သွင်းခြင်း အရည်အချင်းများ HTML Input Form Attributes

HTML ဂရပ်ဖစ်

HTML Canvas HTML SVG

HTML မီဒီယာ

HTML မီဒီယာ HTML ဗီဒီယို HTML အသံ HTML ပလပ်အင်များ HTML YouTube

HTML API များ

HTML Geolocation HTML ဆွဲ/ချပါ။ HTML ဝဘ်သိုလှောင်မှု HTML ဝဘ်အလုပ်သမားများ HTML SSE

HTML နမူနာများ

HTML နမူနာများ HTML Quiz HTML လေ့ကျင့်ခန်းများ HTML လက်မှတ် HTML အနှစ်ချုပ် HTML အသုံးပြုနိုင်မှု

HTML ကိုးကားချက်များ

HTML Tag စာရင်း HTML အရည်အချင်းများ HTML ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ HTML Browser ပံ့ပိုးမှု HTML ပွဲများ HTML အရောင်များ HTML Canvas HTML အသံ/ဗီဒီယို HTML Doctypes HTML အက္ခရာအစုံများ HTML URL ကုဒ် HTML လန်းကုဒ်များ HTTP မက်ဆေ့ခ်ျများ HTTP နည်းလမ်းများ PX မှ EM Converter ကီးဘုတ်ဖြတ်လမ်းများ

HTML Semantic Elements များ


Semantic elements = အဓိပ္ပါယ်ရှိသော ဒြပ်စင်များ။


Semantic Elements တွေက ဘာတွေလဲ။

semantic element သည် browser နှင့် developer နှစ်ခုလုံးအတွက် ၎င်း၏အဓိပ္ပါယ်ကို ရှင်းလင်းစွာဖော်ပြပါသည်။

အဓိပ္ပါယ် မရှိသော ဒြပ်စင်များ ဥပမာများ- <div>နှင့် <span>- ၎င်း၏ အကြောင်းအရာအကြောင်း ဘာမှ မပြောပါ။

semantic ဒြပ်စင် များ ဥပမာများ - <form>, <table>, နှင့် <article>- ၎င်း၏ အကြောင်းအရာကို ရှင်းလင်းစွာ သတ်မှတ်သည်။


HTML ရှိ Semantic Elements များ

ဝဘ်ဆိုက်များစွာတွင် လမ်းကြောင်းပြခြင်း၊ ခေါင်းစီးနှင့် အောက်ခြေမှတ်စုတို့ကို ညွှန်ပြရန် - <div class="header"> <div class="header"> <div id="footer"> ကဲ့သို့သော HTML ကုဒ်များ ပါရှိသည်။

HTML တွင် ဝဘ်စာမျက်နှာတစ်ခု၏ မတူညီသော အစိတ်အပိုင်းများကို သတ်မှတ်ရန် အသုံးပြုနိုင်သော ဝေါဟာရဆိုင်ရာ ဒြပ်စင်အချို့ ရှိပါသည်။  

  • <article>
  • <aside>
  • <အသေးစိတ်>
  • <figcaption>
  • <ပုံ>
  • <footer>
  • <header>
  • <အဓိက>
  • <အမှတ်အသား>
  • <nav>
  • <ကဏ္ဍ>
  • <အကျဉ်းချုပ်>
  • <အချိန်>
HTML Semantic Elements များ


HTML <section> Element

ဒြပ်စင် သည် <section>စာရွက်စာတမ်းတစ်ခုရှိ ကဏ္ဍတစ်ခုကို သတ်မှတ်သည်။

W3C ၏ HTML စာရွက်စာတမ်းအရ- "အပိုင်းတစ်ခုသည် ပုံမှန်အားဖြင့် ခေါင်းစဉ်တစ်ခုပါရှိသော အကြောင်းအရာများကို အကြောင်းအရာအလိုက် အုပ်စုဖွဲ့ခြင်းဖြစ်ပါသည်။"

<section>ဒြပ်စင်တစ်ခုကို အသုံးပြုနိုင် သည့် ဥပမာများ -

  • အခန်းများ
  • နိဒါန်း
  • သတင်းအချက်များ
  • ဆက်သွယ်ရန်အချက်အလက်များ

ဝဘ်စာမျက်နှာကို ပုံမှန်အားဖြင့် မိတ်ဆက်ခြင်း၊ အကြောင်းအရာနှင့် ဆက်သွယ်ရန် အချက်အလက်များအတွက် ကဏ္ဍများအဖြစ် ခွဲနိုင်သည်။

ဥပမာ

စာတမ်းတစ်ခုတွင် အပိုင်းနှစ်ပိုင်း-

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>


HTML <article> Element

ဒြပ်စင် သည် <article>လွတ်လပ်သော၊ ကိုယ်တိုင်ပါရှိသော အကြောင်းအရာကို သတ်မှတ်သည်။

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

<article>ဒြပ်စင်ကို အသုံးပြုနိုင် သည့် နေရာ ဥပမာများ

  • ဖိုရမ်မှာ တင်ထားတာ
  • ဘလော့ပို့စ်များ
  • အသုံးပြုသူမှတ်ချက်များ
  • ထုတ်ကုန်ကတ်များ
  • သတင်းစာဆောင်းပါးများ

ဥပမာ

အမှီအခိုကင်းပြီး ကိုယ်တိုင်ပါရှိသော အကြောင်းအရာပါ ဆောင်းပါးသုံးပုဒ်

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

ဥပမာ ၂

<article> element ကို ပုံစံထုတ်ရန် CSS ကိုသုံးပါ-

<html>
<head>
<style>
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

</body>
</html>

<article> ကို <section> သို့မဟုတ် Vice Versa တွင် အသိုက်လုပ်မလား။

ဒြပ်စင် သည် <article> လွတ်လပ်သော၊ ကိုယ်တိုင်ပါရှိသော အကြောင်းအရာကို သတ်မှတ်သည်။

ဒြပ်စင် သည် <section>စာရွက်စာတမ်းတစ်ခုတွင် အပိုင်းကို သတ်မှတ်သည်။

ထိုဒြပ်စင်များကို မည်ကဲ့သို့ အသိုက်ဖွဲ့ရမည်ကို ဆုံးဖြတ်ရန် အဓိပ္ပါယ်ဖွင့်ဆိုချက်များကို ကျွန်ုပ်တို့ အသုံးပြုနိုင်ပါသလား။ မဟုတ်ဘူး၊ ငါတို့ မလုပ်နိုင်ဘူး။

ထို့ကြောင့်၊ ဒြပ်စင်များပါရှိသောဒြပ်စင်များ နှင့် ဒြပ်စင်များ <section>ပါရှိသော ဒြပ်စင်များပါရှိသော HTML စာမျက်နှာများကိုသင်တွေ့လိမ့်မည် <article><article><section>


HTML <header> Element

ဒြပ်စင် သည် <header>မိတ်ဆက်အကြောင်းအရာအတွက် ကွန်တိန်နာတစ်ခု သို့မဟုတ် လမ်းကြောင်းပြခြင်းဆိုင်ရာ လင့်ခ်အစုံကို ကိုယ်စားပြုသည်။

<header>ဒြပ်စင် တစ်ခုတွင် ပုံမှန်အားဖြင့်-

  • တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုသော ခေါင်းစီးအစိတ်အပိုင်းများ (<h1> - <h6>)
  • လိုဂို သို့မဟုတ် အိုင်ကွန်
  • စာရေးသူအချက်အလက်

မှတ်ချက်-<header> HTML စာရွက်စာတမ်းတစ်ခုတွင် ဒြပ်စင် များစွာ ပါရှိနိုင်သည်။ သို့ရာတွင်၊ သို့မဟုတ် အခြား ဒြပ်စင် <header>တစ်ခုအတွင်း ထားရှိ၍မရပါ ။<footer><address><header>

ဥပမာ

<article> တစ်ခုအတွက် ခေါင်းစီးတစ်ခု- 

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

HTML <footer> Element

ဒြပ်စင် သည် <footer>စာရွက်စာတမ်း သို့မဟုတ် အပိုင်းအတွက် အောက်ခြေမှတ်စုကို သတ်မှတ်သည်။

<footer>ဒြပ်စင် တစ်ခုတွင် ပုံမှန်အားဖြင့်-

  • စာရေးသူအချက်အလက်
  • မူပိုင်ခွင့်အချက်အလက်
  • ဆက်သွယ်ရန်အချက်အလက်များ
  • ဆိုက်မြေပုံ
  • ထိပ်တန်းလင့်ခ်များသို့ ပြန်သွားရန်
  • ဆက်စပ်စာရွက်စာတမ်းများ

<footer>စာရွက်စာတမ်းတစ်ခုတွင် အစိတ်အပိုင်းများ စွာ ပါဝင်နိုင်သည်။

ဥပမာ

စာရွက်စာတမ်းတစ်ခုရှိ အောက်ခြေအပိုင်း-

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

HTML <nav> Element

ဒြပ်စင် သည် <nav>လမ်းကြောင်းပြလင့်ခ်များ အစုံကို သတ်မှတ်သည်။

စာရွက်စာတမ်းတစ်ခု၏ လင့်ခ်များအားလုံးသည် ဒြပ်စင်တစ်ခုအတွင်း မပါဝင်သင့်ကြောင်း သတိပြုပါ <nav><nav>ဒြပ်စင်သည် လမ်းကြောင်းပြလင့်ခ်များ၏ အဓိကပိတ်ဆို့ခြင်းအတွက်သာ ရည်ရွယ်ပါသည်

မသန်စွမ်းအသုံးပြုသူများအတွက် စခရင်ဖတ်စက်များကဲ့သို့သော ဘရောက်ဆာများသည် ဤအကြောင်းအရာ၏ ကနဦးတင်ဆက်မှုကို ချန်လှပ်ခြင်းရှိမရှိ ဆုံးဖြတ်ရန် ဤဒြပ်စင်ကို အသုံးပြုနိုင်ပါသည်။

ဥပမာ

လမ်းညွှန်လင့်ခ်အစုံ

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

HTML <aside> Element

ဒြပ်စင်သည် ၎င်း <aside>တွင်ထည့်ထားသည့် အကြောင်းအရာမှလွဲ၍ အကြောင်းအရာအချို့ကို သတ်မှတ်သည် (ဘေးဘားကဲ့သို့)။

<aside>အကြောင်းအရာသည် ပတ်ဝန်းကျင်အကြောင်းအရာနှင့် သွယ်ဝိုက်ဆက်စပ်နေသင့်သည်

ဥပမာ

ထည့်သွင်းထားသည့် အကြောင်းအရာမှလွဲ၍ အချို့သောအကြောင်းအရာကို ပြသပါ-

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

ဥပမာ ၂

<aside> ဒြပ်စင်ကို ပုံစံထုတ်ရန် CSS ကိုသုံးပါ-

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

HTML <figure> နှင့် <figcaption> Elements များ

<figure>တဂ်သည် ပုံများ၊ ပုံများ၊ ပုံများ၊ ပုံများ

tag သည် element <figcaption>တစ်ခုအတွက် စာတန်းတစ်ခုကို သတ်မှတ်သည် ။ <figure>ဒြပ်စင်အား ဒြပ်စင်တစ်ခု၏ ပထမ <figcaption>သို့မဟုတ် နောက်ဆုံးကလေးအဖြစ် ထားရှိ <figure>နိုင်ပါသည်။

ဒြပ်စင်သည် တ <img>ကယ့်ရုပ်ပုံ/သရုပ်ဖော်ပုံကို သတ်မှတ်သည်။ 

ဥပမာ

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

အဘယ်ကြောင့် Semantic Elements များ

W3C အရ - "အသုံးအနှုန်းများသော ဝဘ်တစ်ခုသည် အပလီကေးရှင်းများ၊ လုပ်ငန်းများနှင့် အသိုင်းအဝိုင်းများကြားတွင် ဒေတာများကို မျှဝေပြီး ပြန်သုံးနိုင်စေပါသည်။"


HTML ရှိ Semantic Elements များ

အောက်တွင် HTML ရှိ semantic အစိတ်အပိုင်းအချို့၏စာရင်းဖြစ်သည်။

Tag Description
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

ရရှိနိုင်သော HTML တဂ်များအားလုံး၏စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ HTML Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။