{"id":13411145,"url":"https://github.com/hail2u/html-best-practices","last_synced_at":"2025-03-14T16:34:01.271Z","repository":{"id":24803826,"uuid":"28217873","full_name":"hail2u/html-best-practices","owner":"hail2u","description":"For writing maintainable and scalable HTML documents","archived":false,"fork":false,"pushed_at":"2024-05-03T22:09:46.000Z","size":961,"stargazers_count":4112,"open_issues_count":3,"forks_count":440,"subscribers_count":94,"default_branch":"main","last_synced_at":"2024-07-31T20:45:04.741Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hail2u.png","metadata":{"files":{"readme":"README.bn.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["hail2u"]}},"created_at":"2014-12-19T06:45:43.000Z","updated_at":"2024-07-29T06:21:08.000Z","dependencies_parsed_at":"2024-11-01T05:30:54.153Z","dependency_job_id":null,"html_url":"https://github.com/hail2u/html-best-practices","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hail2u%2Fhtml-best-practices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hail2u%2Fhtml-best-practices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hail2u%2Fhtml-best-practices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hail2u%2Fhtml-best-practices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hail2u","download_url":"https://codeload.github.com/hail2u/html-best-practices/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243610861,"owners_count":20319039,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T20:01:11.707Z","updated_at":"2025-03-14T16:34:00.959Z","avatar_url":"https://github.com/hail2u.png","language":null,"funding_links":["https://github.com/sponsors/hail2u"],"categories":["Others","HTML","Awesome lists","Software Engineering Best Practices","Learn HTML","Front-End Development"],"sub_categories":["HTML"],"readme":"Translations: [English](README.md) · [বাংলা](README.bn.md) · [Dansk](README.da.md) · [Deutsch](README.de.md) · [Español](README.es.md) · [فارسی](README.fa-IR.md) · [Français](README.fr.md) · [Indonesia](README.id.md) · [日本語](README.ja.md) · [한국어](README.ko.md) · [Português (BR)](README.pt-BR.md) · [Română](README.ro.md) · [Русский](README.ru.md) · [Türkçe](README.tr.md) · [Українська](README.uk.md) · [Tiếng Việt](README.vi.md) · [简体中文](README.zh-CN.md) · [正體中文](README.zh-TW.md)\n\n# HTML Best Practices\n\nসহজে ম্যানেজ এবং স্কেল HTML ডকুমেন্ট লেখার জন্য\n\n\n## সাধারন\n\n\n### DOCTYPE দিয়ে শুরু করুন\n\n`No-quirks` মোড সক্রিয় করার জন্য DOCTYPE প্রয়োজন৷\n\nভালো না:\n\n    \u003chtml\u003e\n      ...\n    \u003c/html\u003e\n\nভালো:\n\n    \u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n      ...\n    \u003c/html\u003e\n\n\n### অনেক পুরাতন অথবা উত্তরাধিকার DOCTYPE ব্যবহার করবেন না।\n\nDOCTYPE এখন আর DTD-এর জন্য ব্যবহার হয় না, সহজ হোন।\n\nভালো না:\n\n    \u003c!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"\n      \"http://www.w3.org/TR/html4/strict.dtd\"\u003e\n\nভালো:\n\n    \u003c!DOCTYPE html\u003e\n\n\n### XML ঘোষণা ব্যবহার করবেন না\n\nআপনি কি XHTML লিখতে চান?\n\nভালো না:\n\n    \u003c?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?\u003e\n    \u003c!DOCTYPE html\u003e\n\nভালো:\n\n    \u003c!DOCTYPE html\u003e\n\n\n### অক্ষর রেফারেন্স যতটা সম্ভব ব্যবহার করবেন না\n\nআপনি যদি UTF-8 দিয়ে একটি HTML ডকুমেন্ট লেখেন, প্রায় সব অক্ষর (ইমোজি সহ) সরাসরি লেখা যাবে।\n\nভালো না:\n\n    \u003cp\u003e\u003csmall\u003eCopyright \u0026copy; 2014 W3C\u003csup\u003e\u0026reg;\u003c/sup\u003e\u003c/small\u003e\u003c/p\u003e\n\nভালো:\n\n    \u003cp\u003e\u003csmall\u003eCopyright © 2014 W3C\u003csup\u003e®\u003c/sup\u003e\u003c/small\u003e\u003c/p\u003e\n\n\n### নামযুক্ত অক্ষর এর সাথে `\u0026`, `\u003c`, `\u003e`, `\"`, এবং `'` মুক্ত রাখুন\n\nএকটি বাগ-মুক্ত HTML নথির জন্য এই অক্ষরগুলি সর্বদা পালানো উচিত।\n\nভালো না:\n\n    \u003ch1\u003eThe \"\u0026\" character\u003c/h1\u003e\n\nভালো:\n\n    \u003ch1\u003eThe \u0026quot;\u0026amp;\u0026quot; character\u003c/h1\u003e\n\n\n### নিয়ন্ত্রণ বা অদৃশ্য অক্ষরের জন্য সংখ্যাসূচক অক্ষর রেফারেন্স ব্যবহার করুন\n\nএই অক্ষরগুলি সহজেই অন্য চরিত্রের জন্য ভুল হয়। এবং বিশেষত্ব এই অক্ষরগুলির জন্য একটি মানুষের পাঠযোগ্য নাম সংজ্ঞায়িত করার গ্যারান্টি দেয় না।\n\nভালো না:\n\n    \u003cp\u003eThis book can read in 1 hour.\u003c/p\u003e\n\nভালো:\n\n    \u003cp\u003eThis book can read in 1\u0026#xA0;hour.\u003c/p\u003e\n\n\n### মন্তব্য বিষয়বস্তু চারপাশে সাদা স্থান রাখুন\n\nকিছু অক্ষর কমেন্ট খোলার সাথে সাথে বা মন্তব্য বন্ধ করার আগে ব্যবহার করা যাবে না।\n\nভালো না:\n\n    \u003c!--This section is non-normative--\u003e\n\nভালো:\n\n    \u003c!-- This section is non-normative --\u003e\n\n\n### ক্লোজিং ট্যাগ বাদ দেবেন না\n\nআমি মনে করি আপনি ক্লোজিং ট্যাগ বাদ দেওয়ার নিয়ম বুঝতে পারছেন না।\n\nভালো না:\n\n    \u003chtml\u003e\n      \u003cbody\u003e\n        ...\n\nভালো:\n\n    \u003chtml\u003e\n      \u003cbody\u003e\n        ...\n      \u003c/body\u003e\n    \u003c/html\u003e\n\n\n### খালি এলিমেন্টে বিন্যাস মিশ্রিত করবেন না\n\nসুসংগত তা পঠনযোগ্যতার জন্য একটি চাবিকাঠি।\n\nভালো না:\n\n    \u003cimg alt=\"HTML Best Practices\" src=\"/img/logo.png\"\u003e\n    \u003chr /\u003e\n\nভালো:\n\n    \u003cimg alt=\"HTML Best Practices\" src=\"/img/logo.png\"\u003e\n    \u003chr\u003e\n\n\n### ট্যাগ এবং অ্যাট্রিবিউট মানের চারপাশে সাদা স্পেস রাখবেন না\n\nএটা করার কোন কারণ নেই।\n\nভালো না:\n\n    \u003ch1 class=\" title \" \u003eHTML Best Practices\u003c/h1\u003e\n\nভালো:\n\n    \u003ch1 class=\"title\"\u003eHTML Best Practices\u003c/h1\u003e\n\n\n### ক্যাকেটার কেস মিশ্রিত করবেন না\n\nএটি একটি ধারাবাহিকতাও দেয়।\n\nভালো না:\n\n    \u003ca HREF=\"#general\"\u003eGeneral\u003c/A\u003e\n\nভালো:\n\n    \u003ca href=\"#general\"\u003eGeneral\u003c/a\u003e\n\nএটাও ভালো:\n\n    \u003cA HREF=\"#general\"\u003eGeneral\u003c/A\u003e\n\n\n### উদ্ধৃতি চিহ্ন মিশ্রিত করবেন না\n\nউপরের মতই ।\n\nভালো না:\n\n    \u003cimg alt=\"HTML Best Practices\" src='/img/logo.jpg'\u003e\n\nভালো:\n\n    \u003cimg alt=\"HTML Best Practices\" src=\"/img/logo.jpg\"\u003e\n\n\n### দুই বা তার বেশি সাদা স্পেস দিয়ে অ্যাট্রিবিউট আলাদা করবেন না\n\nআপনার অদ্ভুত ফর্ম্যাটিং নিয়ম কাউকে বিভ্রান্ত করে।\n\nভালো না:\n\n    \u003cinput   name=\"q\"  type=\"search\"\u003e\n\nভালো:\n\n    \u003cinput name=\"q\" type=\"search\"\u003e\n\n\n### বুলিয়ান অ্যাট্রিবিউট মান বাদ দিন\n\nএটা লেখা সহজ, তাই না?\n\nভালো না:\n\n    \u003caudio autoplay=\"autoplay\" src=\"/audio/theme.mp3\"\u003e\n\nভালো:\n\n    \u003caudio autoplay src=\"/audio/theme.mp3\"\u003e\n\n\n### নেমস্পেস বাদ দিন\n\nSVG এবং MathML সরাসরি একটি HTML নথিতে ব্যবহার করা যেতে পারে।\n\nভালো না:\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\"\u003e\n      ...\n    \u003c/svg\u003e\n\nভালো:\n\n    \u003csvg\u003e\n      ...\n    \u003c/svg\u003e\n\n\n### XML অ্যাট্রিবিউট ব্যবহার করবেন না\n\nআমরা একটি HTML নথি লিখি।\n\nভালো না:\n\n    \u003cspan lang=\"ja\" xml:lang=\"ja\"\u003e...\u003c/span\u003e\n\nভালো:\n\n    \u003cspan lang=\"ja\"\u003e...\u003c/span\u003e\n\n\n### `data-*` বৈশিষ্ট্যগুলির সাথে , মাইক্রোডেটা এবং RDFa Lite বৈশিষ্ট্যগুলিকে মিশ্রিত করবেন না ৷\n\nএকটি ট্যাগ স্ট্রিং খুব জটিল হতে পারে। এই সহজ নিয়ম এই ধরনের ট্যাগ স্ট্রিং পড়তে সাহায্য করে।\n\nভালো না:\n\n    \u003cimg alt=\"HTML Best Practices\" data-height=\"31\" data-width=\"88\" itemprop=\"image\" src=\"/img/logo.png\"\u003e\n\nভালো:\n\n    \u003cimg alt=\"HTML Best Practices\" src=\"/img/logo.png\" data-width=\"88\" data-height=\"31\" itemprop=\"image\"\u003e\n\n\n### ডিফল্ট অন্তর্নিহিত ARIA পছন্দ করুন\n\nকিছু এলিমেন্টে একটি ARIA `role` অন্তর্নিহিতভাবে HTML নথিতে থাকে, সেগুলি নির্দিষ্ট করবেন না ৷\n\nভালো না:\n\n    \u003cnav role=\"navigation\"\u003e\n      ...\n    \u003c/nav\u003e\n\n    \u003chr role=\"separator\"\u003e\n\nভালো:\n\n    \u003cnav\u003e\n      ...\n    \u003c/nav\u003e\n\n    \u003chr\u003e\n\n\n## মূল উপাদান\n\n\n### `lang` অ্যাট্রিবিউট যোগ করুন\n\n`lang` অ্যাট্রিবিউট একটি HTML নথি অনুবাদ করতে সাহায্য করবে।\n\nভালো না:\n\n    \u003chtml\u003e\n\nভালো:\n\n    \u003chtml lang=\"en-US\"\u003e\n\n\n### `lang` অ্যাট্রিবিউট মান যতটা সম্ভব ছোট রাখুন\n\nজাপানি শুধুমাত্র জাপানে ব্যবহৃত হয়। তাই দেশের কোডের প্রয়োজন নেই।\n\nভালো না:\n\n    \u003chtml lang=\"ja-JP\"\u003e\n\nভালো:\n\n    \u003chtml lang=\"ja\"\u003e\n\n\n### `data-*` যতটা সম্ভব এড়িয়ে চলুন\n\nএকটি উপযুক্ত বৈশিষ্ট্য ব্রাউজার দ্বারা সঠিকভাবে পরিচালনা করা যেতে পারে।\n\nভালো না:\n\n    \u003cspan data-language=\"french\"\u003echemises\u003c/span\u003e\n    ...\n    \u003cstrong data-type=\"warning\"\u003eDo not wash!\u003c/strong\u003e\n\nভালো:\n\n    \u003cspan title=\"French\"\u003e\u003cspan lang=\"fr\"\u003echemises\u003c/span\u003e\u003c/span\u003e\n    ...\n    \u003cstrong class=\"warning\"\u003eDo not wash!\u003c/strong\u003e\n\n\n## ডকুমেন্ট মেটাডেটা\n\n\n### `title` এলিমেন্টে যোগ করুন\n\n`title` এলিমেন্টে এর ভ্যালু শুধুমাত্র একটি ব্রাউজার নয় বিভিন্ন অ্যাপ্লিকেশন দ্বারাও ব্যবহৃত হয়।\n\nভালো না:\n\n    \u003chead\u003e\n      \u003cmeta charset=\"UTF-8\"\u003e\n    \u003c/head\u003e\n\nভালো:\n\n    \u003chead\u003e\n      \u003cmeta charset=\"UTF-8\"\u003e\n      \u003ctitle\u003eHTML Best Practices\u003c/title\u003e\n    \u003c/head\u003e\n\n\n### `base` এলিমেন্টে ব্যবহার করবেন না\n\nএকটি নিখুঁত পথ বা URL ডেভেলপার এবং ব্যবহারকারী উভয়ের জন্যই নিরাপদ।\n\nভালো না:\n\n    \u003chead\u003e\n      ...\n      \u003cbase href=\"/blog/\"\u003e\n      \u003clink href=\"hello-world\" rel=\"canonical\"\u003e\n      ...\n    \u003c/head\u003e\n\nভালো:\n\n    \u003chead\u003e\n      ...\n      \u003clink href=\"/blog/hello-world\" rel=\"canonical\"\u003e\n      ...\n    \u003c/head\u003e\n\n\n### MIME ধরনের ক্ষুদ্র লিঙ্কযুক্ত সংস্থানগুলি নির্দিষ্ট করুন৷\n\nএটি একটি ইঙ্গিত কিভাবে অ্যাপ্লিকেশন এই সম্পদ পরিচালনা করে।\n\nভালো না:\n\n    \u003clink href=\"/pdf\" rel=\"alternate\"\u003e\n    \u003clink href=\"/feed\" rel=\"alternate\"\u003e\n    \u003clink href=\"/css/screen.css\" rel=\"stylesheet\"\u003e\n\nভালো:\n\n    \u003clink href=\"/pdf\" rel=\"alternate\" type=\"application/pdf\"\u003e\n    \u003clink href=\"/feed\" rel=\"alternate\" type=\"application/rss+xml\"\u003e\n    \u003clink href=\"/css/screen.css\" rel=\"stylesheet\"\u003e\n\n\n### `favicon.ico` এ লিঙ্ক করবেন না\n\nপ্রায় সব ব্যাউজার `/favicon.ico`স্বয়ংক্রিয়ভাবে এবং অ্যাসিঙ্ক্রোনাসভাবে নিয়ে আসে।\n\nভালো না:\n\n    \u003clink href=\"/favicon.ico\" rel=\"icon\" type=\"image/vnd.microsoft.icon\"\u003e\n\nভালো:\n\n    \u003c!-- Place `favicon.ico` in the root directory. --\u003e\n\n\n### `apple-touch-icon` লিংক যোগ করুন\n\nটাচ আইকনের জন্য একটি ডিফল্ট অনুরোধের পথ হঠাৎ পরিবর্তন করা হয়েছে৷\n\nভালো না:\n\n    \u003c!-- Hey Apple! Please download `/apple-touch-icon.png`! --\u003e\n\nভালো:\n\n    \u003clink href=\"/apple-touch-icon.png\" rel=\"apple-touch-icon\"\u003e\n\n\n### `title` অ্যাট্রিবিউট এর বিকল্প স্টাইলশীটে যোগ করুন\n\nএকটি মানুষের পাঠযোগ্য লেবেল সঠিক স্টাইলশীট নির্বাচন করতে সাহায্য করে।\n\nভালো না:\n\n    \u003clink href=\"/css/screen.css\" rel=\"stylesheet\"\u003e\n    \u003clink href=\"/css/high-contrast.css\" rel=\"alternate stylesheet\"\u003e\n\nভালো:\n\n    \u003clink href=\"/css/screen.css\" rel=\"stylesheet\"\u003e\n    \u003clink href=\"/css/high-contrast.css\" rel=\"alternate stylesheet\" title=\"High contrast\"\u003e\n\n\n### URL এর জন্য, `link` অ্যাট্রিবিউট ব্যবহার করুন\n\n`href` অ্যাট্রিবিউট এর ভ্যালু URL হিসাবে সমাধান করা যেতে পারে।\n\nভালো না:\n\n    \u003csection itemscope itemtype=\"http://schema.org/BlogPosting\"\u003e\n      \u003cmeta content=\"https://example.com/blog/hello\" itemprop=\"url\"\u003e\n      ...\n    \u003c/section\u003e\n\nভালো:\n\n    \u003csection itemscope itemtype=\"http://schema.org/BlogPosting\"\u003e\n      \u003clink href=\"/blog/hello\" itemprop=\"url\"\u003e\n      ...\n    \u003c/section\u003e\n\n\n### ডকুমেন্টের অক্ষর এনকোডিং নির্দিষ্ট করুন\n\nUTF-8 এখনও সব ব্রাউজারে ডিফল্ট নয়।\n\nভালো না:\n\n    \u003chead\u003e\n      \u003ctitle\u003eHTML Best Practices\u003c/title\u003e\n    \u003c/head\u003e\n\nভালো:\n\n    \u003chead\u003e\n      \u003cmeta charset=\"UTF-8\"\u003e\n      \u003ctitle\u003eHTML Best Practices\u003c/title\u003e\n    \u003c/head\u003e\n\n\n### এনকোডিং ফরম্যাট এ লিগ্যাসি অক্ষর ব্যবহার করবেন না\n\nHTTP হেডার একটি সার্ভার দ্বারা নির্দিষ্ট করা উচিত, সহজ হতে হবে ।\n\nভালো না:\n\n    \u003cmeta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"\u003e\n\nভালো:\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n\n\n### প্রথমে অক্ষর এনকোডিং নির্দিষ্ট করুন\n\nস্পেকের জন্য নথির প্রথম 1024 বাইটের মধ্যে অক্ষর এনকোডিং নির্দিষ্ট করা প্রয়োজন।\n\nভালো না:\n\n    \u003chead\u003e\n      \u003cmeta content=\"width=device-width\" name=\"viewport\"\u003e\n      \u003cmeta charset=\"UTF-8\"\u003e\n      ...\n    \u003c/head\u003e\n\nভালো:\n\n    \u003chead\u003e\n      \u003cmeta charset=\"UTF-8\"\u003e\n      \u003cmeta content=\"width=device-width\" name=\"viewport\"\u003e\n      ...\n    \u003c/head\u003e\n\n\n### UTF-8 ব্যবহার করুন\n\nUTF-8 এর সাথে, আপনি ইমোজি ব্যবহার করতে পারবেন।\n\nভালো না:\n\n    \u003cmeta charset=\"Shift_JIS\"\u003e\n\nভালো:\n\n    \u003cmeta charset=\"UTF-8\"\u003e\n\n\n### CSS-এর জন্য `type` অ্যাট্রিবিউট বাদ দিন\n\nHTML এ,  `style` এর ডিফল্ট `type` অ্যাট্রিবিউট ভ্যালু হলো `text/css` ।\n\nভালো না:\n\n    \u003cstyle type=\"text/css\"\u003e\n      ...\n    \u003c/style\u003e\n\nভালো:\n\n    \u003cstyle\u003e\n      ...\n    \u003c/style\u003e\n\n\n### `style` এলিমেন্টে বিষয়বস্তু উপর মন্তব্য করবেন না\n\nএইটা পুরাতন ব্যাউজারের জন্য ।\n\nভালো না:\n\n    \u003cstyle\u003e\n    \u003c!--\n      ...\n      --\u003e\n    \u003c/style\u003e\n\nভালো:\n\n    \u003cstyle\u003e\n      ...\n    \u003c/style\u003e\n\n\n### CSS এবং JavaScript এর ট্যাগ এক সাথে মিশাবেন না\n\nকখনও কখনও `script` এলিমেন্টে DOM তৈরি ব্লক করে।\n\nভালো না:\n\n    \u003cscript src=\"/js/jquery.min.js\"\u003e\u003c/script\u003e\n    \u003clink href=\"/css/screen.css\" rel=\"stylesheet\"\u003e\n    \u003cscript src=\"/js/main.js\"\u003e\u003c/script\u003e\n\nভালো:\n\n    \u003clink href=\"/css/screen.css\" rel=\"stylesheet\"\u003e\n    \u003cscript src=\"/js/jquery.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/js/main.js\"\u003e\u003c/script\u003e\n\nএটাও ভালো:\n\n    \u003cscript src=\"/js/jquery.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/js/main.js\"\u003e\u003c/script\u003e\n    \u003clink href=\"/css/screen.css\" rel=\"stylesheet\"\u003e\n\n\n## বিভাগসমূহ\n\n\n### `body` এলিমেন্টে যোগ করুন\n\nকখনও কখনও `body` এলিমেন্টে একটি ব্রাউজার দ্বারা অপ্রত্যাশিত অবস্থানে পরিপূরক হয়।\n\nভালো না:\n\n    \u003chtml\u003e\n      \u003chead\u003e\n        ...\n      \u003c/head\u003e\n      ...\n    \u003c/html\u003e\n\nভালো:\n\n    \u003chtml\u003e\n      \u003chead\u003e\n        ...\n      \u003c/head\u003e\n      \u003cbody\u003e\n        ...\n      \u003c/body\u003e\n    \u003c/html\u003e\n\n\n### `hgroup` এলিমেন্টে সম্পর্কে ভুলে যান\n\nএই এলিমেন্টে খুব বেশি ব্যবহার করা হয় না।\n\nভালো না:\n\n    \u003chgroup\u003e\n      \u003ch1\u003eHTML Best Practices\u003c/h1\u003e\n      \u003ch2\u003eFor writing maintainable and scalable HTML documents.\u003c/h2\u003e\n    \u003c/hgroup\u003e\n\nভালো:\n\n    \u003ch1\u003eHTML Best Practices\u003c/h1\u003e\n    \u003cp\u003eFor writing maintainable and scalable HTML documents.\u003c/p\u003e\n\n\n### `address` এলিমেন্টে শুধুমাত্র যোগাযোগের তথ্যের জন্য উপাদান ব্যবহার করুন\n\n`address` এলিমেন্টে হল ইমেল ঠিকানা, সামাজিক নেটওয়ার্ক অ্যাকাউন্ট, রাস্তার ঠিকানা, টেলিফোন নম্বর বা এমন কিছুর জন্য যার সাথে আপনি যোগাযোগ করতে পারেন।\n\nভালো না:\n\n    \u003caddress\u003eNo rights reserved.\u003c/address\u003e\n\nভালো:\n\n    \u003caddress\u003eContact: \u003ca href=\"https://twitter.com/hail2u_\"\u003eKyo Nagashima\u003c/a\u003e\u003c/address\u003e\n\n\n## গ্রুপিং বিষয়বস্তু\n\n\n### `pre` এলিমেন্টে নতুন লাইন দিয়ে শুরু করবেন না\n\nব্রাউজারগুলিতে একটি প্রথম নতুন লাইন উপেক্ষা করা হবে, তবে দ্বিতীয় এবং পরে রেন্ডার করা হবে।\n\nভালো না:\n\n    \u003cpre\u003e\n    \u0026lt;!DOCTYPE html\u0026gt;\n    \u003c/pre\u003e\n\nভালো:\n\n    \u003cpre\u003e\u0026lt;!DOCTYPE html\u0026gt;\n    \u003c/pre\u003e\n\n\n### `blockquote` এলিমেন্টের উপযুক্ত এলিমেন্টের ব্যবহার করুন\n\n`blockquote`  এলিমেন্টের বিষয়বস্তু একটি উদ্ধৃতি, অক্ষরের একটি অংশ নয়।\n\nভালো না:\n\n    \u003cblockquote\u003eFor writing maintainable and scalable HTML documents.\u003c/blockquote\u003e\n\nভালো:\n\n    \u003cblockquote\u003e\n      \u003cp\u003eFor writing maintainable and scalable HTML documents.\u003c/p\u003e\n    \u003c/blockquote\u003e\n\n\n### `blockquote` এলিমেন্টের রে ভিতরে সরাসরি অ্যাট্রিবিউশন অন্তর্ভুক্ত করবেন না\n\n`blockquote` এলিমেন্টের এর এর বিষয়বস্তু একটি উদ্ধৃতি ।\n\nভালো না:\n\n    \u003cblockquote\u003e\n      \u003cp\u003eFor writing maintainable and scalable HTML documents.\u003c/p\u003e\n\n      \u003cp\u003e— HTML Best Practices\u003c/p\u003e\n    \u003c/blockquote\u003e\n\nভালো:\n\n    \u003cblockquote\u003e\n      \u003cp\u003eFor writing maintainable and scalable HTML documents.\u003c/p\u003e\n    \u003c/blockquote\u003e\n\n    \u003cp\u003e— HTML Best Practices\u003c/p\u003e\n\nএটাও ভালো:\n\n    \u003cfigure\u003e\n      \u003cblockquote\u003e\n        \u003cp\u003eFor writing maintainable and scalable HTML documents.\u003c/p\u003e\n      \u003c/blockquote\u003e\n\n      \u003cfigcaption\u003e— HTML Best Practices\u003c/figcaption\u003e\n    \u003c/figure\u003e\n\n\n### প্রতি লাইনে একটি তালিকা আইটেম লিখুন\n\nলম্বাঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅঅ\nলাইন পড়ার জনননননননননননননননননননননন্য কঠিন ।\n\nভালো না:\n\n    \u003cul\u003e\n      \u003cli\u003eGeneral\u003c/li\u003e\u003cli\u003eThe root Element\u003c/li\u003e\u003cli\u003eSections\u003c/li\u003e...\n    \u003c/ul\u003e\n\nভালো:\n\n    \u003cul\u003e\n      \u003cli\u003eGeneral\u003c/li\u003e\n      \u003cli\u003eThe root Element\u003c/li\u003e\n      \u003cli\u003eSections\u003c/li\u003e\n      ...\n    \u003c/ul\u003e\n\n\n### `ol` এলিমেন্টের এর সাথে `type` অ্যাট্রিবিউট ব্যবহার করুন\n\nআপনি যদি `type` অ্যাট্রিবিউট এর সাথে মার্কার পরিবর্তন করেন, তাহলে আপনি আপনি রেফারেন্সে নিরাপদ থাকবেন।\n\nভালো না:\n\n    \u003chead\u003e\n      \u003cstyle\u003e\n        .toc {\n          list-style-type: upper-roman;\n        }\n      \u003c/style\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n      \u003col class=\"toc\"\u003e\n        \u003cli\u003eGeneral\u003c/li\u003e\n        \u003cli\u003eThe root Element\u003c/li\u003e\n        \u003cli\u003eSections\u003c/li\u003e\n        ...\n      \u003c/ol\u003e\n    \u003c/body\u003e\n\nভালো:\n\n    \u003cbody\u003e\n      \u003col type=\"I\"\u003e\n        \u003cli\u003eGeneral\u003c/li\u003e\n        \u003cli\u003eThe root Element\u003c/li\u003e\n        \u003cli\u003eSections\u003c/li\u003e\n        ...\n      \u003c/ol\u003e\n    \u003c/body\u003e\n\n\n### সংলাপের জন্য `dl` এলিমেন্টের ব্যবহার করবেন না\n\n`dl` এলিমেন্টের এইচটিএমএল-এ একটি অ্যাসোসিয়েশন তালিকায় সীমাবদ্ধ ।\n\nভালো না:\n\n    \u003cdl\u003e\n      \u003cdt\u003eCostello\u003c/dt\u003e\n      \u003cdd\u003eLook, you gotta first baseman?\u003c/dd\u003e\n      \u003cdt\u003eAbbott\u003c/dt\u003e\n      \u003cdd\u003eCertainly.\u003c/dd\u003e\n      \u003cdt\u003eCostello\u003c/dt\u003e\n      \u003cdd\u003eWho’s playing first?\u003c/dd\u003e\n      \u003cdt\u003eAbbott\u003c/dt\u003e\n      \u003cdd\u003eThat’s right.\u003c/dd\u003e\n      \u003cdt\u003eCostello becomes exasperated.\u003c/dd\u003e\n      \u003cdt\u003eCostello\u003c/dt\u003e\n      \u003cdd\u003eWhen you pay off the first baseman every month, who gets the money?\u003c/dd\u003e\n      \u003cdt\u003eAbbott\u003c/dt\u003e\n      \u003cdd\u003eEvery dollar of it.\u003c/dd\u003e\n    \u003c/dl\u003e\n\nভালো:\n\n    \u003cp\u003eCostello: Look, you gotta first baseman?\u003c/p\u003e\n    \u003cp\u003eAbbott: Certainly.\u003c/p\u003e\n    \u003cp\u003eCostello: Who’s playing first?\u003c/p\u003e\n    \u003cp\u003eAbbott: That’s right.\u003c/p\u003e\n    \u003cp\u003eCostello becomes exasperated.\u003c/p\u003e\n    \u003cp\u003eCostello: When you pay off the first baseman every month, who gets the money?\u003c/p\u003e\n    \u003cp\u003eAbbott: Every dollar of it.\u003c/p\u003e\n\n\n### `figcaption` এলিমেন্টের প্রথম বা শেষ চাইল্ড হিসাবে `figure` এলিমেন্ট রাখুন\n\nস্পেক `figure` এলিমেন্টের মাঝখানে `figcaption` এলিমেন্টকে অনুমতি দেয় না।\n\nভালো না:\n\n    \u003cfigure\u003e\n      \u003cimg alt=\"Front cover of the “HTML Best Practices” book\" src=\"/img/front-cover.png\"\u003e\n      \u003cfigcaption\u003e“HTML Best Practices” Cover Art\u003c/figcaption\u003e\n      \u003cimg alt=\"Back cover of the “HTML Best Practices” book\" src=\"/img/back-cover.png\"\u003e\n    \u003c/figure\u003e\n\nভালো:\n\n    \u003cfigure\u003e\n      \u003cimg alt=\"Front cover of the “HTML Best Practices” book\" src=\"/img/front-cover.png\"\u003e\n      \u003cimg alt=\"Back cover of the “HTML Best Practices” book\" src=\"/img/back-cover.png\"\u003e\n      \u003cfigcaption\u003e“HTML Best Practices” Cover Art\u003c/figcaption\u003e\n    \u003c/figure\u003e\n\n\n### `main` ইলিমেন্টে ব্যবহার করুন\n\n`main` ইলিমেন্টে অন্য কনটেন্ট মোড়ানোর কাজে ব্যবহার করা যেতে পারে ।\n\nভালো না:\n\n    \u003cdiv id=\"content\"\u003e\n      ...\n    \u003c/div\u003e\n\nভালো:\n\n    \u003cmain\u003e\n      ...\n    \u003c/main\u003e\n\n\n### যত বেশী সম্ভব `div` ইলিমেন্টে এড়িয়ে চলুন\n\n`div` ইলিমেন্টে শেষ অবলম্বন একটি উপাদান ।\n\nভালো না:\n\n    \u003cdiv class=\"chapter\"\u003e\n      ...\n    \u003c/div\u003e\n\nভালো:\n\n    \u003csection\u003e\n      ...\n    \u003c/section\u003e\n\n\n## টেক্সট-লেভেল সিমানটিক\n\n\n### একই লিঙ্ক বিভক্ত করবেন না যা গ্রুপ করা যেতে পারে\n\n`a` ইলিমেন্টে প্রায় সব অন্য ইলিমেন্টে কে মোড়ায়ি রাখতে যারে ( ফর্ম নিয়ন্ত্রণ এবং ইলিমেন্টে মতো ইন্টারেক্টিভ উপাদানগুলি ছাড়া এবং `a` ইলিমেন্টে নিজেকে).\n\nভালো না:\n\n    \u003ch1\u003e\u003ca href=\"https://whatwg.org/\"\u003eWHATWG\u003c/a\u003e\u003c/h1\u003e\n\n    \u003cp\u003e\u003ca href=\"https://whatwg.org/\"\u003eA community maintaining and evolving HTML since 2004.\u003c/a\u003e\u003c/p\u003e\n\nভালো:\n\n    \u003ca href=\"https://whatwg.org/\"\u003e\n      \u003ch1\u003eWHATWG\u003c/h1\u003e\n\n      \u003cp\u003eA community maintaining and evolving HTML since 2004.\u003c/p\u003e\n    \u003c/a\u003e\n\n\n### কোন রিসোর্স ডাউনলোড দিতে `download` অ্যাট্রিবিউট ব্যবহার করুন\n\nএটা ব্যাউজারকে লিংক রিসোর্স মেমরীতে ডাওনলোড হতে বাধ্য করবে ।\n\nভালো না:\n\n    \u003ca href=\"/downloads/offline.zip\"\u003eoffline version\u003c/a\u003e\n\nভালো:\n\n    \u003ca download href=\"/downloads/offline.zip\"\u003eoffline version\u003c/a\u003e\n\n\n### প্রয়োজন হলে `rel`, `hreflang`, এবং `type` অ্যাট্রিবিউট ব্যবহার করুন\n\nঅ্যাপ্লিকেশনে কিভাবে লিংক রিসোর্স কিভাবে ম্যানেজ করতেেএটা তার হিন্ট দিতে সাহায্য করে ।\n\nভালো না:\n\n    \u003ca href=\"/ja/pdf\"\u003eJapanese PDF version\u003c/a\u003e\n\nভালো:\n\n    \u003ca href=\"/ja/pdf\" hreflang=\"ja\" rel=\"alternate\" type=\"application/pdf\"\u003eJapanese PDF version\u003c/a\u003e\n\n\n### লিঙ্ক এর টেক্সট পরিষ্কার রাখুন\n\nলিঙ্ক টেক্সট এর লিঙ্ক করা সম্পদের লেবেল হওয়া উচিত।\n\nভালো না:\n\n    \u003cp\u003e\u003ca href=\"/pdf\" rel=\"alternate\" type=\"application/pdf\"\u003eClick here\u003c/a\u003e to view PDF version.\u003c/p\u003e\n\nভালো:\n\n    \u003cp\u003e\u003ca href=\"/pdf\" rel=\"alternate\" type=\"application/pdf\"\u003ePDF version\u003c/a\u003e is also available.\u003c/p\u003e\n\n\n### সতর্কতা বা সতর্কতার জন্য `em` ইলিমেন্টে ব্যবহার করবেন না\n\nএগুলো সিরিয়াসনেস। সুতরাং, `strong` ইলিমেন্টে আরো বেশী উপযুক্ত.\n\nভালো না:\n\n    \u003cem\u003eCaution!\u003c/em\u003e\n\nভালো:\n\n    \u003cstrong\u003eCaution!\u003c/strong\u003e\n\n\n### `s`, `i`, `b`, এবং `u` ইলিমেন্টে যতটা সম্ভব এড়িয়ে চলুন\n\nএই ইলিমেন্টে গুলার শব্দার্থবিদ্যা মানুষের পক্ষে খুব কঠিন।\n\nভালো না:\n\n    \u003ci class=\"icon-search\"\u003e\u003c/i\u003e\n\nভালো:\n\n    \u003cspan class=\"icon-search\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n\n\n### `q` ইলিমেন্টে এর ভিতরে উদ্ধৃতি রাখবেন না \n\nউদ্ধৃতি ব্রাউজার দ্বারা প্রদান করা হয় ।\n\nভালো না:\n\n    \u003cq\u003e“For writing maintainable and scalable HTML documents”\u003c/q\u003e\n\nভালো:\n\n    \u003cq\u003eFor writing maintainable and scalable HTML documents\u003c/q\u003e\n\nএটাও ভালো:\n\n    “For writing maintainable and scalable HTML documents”\n\n\n### `abbr` ইলিমেন্টে এর `title` অ্যাট্রিবিউট যোগ করুন \n\nএর সম্প্রসারণ প্রতিনিধিত্ব করার অন্য কোন উপায় নেই।\n\nভালো না:\n\n    \u003cabbr\u003eHBP\u003c/abbr\u003e\n\nভালো:\n\n    \u003cabbr title=\"HTML Best Practices\"\u003eHBP\u003c/abbr\u003e\n\n\n### `ruby` মার্কআপ ইলিমেন্টে কম ব্যবহার করুন\n\n`ruby` ইলিমেন্টে আধুনিক সব ব্যাউজার এখনো সাপোর্ট করে না ।\n\nভালো না:\n\n    \u003cruby\u003eHTML\u003crt\u003eえいちてぃーえむえる\u003c/ruby\u003e\n\nভালো:\n\n    \u003cruby\u003eHTML\u003crp\u003e (\u003c/rp\u003e\u003crt\u003eえいちてぃーえむえる\u003c/rt\u003e\u003crp\u003e) \u003c/rp\u003e\u003c/ruby\u003e\n\n\n### মেশিন পাঠ অযোগ্য `time` ইলিমেন্টে এ `datetime` অ্যাট্রিবিউট যোগ করুন\n\nযখন datetime অ্যাট্রিবিউট বৈশিষ্ট্য উপস্থিত হয় না, তখন `time` ইলিমেন্টে এর বিষয়বস্তুর বিন্যাস সীমাবদ্ধ।\n\nভালো না:\n\n    \u003ctime\u003eDec 19, 2014\u003c/time\u003e\n\nভালো:\n\n    \u003ctime datetime=\"2014-12-19\"\u003eDec 19, 2014\u003c/time\u003e\n\n\n### কোড ল্যাংগুয়েজ লেখার সময় `class` অ্যাট্রিবিউট এর নাম এর আগে `language-` রাখুন\n\nএটি একটি আনুষ্ঠানিক উপায় নয়, তবে স্পেক এটি উল্লেখ করে।\n\nভালো না:\n\n    \u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/code\u003e\n\nভালো:\n\n    \u003ccode class=\"language-html\"\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/code\u003e\n\n\n### `kbd` ইলিমেন্টে যতটা সম্ভব সাধারন রাখুন\n\nনেস্টিং `kbd` ইলিমেন্টে মানুষের জন্য খুব কঠিন ।\n\nভালো না:\n\n    \u003ckbd\u003e\u003ckbd\u003eCtrl\u003c/kbd\u003e+\u003ckbd\u003eF5\u003c/kbd\u003e\u003c/kbd\u003e\n\nভালো:\n\n    \u003ckbd\u003eCtrl+F5\u003c/kbd\u003e\n\n\n### `span` ইলিমেন্টে যতটা সম্ভব এড়িয়ে চলুন\n\n`span` ইলিমেন্টে হলো  একটি উপাদান এর শেষ অবলম্বন ।\n\nভালো না:\n\n    HTML \u003cspan class=\"best\"\u003eBest\u003c/span\u003e Practices\n\nভালো:\n\n    HTML \u003cem\u003eBest\u003c/em\u003e Practices\n\n\n### `br` ইলিমেন্টে এর পরে বিরতি\n\n`br` ইলিমেন্টে যেখানে ব্যবহার করা হয় সেখানে লাইন বিরতি প্রয়োজন ।\n\nভালো না:\n\n    \u003cp\u003eHTML\u003cbr\u003eBest\u003cbr\u003ePractices\u003c/p\u003e\n\nভালো:\n\n    \u003cp\u003eHTML\u003cbr\u003e\n    Best\u003cbr\u003e\n    Practices\u003c/p\u003e\n\n\n### শুধুমাত্র উপস্থাপনামূলক উদ্দেশ্যে `br` উপাদান ইলিমেন্টে করবেন না\n\n`br` ইলিমেন্টে লাইন ব্রেকিং এর জন্য নয়, এটি বিষয়বস্তু লাইন বিরতি জন্য ।\n\nভালো না:\n\n    \u003cp\u003e\u003clabel\u003eRule name: \u003cinput name=\"rule-name\" type=\"text\"\u003e\u003c/label\u003e\u003cbr\u003e\n    \u003clabel\u003eRule description:\u003cbr\u003e\n    \u003ctextarea name=\"rule-description\"\u003e\u003c/textarea\u003e\u003c/label\u003e\u003c/p\u003e\n\nভালো:\n\n    \u003cp\u003e\u003clabel\u003eRule name: \u003cinput name=\"rule-name\" type=\"text\"\u003e\u003c/label\u003e\u003c/p\u003e\n    \u003cp\u003e\u003clabel\u003eRule description:\u003cbr\u003e\n    \u003ctextarea name=\"rule-description\"\u003e\u003c/textarea\u003e\u003c/label\u003e\u003c/p\u003e\n\n\n## সম্পাদনা\n\n\n### `ins` এবং `del` ইলিমেন্টে এর ভিতরে অন্য ইলিমেন্টে ব্যবহার করবেন না\n\nইলিমেন্টে অন্য ইলিমেন্টে এর উপরে ওভারফ্লো হতে পারে না।\n\nভালো না:\n\n    \u003cp\u003eFor writing maintainable and scalable HTML documents.\u003cdel\u003e And for mental stability.\u003c/p\u003e\n\n    \u003cp\u003eDon’t trust!\u003c/p\u003e\u003c/del\u003e\n\nভালো:\n\n    \u003cp\u003eFor writing maintainable and scalable HTML documents.\u003cdel\u003e And for mental stability.\u003c/del\u003e\u003c/p\u003e\n\n    \u003cdel\u003e\u003cp\u003eDon’t trust!\u003c/p\u003e\u003c/del\u003e\n\n\n## এম্বেড করা বিষয়বস্তু\n\n\n### `img` ইলিমেন্টে এর জন্য ফলব্যাক `picture` ইলিমেন্টে প্রদান করুন\n\nব্যাউজারে `picture` ইলিমেন্টে এর সাপোর্ট এখনো ভালো না ।\n\nভালো না:\n\n    \u003cpicture\u003e\n      \u003csource srcset=\"/img/logo.webp\" type=\"image/webp\"\u003e\n      \u003csource srcset=\"/img/logo.hdp\" type=\"image/vnd.ms-photo\"\u003e\n      \u003csource srcset=\"/img/logo.jp2\" type=\"image/jp2\"\u003e\n      \u003csource srcset=\"/img/logo.jpg\" type=\"image/jpg\"\u003e\n    \u003c/picture\u003e\n\nভালো:\n\n    \u003cpicture\u003e\n      \u003csource srcset=\"/img/logo.webp\" type=\"image/webp\"\u003e\n      \u003csource srcset=\"/img/logo.hdp\" type=\"image/vnd.ms-photo\"\u003e\n      \u003csource srcset=\"/img/logo.jp2\" type=\"image/jp2\"\u003e\n      \u003cimg src=\"/img/logo.jpg\"\u003e\n    \u003c/picture\u003e\n\n\n### যদি দরকার হয় তাহলে `img` ইলিমেন্টে `alt` অ্যাট্রিবিউট যোগ করুন\n\n`alt` অ্যাট্রিবিউট তাদের সাহায্য করে যারা ছবি প্রসেস করতে পারে না বা ইমেজ লোডিং অক্ষম আছে।\n\nভালো না:\n\n    \u003cimg src=\"/img/logo.png\"\u003e\n\nভালো:\n\n    \u003cimg alt=\"HTML Best Practices\" src=\"/img/logo.png\"\u003e\n\n\n### সম্ভব হলে খালি `alt` বৈশিষ্ট্য\n\nযদি চিত্রটি সম্পূরক হয়, তাহলে কাছাকাছি কোথাও সমতুল্য সামগ্রী রয়েছে।\n\nভালো না:\n\n    \u003cimg alt=\"Question mark icon\" src=\"/img/icon/help.png\"\u003e Help\n\nভালো:\n\n    \u003cimg alt=\"\" src=\"/img/icon/help.png\"\u003e Help\n\n\n### সম্বব হলে `alt` অ্যাট্রিবিউট বাদ দিন \n\nকখনও কখনও আপনি জানেন না কোন টেক্সট `alt` অ্যাট্রিবিউটের জন্য উপযুক্ত।\n\nভালো না:\n\n    \u003cimg alt=\"CAPTCHA\" src=\"captcha.cgi?id=82174\"\u003e\n\nভালো:\n\n    \u003cimg src=\"captcha.cgi?id=82174\" title=\"CAPTCHA\"\u003e\n    (If you cannot see the image, you can use an \u003ca href=\"?audio\"\u003eaudio\u003c/a\u003e test instead.)\n\n\n### খালি `iframe` ইলিমেন্ট\n\nএর বিষয়বস্তুতে কিছু সীমাবদ্ধতা রয়েছে। খালি থাকা সবসময় নিরাপদ।\n\nভালো না:\n\n    \u003ciframe src=\"/ads/default.html\"\u003e\n      \u003cp\u003eIf your browser support inline frame, ads are displayed here.\u003c/p\u003e\n    \u003c/iframe\u003e\n\nভালো:\n\n    \u003ciframe src=\"/ads/default.html\"\u003e\u003c/iframe\u003e\n\n\n### মার্কআপ `map` ইলিমেন্ট এর কনটেন্ট\n\nএই বিষয়বস্তু একটি স্ক্রিন রিডারকে উপস্থাপন করে।\n\nভালো না:\n\n    \u003cmap name=\"toc\"\u003e\n      \u003ca href=\"#general\"\u003eGeneral\u003c/a\u003e\n      \u003carea alt=\"General\" coords=\"0, 0, 40, 40\" href=\"#General\"\u003e |\n      \u003ca href=\"#the_root_element\"\u003eThe root element\u003c/a\u003e\n      \u003carea alt=\"The root element\" coords=\"50, 0, 90, 40\" href=\"#the_root_element\"\u003e |\n      \u003ca href=\"#sections\"\u003eSections\u003c/a\u003e\n      \u003carea alt=\"Sections\" coords=\"100, 0, 140, 40\" href=\"#sections\"\u003e\n    \u003c/map\u003e\n\nভালো:\n\n    \u003cmap name=\"toc\"\u003e\n      \u003cp\u003e\n        \u003ca href=\"#general\"\u003eGeneral\u003c/a\u003e\n        \u003carea alt=\"General\" coords=\"0, 0, 40, 40\" href=\"#General\"\u003e |\n        \u003ca href=\"#the_root_element\"\u003eThe root element\u003c/a\u003e\n        \u003carea alt=\"The root element\" coords=\"50, 0, 90, 40\" href=\"#the_root_element\"\u003e |\n        \u003ca href=\"#sections\"\u003eSections\u003c/a\u003e\n        \u003carea alt=\"Sections\" coords=\"100, 0, 140, 40\" href=\"#sections\"\u003e\n      \u003c/p\u003e\n    \u003c/map\u003e\n\n\n### `audio` অথবা `video` উপাদানের জন্য ফলব্যাক সামগ্রী প্রদান করুন\n\nএইচটিএমএলে নতুন প্রবর্তিত উপাদানগুলির জন্য ফলব্যাক সামগ্রী প্রয়োজন ৷\n\nভালো না:\n\n    \u003cvideo\u003e\n      \u003csource src=\"/mov/theme.mp4\" type=\"video/mp4\"\u003e\n      \u003csource src=\"/mov/theme.ogv\" type=\"video/ogg\"\u003e\n      ...\n    \u003c/video\u003e\n\nভালো:\n\n    \u003cvideo\u003e\n      \u003csource src=\"/mov/theme.mp4\" type=\"video/mp4\"\u003e\n      \u003csource src=\"/mov/theme.ogv\" type=\"video/ogg\"\u003e\n      ...\n      \u003ciframe src=\"//www.youtube.com/embed/...\" allowfullscreen\u003e\u003c/iframe\u003e\n    \u003c/video\u003e\n\n\n## ট্যাবুলার ডেটা\n\n\n### প্রতি লাইনে একটি সেল লিখুন\n\nলম্বা লাইন স্ক্যান করা কঠিন।\n\nভালো না:\n\n    \u003ctr\u003e\n      \u003ctd\u003eGeneral\u003c/td\u003e\u003ctd\u003eThe root Element\u003c/td\u003e\u003ctd\u003eSections\u003c/td\u003e\n    \u003c/tr\u003e\n\nভালো:\n\n    \u003ctr\u003e\n      \u003ctd\u003eGeneral\u003c/td\u003e\n      \u003ctd\u003eThe root Element\u003c/td\u003e\n      \u003ctd\u003eSections\u003c/td\u003e\n    \u003c/tr\u003e\n\n\n### হেডার সেল এর জন্য `th` ইলিমেন্ট ব্যবহার করুন\n\nএটা এড়িয়ে যাওয়ার কোনো কারণ নেই।\n\nভালো না:\n\n    \u003ctable\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n          \u003ctd\u003e\u003cstrong\u003eElement\u003c/strong\u003e\u003c/td\u003e\n          \u003ctd\u003e\u003cstrong\u003eEmpty\u003c/strong\u003e\u003c/td\u003e\n          \u003ctd\u003e\u003cstrong\u003eTag omission\u003c/strong\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003e\u003cstrong\u003e\u003ccode\u003epre\u003c/code\u003e\u003c/strong\u003e\u003c/td\u003e\n          \u003ctd\u003eNo\u003c/td\u003e\n          \u003ctd\u003eNeither tag is omissible\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003e\u003cstrong\u003e\u003ccode\u003eimg\u003c/code\u003e\u003c/strong\u003e\u003c/td\u003e\n          \u003ctd\u003eYes\u003c/td\u003e\n          \u003ctd\u003eNo end tag\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/tbody\u003e\n    \u003c/table\u003e\n\nভালো:\n\n    \u003ctable\u003e\n      \u003cthead\u003e\n        \u003ctr\u003e\n          \u003cth\u003eElement\u003c/th\u003e\n          \u003cth\u003eEmpty\u003c/th\u003e\n          \u003cth\u003eTag omission\u003c/th\u003e\n        \u003c/tr\u003e\n      \u003c/thead\u003e\n      \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003cth\u003e\u003ccode\u003epre\u003c/code\u003e\u003c/th\u003e\n          \u003ctd\u003eNo\u003c/td\u003e\n          \u003ctd\u003eNeither tag is omissible\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003cth\u003e\u003ccode\u003eimg\u003c/code\u003e\u003c/th\u003e\n          \u003ctd\u003eYes\u003c/td\u003e\n          \u003ctd\u003eNo end tag\u003c/td\u003e\n        \u003c/tr\u003e\n      \u003c/tbody\u003e\n    \u003c/table\u003e\n\n\n## Forms\n\n\n### `label` ইলিমেন্ট দিয়ে ফর্ম কন্ট্রোলকে ঘিরে রাখুন\n\n`label` ইলিমেন্ট ফর্ম ইলিমেন্ট এ ফোকাস করতে সাহায্য করে।\n\nভালো না:\n\n    \u003cp\u003eQuery: \u003cinput name=\"q\" type=\"text\"\u003e\u003c/p\u003e\n\nভালো:\n\n    \u003cp\u003e\u003clabel\u003eQuery: \u003cinput name=\"q\" type=\"text\"\u003e\u003c/label\u003e\u003c/p\u003e\n\n\n### সম্বব হলে `for` অ্যাট্রিবিউট বাদ দিন\n\n`label` ইলিমেন্ট এর সাথে কিছু form ইলিমেন্ট থাকতে পারে ।\n\nভালো না:\n\n    \u003clabel for=\"q\"\u003eQuery: \u003c/label\u003e\u003cinput id=\"q\" name=\"q\" type=\"text\"\u003e\n\nভালো:\n\n    \u003clabel\u003eQuery: \u003cinput name=\"q\" type=\"text\"\u003e\u003c/label\u003e\n\n\n### `input` ইলিমেন্ট এর জন্য সঠিক `type` অ্যাট্রিবিউট ব্যবহার করুন\n\nউপযুক্ত  `type` এর জন্য , একটি ব্যাউজার `input` ইলিমেন্ট কে ক্ষুদ্র বৈশিষ্ট্য দেয় ।\n\nভালো না:\n\n    \u003clabel\u003eSearch keyword: \u003cinput name=\"q\" type=\"text\"\u003e\u003c/label\u003e\n\nভালো:\n\n    \u003clabel\u003eSearch keyword: \u003cinput name=\"q\" type=\"search\"\u003e\u003c/label\u003e\n\n\n###  `input type=\"submit\"` তে `value` অ্যাট্রিবিউট যোগ করুন\n\nসাবমিট বটিনের জন্য ডিফল্ট লেবেল , ব্রাউজার এবং ভাষা জুড়ে মানসম্মত নয়।\n\nভালো না:\n\n    \u003cinput type=\"submit\"\u003e\n\nভালো:\n\n    \u003cinput type=\"submit\" value=\"Search\"\u003e\n\n\n### `title` অ্যাট্রিবিউট `input` ইলিমেন্ট এ যোগ করুন যেখানে `pattern` অ্যাট্রিবিউট আছে\n\nযদি ইনপুট টেক্সট এর সাথে `pattern` অ্যাট্রিবিউট না মিলে, তাহলে `title` অ্যাট্রিবিউট  ইঙ্গিত হিসাবে প্রদর্শিত হবে।\n\nভালো না:\n\n    \u003cinput name=\"security-code\" pattern=\"[0-9]{3}\" type=\"text\"\u003e\n\nভালো:\n\n    \u003cinput name=\"security-code\" pattern=\"[0-9]{3}\" title=\"A security code is a number in three figures.\" type=\"text\"\u003e\n\n\n### `placeholder` লেবেল করার জন্য অ্যাট্রিবিউট ব্যবহার করবেন না\n\n`label` ইলিমেন্ট লেভেল এর জন্য, `placeholder` এট্রিবিউট ছোট হিন্ট দেয়ার জন্য।\n\nভালো না:\n\n    \u003cinput name=\"email\" placeholder=\"Email\" type=\"text\"\u003e\n\nভালো:\n\n    \u003clabel\u003eEmail: \u003cinput name=\"email\" placeholder=\"john.doe@example.com\" type=\"text\"\u003e\u003c/label\u003e\n\n\n### প্রতি লাইনে `option` ইলিমেন্ট লিখুন\n\nলম্বা লাইন স্ক্যান করা কঠিন।\n\nভালো না:\n\n    \u003cdatalist id=\"toc\"\u003e\n      \u003coption label=\"General\"\u003e\u003coption label=\"The root element\"\u003e\u003coption label=\"Sections\"\u003e\n    \u003c/datalist\u003e\n\nভালো:\n\n    \u003cdatalist id=\"toc\"\u003e\n      \u003coption label=\"General\"\u003e\n      \u003coption label=\"The root element\"\u003e\n      \u003coption label=\"Sections\"\u003e\n    \u003c/datalist\u003e\n\n\n### `progress` ইলিমেন্টের ভিতরে  `max` এট্রিবিউট যোগ করুন।\n\n`max`এট্রিবিউটের সাথে `value` এট্রিবিউটের খুব সহজ ফরম্যাটে লেখা যেতে পারে।\n\nভালো না:\n\n    \u003cprogress value=\"0.5\"\u003e 50%\u003c/progress\u003e\n\nভালো:\n\n    \u003cprogress max=\"100\" value=\"50\"\u003e 50%\u003c/progress\u003e\n\n\n### `meter` ইলিমেন্টের এট্রিবিউটে  `min` এবং `max` যোগ করুন\n\n`min` এবং `max`এট্রিবিউটের সাথে `value` এট্রিবিউটের খুব সহজ ফরম্যাটে লেখা যেতে পারে।\n\nভালো না:\n\n    \u003cmeter value=\"0.5\"\u003e 512GB used (1024GB total)\u003c/meter\u003e\n\nভালো:\n\n    \u003cmeter min=\"0\" max=\"1024\" value=\"512\"\u003e 512GB used (1024GB total)\u003c/meter\u003e\n\n\n### `fieldset` ইলিমেন্ট এর প্রথম চাইল্ড হিসাবে `legend` রাখুন।\n\nএই Spec এর প্রয়োজনে।\n\nভালো না:\n\n    \u003cfieldset\u003e\n      \u003cp\u003e\u003clabel\u003eIs this section useful?: \u003cinput name=\"usefulness-general\" type=\"checkbox\"\u003e\u003c/label\u003e\u003c/p\u003e\n      ...\n      \u003clegend\u003eAbout \"General\"\u003c/legend\u003e\n    \u003c/fieldset\u003e\n\nভালো:\n\n    \u003cfieldset\u003e\n      \u003clegend\u003eAbout \"General\"\u003c/legend\u003e\n      \u003cp\u003e\u003clabel\u003eIs this section useful?: \u003cinput name=\"usefulness-general\" type=\"checkbox\"\u003e\u003c/label\u003e\u003c/p\u003e\n      ...\n    \u003c/fieldset\u003e\n\n\n## স্ক্রিপ্টিং\n\n\n### জাভাস্ক্রিপ্টের এর জন্য `type` অ্যাট্রিবিউট বাদ দিন\n\nHTML এর ভিতরে,  ডিফল্ট `type` এট্রিবিউট ভ্যালু এর `script` ইলিমেন্ট হলো\n`text/javascript`.\n\nভালো না:\n\n    \u003cscript type=\"text/javascript\"\u003e\n      ...\n    \u003c/script\u003e\n\nভালো:\n\n    \u003cscript\u003e\n      ...\n    \u003c/script\u003e\n\n\n### `script` ইলিমেন্ট এর কনটেন্ট এর উপর মন্তব্য করবেন না\n\nএই  ব্যবহারটি সুধু পুরানো ব্রাউজারের জন্য।\n\nভালো না:\n\n    \u003cscript\u003e\n    /*\u003c![CDATA[*/\n      ...\n    /*]]\u003e*/\n    \u003c/script\u003e\n\nএটাও ভালো না:\n\n    \u003cscript\u003e\n    \u003c!--\n      ...\n    // --\u003e\n    \u003c/script\u003e\n\nভালো:\n\n    \u003cscript\u003e\n      ...\n    \u003c/script\u003e\n\n\n### script-injected `script` ইলিমেন্ট ব্যবহার করবেন না।\n\nসিম্পল রাখা এবং ভালো পারফরমেন্স দুইটার জন্যই `async` এট্রিবিউট সব থেকে ভালো। \n\nভালো না:\n\n    \u003cscript\u003e\n      var script = document.createElement(\"script\");\n      script.async = true;\n      script.src = \"//example.com/widget.js\";\n      document.getElementsByTagName(\"head\")[0].appendChild(script);\n    \u003c/script\u003e\n\nভালো:\n\n    \u003cscript async defer src=\"https://example.com/widget.js\"\u003e\u003c/script\u003e\n\n\n## অন্যান্য\n\n\n### ধারাবাহিকভাবে ইন্ডেন্ট করুন\n\nরিডেবিলিটি বাড়ানোর জন্য ইন্ডেন্টেশন গুরুত্বপূর্ণ।\n\nভালো না:\n\n    \u003chtml\u003e\n    \t\u003chead\u003e\n    \t  ...\n    \t\u003c/head\u003e\n      \u003cbody\u003e\n        ...\n      \u003c/body\u003e\n    \u003c/html\u003e\n\nভালো:\n\n    \u003chtml\u003e\n      \u003chead\u003e\n        ...\n      \u003c/head\u003e\n      \u003cbody\u003e\n        ...\n      \u003c/body\u003e\n    \u003c/html\u003e\n\n\n### অভ্যন্তরীণ লিঙ্কের জন্য এবসুলেট পাথ ব্যবহার করুন\n\nএকটি এবসুলেট পাথ আপনার লোকালহোস্টে আরও ভাল কাজ করে ইন্টারনেট সংযোগ ছাড়াই ।\n\nভালো না:\n\n    \u003clink rel=\"apple-touch-icon\" href=\"http://you.example.com/apple-touch-icon-precomposed.png\"\u003e\n    ...\n    \u003cp\u003eYou can find more at \u003ca href=\"//you.example.com/contact.html\"\u003econtact page\u003c/a\u003e.\u003c/p\u003e\n\nভালো:\n\n    \u003clink rel=\"apple-touch-icon\" href=\"/apple-touch-icon-precomposed.png\"\u003e\n    ...\n    \u003cp\u003eYou can find more at \u003ca href=\"/contact.html\"\u003econtact page\u003c/a\u003e.\u003c/p\u003e\n\n\n### বাহ্যিক রিসোর্স এর জন্য প্রোটোকল-সম্পর্কিত URL ব্যবহার করবেন না\n\n\nপ্রোটোকলের সাহায্যে, আপনি নিরাপদে এবং নির্ভরযোগ্যভাবে বাহ্যিক সংস্থানগুলি লোড করতে পারেন৷\n\nভালো না:\n\n    \u003cscript src=\"//example.com/js/library.js\"\u003e\n\nভালো:\n\n    \u003cscript src=\"https://example.com/js/library.js\"\u003e\n\n\n## অবদানকারী\n\n- [@hail2u_](https://github.com/hail2u)\n- [@momdo](https://github.com/momdo)\n\n\n## অনুবাদক\n\n- [@costinlotreanu](https://github.com/costinlotreanu)\n- [@edgar-avila](https://github.com/edgar-avila)\n- [@kobyborali](https://github.com/kobyborali)\n- [@m1nhnv](https://github.com/m1nhnv)\n- [@mrcaidev](https://github.com/mrcaidev)\n- [@naufalk25](https://github.com/naufalk25)\n- [@oebelus](https://github.com/oebelus)\n- [@sahilmaniyar](https://github.com/sahilmaniyar)\n- [@shayanthenerd](https://github.com/shayanthenerd)\n- [@sliderkh](https://github.com/sliderkh)\n- [@stenbaek](https://github.com/stenbaek)\n- [@techhtml](https://github.com/techhtml)\n- [@umutphp](https://github.com/umutphp)\n- [@victorchao996](https://github.com/victorchao996)\n- [@wesleynepo](https://github.com/wesleynepo)\n- [@zulkar29](https://github.com/zulkar29)\n\n\n## লাইসেন্স\n\n[CC0](http://creativecommons.org/publicdomain/zero/1.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhail2u%2Fhtml-best-practices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhail2u%2Fhtml-best-practices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhail2u%2Fhtml-best-practices/lists"}