আমাদের ডিভ ব্যবহার করতে হবে কেন?


13

আজ সকালে, আমি যখন কিছু এইচটিএমএল এবং এইচএমএল লিখছিলাম, তখন আমার কাছে ঘটেছিল যে ডিভগুলি যেভাবে ব্যবহার করা হয়েছে তা হাস্যকর। ডিভগুলি কেন বোঝানো হচ্ছে না? ভাবুন যদি এটি:

<div class="hero-img">
   <img src="http://whatever.com/this.jpg">
</div>

এটি ছিল:

<hero-img>
   <img src="http://whatever.com/this.jpg">
</hero-img>

যদি উপাদানটির "ডিভ শ্রেণি" অংশটি ধরে নেওয়া হয়, তবে এইচটিএমএলটি আরও শব্দার্থক, এবং ম্যাচিং ক্লোজিং ট্যাগগুলির সাথে আরও বেশি পঠনযোগ্য হবে!

এটি এইচএএমএল এর মতো, যেখানে আমাদের রয়েছে:

.content Hello, World!

যা হয়ে:

<div class='content'>Hello, World!</div>

ব্রাউজারগুলিতে এটি কাজ করার জন্য আমার কাছে কেবল একটাই জিনিসটি ঘটবে তা হ'ল ব্রাউজারগুলি বিদ্যমান এইচটিএমএল এলিমেন্ট সংজ্ঞাটি বোঝায় না বলেই প্রতিটি উপাদানকে ব্যাখ্যা করা শুরু করতে পারে <div class="<element name>">

এটি পুরোপুরি সামঞ্জস্যপূর্ণ হতে পারে; সিএসএস এবং jQuery নির্বাচক ইত্যাদির জন্য, "Div.hero-img" এখনও কাজ করতে পারে এবং উপাদানগুলি নির্বাচনের জন্য প্রয়োজনীয় বাক্য গঠন হতে পারে।

আমি নতুন ওয়েব উপাদানগুলির স্পেসিফিকেশন সম্পর্কে জানি, তবে এটি এখানে প্রস্তাবিতগুলির চেয়ে উল্লেখযোগ্যভাবে জটিল। কোনও ওয়েবসাইটের উত্সটি দেখে এবং এইচটিএমএল দেখতে দেখতে কেমন সুন্দর লাগবে তা আপনি কল্পনা করতে পারেন ?!

তাহলে আমাদের ডিভ ব্যবহার করতে হবে কেন?

আপনি যদি মজিলার এইচটিএমএল 5 উপাদান তালিকার দিকে লক্ষ্য করেন তবে প্রতিটি উপাদানটির একটি অর্থপূর্ণ অর্থ রয়েছে এবং তারপরে আমরা <div>এটিতে পৌঁছাচ্ছি এবং এটি বলে:

"জেনেরিক ধারকটির কোনও বিশেষ অর্থ ছাড়াই প্রতিনিধিত্ব করে।"

..এবং তারপর তারা নির্বিচারে উপাদান তারা মত HTML5 এখন জুড়ছেন তালিকা <details>

অবশ্যই, যদি এইম্প্লাইড ডিভসের এই ধারণাটি এইচটিএমএল স্পাকে যুক্ত করা হয়, তবে এটি স্ট্যান্ডার্ড হয়ে উঠতে দশ বছর সময় নেয়, যা ওয়েব সময়ের দশ মিলিয়ন বছর।

সুতরাং আমি অনুমান করি যে এটি এখনও ঘটেনি একটি ভাল কারণ অবশ্যই আছে। আমার এটা দয়া করে ব্যাখ্যা করুন!


প্রকৃতপক্ষে দুটি নন সিমেটিক ধারক রয়েছে: ডিভ এবং স্প্যান
মিথ্যা রায়ান

উত্তর:


7

সমস্যা 1: সাদা স্থান s

আমি বিশ্বাস করি যে এটি সাধারণভাবে আসে নি। যদিও এটির একটি সম্ভবত এবং সম্ভবত এটি হওয়া উচিত নয় কারণ white-spacesCSS classesএ উপাদানটির জন্য একাধিক ক্লাস সংজ্ঞায়িত করা হয়, যখন এইচটিএমএলে তারা সংজ্ঞায়িত করে attributes

নিম্নলিখিত কোডটি ব্যাখ্যা করুন (বা একটি ব্রাউজারকে বিশ্লেষণ করতে বলুন):

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

