Add Semantic Value to Your Pages With HTML 5

Goo GooFebruary 3, 2010HTML & CSS

အရင် Tutorial တုန်းက <div> တွေနေရာမှာ အစားထိုးမယ့် structural tag အသစ်တွေ လေ့လာပီးပီ.. ဒီတစ်ခါတော့ structural ပုံစံမဟုတ်ပဲ သုံးလို့ရတဲ့ tag တွေ ကြည့်ရအောင်… ကျနော်တို့ content တွေအတွက် ပိုပီး အဓိပ္ပာယ်ပြည့်စုံသွားတာပေါ့..

The `<time>` tag

တချို့ blog post တွေ article အဟောင်းတွေက အသစ်လိုလို၊ breaking news လိုလိုနဲ့ human error ကြောင့်ဖြစ်ဖြစ်၊ search crawler error ကြောင့်ဖြစ်ဖြစ် ရှိနေတတ်ပါတယ်။ HTML 5 လဲ human error အတွက်တော့ ဘာမှ မတတ်နိုင်ပါဖူး.. ဒါပေမယ့် <time> tag ကတော့ search engine spider တွေအတွက်တော့ error နည်းသွားအောင် ကူညီပေးပါလိမ့်မယ်.. basic usage ကတော့ ဒီလိုပေါ့…

Published <time>12/27/2009</time>

ဒီ <time> tag မှာ datetime attribute ပါပေသတယ်.. စိတ်ကြိုက် date format သတ်မှတ်ပေးလို့ရတာပေါ့.. လူတွေအတွက်ရော spider တွေအတွက်ရောကောင်းပါတယ်.. အပေါ်က code ကို နည်းနည်းပြင်မယ်..

Published <time datetime="2009-12-27T17:22:28-01:24"> Sunday, December 27, 2009 at 01:24AM EST</time>

ဒီမှာ ISO 8601 date format ကြီးက ရှုပ်တယ်လို့ ထင်ရတယ်… လက်နဲ့ ကိုယ်တိုင်ရေးတာဆိုရင်တော့ ဟုတ်တာပေါ့… CMS ကောင်းကောင်းတွေမှာဆို အဲဒီ format ကို ထုတ်ပေးနိုင်တဲ့ function ပါပီးသားပါ.. WordPress မှာဆို ဒီလို ရေးလို့ရပါတယ်…

Published <time datetime="<?php the_time('c'); ?>"> <?php the_time('l, F j, Y'); ?></time>

သတိထားစရာလေး နည်းနည်းရှိပါတယ်.. HTML 5 spec မှာတော့ datetime attribute ကို ဖြုတ်ရေးမယ်ဆိုရင် time tag မှာ valid date format ပါရပါမယ်.. year, month, day ကိုပြောတာပါ.. datetime attribute ထည့်လဲ ဗလာချန်ထားခဲ့လို့ရပါတယ်.. ဒါပေမယ့်.. spider တွေ အတွက်ရော.. လူဖတ်လို့ အဆင်ပြေမယ့် format ရော ၂ မျိုးလုံးထည့်ပေးတာ ကောင်းပါတယ်..

The <figure> tag

figure ကတော့ သူ့နာမည်အတိုင်း ပုံတွေအတွက် အဓိကပေါ့.. ဒါပေမယ့် diagrams, code snippets တွေနဲ့ တခြား figurative ဖြစ်တဲ့ content တွေမှာလဲ သုံးရပါတယ်.. ပုံတိုင်းအတွက်တော့ သုံးဖို့ မလိုပါဖူး.. စောစောက ပြောသလို illustrative ဖြစ်တဲ့ ဟာတွေမှ သုံးပါ… အသုံးအများဆုံးကတော့ article or post တစ်ခုကို ကိုယ်စားပြုတဲ့ ပုံမှာ သုံးတဲ့ ပုံစံဖြစ်မှာပေါ့.. image tag အပြင်ကနေ figure tag အုပ်လိုက်ပီး.. legend tag ထည့်ပေးလိုက်ရုံပါပဲ…

