HTML(5) শৈলী নির্দেশিকা এবং কোড নির্দিষ্টক

এইচটিএমএল কোড নিয়ম

ওয়েব ডেভেলপাররা, সাধারণত, এইচটিএমএল-এ ব্যবহৃত কোড শৈলী এবং সিনট্যাকস সম্পর্কে অনিশ্চিত

২০০০ থেকে ২০১০ সালের মধ্যে, অনেক ওয়েব ডেভেলপার এইচটিএমএল থেকে এক্সিএমএল-এ পরিবর্তন করেছিলেন

এক্সিএমএল-এ, ডেভেলপাররা ফরম্যাটকৃত 'গুড' কোড লিখতে বাধ্য

এইচটিএমএল৫, কোড ভ্রষ্টাচার করতে কম সুবিধা দেয়

এইচটিএমএল৫-এ, আপনাকে নিজস্ব ডকুমেন্ট তৈরি করতে হবেসর্বোত্তম প্রথা, শৈলী নির্দেশিকা এবং কোড নিয়ম.

স্মার্ট এবং ভবিষ্যতের সুরক্ষা

শৈলীর সুবিধাজনক ব্যবহার, অন্যান্য লোককে আপনার এইচটিএমএল বোঝা এবং ব্যবহার করা সহজ করবে

ভবিষ্যতে, এক্সিএমএল রিডারের মতো প্রোগ্রাম, আপনার এইচটিএমএল পড়তে পারবে

সুফরম্যাটকৃত 'অ্যাপ্রোক্সিমেন্ট এক্সিএমএল' সিনটেক্স ব্যবহার করে, তা স্মার্ট হবে

মন্তব্য:আপনার সাইটকে স্মার্ট, পরিচ্ছন্ন, শুদ্ধ এবং ফরম্যাটকৃত রাখুন

সঠিক ডকুমেন্ট ধরন ব্যবহার করুন

সবসময় ডকুমেন্টের প্রথম লাইনে ডকুমেন্টের ধরন ঘোষণা করুন

<!DOCTYPE html>

যদি আপনি সর্বদা ছোট বড় অক্ষরের ট্যাগ ব্যবহার করেছেন, তবে এটা করতে পারেন:

<!doctype html>

ছোট বড় অক্ষরের ইলেকট্রনেমেন্ট নাম ব্যবহার করুন

এইচটিএমএল৫ ইলেকট্রনেমেন্ট নামের মধ্যে মিশ্রিত বড়-ছোট অক্ষরকে অনুমতি দেয়

আমরা ছোট বড় অক্ষরের ইলেকট্রনেমেন্ট নাম ব্যবহার করার পরামর্শ দিচ্ছি:

  • মিশ্রিত বড়-ছোট অক্ষরের নাম খারাপ
  • ডেভেলপাররা সাধারণত ছোট বড় অক্ষরগুলির নাম ব্যবহার করে (যেমন XHTML-এ)
  • ছোট বড় অক্ষরগুলি শুদ্ধ লাগে
  • ছোট বড় অক্ষরগুলি লিখা সহজ

খারাপ লাগছে:

<SECTION> 
  <p>This is a paragraph.</p>
</SECTION>

খারাপ লাগছে:

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

ভালো লাগছে:

<section> 
  <p>This is a paragraph.</p>

সমস্ত এইচটিএমএল ইলেকট্রনেমেন্টকে বন্ধ করা

এইচটিএমএল৫-এ, আপনাকে সমস্ত ইলেকট্রনেমেন্টকে বন্ধ করতে হবে (যেমন <p> ইলেকট্রনেমেন্ট)

আমরা সমস্ত এইচটিএমএল ইলেকট্রনেমেন্টগুলি বন্ধ করার পরামর্শ দিচ্ছি:

看起来不好：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

看起来不错：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>

关闭空的 HTML 元素

在 HTML5 中，关闭空元素是可选的。

允许这样：

也允许这样：

斜杠（/）在 XHTML 和 XML 中是必需的。

如果您期望 XML 软件来访问您的页面，保持这个习惯是个好主意。

使用小写属性名

HTML5 允许大小写混合的属性名。

我们建议使用小写属性名：

  • 混合属性名并不好
  • 开发者习惯于使用小写属性名（比如在 XHTML 中）
  • 小写属性名看情况更纯净
  • 小写属性名更易书写

看起来不好：

看起来不错：

属性值加引号