কি familyএকটি দ্বিতীয় শ্রেণীর সংজ্ঞা বা HTML উপাদান একটি বৈশিষ্ট্য? আপনি সম্ভবত এই সাইটের পার্সার থেকে দেখেছেন, এটি এটি একটি গুণ বলে মনে করে।

সুতরাং, যদি আমি চাই <div class="pet family">, আসলে দুটি ক্লাস সংজ্ঞায়িত করার কোনও উপায় নেই, এটি দুটি প্রধান কারণগুলির মধ্যে একটি কারণ আমি কোনও আইডির পরিবর্তে কোনও ক্লাস ব্যবহার করব।

সমস্যা 2: সামনের সামঞ্জস্য!

<div>এই মুহুর্তে গুলি ব্যবহার করে , আমাদের কোডের চারপাশে সঠিকভাবে ইনডেন্ট এবং মন্তব্য করতে আমাদের (কমপক্ষে আমাদের মধ্যে কয়েকজনকে) বাধ্য করে, যা সমস্ত প্রোগ্রামিং ভাষার জন্য ভাল অভ্যাস।

পরিবর্তে, এইচটিএমএল ব্লকগুলিকে ভেরিয়েবলগুলিতে রূপান্তরিত করা নতুন প্রোগ্রামারগুলিতে বড় বিভ্রান্তি সৃষ্টি করবে যা এইচটিএমএল-তে নির্দিষ্ট কিছু করছে না

এছাড়াও, এটি মজাদার পার্শ্ব-প্রতিক্রিয়ার কারণ হিসাবে দেখাবে যে আপনার নতুন পুরানো কোডটিকে নতুন এইচটিএমএল 5 ট্যাগের সাথে তুলনা করা শুরু করা উচিত , কেবল এটি নিশ্চিত করার জন্য যে তারা আপনার ডিভের ক্লাসগুলির জন্য যে নামটি দিয়েছিল তারা সেই একই নামটি নিয়ে আসে নি ...

একই সমস্যা কিছু ভাষায় variablesব্যবহারের ক্ষেত্রে প্রযোজ্য reserved words। পিএইচপি এটি ডলার-সাইন দিয়ে সমাধান করেছে, তাই এইচটিএমএল-তে অনুরূপ পদ্ধতির ফলে বর্তমানের ব্যবহারের চেয়ে আরও ভাল কিছু হতে পারে না <div class="something">


"শ্রেণি" আবিষ্কার করে এমন লোকটির সাথে কি সমস্যা ছিল যে নির্দিষ্ট করে যে <z:name1 attr1=foo attr2=bar> ... <z/name2 attr3=boz ... </z>শব্দার্থগতভাবে সমান হবে <div class="name1" attr1="foo" attr2="bar">...</div><div class="name2" attr1="boz"> ... </div>তবে 14.4 কে মডেমের মাধ্যমে প্রেরণে অনেক কম সময় লাগবে?
সুপারক্যাট

আমি মনে করি না. তবে ঠিক একই জিনিসটি লেখার জন্য এটি কোনও ভিন্ন বাক্য গঠন হবে, <div class="">কোনও উপায়ে ধারণার উন্নতি না করে। তারপরে আবার, কেন এটি সংজ্ঞায়িত করুন z:name1বা z/name2এটি HTML ট্যাগ এর classএবং এটির নয় id? এবং সাদা-স্পেস সমস্যা এখানে আবার পপ আপ। সুতরাং এটি z:"name1 name2"দুটি শ্রেণীর ঘোষণা করা হবে , যা প্রায় একই জিনিস আবার হয়ে ওঠে।
mavrosxristoforos

সিনট্যাক্সের প্রচুর সম্ভাবনা রয়েছে। আমার বক্তব্যটি এমন একটি যুগে যেখানে অনেক লোক 14.4K বা ধীর মোডেম ব্যবহার করত, এমন একটি ফর্ম হওয়া উচিত ছিল যা ব্যান্ডউইথ ইস্যুগুলিতে কমপক্ষে কিছুটা বিবেচনা করেছিল।
সুপারক্যাট

