এইচটিএমএল সিএসএস জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

এইচটিএমএল টিউটোরিয়াল

এইচটিএমএল হোম পেজ এইচটিএমএল পরিচিতি এবং গঠন এইচটিএমএল কোড এটিটর এইচটিএমএলের মৌলিক ধারণা এইচটিএমএল এলিমেন্ট এইচটিএমএল emty এলিমেন্ট এইচটিএমএল এট্রিবিউট এইচটিএমএল class এট্রিবিউট এইচটিএমএল style এট্রিবিউট এইচটিএমএল কমেন্ট এইচটিএমএল হেডিং এইচটিএমএল প্যারাগ্রাফ এইচটিএমএল টেক্সট ফরম্যাট এইচটিএমএল টেক্সট কোটেশন এইচটিএমএল কম্পিউটারকোড এইচটিএমএল টেবিল এইচটিএমএল লিস্ট এইচটিএমএল কালার এইচটিএমএল সিএসএস এইচটিএমএল লিংক এইচটিএমএল ইমেজ এইচটিএমএল ব্লক-ইনলাইন এলিমেন্ট এইচটিএমএল হেড এইচটিএমএল লেআউট এইচটিএমএল আইফ্রেম এইচটিএমএল জাভাস্ক্রিপ্ট এইচটিএমএল রেস্পন্সিভ এইচটিএমএল এনটিটি এইচটিএমএল অক্ষরসেট এইচটিএমএল সিম্বল এইচটিএমএল URL এনকোড এইচটিএমএল-XHTML px - em কনভার্শন

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম এইচটিএমএল ফর্ম এলিমেন্ট এইচটিএমএল ইনপুট টাইপ এইচটিএমএল(৫) ইনপুট টাইপ এইচটিএমএল ইনপুট এট্রিবিউট

এইচটিএমএল৫

এইচটিএমএল৫ পরিচিতি ব্রাউজার সাপোর্ট এইচটিএমএল৫ এলিমেন্ট এইচটিএমএল৫ সিম্যান্টিক এলিমেন্ট এইচটিএমএল৫ মাইগ্রেশন এইচটিএমএল৫ স্টাইল গাইড

এইচটিএমএল মিডিয়া

মিডিয়া-Media ভিডিও-Video অডিও-Audio প্লাগ-ইন-PlugIn ইউটিউব-Youtube

এইচটিএমএল এপিআই

জিওলোকেশন-Geolocation ড্রাগ/ড্রপ-Drag/Drop লোকাল স্টোরেজ-LocalStorage অ্যাপ ক্যাশ-AppCache ওয়েব ওয়ার্কার-WebWorker এসএসই-SSE

এইচটিএমএল রেফারেন্স

রেফারেন্স- reference

 

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


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

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

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

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

উদাহরণ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <title>এইচটিএমএল(৪) </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }
  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;
  }
</style>
</head>
<body>

<div id="header">
  <h1> প্রথম আলো </h1>
</div>

<div id="menu">
<ul>
  <li>খবর</li>
  <li>খেলা</li>
  <li>আবহাওয়া</li>
</ul>
</div>

<div id="content">
  <h2>খবরের পাতা </h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>
</div>

</body>
</html>

ফলাফল




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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML5</title>
<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }
  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;
  }
</style>
</head>
<body>

<div id="header">
  <h1>প্রথম আলো</h1>
</div>

<div id="menu">
<ul>
  <li>খবর</li>
  <li>খেলা</li>
  <li>আবহাওয়া</li>
</ul>
</div>

<div id="content">
  <h2>খবরের পাতা</h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

</div>

<div id="footer">
<p>&copy;প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</div>

</body>
</html>

ফলাফল




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

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

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
<title>এইচটিএমএল ৫</title>
<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }
  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;
  }
</style>
</head>
<body>

<div id="header">
  <h1>প্রথম আলো</h1>
</div>

<div id="menu">
  <ul>
    <li>খবর</li>
    <li>খেলা</li>
    <li>আবহাওয়া</li>
  </ul>
</div>

<div id="content">
  <h2>খবরের পাতা</h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

</div>

<div id="footer">
<p>&copy;প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</div>

</body>
</html>

ফলাফল




