အရင္ 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 ေတြ စမ္းၾကည့္မယ္…