আমি অবশ্যই এটি বুঝতে পারি। একটি ওয়েব বিকাশকারী হিসাবে, আমি এখনও দ্রুত ওয়েবসাইট এবং আরও অনেক কিছু তৈরি করতে কিছু হ্রাস করার চেষ্টা করি। যদিও আমি বিশ্বাস করি এটি অনেক দিক থেকে এটি একটি ভাল পদ্ধতি, যদিও এটি রয়েছে।
mavrosxristoforos

5

<div>আপনার অভিনব কল্যাণকে আমরা যতটুকু কলঙ্কিত করি তার পরিবর্তে আমরা ব্যবহার করি কারণ এটি ব্রাউজারের দ্বারা প্রক্রিয়াজাতকরণ এবং রেন্ডারিংকে সহজতর করে তোলে।

একটি পাল্টা উদাহরণ হিসাবে, এক্সএমএল আপনার পছন্দসই যে কোনও ট্যাগ-নাম তৈরির অনুমতি দেয়। স্বেচ্ছাসেবী ট্যাগ-নামগুলি তৈরি করার ক্ষমতা একটি প্রসেসিং ব্যয় নিয়ে আসে। এক্সএমএল পার্সারদের নথিকে বিশ্লেষণ করার সময় / অংশ হিসাবে নথির মধ্যে ব্যবহৃত ট্যাগগুলির একটি অভিধান তৈরি করতে হবে।

<div>ব্রাউজারগুলি ব্যবহার করে জেনে রাখুন যে সেখানে একটি ধারক রয়েছে এবং এটি ধারকটিকে উপেক্ষা করতে পারে বা চেইনের এমন কোনও সরঞ্জামে যেতে পারে যা ধারকটির সাথে কিছু করতে পারে।


আমি দৃ sure়ভাবে নিশ্চিত যে যদি ব্রাউজারগুলি কেবল উল্লিখিত অন্তর্ভুক্ত ডিভ পদ্ধতি ব্যবহার করে তবে প্রসেসিং ব্যয় অদৃশ্যভাবে ছোট হবে। এবং পড়ার এবং লিখনযোগ্যতার সুবিধাগুলি বিশাল হবে।
জর্দান ডেভিস

3
<div>মানে কম জটিলতা, যা সর্বদা একটি ভাল জিনিস। এটির মূল অংশে এইচটিএমএল দুটি ধরণের কনস্ট্রাক্টস দ্বারা নির্মিত: ব্লক স্তর এবং ইনলাইন মার্কআপ। একই জিনিসটি প্রকাশ করার আরও বেশি উপায় থাকার ফলে এইচটিএমএল থাকা জগতে কেবল যুক্ত হয়।

" ব্রাউজারের মাধ্যমে প্রক্রিয়াজাতকরণ এবং রেন্ডারিংকে সম্পাদন করা আরও সহজ করে তোলে This" এটি আসলে সত্য নয়। ব্রাউজারকে অপরিজ্ঞাত ট্যাগগুলি পার্স করার জন্য প্রয়োজনীয় এবং আপনার সমস্ত প্রত্যাশা অনুযায়ী সমস্ত ডিওএম পদ্ধতি এবং সিএসএস নির্বাচনকারীদের এখনও সেগুলি নিয়ে কাজ করতে হবে এবং ব্রাউজারগুলি এখনও অপরিজ্ঞাত উপাদানগুলিতে সিএসএস প্রয়োগ করবে। ব্রাউজারটি অপরিজ্ঞাত ট্যাগগুলির সাথে না করে তা হ'ল ডিফল্ট শৈলী (ব্যবহারকারী এজেন্ট শৈলী) এবং আচরণগুলি প্রয়োগ করা।
মিথ্যা রায়ান

3

আপনি ব্যক্তিগতভাবে (অ-মানকৃত) উদ্দেশ্যে ওয়েব লেখকদের স্বেচ্ছাসেবী উপাদান নাম যুক্ত করার অনুমতি দেওয়ার পরামর্শ দিচ্ছেন। এটিতে একটি বড় সমস্যা রয়েছে: এটি এইচটিএমএল স্ট্যান্ডার্ডে নতুন উপাদান যুক্ত করা বিপজ্জনক করে তুলবে, কারণ বিভিন্ন লেখক ইতিমধ্যে ব্যক্তিগত উদ্দেশ্যে একই উপাদানটির নামটি ব্যবহার করছেন - যার ফলে পৃষ্ঠার শব্দার্থক প্রতিক্রিয়া পরিবর্তন করতে হবে। ব্রাউজারগুলির নতুন সংস্করণ বিদ্যমান ওয়েব পৃষ্ঠাগুলি ভাঙ্গলে লোকেরা খুশি হয় না, সুতরাং এটি কোনও অগ্রগতি নয়।