Shiv সংস্করণ

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

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML5</title>
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  </script>
  <![endif]-->
<style>
  body {
      font-family: Verdana,sans-serif;
      font-size: 0.9em;
  }

  div#header, div#footer {
      padding: 10px;
      color: white;
      background-color: black;
  }

  div#content {
      margin: 5px;
      padding: 10px;
      background-color: lightgrey;
  }

  div.article {
      margin: 5px;
      padding: 10px;
      background-color: white;
  }

  div#menu ul {
      padding: 0;
  }

  div#menu ul li {
      display: inline;
      margin: 5px;
  }
</style>
</head>
<body>

<div id="header">
  <h1>চাঁদপুর কন্ঠ</h1>
</div>

<div id="menu">
<ul>
  <li>বার্তা</li>
  <li>খেলা</li>
  <li>আবহাওয়া</li>
</ul>
</div>

<div id="content">
  <h2>বার্তা বিভাগ</h2>
  <div class="article">
    <h2>খবরের অনুচ্ছেদ</h2>
    <p>রূপকল্প-২০২১ বাস্তবায়ন, সরকারি ও বেসরকারি প্রতিষ্ঠানসমূহে আইসিটি-এর ব্যবহার নিশ্চিতকরণ, জনগণের দোরগোড়ায় সেবা পৌঁছে দেয়া এবং ডিজিটাল বাংলাদেশ বিনির্মাণের লক্ষ্যে চাঁদপুরে ৩ দিনব্যাপী ডিজিটাল উদ্ভাবনী মেলা-২০১৭-এর শুভ উদ্বোধন হয়েছে।</p>
    <p>রূপকল্প-২০২১ বাস্তবায়ন, সরকারি ও বেসরকারি প্রতিষ্ঠানসমূহে আইসিটি-এর ব্যবহার নিশ্চিতকরণ, জনগণের দোরগোড়ায় সেবা পৌঁছে দেয়া এবং ডিজিটাল বাংলাদেশ বিনির্মাণের লক্ষ্যে চাঁদপুরে ৩ দিনব্যাপী ডিজিটাল উদ্ভাবনী মেলা-২০১৭-এর শুভ উদ্বোধন হয়েছে।</p>
  </div>
  <div class="article">
    <h2>বার্তা বিভাগ</h2>
    <p>রূপকল্প-২০২১ বাস্তবায়ন, সরকারি ও বেসরকারি প্রতিষ্ঠানসমূহে আইসিটি-এর ব্যবহার নিশ্চিতকরণ, জনগণের দোরগোড়ায় সেবা পৌঁছে দেয়া এবং ডিজিটাল বাংলাদেশ বিনির্মাণের লক্ষ্যে চাঁদপুরে ৩ দিনব্যাপী ডিজিটাল উদ্ভাবনী মেলা-২০১৭-এর শুভ উদ্বোধন হয়েছে।</p>
    <p>রূপকল্প-২০২১ বাস্তবায়ন, সরকারি ও বেসরকারি প্রতিষ্ঠানসমূহে আইসিটি-এর ব্যবহার নিশ্চিতকরণ, জনগণের দোরগোড়ায় সেবা পৌঁছে দেয়া এবং ডিজিটাল বাংলাদেশ বিনির্মাণের লক্ষ্যে চাঁদপুরে ৩ দিনব্যাপী ডিজিটাল উদ্ভাবনী মেলা-২০১৭-এর শুভ উদ্বোধন হয়েছে।</p>
  </div>
</div>

<div id="footer">
  <p>চাঁদপুর কন্ঠ © ২০১৭,চাঁদপুর কন্ঠ কর্তৃক সরবরাহকৃত।</p>
</div>

</body>
</html>

ফলাফল




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

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

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;
}

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

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>এইচটিএমএল ৫</title>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->

<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }

  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;
  }

  header,footer,section,article {
      border:1px solid grey;
      margin:5px;margin-bottom:15px;padding:8px;
      background-color:white;
  }
  header,footer {
      color:white;background-color:#444;margin-bottom:5px;
  }
  section {
      background-color:#ddd;
  }
  nav ul  {
      margin:0;padding:0;
  }
  nav ul li {
      display:inline;margin:5px;
  }