HTML5 允许不加引号的属性值。

我们推荐属性值加引号：

  • 如果属性值包含值，则必须使用引号
  • 混合样式绝对不好
  • 加引号的值更易阅读

这个属性值无效，因为值中包含空格：

这样是有效的：






必需的属性


请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。


HTML5



请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。


HTML5





空格和等号


等号两边的空格是合法的：


<link rel = "stylesheet" href = "styles.css">



কিন্তু স্পেস না থাকা পড়ার জন্য সহজ:
কিন্তু শুধুমাত্র স্পেস না থাকা পড়ার জন্য সহজ এবং প্রক্রিয়াগুলোকে সংগৃহীত করা ভালো:


<link rel="stylesheet" href="styles.css">





দীর্ঘ কোডবানার ব্যবহার না করুন:


এইম্‌সত্ত্বে, এইম্‌সত্ত্বে, HTML এডিটরের মাধ্যমে লেখা হওয়া এইম্‌সত্ত্বে, HTML কোডকে পড়ার জন্য বেশ সহজ নয়:


প্রয়োজনীয়ভাবে, ৮০টি অক্ষরেরও বেশি কোডবানার ব্যবহার না করুন:




কালো সারি এবং সুমুক্তি


কোনও কারণ না করে কালো সারি বাড়ান:


পড়ার মানোন্নয়নের জন্য, বড় বা তথ্যগত কোডব্লকগুলোর মধ্যে কালো সারি বাড়ান:


পড়ার মানোন্নয়নের জন্য, দুইটি স্পেস সুমুক্তি বাড়ান। ট্যাব ব্যবহার করবেন না:


অপ্রয়োজনীয় শুধুমাত্র কালো সারি এবং সুমুক্তি ব্যবহার নকি। স্বল্প দৈর্ঘ্যের এবং সংশ্লিষ্ট প্রক্রিয়াগুলোর মধ্যে কালো সারি ব্যবহার করা প্রয়োজন নয়, এবং প্রত্যেক উপাদানকে সুমুক্তি করা প্রয়োজন নয়:


অপরিবহনীয়:


<body>
  <h1>Famous Cities</1>
  <h2>Tokyo</h2>
  <p>
    টোকিও জাপানের রাজধানী, গ্রেটার টোকিও এর কেন্দ্র
    এবং বিশ্বের সর্ববৃহৎ মেট্রোপলিটান এলাকা
    এটি জাপানী সরকারের সদরদপ্তর এবং ইম্পেরিয়াল প্যালেস
    এবং জাপানী সাম্রাজ্যপতির পরিবারের ঘর
  </p>
</body>



ভালো:


<body>
<h1>Famous Cities</1>
<h2>Tokyo</h2>
<p>
টোকিও জাপানের রাজধানী, গ্রেটার টোকিও এর কেন্দ্র
এবং বিশ্বের সর্ববৃহৎ মেট্রোপলিটান এলাকা
এটি জাপানী সরকারের সদরদপ্তর এবং ইম্পেরিয়াল প্যালেস
এবং জাপানী সাম্রাজ্যপতির পরিবারের ঘর
</p>
</body>



তালিকা উদাহরণ:


<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  <tr>
</table>



তালিকা উদাহরণ:


<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>





<html> এবং <body> ট্যাগকে সংক্ষেপ করা হবে?


এইচটিএমএল৫ স্ট্যান্ডার্ডে, <html> এবং <body> ট্যাগকেও সংক্ষেপ করা যেতে পারে


নিম্নলিখিত কোডকে এইচটিএমএল৫ হিসাবে তৈরি করা হয়েছে:


একটি উদাহরণ


<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>



亲自试一试


আমরা <html> এবং <body> ট্যাগকে সংক্ষেপ করাকে সুপারিশ করি না


<html> ইলেকমেন্ট টেক্সটের মূল ইলেকমেন্ট


<!DOCTYPE html>
<html lang="en-US">



অ্যাক্সেসিবিলিটি অ্যাপ্লিকেশন (স্ক্রিন রিডার) এবং সার্চ ইঞ্জিনের জন্য ল্যাঙ্গুয়েজ ঘোষণা গুরুত্বপূর্ণ


হলকে এবং বডি ট্যাগকে সংক্ষেপ করা ডম এবং এক্সএমএল সফটওয়্যারকে ভেঙে ফেলতে পারে。