একই সমস্যা বেসরকারী উদ্দেশ্যে স্বতন্ত্র বৈশিষ্ট্যের নাম ব্যবহার করে। এই কারণেই এইচটিএমএল 5 ব্যক্তিগত ব্যবহারের বৈশিষ্ট্যের জন্য উপাত্ত "ডেটা-" নির্দেশ করে, তাই তারা মানকটিতে নতুন বৈশিষ্ট্যের সাথে সংঘর্ষ করবে না।

ডিভ এবং স্প্যান শব্দার্থগতভাবে নিরপেক্ষ উপাদান হিসাবে সংজ্ঞায়িত করা হয়েছে যার অর্থ আপনি শব্দার্থবিজ্ঞান ভবিষ্যতের ব্রাউজারগুলিতে পরিবর্তিত হবে এমন ভয় ছাড়াই এগুলি ব্যক্তিগত উদ্দেশ্যে ব্যবহার করতে পারবেন। অবশ্যই, এটি একটি শ্রেণীর নাম যুক্ত করতে আরও কয়েকটি অক্ষর প্রয়োজন, কিন্তু সামঞ্জস্য সামঞ্জস্যতা এটি উপযুক্ত করে তোলে।


2

আপনার নিজের উদাহরণে একটি সম্পত্তি প্রদর্শন করে কেন ডিভগুলি হাস্যকর নয়।

<div class="hero-img">
  <img src="http://whatever.com/this.jpg">
</div>

আপনি সঠিকভাবে imgট্যাগটি বন্ধ করেন নি । কিছু ট্যাগ, যেমন img, br, hr, এবং অন্যদের কোনো বিষয়বস্তু নেই, এবং সেইজন্য বন্ধ হয়ে নেই। পার্সার এটি জানেন।

divট্যাগ, অপরপক্ষে, বন্ধ হওয়ার কথা এটা বিষয়বস্তু রয়েছে যেমন করা হয়। আপনি যদি নিজের ট্যাগটি সরিয়ে ফেলে থাকেন তবে এই ট্যাগটি বন্ধ হওয়ার আশা করা উচিত কিনা পার্সারের কোনও ধারণা নেই।

কিছু উপাদান বন্ধ করার এবং অন্যেরা এসজিএমএল হেরিটেজ থেকে আসে না কেন, এই ব্লগ পোস্টটি সুন্দরভাবে বর্ণনা করেছে: http://www.colorglare.com/2014/02/03/to-close-or-not- টু-close.html


2

এটি সংজ্ঞায়নের বিষয়। যদি এক্সএইচটিএমএল, যা খাঁটি এক্সএমএল, তাই সম্পূর্ণরূপে সংজ্ঞায়িত হয় তবে আপনি এখানে নিজের নামের স্থানটি ব্যবহার করতে পারেন, উদাহরণস্বরূপ একটি উপসর্গের মাধ্যমে q::

<q:hero-img>
    <img src="http://whatever.com/this.jpg">
</q:hero-img>

আপনি যদি এক্সএমএলকে (এক্স) এইচটিএমএল রূপান্তর করতে ব্যবহার করেন তবে আপনি আপনার ফ্রি-ট্যাগ "এইচটিএমএল" এর সাথে সত্যিকারের এইচটিএমএল থেকে উত্পন্ন করতে সম্পূর্ণ মুক্ত হবেন <div class="hero-img">


কিছু ট্যাগে আপনার নিজের (ডামি) ইউআরএল সহ একটি নেমস্পেসের গুণাবলী:

xmlns:q="http://..."

1
সহজ সমাধানের জন্য +1। এমনকি তাকে কোনও নেমস্পেস উপসর্গ অন্তর্ভুক্ত করতে হবে না, এবং কেবলমাত্র সামগ্রিক ডকটির জন্য একটি ডিফল্ট এনএস ঘোষণা করতে এবং এটি (এক্স) এইচটিএমএলে রূপান্তর করতে একটি এক্সএসএলটি সরবরাহ করতে পারে।
ডগএম