<figure>
    <img src="/images/tpsreport.jpg" alt="TPS Report, July 2009" />
    <legend>July 2009 TPS Reports</legend>
</figure>

အဓိက မှတ်ထားရမှာကတော့ figure tage က image တိုင်း အတွက်သုံးစရာမလိုဖူးဆိုတာပဲ.. example ပြတဲ့နေရာတို့.. တစ်ခုခုကို ညွှန်းတာတို့ဆိုမှ သုံးပါ..

The <dialog> tag

ဒါကတော့ စကားပြောခန်းတွေအတွက်ပါ.. chat ပြောထားတာ၊ အင်တာဗျူးထားတာတွေတို့ အတွက်ပေါ့.. comment တွေ အတွက်လဲ သုံးလို့ရတာပဲ.. dialog tag က definition list နဲ့ အလုပ်လုပ်ပုံချင်းတော်တော်တူတယ်..

<dialog>
    <dt> Costello </dt>
    <dd> Look, you gotta first baseman? </dd>
    <dt> Abbott </dt>
    <dd> Certainly. </dd>
    <dt> Costello </dt>
    <dd> Who's playing first? </dd>
    <dt> Abbott </dt>
    <dd> That's right. </dd>
</dialog>

Comment အတွက်သုံးမယ်ဆိုရင်တော့ ဒီလိုမျိုးပေါ့…

<dialog>
    <dt id="comment_1">Commenter Name</dt>
    <dd>Hello. I really likes your site. Want to buy some WOW gold?</dd>
</dialog>

Revisiting the `<aside>` tag

quote လုပ်ပီး သုံးတဲ့ ပုံစံမျိုးပါ.. article ရဲ့ ဘေးမှာတို့.. အောက်နားမှာတို့ မြင်သာအောင် highlight လုပ်ပြတဲ့ နေရာမျိုးပေါ့.. <q> နဲ့ ဆင်ပါတယ်… ဒီမှာ official example ပါ..

<p>He later joined a large company, continuing on the same work.

<q>I love my job. People ask me what I do for fun when I'm not
at work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't
have to work... but I know what I would do, because I was
unemployed for a year, and I filled that time doing exactly what
I do now.</q></p>

<aside>
 <q> People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer. </q>
</aside>

<p>Of course his work - or should that be hobby? - isn't his
only passion. He also enjoys other pleasures.</p>

<q> tag က paragraph ထဲမှာပဲ ဝင်သွားပါတယ်.. <aside> ကတော့ သပ်သပ်ကွဲသွားပါတယ်.. သတင်းစာတွေ မဂ္ဂဇင်းတွေမှာ အများဆုံးသုံးတဲ့ ပုံစံမျိုးပါ… အဲ.. အပေါ်က code ကို စမ်းကြည့်ရင်တော့ style တွေပါမှာဟုတ်ဖူးနော်.. ဒီ tag အသစ်တွေအတွက် default style တွေ browser တွေမှာ မပါသေးဖူး.. ကိုယ့်ဟာကို ထည့်ပေးရမှာ…

The <mark> tag

ဒီဟာက <strong> နဲ့ ခပ်ဆင်ဆင်ပါ.. အရေးကြီးတယ်ဆိုတဲ့ သဘောပေါ့.. အသုံးတော့ နည်းပါတယ်.. search term တွေ highlight လုပ်ပြတဲ့ နေရာမှာတော့ အသုံးတည့်မှာပါ.. Google က cached page တွေကို ကြည့်ပါ… အဲလို နေရာမှာ <mark> သုံးဖို့ အကောင်းဆုံးပေါ့..

ကဲ semantic tag တွေ တော်တော်စုံသွားပီး.. နောက်တစ်ခုကျ audio, video, canvas tag တွေ စမ်းကြည့်မယ်…

Facebook comments: