আমরা পরিবর্তে সিএসএস ব্যবহার করতে পারলে আমাদের কেন পি, স্প্যান, এইচএক্স ট্যাগের মতো ট্যাগ ব্যবহার করা উচিত?


43

আমরা পরিবর্তে সিএসএস ব্যবহার করতে পারলে আমাদের কেন পি, স্প্যান, এইচএক্স ট্যাগের মতো ট্যাগ ব্যবহার করা উচিত? এসইও দৃষ্টিকোণ থেকে এটি গুরুত্বপূর্ণ?


2
আমি দেখতে পাচ্ছি আপনি কীভাবে আপনি এইচএক্স ট্যাগ হওয়ার ভান করার জন্য স্প্যান বা পি ট্যাগ সহ সিএসএস ব্যবহার করতে পারেন, তবে আপনি কীভাবে এমনকি পি বা স্প্যান ট্যাগ ছাড়াও স্টাইল টেক্সটে CSS ব্যবহার করবেন?
জোশুয়াহেদলুন্ড

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

উত্তর:


67

সংক্ষিপ্ত সংস্করণটি হ'ল বিভিন্ন ট্যাগ এবং সিএসএসের বিভিন্ন উদ্দেশ্য রয়েছে।

<h1>Whatever</h1>উদাহরণস্বরূপ, এর ব্যবহারের সাথে অর্থের একটি নির্দিষ্ট পরিমাণ বহন করে: "এটি একটি শিরোনাম, একটি গুরুত্বপূর্ণ – প্রথম স্তরের এক" ইত্যাদি। কিছু পার্সারও ডকুমেন্টের কাঠামোর একটি রূপরেখা তৈরি করতে এইচএক্স ট্যাগগুলি (এবং অন্যদের) ব্যবহার করে যা ডেটা প্রসেসিং থেকে অ্যাক্সেসযোগ্যতার কোনও কিছুর জন্য ব্যবহার করা যেতে পারে (যেমন, স্ক্রিনরেডাররা ওয়েবমাস্টার হোমপেজে পরবর্তী প্রশ্নটিতে ঝাঁপিয়ে পরের এইচ 3 এড়িয়ে যান) ।

আপনি সিএসএস এবং তার বিপরীতে কী করতে পারেন তার উপর ভিত্তি করে শব্দার্থক ট্যাগগুলি আপনি খারিজ করতে পারবেন না।
আপনি এইচ 1 এর মতো দেখতে অন্য ট্যাগটিতে সিএসএস প্রয়োগ করতে পারেন , যেমন: <span style="font-weight:bold;font-size:2em">Whatever</span>তবে এটি এখনও স্প্যান ট্যাগটিকে ফাংশন এবং শব্দার্থবিজ্ঞানের ক্ষেত্রে সত্যিকারের শিরোনাম হিসাবে তৈরি করে না । এই ক্ষেত্রে, আমি উপরে উল্লিখিত রূপরেখাটি বেশ অসম্ভব হবে কারণ এই স্প্যানগুলি শিরোনাম নয়, তবে কিছু পাঠ্য যা আপনি স্বেচ্ছায় বড় এবং সাহসী করেছিলেন।


41

মার্কআপ এবং উপস্থাপনা আলাদা

এটি কিছুটা জিজ্ঞাসার মতো "যখন আমরা পেইন্টিং করব তখন কেন আমাদের দেওয়াল থাকবে?" :)

এইচটিএমএল ট্যাগগুলি আপনার সামগ্রী কী তা বোঝায় - এটি একটি শিরোনাম, এটি একটি তালিকা ইত্যাদি etc.

সিএসএস আপনার সামগ্রীর চেহারা কেমন হওয়া উচিত তা নির্দেশ করে - শিরোনামগুলি নীল হওয়া উচিত, তালিকাগুলি এগুলিতে বেশি চাপ দেওয়া উচিত, মেনুটি বাম দিকে হওয়া উচিত, ইত্যাদি

জাভাস্ক্রিপ্ট আপনার পৃষ্ঠার আচরণ করা উচিত - অ্যানিমেশন ইত্যাদি,

সুতরাং, এইচটিএমএল সামগ্রী ব্যতীত সিএসএস এবং জাভাস্ক্রিপ্টের আসলে কাজ করার কিছুই নেই।

এই বিভাগগুলি 100% কালো এবং সাদা নয় - উদাহরণস্বরূপ, সিএসএস এখন "ট্রানজিশনগুলি" নির্দিষ্ট করতে পারে যা অ্যানিমেশন - তবে সেগুলি মূল ধারণা।

এখানে এবং এখানে স্ট্যাকওভারফ্লোতে এই বিষয়ে পূর্ববর্তী আলোচনাগুলি দেখুন ।

ভাল মার্কআপ প্রচুর পরিশ্রম সাশ্রয় করে এবং আরও ভাল কাজ করে

আপনি যদি কোনও লিঙ্কের মতো আচরণ করতে চান তবে <span class="mylink">এটি দেখতে এবং সঠিক বোধ করার জন্য আপনি গুচ্ছ CSS এবং জেএস ব্যবহার করতে পারেন এবং ব্যবহার করতে পারেন । অথবা আপনি কেবলমাত্র একটি <a>উপাদান ব্যবহার করতে পারেন এবং ডাউনলোডের জন্য কোনও অতিরিক্ত কোড ছাড়াই এটি বিনামূল্যে পান, কারণ ব্রাউজারগুলি ইতিমধ্যে কী করতে হবে তা জানে এবং দ্রুত, নেটিভ কোডে যুক্তি প্রয়োগ করা হয়েছে। এছাড়াও স্ক্রিন পাঠক, মোবাইল ব্রাউজার, অনুসন্ধান ইঞ্জিন, অ্যাগ্রিগেটর এবং আপনি যে ভাবেননি এমন অন্যান্য ব্যবহারের ক্ষেত্রে সঠিকভাবে কাজ করার সম্ভাবনা রয়েছে।

এজন্য আপনার <button>ক্লিকের যোগ্য ক্রিয়াগুলির জন্য একটি , একটি <label>লেবেল দেওয়ার জন্য এবং আপনার পৃষ্ঠার মূল বিভাগের জন্য <input>একটি <main>ব্যবহার করা উচিত।

এসইওকে কত ভাল মার্কআপ প্রভাবিত করে

মূলত, এসইও অনুসন্ধান ইঞ্জিনগুলিকে বোঝানোর বিষয়ে যে আপনার বিষয়বস্তু সন্ধানের জন্য সেরা মিল best স্পষ্টতই, গুগলে কেউ ব্যক্তিগতভাবে প্রতিটি ওয়েব পৃষ্ঠা পড়ছে না এবং এটি র‌্যাঙ্ক করছে।

অতএব, অনুসন্ধান সামগ্রীগুলি আপনার সামগ্রী কী তা জানতে, কোনও প্রোগ্রামকে এটি বিশ্লেষণ করতে হবে।

আরে, দেখো! আমাদের কাছে এইচটিএমএল নামের এই পুরো ভাষা রয়েছে যা মেশিনগুলি বুঝতে পারে এমন উপায়ে আপনার সামগ্রীর লেবেল বোঝানো হয়েছে! :)

সুতরাং হ্যাঁ, স্পষ্ট মার্কআপ আপনার পৃষ্ঠাগুলিকে আরও ভালভাবে সূচী করতে অনুসন্ধান ইঞ্জিনগুলিকে সহায়তা করবে।

চূড়ান্ত উদাহরণটি ব্যবহার করার জন্য, যদি আপনার পৃষ্ঠার শিরোনামটি যদি আপনি একটি খবরের কাগজের শিরোনামটি নিয়েছিলেন তবে এটি আকর্ষণীয় দেখাতে পারে এবং লোকেরা এটি কেবল সূক্ষ্মভাবে পড়তে পারে তবে একটি অনুসন্ধান ইঞ্জিনের কাছে এটি কেবল কোনও অর্থহীন একটি চিত্র হবে would । যদিও <h1>Turtle Groomer 5000</h1>অনুসন্ধান ইঞ্জিনগুলিকে স্পষ্টভাবে বলেছে যে আপনার কাছে এমন একটি পণ্য রয়েছে যা টেস্টিটুডিনাল হাইজিনের সুবিধার্থ করে।


2
"পেইন্টিং করার সময় কেন আমাদের দেয়াল থাকা উচিত?" ~ এটি একটি দুর্দান্ত প্রশ্ন? ধন্যবাদ!
এভিক জেমস

আমি মনে করি ট্যাগগুলির নামগুলি মার্কআপের বিভ্রান্তিকর অংশ - এইচ 1, এইচ 2 ইত্যাদি স্ক্রিন পাঠকদের পাশাপাশি এটি দেখতে পাওয়া লোকেরাও ব্যবহার করতে পারেন। যে বলেন, বিশ্বের 99% একটি পৃষ্ঠা দেখতে পাবেন, সেইজন্য এবং যতটা যেমন এসইও প্রেমীদের upsets, এইচ ট্যাগ হয় ঠিক, চাক্ষুষ চিহ্নিতকারী <b>বোঝানো সাহসী একবার।
ক্রিস এস

@ ক্রিসস - আমার মনে হয় না এটি বিভ্রান্তিকর। ট্যাগগুলি সর্বদা মেশিন দ্বারা পড়া বোঝানো হয়; এতে স্ক্রিন পাঠকের মতো ব্রাউজারগুলিও অন্তর্ভুক্ত রয়েছে। এবং না, <h1>এটি একটি ভিজ্যুয়াল মার্কার নয়, সত্যই। বেশিরভাগ ব্রাউজারগুলি এটিকে বড় এবং সাহসী প্রদর্শন করবে যদি তাদের অন্যথায় না বলা হয় তবে পৃষ্ঠার স্টাইলগুলি বা ব্যবহারকারীর নিজস্ব পছন্দগুলি এটিকে ওভাররাইড করতে পারে। <h1>অর্থের সূচক: 'এটি আমার প্রধান শিরোনাম' ' সাইট বা ব্যবহারকারী যদি প্রধান শিরোনামগুলি ছোট এবং কমলা হতে চায় তবে তারা এটি দেখতে পাবে।
নাথান লং

1
"ঠিক << মানে একবার সাহসী" - কেউ <b>আমাকে না বলে কি এর অর্থ পরিবর্তন করেছিল ? এটি এখনও সাহসী মানে না? অবশ্যই, আমি <em><strong>
অর্থসূচক

13

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


10

সু শব্দার্থক অংশ উত্তর। এসইও সম্পর্কিত, আপনি দেখতে পাবেন যে এইচ 1 এলিমেন্টটি অন্যান্য ট্যাগের চেয়ে সার্চ ইঞ্জিনগুলির দ্বারা বেশি ওজন দেওয়া হয়েছে। এইচ 2 / বি / শক্তিশালী ট্যাগগুলিকে নিয়মিত পাঠ্যের চেয়ে কিছুটা বেশি ওজন দেওয়া হয়।

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


এটা মজার. আপনি এই জন্য একটি উৎস আছে?
ব্যবহারকারী 606723

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

1
আপডেট: এখানে একটি পোস্ট যা সেরপগুলিতে
অসন্তুষ্টগোট

1

এইচটিএমএল 5 এর জন্য, এইচটিএমএল 5 এ সাহসী এবং তির্যক দেখুন

সারাংশ:

ব্যবহার করুন <b>যখন আপনি পাঠ্য প্রাসঙ্গিক গুরুত্ব ছাড়া একটি ভিন্ন শৈলী, কিন্তু ব্যবহারের করতে চান <strong>যখন আপনি একটি বিষয়বস্তু বা এসইও দৃষ্টিকোণ থেকে অতিরিক্ত গুরুত্ব আছে পাঠ্য চাই।

ব্যবহারের <i>টেক্সট মেজাজ অফসেট, কিন্তু ব্যবহারের <em>টেক্সট সতেজ করা।


3
নং <b> এবং <i> হ্রাস করা হয়েছে। আপনি যদি নিজের পাঠ্যটি বল্ট / ইটালিক দেখতে চান তবে সিএসএস ব্যবহার করুন। আপনি যদি গা bold় / তির্যক পাঠ্যের অর্থ বোঝাতে চান তবে <strong> এবং <em> ব্যবহার করুন।
মিরসিয়া চিরিয়া

4
@ আইকনিকে কারা অবমানিত? আমার বোধগম্যতা এটিও ছিল যে এটি এইচটিএমএল 5 স্ট্যান্ডার্ডে "অবনমিত" ছিল। এবং সঙ্গত কারণে - জোর দেওয়া ছাড়াও প্রচুর প্রচলিত প্রচলিত ব্যবহার রয়েছে [উদাহরণস্বরূপ, বইয়ের শিরোনাম বা বিদেশী শব্দ] - "ইটালিক" এর জন্য স্পষ্টত [একটি শব্দার্থত ট্যাগের চেয়ে] একটি ট্যাগ থাকা সরাসরি রাজধানীতে রাখার চেয়ে আলাদা নয় এবং বিরামচিহ্ন। আপনি যদি ব্যবহার করতে চান <span class="proper-name"> <span class="question-sentence">তবে ...
এলোমেলো 832

1
এটি হ্রাস করা হয়েছে কারণ HTML এর কোনও উপস্থাপনা বিন্যাসকে মোটেই সংজ্ঞায়িত করা উচিত নয়। কারণ এখানেই আমরা CSS ফাইল মধ্যে CSS লিখতে (এবং ইনলাইন নয়) তাই আমরা মানব, প্রিন্টার, স্ক্রিনরিডার, মোবাইল, ইসলাম পাঠক ect,, Safari পাঠক ইত্যাদি জন্য স্বতন্ত্র শৈলী আছে।
সিক্ত

3
@ সোড আমি জিজ্ঞাসা করছিলাম না কেন এটি হ্রাস করা হয়েছে, আমি একে একে একে অবমূল্যায়নের দাবিটিকে চ্যালেঞ্জ জানছিলাম । এবং এটি পরিষ্কার নয় যে কেন মূলধনী অক্ষর এবং বিরামচিহ্নের চেয়ে তির্যক এত বেশি "উপস্থাপনা বিন্যাস"। এটি বিষয়বস্তুর অংশ।
র্যান্ডম 832

2
@ আইকনিকে, "ব্যবহারিকভাবে অবহেলিত" কিছু অবমূল্যায়ন করা হয়েছে কিনা তা নিয়ে কোনও বক্তব্য নেই। প্রদত্ত যে তারা প্রদান করা হয় HTML5 এর বৈশিষ্ট এবং তালিকাভুক্ত যেমন অবচিত কোন ভাবেই , আমি এর <strong> ly থেকে রাষ্ট্র বলা হবে যে হবে না অবচিত।
zzzzBov

1

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


1

প্রথমত, <hx>এটি একটি গুরুত্বপূর্ণ ট্যাগ, যেমন এটি শিরোনামগুলি সংজ্ঞায়িত করে, যেমন অন্যরা উল্লেখ করেছেন। শিরোনামগুলি কেবল চেহারাগুলির জন্য নয় খুব দরকারী, কারণ সেগুলি বিভাগগুলি এমনভাবে পৃথক করে যে চেহারাটি একই রকম নয়। উদাহরণস্বরূপ কেবল উইকিপিডিয়ায় একবার দেখুন। কিছু প্রোগ্রাম নথিগুলিকে "ব্রেক" করতে বা এমনকি স্বয়ংক্রিয় সামগ্রীর টেবিল তৈরি করতে এই ধরণের ট্যাগগুলির উপর নির্ভর করে। একটি অনুসন্ধান ইঞ্জিন অনুমান করবে যে <h1>একটি শিরোনাম - একটি শিরোনাম যেহেতু একটি ট্যাগের মধ্যে পাঠ্যটি আরও গুরুত্বপূর্ণ হবে।

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

<span>অন্যদিকে, এটি মূলত <div>ট্যাগটির একটি ইনলাইন সংস্করণ এবং যদি কিছু থাকে তবে এটি আপনাকে অতিরিক্ত ক্লাস টাইপ করতে বাঁচাতে পারে (যা বলা হচ্ছে, আপনি কি প্রতিটি ইটালিক উদাহরণের <span class="italic">পরিবর্তে সত্যিই ব্যবহার করতে চান? <i>আপনার কাছে? কোডটি পড়া আরও শক্ত করে তোলে, কম মানায়িত করা হয় (বিস্তৃত অনুমানের অধীনে যে সংখ্যাগরিষ্ঠ মানুষ পূর্ববর্তীটির চেয়ে বেশি ব্যবহার করবে), এবং কোনওভাবেই দস্তাবেজকে বাড়িয়ে তুলবে না।

<p>প্রতিবন্ধীদের জন্যও কার্যকর হয়, যেহেতু এটি নিশ্চিত করে যে পাঠ্যটি এমনভাবে পরিচালনাযোগ্য অনুচ্ছেদে বিভক্ত করা যেতে পারে <br />

অবশ্যই, আমরা বলতে পারি যে এইচটিএমএল স্টাইলিংয়ের জন্য বোঝানো হয়নি, তবে নকশা এবং শৈলীর মধ্যে একটি সূক্ষ্ম রেখা রয়েছে; এবং প্রকৃতপক্ষে, আমি বলতে চাই যে এটি ব্যবহারকারী পছন্দ হিসাবে বিবেচনা করুন। আপনি ব্যবহার করুন <i>বা না করুন <span class="italic">, এটি আপনার উপর নির্ভর করে এবং এসইওর জন্য কোনও পার্থক্য তৈরি করবে না। সর্বোপরি, কেন আমাদের কাজগুলি করার একমাত্র উপায় সীমাবদ্ধ? (যেমন আমরা জাভাস্ক্রিপ্টের লাইনের শেষ প্রান্তে সেমিকোলনগুলি ব্যবহার করব কি না তা বেছে নিতে পারি - আমি সর্বদা সেগুলি ব্যবহার করি, অন্যরা কখনই সেগুলি ব্যবহার করে না এবং এটি কার্যকারিতার জন্য কোনও পার্থক্য করে না))

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