1
এক্সএমএল নেমস্পেসটি উপসর্গ দ্বারা সংজ্ঞায়িত করা হয়নি, তবে সেই উপসর্গের xMLns ঘোষণার মান দ্বারা। qআপনি দস্তাবেজের কোথাও xMLns ঘোষণা না করে এখানে সম্পূর্ণরূপে অর্থহীন উপসর্গ (এবং অবৈধ এক্সএমএল)। আপনি বিভিন্ন উপসর্গের সাথে একই নেমস্পেসটিকে পুনরায় ঘোষণা করতে বা ডকুমেন্টের একটি নির্দিষ্ট বিভাগের জন্য ডিফল্ট নেমস্পেস সেট করতে পারেন এবং যতক্ষণে xMLns মান সমান হয়, ততক্ষণ এই ভিন্ন ভিন্ন উপসর্গগুলি সিএসএস প্রয়োগ করার সময় বা ডিওএম-তে সমানভাবে বিবেচনা করা হবে।
মিথ্যা রায়ান

পছন্দ করুন আমার এটা উল্লেখ করা উচিত ছিল। ধরে নেওয়া ঘটনাটি জানা ছিল। যোগ করা হয়েছে
জোপ এগজেন

0

এইচটিএমএলের অন্যতম মূল উপাদান হ'ল প্রকৃতপক্ষে পূর্বনির্ধারিত ট্যাগ-উপাদান রয়েছে। এই জন্য.

দ্বি শ্রেণি = এই "সীমাবদ্ধতা" ঘুরে দেখার এক উপায়।

এবং সে কারণেই আপনি এই "অন্তর্নিহিত" নির্মাণগুলি দেখছেন না।


এই সমস্ত গুগল ইঞ্জিনিয়ারদের নতুন ওয়েব-উপাদানগুলির বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে বলুন ... আপনি কী বলতে চাইছেন তা আমি দেখতে পাচ্ছি, তবে শেষ পর্যন্ত এটি পরবর্তী কয়েক বছরে নির্বিশেষে উত্পন্ন উপাদানগুলির বিস্ফোরণ হতে চলেছে। আমার ধারণাটি আরও বেশি ব্যবহারকারী-বান্ধব। পয়েন্ট যদিও নেওয়া।
জর্দান ডেভিস

0

একটি ডিভ এলিমেন্টের উদ্দেশ্য একাই কাঠামো। এটি আপনাকে একটি সাধারণ উপাদানের অধীনে উপাদানগুলিকে একত্রিত করতে দেয়। এটির সাদা স্থান, গতি, উপস্থাপনা, শব্দার্থবিজ্ঞান বা অন্য কোনও কিছুর সাথে কোনও সম্পর্ক নেই। এটি সিএলএসের সাথে আপনাকে নির্বাচকদের ক্ষেত্রে স্টাইলিং এবং জাভাস্ক্রিপ্টের ক্ষেত্রে সহায়তা করে। আপনি যদি এটি অন্য কোনও উপাদানকে পরিবর্তন করেন তবে আপনি উদ্দেশ্যটি পরিবর্তন করেন।

আপনার নিজের নামযুক্ত উপাদানটি তৈরি করতে, যেমন আপনি দেখান, সেই অনুসন্ধান ইঞ্জিনগুলিতে একটি সমস্যা আছে এবং অন্যান্য সরঞ্জামগুলি আপনার উপাদানগুলির অর্থ কী তা জানতে পারে না। একটি "নায়ক-ইমজি" কী এবং এটি আমার "নায়ক-চিত্র" থেকে কীভাবে আলাদা এবং আমি যখন আপনার পৃষ্ঠাটি দেখি তখন আমার API কীভাবে এটি পরিচালনা করতে হবে? ব্রাউজারের কীভাবে সেই উপাদানটি পরিচালনা করা উচিত? এটি ব্লক স্তর বা ইনলাইন? অনেক প্রশ্ন.


0

সাধারণত, ডিভ ট্যাগগুলি কোনও ওয়েব পৃষ্ঠায় বিভাগ বা বিভাগ প্রয়োগ করার জন্য দরকারী। আপনি একটি ধারক হিসাবে একটি ডিভি ট্যাগ ব্যবহার করতে পারেন যেখানে অন্যান্য উপাদান প্রয়োগ করা যেতে পারে। এটি কোনও নির্দিষ্ট উপাদানটিতে সিএসএস এবং কিছু স্ক্রিপ্ট প্রয়োগ করতে সহায়তা করবে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.