</style>
</head>
<body>

<div id="header">
  <h1>প্রথম আলো</h1>
</div>

<div id="menu">
<ul>
  <li>খবর</li>
  <li>খেলা</li>
  <li>আবহাওয়া</li>
</ul>
</div>

<div id="content">
  <h2>খবরের পাতা</h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

</div>

<div id="footer">
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</div>

</body>
</html>

ফলাফল




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

id="header" এবং id="footer" এর সাহায্যে <div> এলিমেন্টকে পরিবর্তনঃ

<div id="header">
  <h1>এইচটিএমএল টিউটোরিয়াল</h1>
</div>
.
.
.
<div id="footer">
  <p>&copy; স্যাট একাডেমী ২০১৬</p>
</div>

এইচটিএমএল(৫) এর সিমেন্টিক <header> এবং <footer> এর সাহায্যেঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>এইচটিএমএল ৫</title>

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }

  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;
  }

  header,footer,section,article {
      border:1px solid grey;
      margin:5px;margin-bottom:15px;padding:8px;
      background-color:white;
  }
  header,footer {
      color:white;background-color:#444;margin-bottom:5px;
  }
  section {
      background-color:#ddd;
  }
  nav ul  {
      margin:0;padding:0;
  }
  nav ul li {
      display:inline; margin:5px;
  }
</style>
</head>
<body>

<header>
  <h1>প্রথম আলো</h1>
</header>

<div id="menu">
<ul>
  <li>খবর</li>
  <li>খেলা</li>
  <li>আবহাওয়া</li>
</ul>
</div>

<div id="content">
  <h2>খবরের পাতা</h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

</div>

<footer>
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>

</body>
</html>

ফলাফল




এইচটিএমএল(৫) <nav> এলিমেন্ট

id="menu" এর সাহায্যে <div> এলিমেন্ট পরিবর্তনঃ

<div id="menu">
  <ul>
    <li>খবর</li>
    <li>খেলাধুলা</li>
    <li>আবহাওয়া</li>
  </ul>
</div>

এইচটিএমএল(৫) সিমেন্টিক <nav> এলিমেন্টঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>এইচটিএমএল ৫</title>

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }

  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;
  }

  header,footer,section,article {
      border:1px solid grey;
      margin:5px;margin-bottom:15px;padding:8px;
      background-color:white;
  }
  header,footer {
      color:white;background-color:#444;margin-bottom:5px;
  }
  section {
      background-color:#ddd;
  }
  nav ul  {
      margin:0;padding:0;
  }
  nav ul li {
      display:inline; margin:5px;
  }
</style>
</head>
<body>

<header>
  <h1>প্রথম আলো</h1>
</header>

<nav>
  <ul>
    <li>খবর</li>
    <li>খেলা</li>
    <li>আবহাওয়া</li>
  </ul>
</nav>

<div id="content">
  <h2>খবরের পাতা</h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

</div>

<footer>
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>

</body>
</html>

ফলাফল




এইচটিএমএল(৫) এর <section> এলিমেন্ট

id="content" এর সাহায্যে <div> এলিমেন্ট পরিবর্তনঃ

<div id="content">
.
.
.
</div>

এইচটিএমএল(৫) সিমেন্টিক <section> এলিমেন্টঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }
  header,footer,section,article {
      border:1px solid grey;
      margin:5px;margin-bottom:15px;padding:8px;
      background-color:white;
  }
  header,footer {
      color:white;background-color:#444;margin-bottom:5px;
  }
  section {
      background-color:#ddd;
  }
  nav ul  {
      margin:0;padding:0;
  }
  nav ul li {
      display:inline; margin:5px;
  }
</style>
</head>
<body>

<header>
<h1>প্রথম আলো</h1>
</header>

<nav>
<ul>
  <li>খবর</li>
  <li>খেলা</li>
  <li>আবহাওয়া</li>
</ul>
</nav>

<section>
  <h2>খবরের পাতা</h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

</section>

<footer>
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>

</body>
</html>

ফলাফল




এইচটিএমএল(৫) এ <article> এলিমেন্ট

class="post" এর সাহায্যে সকল <div> এলিমেন্ট পরিবর্তনঃ

