SATT ACADEMY
Forgot your password?

New to Satt Academy? Create an account

or

Log in with Google Account

Academy
Back
On This Page
Web Development - HTML - NCTB BOOK
OPTIONS
Test Yorself
All Question
Add Content
Bookmark
Add Video
Add MCQ
Add Written
Error Report
Please, contribute to add content into এইচটিএমএল৫ (HTML5).
Content
OPTIONS
Test Yorself
All Question
Edit Content
Bookmark
Add Video
Add MCQ
Add Written
Error Report

এইচটিএমএল(৫) এইচটিএমএল এর ৫ম সংস্করণ। এটি W3C কর্তৃক অক্টোবর ২০১৪ সালে প্রকাশিত হয়। এর মূল লক্ষ্য নতুন মাল্টিমিডিয়া সাপোর্টের সঙ্গে মানুষের জন্য সহজে পাঠযোগ্য এবং কম্পিউটার ও ডিভাইসের জন্য সহজে বোধগম্য করা। স্মার্টফোন ও ট্যাবলেটের মতো ডিভাইস বিবেচনায় রেখে এইচটিএমএল ৫ এর অনেক ফিচার নির্মিত হয়েছে।

এইচটিএমএলের ইতিহাস

শুরু থেকে এইচটিএমএলের অনেক ভার্সন হয়েছেঃ

ভার্সনবছর
টিম বার্নাস লি www উদ্ভাবন করেন১৯৮৯
টিম বার্নাস লি এইচটিএমএল উদ্ভাবন করেন১৯৯১
Dave Raggett এইচটিএমএল+ গঠন করেন১৯৯৩
এইচটিএমএল গ্রুপ এইচটিএমএল ২.০ ভার্সন নির্ধারণ করে১৯৯৫
W3C এইচটিএমএল ৩.২ ভার্সনকে ঘোষনা করে১৯৯৭
W3C এইচটিএমএল ৪.০১ ভার্সনকে ঘোষনা করে১৯৯৯
W3C এক্সএইচটিএমএল ১.০ ভার্সনকে ঘোষনা করে২০০০
WHATWG এর এইচটিএমএল(৫) কে প্রথম আন্তর্জাতিক খসড়া প্রদান২০০৮
WHATWG এর এইচটিএমএল(৫) কে স্ট্যান্ডার্ডে অধিষ্ঠিত২০১২
W3C দ্বারা এইচটিএমএল(৫) এর চূড়ান্তভাবে ঘোষনা২০১৪
W3C ক্যান্ডিডেট রিকোমেন্ডেশনঃ এইচটিএমএল ৫.১২০১৬


 

নতুন এইচটিএমএল(৫) এপিআই(API)

সবচেয়ে আকর্ষনীয় নতুন এপিআইগুলো(API) হচ্ছেঃ

  • এইচটিএমএল জিওলোকেশন
  • এইচটিএমএল ড্র্যাগ এবং ড্রপ
  • এইচটিএমএল লোকাল স্টোরেজ
  • এইচটিএমএল এপ্লিকেশন ক্যাস
  • এইচটিএমএল ওয়েব ওয়ার্কারস
  • এইচটিএমএল এসএসই(SSE)

লোকাল স্টোরেজ হচ্ছে কুকিজ(cookies) এর জন্য একটি কার্যকরী বিকল্প।

এইচটিএমএল(৫) এলিমেন্ট ও এট্রিবিউট

সবচেয়ে আকর্ষনীয় এলিমেন্টঃ

সিমেন্টিক এলিমেন্ট, যেমনঃ < header > , < footer >, < article > এবং < section >

নতুন ফর্ম এট্রিবিউট, যেমনঃ number, date, time, calendar এবং range

নতুন গ্রাফিক এলিমেন্টঃ < svg > এবং < canvas >

নতুন মাল্টিমিডিয়া এলিমেন্টঃ < audio > এবং < video >

এইচটিএমএল(৫) এ সংযোজন

এইচটিএমএল(৫) এ DOCTYPE ডিক্লেয়ার অনেক সহজঃ

ক্যারেক্টারসেট ডিক্লেয়ারও সহজঃ

এইচটিএমএল(৫) ডকুমেন্টঃ

kt_satt_skill_example_id=1747