হেডকে ট্যাগকে সংক্ষেপ করাইলে পুরাতন ব্রাউজার (আইই ৯) এ ত্রুটি হতে পারে。




হেডকে ট্যাগকে সংক্ষেপ করা হবে?


এইচটিএমএল৫ স্ট্যান্ডার্ডে, হেডকে ট্যাগকেও সংক্ষেপ করা যেতে পারে。


ডিফল্টভাবে, ব্রাউজার হেডকে ট্যাগকে আগের সব ইলেকমেন্ট জুড়িয়ে একটি ডিফল্ট হেডকে ট্যাগ হিসাবে যুক্ত করে থাকে。


হেডকে ট্যাগ সংক্ষেপ করে আপনি এইচটিএমএল এর জটিলতা হ্রাস করতে পারেন:


একটি উদাহরণ


<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>



亲自试一试


মন্তব্য:ওয়েব ডেভেলপারদের জন্য, ট্যাগকে অণগ্রহণ করা একটি অজানা বিষয়। একটি নিয়ম তৈরি করা সময় লাগে




মেটাডাটা


<title> তৈরির জন্য এটি অপরিবর্তনীয়। যতটা সম্ভব মায়াদ সার্থক শিরোনাম তৈরি করুন


<title>HTML5 Syntax and Coding Style</title>



যাতে সঠিক বোঝাবলা এবং সঠিক সার্চ ইনডেক্সিং নিশ্চিত করা যায়, ডকুমেন্টে ভাষা এবং অক্ষর এনকোডিং নির্দিষ্টকরণকে এখনকার সময় থেকেই নির্দিষ্ট করা ভালো


<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>





HTML মন্তব্য


স্কোট মন্তব্যগুলি একটি লাইনে লেখা উচিত, এবং <!---এর পরে একটি স্পেস যোগ করুন, -->-এর পরেও একটি স্পেস যোগ করুন:


<!-- This is a comment -->


দীর্ঘ মন্তব্যগুলি, বহু লাইনে বিস্তৃত, <!-- এবং -->-এর মাধ্যমে একটি পৃথক লাইনে লেখা উচিত:


<!-- 
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->



দীর্ঘ মন্তব্যগুলি দুই স্পেস স্কোয়ারের মাধ্যমে স্কোয়ারের মধ্যে লোককরা হলে সহজতর হয়




স্টাইলশিট


শুদ্ধ সিনট্যাক্স ব্যবহার করে স্টাইলশিটকে লিংক করুন (type এটি অপরিবর্তনীয় নয়):


<link rel="stylesheet" href="styles.css">



স্কোট নিয়মটি একটি লাইনে সংক্ষিপ্ত করা যায়, এমনকি এইভাবে:


p.into {font-family:"Verdana"; font-size:16em;}



দীর্ঘ নিয়মটি বহু লাইনে ভাগ করে রাখুন:


body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}



    

  • খোলো ব্র্যাকেট এবং সিলেক্টরকে একই লাইনে রাখুন
    • 

  • খোলো ব্র্যাকেটের আগে একটি স্পেস যোগ করুন
    • 

  • দুই অক্ষরীয় স্পেস ব্যবহার করুন
    • 

  • প্রত্যেক বৈশিষ্ট্য এবং তার মানের মধ্যে একটি দ্বিতীয়াক্ষরীয় স্পেস যোগ করুন
    • 

  • প্রত্যেক ডিসেম্কোমা বা সেমিকোলনের পরে স্পেস যোগ করুন
    • 

  • প্রত্যেক মান-বৈশিষ্ট্য জোড়ার (শেষটি সহ) পরে সেমিকোলন যোগ করুন
    • 

  • শুধুমাত্র মানের মধ্যে স্পেস থাকলেই মুকুট ব্যবহার করুন
    • 

  • বন্ধ ব্র্যাকেটকে একটি নতুন লাইনে রাখুন, আগে স্পেস না যোগ করুন
    • 

  • প্রত্যেক লাইন ৮০ অক্ষরের বেশি হওয়ার থেকে বিরত থাকুন
    • 



মন্তব্য:ডিসেম্কোমা বা সেমিকোলনের পরে স্পেস যোগ করা, এটি সব লিখিত শৈলীর জন্য একটি সাধারণ নিয়ম




এইচটিএমএল-এ জেভাস্ক্রিপ্ট লোড করুন


请使用简单的语法来加载外部脚本（type 属性不是必需的）：