<div class="post">
  <h2>খেলার পাতা</h2>
  <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর
  আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর।</p>
</div>

এইচটিএমএল(৫) সিমেন্টিক <article> এলিমেন্টঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5</title>

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }
  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;
  }
  header,footer,section,article {
      border:1px solid grey;
      margin:5px;margin-bottom:15px;padding:8px;
      background-color:white;
  }
  header,footer {
      color:white;background-color:#444;margin-bottom:5px;
  }
  section {
      background-color:#ddd;
  }
  nav ul  {
      margin:0;padding:0;
  }
  nav ul li {
      display:inline; margin:5px;
  }
</style>
</head>
<body>

<header>
  <h1>প্রথম আলো</h1>
</header>

<nav>
<ul>
  <li>খবর</li>
  <li>খেলা</li>
  <li>আবহাওয়া</li>
</ul>
</nav>

<section>
  <h2>খবরের পাতা</h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

</section>

<footer>
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>

</body>
</html>

ফলাফল



<style> এলিমেন্টে সিলেক্টরের অতিরিক্ত অংশ লেখার প্রয়োজন নেইঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }
  header,footer,section,article {
      border:1px solid grey;
      margin:5px;margin-bottom:15px;padding:8px;
      background-color:white;
  }
  header,footer {
      color:white;background-color:#444;margin-bottom:5px;
  }
  section {
      background-color:#ddd;
  }
  nav ul  {
      margin:0;padding:0;
  }
  nav ul li {
      display:inline; margin:5px;
  }
</style>
</head>
<body>

<header>
  <h1>প্রথম আলো</h1>
</header>

<nav>
  <ul>
    <li> খবর</li>
    <li>খেলা</li>
    <li>আবহাওয়া</li>
  </ul>
</nav>

<section>
  <h2>খবরের পাতা</h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>
</section>

<footer>
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>

</body>
</html>

ফলাফল




একটি সাধারণ এইচটিএমএল(৫) পেজ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
  body {
      font-family:Verdana,sans-serif;font-size:0.8em;
  }
  header,footer,section,article {
      border:1px solid grey;
      margin:5px;margin-bottom:15px;padding:8px;
      background-color:white;
  }
  header,footer {
      color:white;background-color:#444;margin-bottom:5px;
  }
  section {
      background-color:#ddd;
  }
  nav ul  {
      margin:0;padding:0;
  }
  nav ul li {
      display:inline; margin:5px;
  }
</style>
</head>
<body>

<header>
  <h1>প্রথম আলো</h1>
</header>

<nav>
  <ul>
    <li> খবর</li>
    <li>খেলা</li>
    <li>আবহাওয়া</li>
  </ul>
</nav>

<section>
  <h2>খবরের পাতা</h2>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

  <div id="post">
    <h2>খবর অংশ</h2>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
    <p>আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর আজকের খবর</p>
  </div>

</section>

<footer>
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত</p>
</footer>

</body>
</html>

ফলাফল




<article>, <section> এবং <div> এর ব্যবহার

এখানে কিছু ভিন্ন ভিন্ন উদাহরণ দেওয়া হলোঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
body {
  font-family: Verdana, sans-serif; font-size:0.8em;
}header, nav, section, article, footer {
  border:1px solid grey; margin:5px; padding:8px;
}nav ul {
  margin:0; padding:0;
}nav ul li {
  display:inline; margin:5px;
}
</style>
</head>
<body>

<header>
  <h1>এইচটিএমএল ৫ স্কেলিটন</h1>
</header>

<nav>
  <ul>
    <li>খবর</li>
    <li>খেলা </li>
    <li>আবহাওয়া</li>
  </ul>
</nav>

<article>
  <h2>জনপ্রিয় শহর</h2>

  <article>
    <h2>লন্ডন</h2>
    <p>লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর ।এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, মহানগর এলাকায় ১৩ লক্ষেরও বেশি বাশিন্দা রয়েছে।</p>
  </article>

  <article>
    <h2>প্যারিস</h2>
    <p>প্যারিস ফ্রান্সের সবচেয়ে বড় শহর এবং ফ্রান্সের সবচেয়ে জনপ্রিয় শহর।</p>
  </article>

  <article>
    <h2>টকিও</h2>
    <p>টকিও জাপানের সবচেয়ে বড় শহর।টকিও জাপানের সবচেয়ে বড় শহর।</p>
  </article>