এইচটিএমএল(৫) এ অপসারিত এলিমেন্ট

নিচের এলিমেন্টগুলো এইচটিএমএল(৫) এ বাতিল করা হয়েছেঃ

এলিমেন্টবিকল্প ব্যবহার
< acronym >< abbr >
< applet >< object >
< basefont >CSS
< big >CSS
< center >CSS
< dir >< ul >
< font >CSS
< frame > 
< frameset > 
< noframes > 
< strike >CSS
< tt >CSS


 

Content added || updated By
Abdur Rakib
OPTIONS
Test Yorself
All Question
Edit Content
Bookmark
Add Video
Add MCQ
Add Written
Error Report

ব্রাউজার সাপোর্ট

এইচটিএমএল(৫) সকল আধুনিক ব্রাউজারে সাপোর্ট করে। তাছাড়া, সকল নতুন এবং পুরাতন ব্রাউজার অপরিচিত এলিমেন্টকে ইনলাইন এলিমেন্ট হিসেবে বিবেচনা করে।

এই কারণে পুরাতন ব্রাউজারগুলোতে অপরিচিত এইচটিএমএল এলিমেন্ট সঠিকভাবে কাজ করানো শিখতে হবে।

এইচটিএমএল(৫) এলিমেন্টকে ব্লক-লেভেল এলিমেন্ট সেট করা

এইচটিএমএল(৫) ৮টি নতুন সিমেন্টিক(semantic) এইচটিএমএল এলিমেন্ট ডিফাইন করা হয়েছে। এরা সবাই ব্লক-লেভেল এলিমেন্ট।

এই এলিমেন্ট সমূহকে পুরাতন ব্রাউজারে সঠিকভাবে কাজ করানোর জন্য, আপনার সিএসএস display প্রোপার্টিকে block সেট করতে হবেঃ

header, section, footer, aside, nav, main, article, figure {   
    display: block;
}

ইন্টারনেট এক্সপ্লোরারের(IE8) সমস্যা

IE8 এবং এর পূর্বের ব্রাউজারগুলোতে অপরিচিত এলিমেন্টগুলোর স্টাইল সাপোর্ট করে না।

সৌভাগ্যক্রমে, Sjoerd Visscher এইচটিএমএল(৫) Shiv! তৈরি করেন।

HTML5Shiv এর সম্পূর্ণ সমাধান

shiv কোডের লিংকটি অবশ্যই < head > এলিমেন্টে লিখতে হবে, কারণ ব্রাউজারকে অবশ্যই অপরিচিত এলিমেন্টকে পড়ার আগেই তার সম্পর্কে জানতে হবে।

kt_satt_skill_example_id=1750

 

Content added || updated By
Abdur Rakib
OPTIONS
Test Yorself
All Question
Edit Content
Bookmark
Add Video
Add MCQ
Add Written
Error Report

নতুন সিমেন্টিক এলিমেন্ট

এইচটিএমএল(৫) অপেক্ষাকৃত সুন্দর এবং সাজানো ডকুমেন্ট গঠনের জন্য নতুন এলিমেন্ট প্রস্তাব করেঃ

