আমি এই বস কে আছে ব্যবহার পছন্দ, পছন্দ, পছন্দ, পছন্দ শব্দের উপর জোর দিতে। আমরা একটি WYSIWYG সম্পাদক ব্যবহার করার আগে এটি ফিরে এসেছিল এবং আমাকে সেই বাজে কথা হ্যান্ডকোড করতে হবে।
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(আসুন তিনি যে রঙগুলি এমনকি জন্য ব্যবহার করেছিলেন সেগুলিতে না যাই মোআর জোর।)
যে সব মার্কআপ লেখার মহান অনুভূত. প্রচেষ্টা এটা নিয়েছে, নিশ্চিত, যাই হোক না কেন. কিন্তু দ্বিগুণ — বা তার বেশি দিয়ে ওভারলোড কন্টেন্ট যোগ করাও কি ভালো ধারণা! — জোর দেয়?
বিভিন্ন ট্যাগ বিভিন্ন গুরুত্ব বহন করে
শুরুর জন্য, <strong>
এবং <em>
ট্যাগ বিভিন্ন ব্যবহারের জন্য ডিজাইন করা হয়. আমরা সেগুলিকে HTML5 এ ফিরে পেয়েছি, যেখানে:
সুতরাং, <strong>
বিষয়বস্তুকে এই অর্থে আরও ওজন দেয় যে এটির বিষয়বস্তু গুরুত্বপূর্ণ বা জরুরি। একটি সতর্কতা সম্পর্কে চিন্তা করুন:
সতর্কতা: নিম্নলিখিত বিষয়বস্তু দুর্দান্ত হওয়ার জন্য পতাকাঙ্কিত করা হয়েছে৷
এটা পৌঁছানোর জন্য লোভনীয় হতে পারে <em>
একই জিনিস করতে তির্যক টেক্সট সর্বোপরি মনোযোগ আকর্ষণ করতে পারে। কিন্তু এটির বিষয়বস্তু পড়ার সময় আরও জোর দেওয়ার জন্য এটি সত্যিই একটি ইঙ্গিত হিসাবে বোঝানো হয়েছে। উদাহরণস্বরূপ, এখানে একই বাক্যের দুটি সংস্করণ বিভিন্ন স্থানে জোর দেওয়া হয়েছে:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
উভয় উদাহরণ জোর জোর, কিন্তু ভিন্ন শব্দ. এবং আপনি যদি সেগুলি জোরে জোরে পড়তে চান তবে সেগুলি আলাদা শোনাবে। যে তোলে <em>
আপনার লেখায় সুর প্রকাশ করার একটি দুর্দান্ত উপায়। এটি এমনভাবে বাক্যের অর্থ পরিবর্তন করে <strong>
না.
ভিজ্যুয়াল জোর বনাম শব্দার্থিক জোর
বিষয়বস্তুর উপর জোর দেওয়ার সময় এই দুটি জিনিস আপনাকে ওজন করতে হবে। যেমন, এমন অনেক দৃষ্টান্ত রয়েছে যেখানে বাক্যটির অর্থকে প্রভাবিত না করেই আপনাকে বিষয়বস্তুকে তির্যক করতে হবে। কিন্তু সেগুলি অন্যান্য ট্যাগগুলির সাথে পরিচালনা করা যেতে পারে যা তির্যক রেন্ডার করে:
<i>
: এই ক্লাসিক এক! HTML5 এর আগে, এটি সমস্ত জায়গায় তির্যক দিয়ে জোর দেওয়ার জন্য ব্যবহৃত হত। এখন, এটি শব্দার্থগত অর্থ পরিবর্তন না করেই বিষয়বস্তুকে দৃশ্যমানভাবে তির্যক করতে ব্যবহৃত হয়।<cite>
: একটি তথ্য বা চিত্রের উৎস নির্দেশ করে। ("উৎস: সিএসএস-ট্রিকস")<address>
: যোগাযোগের তথ্য চিহ্নিত করতে ব্যবহৃত হয়, শুধুমাত্র প্রকৃত ঠিকানা নয়, ইমেল ঠিকানা এবং ফোন নম্বরের মতো জিনিসগুলিও। (
)
এটা তার সাথে একই জিনিস যাচ্ছে <strong>
. স্টাইল করার জন্য এটি ব্যবহার করার পরিবর্তে আপনি আরও ভারী দেখতে চান, ক্লাসিকটি ব্যবহার করা একটি ভাল ধারণা <b>
প্রয়োজন নেই এমন বিষয়বস্তুকে অতিরিক্ত তাৎপর্য প্রদান এড়াতে বোল্ডফেসিংয়ের জন্য ট্যাগ। এবং মনে রাখবেন, ব্রাউজারের ডিফল্ট স্টাইলগুলির জন্য ধন্যবাদ, শিরোনামগুলির মতো কিছু উপাদান ইতিমধ্যেই গাঢ়ভাবে রেন্ডার করা হয়েছে। আরও জোরালো জোর যোগ করার দরকার নেই।
জোর দেওয়া বিষয়বস্তুতে তির্যক ব্যবহার করা (এবং তদ্বিপরীত)
এমন কিছু বৈধ ক্ষেত্রে রয়েছে যেখানে আপনাকে একটি লাইনের অংশ তির্যক করতে হবে যা ইতিমধ্যেই জোর দেওয়া হয়েছে। অথবা হয়ত এমন কিছু টেক্সটে জোর দিন যা ইতিমধ্যেই তির্যক করা হয়েছে।
একটি ব্লককোট একটি ভাল উদাহরণ হতে পারে। আমি অনেকবার দেখেছি যেখানে তারা শৈলীর জন্য তির্যক করা হয়েছে, যদিও ডিফল্ট ব্রাউজার শৈলী এটি করে না:
blockquote { font-style: italic;
}
আমরা যদি সেই ব্লককোটে একটি সিনেমার শিরোনাম উল্লেখ করতে হয়? যে তির্যক করা উচিত. কোন স্ট্রেস জোর প্রয়োজন নেই, তাই একটি <i>
ট্যাগ করবে। কিন্তু যখন এটি ইতিমধ্যেই এইভাবে রেন্ডার করা হয়েছে তখনও এটিকে তির্যক করা অদ্ভুত:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
এমন একটি পরিস্থিতিতে যেখানে আমরা এইরকম তির্যক কন্টেন্টের মধ্যে কিছু তির্যক করছি, আমাদের অনুমিত হয় তির্যক সরান নেস্টেড উপাদান থেকে... <i>
এক্ষেত্রে.
blockquote i { font-style: normal;
}
ধারক শৈলী প্রশ্ন আমরা যদি সেগুলি পাই তবে এই সমস্ত দৃষ্টান্তগুলি ধরার জন্য খুব দরকারী হবে:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
এই সামান্য স্নিপেট ব্লককোটটি মূল্যায়ন করে কিনা তা দেখতে font-style
তৈরি italic
. যদি এটা হয়, তাহলে এটা নিশ্চিত করতে হবে <em>
, <i>
, <cite>
, এবং <address>
উপাদানগুলিকে সাধারণ পাঠ্য হিসাবে রেন্ডার করা হয়, যদি একটি থাকে তবে শব্দার্থিক অর্থ ধরে রাখে।
কিন্তু জোরের মধ্যেই ফিরে যান
আমি বাসা বাঁধতাম না <strong>
ভিতরে <em>
এটার মত:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…বা বাসা <em>
ভিতরে <strong>
পরিবর্তে:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
রেন্ডারিং ঠিক আছে! এবং এটা কোন ব্যাপার না যে তারা কোন ক্রমে… অন্তত আধুনিক ব্রাউজারে। জেনিফার কিরনিন তা উল্লেখ করেছেন কিছু ব্রাউজার শুধুমাত্র পাঠ্যের কাছাকাছি ট্যাগ রেন্ডার করে, কিন্তু আমি আমার সীমিত পরীক্ষায় কোথাও এর সাথে ধাক্কা খাইনি। কিন্তু কিছু দেখার জন্য!
আমি এক প্রকারের জোর অন্যটিতে নেস্ট করব না কারণ এটির প্রয়োজন নেই। ব্যাকরণের কোন নিয়ম নেই যা এটির জন্য আহ্বান করে। বিস্ময়বোধক বিন্দুর মতো, এক ধরনের জোর দেওয়াই যথেষ্ট, এবং আপনি চাক্ষুষ, ওজন বা ঘোষিত জোরের পরে যা করছেন তার সাথে মেলে এমন একটি ব্যবহার করা উচিত।
এবং যদিও কিছু স্ক্রিন রিডার জোর দেওয়া বিষয়বস্তু ঘোষণা করতে সক্ষম, তারা কোনো অতিরিক্ত গুরুত্ব বা জোর দিয়ে মার্কআপ পড়বে না। সুতরাং, আমি যতদূর বলতে পারি, কোনও অতিরিক্ত অ্যাক্সেসিবিলিটি সুবিধা নেই।
কিন্তু আমি সত্যিই সব জোর চাই!
আপনি যদি এমন অবস্থানে থাকেন যেখানে আপনার বস আমার মতো এবং চান সব দ্য জোর, আমি জোরের ধরনটির জন্য সঠিক HTML ট্যাগের জন্য পৌঁছতে চাই, তারপরে ব্রাউজার শৈলীগুলি পরিচালনা করতে পারে না এমন কিছুর জন্য অ্যাকাউন্টে সহায়তা করার জন্য CSS-এর সাথে শব্দার্থবিদ্যাকে প্রভাবিত করে না এমন ট্যাগের মিশ্রণের সাথে বাকি শৈলীগুলি প্রয়োগ করব৷
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
আমি এমনকি সঙ্গে এটা করতে পারে <strong>
একটি প্রতিরক্ষামূলক পরিমাপ হিসাবে ট্যাগও:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
যতক্ষণ পর্যন্ত আমরা প্রতিরক্ষা খেলছি, আমরা ভুলগুলি চিহ্নিত করতে পারি যেখানে জোরের মধ্যে জোর দেওয়া আছে লাল বা অন্য কিছুতে হাইলাইট করে:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
তারপরে আমি সম্ভবত শেষ বিভাগ থেকে সেই স্নিপেটটি ব্যবহার করব যা একটি উপাদান থেকে ডিফল্ট ইটালিক স্টাইলিং সরিয়ে দেয় যখন এটি অন্য তির্যক উপাদানে নেস্ট করা হয়।
আর কিছু?
মেয়িবে:
- এসইও চালিত বিষয়বস্তু এবং পিআর বিতরণ। আজই পরিবর্ধিত পান।
- প্লেটোব্লকচেন। Web3 মেটাভার্স ইন্টেলিজেন্স। জ্ঞান প্রসারিত. এখানে প্রবেশ করুন.
- উত্স: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- অভিগম্যতা
- হিসাব
- অতিরিক্ত
- ঠিকানা
- ঠিকানাগুলি
- প্রভাবিত
- প্রভাবিত
- পর
- সব
- একা
- ইতিমধ্যে
- আমেরিকা
- এবং
- ঘোষিত
- উদ্গাতা
- অন্য
- কোথাও
- প্রয়োগ করা
- অবতার
- পিছনে
- পটভূমি
- কারণ
- আগে
- হচ্ছে
- উত্তম
- বিট
- সাহসী
- সীমান্ত
- বস
- বক্স
- বক্স অফিস
- ব্রাউজার
- ব্রাউজার
- বাজেট
- কল
- সক্ষম
- কেস
- মামলা
- পরিবর্তন
- পরিবর্তন
- সর্বোত্তম
- রঙ
- যোগাযোগ
- ধারণ
- বিষয়বস্তু
- সিএসএস
- ডিফল্ট
- প্রতিরক্ষা
- আত্মরক্ষামূলক
- পরিকল্পিত
- বিভিন্ন
- না
- Dont
- ডবল
- প্রচেষ্টা
- পারেন
- উপাদান
- ইমেইল
- জোর
- গুরুত্ব আরোপ করা
- জোর
- প্রচুর
- যথেষ্ট
- সমগ্র
- ত্রুটি
- এমন কি
- উদাহরণ
- উদাহরণ
- প্রকাশ করা
- অতিরিক্ত
- মারামারি
- ব্যক্তিত্ব
- প্রথম
- পতাকাঙ্কিত
- অনুসরণ
- ফর্ম
- থেকে
- পাওয়া
- দেয়
- দান
- বিশ্বব্যাপী
- Go
- চালু
- ভাল
- মহান
- হাতল
- সাহায্য
- এখানে
- লক্ষণীয় করা
- হাইলাইট
- এইচটিএমএল
- HTTPS দ্বারা
- ধারণা
- সনাক্ত করা
- গুরুত্ব
- গুরুত্বপূর্ণ
- in
- তথ্য
- সূক্ষ্মদৃষ্টি
- পরিবর্তে
- IT
- জেনিফার
- গত
- সীমিত
- লাইন
- সামান্য
- অবস্থানগুলি
- দীর্ঘ
- দেখুন
- প্রণীত
- করা
- তৈরি করে
- ছাপ
- ব্যাপার
- অর্থ
- মাপ
- উল্লেখ
- হতে পারে
- মিলিয়ন
- আধুনিক
- ভরবেগ
- অধিক
- চলচ্চিত্র
- চলচ্চিত্র
- NAB
- প্রয়োজন
- নীড়
- সাধারণ
- উত্তর
- উত্তর আমেরিকা
- সংখ্যার
- অফার
- দপ্তর
- ONE
- উদ্বোধন
- ক্রম
- অন্যান্য
- অংশ
- কর্মক্ষমতা
- ভাতা
- ফোন
- শারীরিক
- জায়গা
- Plato
- প্লেটো ডেটা ইন্টেলিজেন্স
- প্লেটোডাটা
- কেলি
- প্রচুর
- পয়েন্ট
- অবস্থান
- সম্ভবত
- রক্ষিত
- বিশুদ্ধরূপে
- নাগাল
- পড়া
- পাঠকদের
- কারণ
- লাল
- মনে রাখা
- অনুবাদ
- বিশ্রাম
- ধারনকারী
- নিয়ম
- একই
- স্ক্রিন
- স্ক্রিন রিডার
- অধ্যায়
- শব্দার্থবিদ্যা
- অনুভূতি
- বাক্য
- সেট
- উচিত
- কেবল
- অবস্থা
- So
- কিছু
- কিছু
- শব্দ
- উৎস
- এখনো
- জোর
- শক্তিশালী
- শৈলী
- প্রস্তাব
- সুপার
- অনুমিত
- TAG
- পরীক্ষা
- সার্জারির
- উৎস
- জিনিস
- কিছু
- বার
- শিরনাম
- থেকে
- স্বন
- অত্যধিক
- সত্য
- জরুরী
- ব্যবহার
- সতর্কবার্তা
- ওয়াচ
- সপ্তাহান্তিক কাল
- তৌল করা
- ওজন
- কি
- কিনা
- যখন
- হু
- ইচ্ছা
- মধ্যে
- ছাড়া
- শব্দ
- would
- লেখা
- আপনি
- আপনার
- zephyrnet