</article>

<footer>
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত।</p>
</footer>

</body>
</html>

ফলাফল



<article> এর মধ্যে <div>

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
body {
  font-family: Verdana, sans-serif; font-size:0.8em;
}header, nav, section, article, footer, div.city {
  border:1px solid grey; margin:5px; padding:8px;
}nav ul {
  margin:0; padding:0;
}nav ul li {
  display:inline; margin:5px;
}
</style>
</head>
<body>

<header>
  <h1>এইচটিএমএল ৫ স্কেলিটন</h1>
</header>

<nav>
  <ul>
    <li>খবর</li>
    <li>খেলা </li>
    <li>আবহাওয়া</li>
  </ul>
</nav>

<article>
  <h2>জনপ্রিয় শহর</h2>

  <article>
    <h2>লন্ডন</h2>
    <p>লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর ।এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, মহানগর এলাকায় ১৩ লক্ষেরও বেশি বাশিন্দা রয়েছে।</p>
  </article>

  <article>
    <h2>প্যারিস</h2>
    <p>প্যারিস ফ্রান্সের সবচেয়ে বড় শহর এবং ফ্রান্সের সবচেয়ে জনপ্রিয় শহর।</p>
  </article>

  <article>
    <h2>টকিও</h2>
    <p>টকিও জাপানের সবচেয়ে বড় শহর।টকিও জাপানের সবচেয়ে বড় শহর।</p>
  </article>

</article>

<footer>
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত.</p>
</footer>

</body>
</html>

ফলাফল



<article> এর মধ্যে <section> এর মধ্যে <div>

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style>
  body {
    font-family: Verdana, sans-serif; font-size:0.8em;
  }header, nav, article, footer, div.city, div.country {
    border:1px solid grey; margin:5px; padding:8px;
  }nav ul {
    margin:0; padding:0;
  }nav ul li {
    display:inline; margin:5px;
  }
</style>
</head>
<body>

<header>
  <h1>এইচটিএমএল ৫ স্কেলিটন</h1>
</header>

<nav>
  <ul>
    <li>খবর</li>
    <li>খেলা </li>
    <li>আবহাওয়া</li>
  </ul>
</nav>

<article>
  <h2>জনপ্রিয় শহর</h2>

  <article>
    <h2>লন্ডন</h2>
    <p>লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর। এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, মহানগর এলাকায় ১৩ লক্ষেরও বেশি বাশিন্দা রয়েছে।</p>
  </article>

  <article>
    <h2>প্যারিস</h2>
    <p>প্যারিস ফ্রান্সের সবচেয়ে বড় শহর এবং ফ্রান্সের সবচেয়ে জনপ্রিয় শহর।</p>
  </article>

  <article>
    <h2>টকিও</h2>
    <p>টকিও জাপানের সবচেয়ে বড় শহর।টকিও জাপানের সবচেয়ে বড় শহর।</p>
  </div>
  </section>

  <section>
  <h2>জনপ্রিয় দেশসমূহ</h2>
  <div class="country">
    <h2>ইংল্যান্ড</h2>
    <p>লন্ডন ইংল্যান্ডের সবচেয়ে বড় শহর। এটি যুক্তরাজ্যের সবচেয়ে জনপ্রিয় শহর, মহানগর এলাকায় ১৩ লক্ষেরও বেশি বাশিন্দা রয়েছে।</p>
  </div>

  <div class="country">
    <h2>ফ্রান্স</h2>
    <p>প্যারিস ফ্রান্সের সবচেয়ে বড় শহর এবং ফ্রান্সের সবচেয়ে জনপ্রিয় শহর।</p>
  </div>

  <div class="country">
    <h2>জাপান</h2>
    <p>টকিও জাপানের সবচেয়ে বড় শহর।টকিও জাপানের সবচেয়ে বড় শহর।</p>
  </div>
  </section>
</article>

<footer>
  <p>&copy; প্রথম আলো,২০১৪। সর্বসত্ব সংরক্ষিত.</p>
</footer>

</body>
</html>

ফলাফল