ট্যাগবর্ণনা
< article >ডকুমেন্টের মধ্যে একটি বিষয়বস্তু নির্ধারণ করে।
< aside >পেজের কন্টেন্ট পাশাপাশি নির্ধারণ করে।
< bdi >লেখার দিক নির্ধারণ করে।
< details >অতিরিক্ত বিবরন থাকে যা ব্যবহারকারী দেখতে পারে অথবা লুকিয়ে রাখতে পারে।
< dialog >একটি ডায়ালগ বক্স অথবা উইন্ডো ডিফাইন করে।
< figcaption >একটি < figure > এলিমেন্টের শিরোনাম নির্ধারণ করে।
< figure >স্বয়ংসম্পূর্ণ কন্টেন্ট ডিফাইন করে, যেমন illustrations, diagrams, photos, code listings ইত্যাদি।
< footer >একটি ডকুমেন্ট অথবা সেকশনের একটি footer নির্ধারণ করে।
< header >একটি ডকুমেন্ট অথবা সেকশনের একটি header নির্ধারণ করে।
< main >একটি ডকুমেন্টের মুল বিষয়বস্তু নির্ধারণ করে।
< mark >লেখা হাইলাইট করতে ব্যবহার করা হয়।
< menuitem > একটি command/menu item তৈরি করবে যা ব্যবহারকারী একটি পপ-আপ মেন্যু আকারে পাবে।
< meter >একটি গণনাযোগ্য পরিমাপ নির্ধারণ করে।
< nav >ডকুমেন্টের মধ্যে একটি নেভিগেশন লিংক নির্ধারণ করে।
< progress >একটি কাজের অগ্রগতি নির্ধারণ করে।
< rp >ruby অ্যানোটেশন সাপোর্ট করে না এমন ব্রাউজারের জন্য ব্যবহার করা হয়।
< rt >East Asian typography এর জন্য ক্যারেক্টারের ব্যাখ্যা/উচ্চারন নির্ধারণ করে।
< ruby >East Asian typography এর জন্য ruby অ্যানোটেশন নির্ধারণ করে।
< section >ডকুমেন্টের মধ্যে একটি সেকশন নির্ধারণ করে।
< summary >একটি
এলিমেন্টের দৃশ্যমান হেডিং নির্ধারণ করে।
< time >তারিখ/সময় নির্ধারণ করে।
< wbr >সম্ভাব্য line-break নির্ধারণ করে।

নতুন ফর্ম এলিমেন্ট

ট্যাগবর্ণনা
< datalist >ইনপুটের জন্য পূর্বনির্ধারিত অপশন নির্ধারণ করে।
< keygen >form এর জন্য একটি কী তৈরির ফিল্ড নির্ধারণ করে।
< output >একটি হিসাবের ফলাফল নির্ধারণ করে।।

ইনপুট টাইপ ও এট্রিবিউট

নতুন ইনপুট টাইপ সমূহঃ

ভ্যালুবর্ণনা
emailবৈধ ই-মেইল ইনপুট করার জন্য < input type="email" > ব্যবহার করা হয়।
numberশুধু মাত্র সংখ্যা ইনপুট করার জন্য < input type="number" > ব্যবহার করা হয়।
rangeইনপুট ফিল্ডের ভ্যালুর সীমা নির্ধারণ করার জন্য < input type="range" > ব্যবহার করা হয়।
telটেলিফোন নাম্বার ইনপুট করার জন্য < input type="tel" > ব্যবহার করা হয়।
monthতারিখের মধ্যে বছর এবং মাস ইনপুট করার জন্য < input type="month" > ব্যবহার করা হয়।
weekতারিখের মধ্যে বছর এবং সপ্তাহ ইনপুট করার জন্য < input type="week" > ব্যবহার করা হয়।
dateতারিখ ইনপুট করার জন্য < input type="date" > ব্যবহার করা হয়।
timeসময় ইনপুট করার জন্য < input type="time" > ব্যবহার করা হয়।
datetimeসময় এবং তারিখ ইনপুট করার জন্য < input type="datetime" > ব্যবহার করা হয়।
datetime-localসময় এবং তারিখ ইনপুট করার জন্য < input type="datetime-local" > ব্যবহার করা হয়।
colorকালার ভ্যালু ইনপুট করার জন্য < input type="color" > ব্যবহার করা হয়।
searchইনপুট ফিল্ডে সার্চবক্স হিসাবে ডেটা ইনপুট করার জন্য < input type="search" > ব্যবহার করা হয়।
urlব্যবহারকারীর কাছ থেকে লিংক ইনপুট করার জন্য < input type="url" > ব্যবহার করা হয়।

 

নতুন ইনপুট এট্রিবিউট সমূহঃ

এট্রিবিউটবর্ণনা
autocompleteপূর্বে ইনপুটকৃত ভ্যালু থেকে নতুন ভ্যালু ইনপুট করতে সাহায্য করে।
autofocuasপেজ লোড হওয়া সম্পন্ন হলে ইনপুট ফিল্ডটি সিলেক্টেড থাকবে কিনা তা নির্ধারণ করে।
formফর্মের বাইরের ইনপুট ট্যাগকে আইডির মাধ্যমে ফর্মের সাথে লিংক করে।
formactionফর্মের মূল action এট্রিবিউটকে ওভার-রাইট করে অর্থাৎ সাবমিটের জন্য নতুন একটি লিংক নির্ধারণ করে।
formenctypepost মেথোডের ক্ষেত্রে সার্ভারে সাবমিটকৃত ডেটার এনকোডিং পদ্ধতি নির্ধারণ করে।
formmethodসার্ভারে ফর্ম ডেটা পাঠানোর HTTP মেথোড নির্ধারণ করে। এটি ফর্মের মূল মেথোডকে ওভার-রাইড করে।
formvalidationইনপুট ফিল্ডের তথ্যের বৈধতা যাচাই বাতিল করে।
formtargetইনপুট এলিমেন্টের জন্য এটি target এট্রিবিউটের কাজ করে এবং ফর্ম এলিমেন্টে বিদ্যমান target এট্রিবিউটকে ওভার-রাইড করে।
height এবং widthইমেজ ইনপুট ফিল্ডের দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করে।
listপূর্বনির্ধারিত ভ্যালুর একটি লিস্টকে ইনপুট ফিল্ডের সাথে আইডির মাধ্যমে লিংক করতে ব্যবহার করা হয়।
minimum এবং maximumইনপুট ফিল্ডের সর্বনিন্ম এবং সর্বোচ্চ ভ্যালু নির্ধারণ করে।
multipleইনপুট ফিল্ডে একত্রে একাধিক ভ্যালু সিলেক্ট করা সম্ভব হয়। এটি email এবং file টাইপের ক্ষেত্রে কাজ করে।
patternইনপুট ফিল্ডের ভ্যালুর জন্য প্যাটার্ন নির্ধারণ করে।
placeholderইনপুট ফিল্ডের ইনপুটকৃত তথ্য সম্পর্কে ব্যবহারকারীকে অবগত করে। যা ইনপুট ফিল্ডে টাইপ করা শুরু করলে অদৃশ্য হয়ে যায়।
requiredযদি ইনপুট ফিল্ডটি খালি থাকলে ব্যবহারকারীকে একটি সতর্কবার্তা দেয় এবং ফর্মটি সাবমিট হয় না।
stepপূর্ণ সংখ্যার মধ্যবর্তী ব্যবধান নির্ধারণ করে।

এইচটিএমএল(৫) - নতুন এট্রিবিউটের গঠনপ্রণালী

এইচটিএমএল(৫) এ এট্রিবিউট চারভাবে লিখা যায়। নিম্নে < input > ইনপুট এলিমেন্টের চারটি গঠনপ্রণালী দেখানো হলোঃ

টাইপউদাহরণ
এম্পটি< input type="text" value="Azizur" disabled >
উদ্ধৃতিবিহীন< input type="text" value=Azizur >
দুইটি উদ্ধৃতিসহ< input type="text" value="Azizur Rahman" >
একটি উদ্ধৃতিসহ< input type="text" value='Azizur Rahman' >

এইচটিএমএল(৫) গ্রাফিক্স এলিমেন্ট

ট্যাগবর্ণনা
< canvas >জাভাস্ক্রিপ্ট ব্যবহার করে এই এলিমেন্টে গ্রাফিক্স তৈরি করা হয়।
< svg >এসভিজি(SVG) ব্যবহার করে গ্রাফিক্স অঙ্কন নির্ধারণ করে।

মিডিয়া এলিমেন্ট

ট্যাগবর্ণনা
< audio >শব্দ অথবা মিউজিক কন্টেন্ট ডিফাইন করে।
< embed >এক্সটার্নাল এপ্লিকেশনের জন্য কন্টেইনার নির্ধারণ করে (যেমনঃ plug-ins)।
< source >< video > এবং < audio > ট্যাগের উৎস নির্ধারণ করে।
< track >< video > এবং < audio > ট্যাগের ট্র্যাক নির্ধারণ করে।
< video >ভিডিও কন্টেন্ট নির্ধারণ করে।


 

Content added By
Abdur Rakib
OPTIONS
Test Yorself
All Question
Edit Content
Bookmark
Add Video
Add MCQ
Add Written
Error Report

সিমেন্টিক এলিমেন্টের নাম দেখেই এলিমেন্টের কন্টেন্টগুলো সম্পর্কে আমরা ধারনা পাবো। এইচটিএমএল(৫) এর সিমেন্টিক এলিমেন্ট সকল আধুনিক ব্রাউজারে সাপোর্ট করে।

সিমেন্টিক এলিমেন্ট

নন-সিমেন্টিক এলিমেন্টঃ < div > এবং < span > এলিমেন্ট তাদের কন্টেন্ট সম্পর্কে কিছুই বর্ণনা করে না।

সিমেন্টিক এলিমেন্টঃ < form >, < table >, এবং < img > এলিমেন্টগুলো দেখলেই বুঝতে পারি এর কন্টেন্টে কি থাকবে।

নতুন সিমেন্টিক এলিমেন্ট

নেভিগেশন, হেডার এবং ফুটার তৈরি করার জন্য অধিকাংশ ওয়েব সাইটে এইচটিএমএল কোড এইভাবে লেখা হয়ঃ < div id="nav" >, < div class="header" >, < div id="footer" >
 

একটি ওয়েব পেজের বিভিন্ন অংশকে ডিফাইন করার জন্য এইচটিএমএল(৫) এ নতুন সিমেন্টিক এলিমেন্টকে ব্যবহার করা হয়ঃ 

HTML5 Semantic Elements

উপরের ছবিতে বর্তমান ওয়েব পেজে ব্যবহৃত সিমেন্টিক এলিমেন্ট সমূহ তুলে ধরা হয়েছে।

< figure > এবং < figcaption > এলিমেন্ট

এইচটিএমএল(৫) এর < figure > এলিমেন্ট ব্যবহার করে ইমেজ এবং ইমেজের ক্যাপশন একসাথে দেখানো হয়।

kt_satt_skill_example_id=1755

< img > এলিমেন্ট দ্বারা ইমেজকে বুঝায় এবং < figcaption > ইমেজের ক্যাপশনকে বুঝায়।

< section > এলিমেন্ট

ডকুমেন্টের কন্টেন্টকে আলাদা করার জন্য < section > এলিমেন্ট ব্যবহার করা হয়।

kt_satt_skill_example_id=1756

সিমেন্টিক এলিমেন্টের নেস্টেড ব্যবহার

এইচটিএমএল(৫) এ, < article > এলিমেন্ট অন্যান্য এলিমেন্টের একটি স্বয়ংসম্পূর্ণ ব্লক হিসেবে ডিফাইন করা হয়। < section > এলিমেন্ট অন্যান্য এলিমেন্টের একটি ব্লক হিসেবে ডিফাইন করা হয়।

তার মানে, আমরা এদের একটির মধ্যে অন্যটিকে ব্যবহার করতে পারবো। আমরা < section > এলিমেন্টের মধ্যে < article > এলিমেন্ট ব্যবহার করতে পারি অথবা < article > এলিমেন্টের মধ্যে < section > এলিমেন্ট ব্যবহার করতে পারি। এটি একান্তই নিজের ইচ্ছার উপর নির্ভরশীল।

< header > এলিমেন্ট

< header > এলিমেন্ট একটি ডকুমেন্ট বা সেকশনের জন্য একটি হেডার নির্ধারণ করে। একটি ডকুমেন্টে অনেকগুলো < header > এলিমেন্ট থাকতে পারে।

নিচে < header > এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1777

এলিমেন্ট

< footer > এলিমেন্ট একটি ডকুমেন্ট অথবা একটি সেকশনের জন্য ফুটার নির্ধারণ করে। ফুটারে সাধারনত ডকুমেন্টের লেখক, কপিরাইট তথ্য, ব্যবহারের শর্তাবলীর জন্য লিঙ্ক, যোগাযোগের তথ্য ইত্যাদি দেওয়া থাকে। একটি ডকুমেন্টে একাধিক < footer > এলিমেন্ট থাকতে পারে। নিচে < footer > এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1778

< nav > এলিমেন্ট

< nav > এলিমেন্ট নেভিগেশন লিংকের সেট নির্ধারণ করে। < nav > এলিমেন্ট অধিক সংখ্যক নেভিগেশন লিংকের জন্য ব্যবহার করা হয়।

তবে একটি ডকুমেন্টের সকল লিংকে < nav > এলিমেন্টের মধ্যে রাখতে হয় না। নিচে < nav > এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1779

< aside > এলিমেন্ট

< aside > এলিমেন্ট তার পাশের কিছু কন্টেন্টকে নির্দেশ করে। aside কন্টেন্টগুলো তার পার্শ্ববর্তী কন্টেন্টগুলোর সাথে সম্পর্কযুক্ত থাকে।

নিচে < aside > এলিমেন্টের একটি ব্যবহার দেখানো হলোঃ

shortcode

এইচটিএমএল(৫) সিমেন্টিক এলিমেন্টের তালিকা

নিচে এইচটিএমএল(৫) এর নতুন সিমেন্টিক এলিমেন্টের একটি তালিকা দেওয়া হলোঃ

ট্যাগবর্ণনা
< article >একটি আর্টিকেল বুঝায়
< aside >একটি পেজ কন্টেন্টের পাশের কন্টেন্টকে বুঝায়
< details >ইউজারকে দেখানোর জন্য অতিরিক্ত তথ্যকে বুঝায়
< figcaption >< figure > এলিমেন্টের জন্য একটি ক্যাপশন সেট করে
< figure >ক্যাপশনসহ একটি এলিমেন্টকে বুঝায়
< footer >ডকুমেন্ট অথবা সেকশনের ফুটার নির্দেশ করে
< header >ডকুমেন্ট অথবা সেকশনের হেডার নির্দেশ করে
< main >ডকুমেন্টের প্রধান কন্টেন্টকে বুঝায়
< mark >টেক্সটকে চিহ্নিত করার জন্য ব্যবহার হয়
< nav >নেভিগেশন লিংকের জন্য ব্যবহার হয়
< section >ডকুমেন্টে সেকশন তৈরি করে
< summary >< details > এলিমেন্টের জন্য একটি হেডিং ডিফাইন করে
< time >তারিখ/সময় নির্দেশ করে
Content added || updated By
Abdur Rakib
OPTIONS
Test Yorself
All Question
Edit Content
Bookmark
Add Video
Add MCQ
Add Written
Error Report

এইচটিএমএল(৪) থেকে এইচটিএমএল(৫) এ রূপান্তর

এই পরিচ্ছেদে আমরা একটি পেজকে এইচটিএমএল(৪) থেকে এইচটিএমএল(৫) এ কিভাবে রুপান্তর করা যায় তা দেখবোঃ

এইচটিএমএল(৪)এইচটিএমএল(৫)
< div id="header" >< header >
< div id="menu" >< nav >
< div id="content" >< section >
< div id="post" >< article >
< div id="footer" >< footer >

এইচটিএমএল(৪) পেজের একটি উদাহরণ

kt_satt_skill_example_id=1784

এইচটিএমএল(৫) doctype ডিক্লেয়ার

এইচটিএমএল(৪) doctype ডিক্লেয়ারঃ

এইচটিএমএল(৫) doctype ডিক্লেয়ারঃ

kt_satt_skill_example_id=1785

এইচটিএমএল(৫) এনকোডিং

এইচটিএমএল(৪) এনকোডিংঃ

এইচটিএমএল(৫) এনকোডিংঃ

kt_satt_skill_example_id=1786

Shiv সংস্করণ

ইন্টারনেট এক্সপ্লোরারে এইচটিএমএল(৫) এর সিমেন্টিক এলিমেন্টগুলো সাপোর্ট করানোর জন্য আপনাকে shiv ব্যবহার করতে হবেঃ

kt_satt_skill_example_id=1788

এইচটিএমএল(৫) সিমেন্টিক এলিমেন্টের সিএসএস

এইচটিএমএল(৪) এর সিএসএস স্টাইলঃ

div#header,div#footer,div#content,div#post {
  border:1px solid grey;
  margin:5px;
  margin-bottom:15px;
  padding:8px;
  background-color:white;
}
div#header,div#footer {
  color:white;
  background-color:#444;
  margin-bottom:5px;
}
div#content {
  background-color:#ddd;
}
div#menu ul {
  margin:0;
  padding:0;
}
div#menu ul li {
  display:inline;
  margin:5px;
}

এইচটিএমএল(৫) এর সিমেন্টিক এলিমেন্টের সিএসএস স্টাইলঃ

kt_satt_skill_example_id=1789

এইচটিএমএল(৫)
এবং
এর ব্যবহার

id="header" এবং id="footer" এর সাহায্যে

এলিমেন্টকে পরিবর্তনঃ


.
.
.

এইচটিএমএল(৫) এর সিমেন্টিক

এবং