ওয়েব স্ট্যান্ডার্ডস আন্দোলনের একটি গুরুত্বপূর্ণ নীতি যা আজকে শিল্পের জন্য দায়ী, তা হল ডিফল্টরূপে ব্রাউজারে কীভাবে প্রদর্শিত হতে পারে তার পরিবর্তে এইচটিএমএল উপাদানগুলি ব্যবহার করার ধারণা। এটি সিম্যানিক এইচটিএমএল ব্যবহার করে বলা হয়।
সিমান্তিক HTML কি
সিমান্তিক এইচটিএমএল বা সিনট্যাক্টিক মার্কআপ হল এইচটিএমএল যা শুধু উপস্থাপনার পরিবর্তে ওয়েব পেজে অর্থ প্রদান করে। উদাহরণস্বরূপ, একটি
ট্যাগ ইঙ্গিত করে যে সংযুক্ত লেখাটি একটি অনুচ্ছেদ।
এই উভয় শব্দগত এবং presentational হয়, কারণ মানুষ জানেন কি অনুচ্ছেদ এবং ব্রাউজারগুলি তাদের প্রদর্শন কিভাবে জানি।
এই সমীকরণের বিপরীত দিকে, এবং এর মত ট্যাগগুলি শব্দার্থক শব্দ নয়, কারণ তারা শুধুমাত্র পাঠ্যকে কীভাবে দেখানো উচিত (গাঢ় বা তির্যক) নির্দেশ করে এবং মার্কআপের কোনও অতিরিক্ত অর্থ প্রদান করে না।
সিমান্তিক এইচটিএমএল ট্যাগগুলির উদাহরণগুলি হাইলাইট ট্যাগগুলি
, , এবং এর মাধ্যমে অন্তর্ভুক্ত করে। অনেকগুলি সিমান্তিক এইচটিএমএল ট্যাগ রয়েছে যা আপনি একটি স্ট্যান্ডার্ড-কমিক্যাল ওয়েবসাইট তৈরিতে ব্যবহার করতে পারেন।
কেন আপনি সিনট্যান্ট সম্পর্কে যত্ন নেওয়া উচিত
সিমান্তিক এইচটিএমএল লেখার সুবিধা কোনও ওয়েব পেজের ড্রাইভিং লক্ষ্য হওয়া উচিত- যোগাযোগ করার ইচ্ছা। আপনার নথিতে শব্দার্থিক ট্যাগ যুক্ত করে, আপনি সেই নথির বিষয়ে অতিরিক্ত তথ্য প্রদান করেন, যা যোগাযোগের জন্য সহায়ক। বিশেষভাবে, শব্দার্থিক ট্যাগ ব্রাউজারে স্পষ্ট করে দেয় যে কোন পৃষ্ঠা এবং এর সামগ্রীটির অর্থ কি।
এই স্পষ্টতা এছাড়াও অনুসন্ধান ইঞ্জিনের সাথে যোগাযোগ করা হয়, ডান পৃষ্ঠাগুলি সঠিক প্রশ্ন জন্য বিতরণ করা হয় তা নিশ্চিত করা।
সিমান্তিক এইচটিএমএল ট্যাগগুলি সেই ট্যাগগুলির বিষয়বস্তু সম্পর্কে তথ্য সরবরাহ করে যা তারা একটি পৃষ্ঠায় কীভাবে দেখেন তার বাইরেও যায়। টেক্সট যে ট্যাগের সাথে সংযুক্ত করা হয় তা অবিলম্বে ব্রাউজার দ্বারা কিছু ধরণের কোডিং ভাষা হিসাবে স্বীকৃত।
যে কোড রেন্ডার করার চেষ্টা করার পরিবর্তে, ব্রাউজার বোঝে যে আপনি একটি প্রবন্ধ বা কোন ধরণের অনলাইন টিউটোরিয়ালের উদ্দেশ্যে কোডের একটি উদাহরণ হিসাবে যে টেক্সট ব্যবহার করছেন।
শব্দার্থিক ট্যাগ ব্যবহার করে আপনি আপনার কন্টেন্ট স্টাইলিং জন্য আরো অনেক hooks দেয়। সম্ভবত আজ আপনি আপনার কোড নমুনার ডিফল্ট ব্রাউজার শৈলী প্রদর্শন করতে পছন্দ করেন, কিন্তু আগামীকাল, আপনি একটি ধূসর পটভূমির রঙ দিয়ে তাদের কল করতে চান, এবং পরে আপনি নির্দিষ্ট মন-ফাঁকা ফন্ট পরিবার বা ফন্ট স্ট্যাকের জন্য ব্যবহার করতে চান আপনার নমুনা আপনি সহজেই এই সমস্ত জিনিসগুলি শব্দার্থিক মার্কআপ এবং স্মার্টভাবে প্রয়োগ করা CSS ব্যবহার করে করতে পারেন।
সিনেটিক ট্যাগ সঠিকভাবে ব্যবহার করুন
আপনি উপস্থাপনা উদ্দেশ্যে পরিবর্তে অর্থ বোঝানোর জন্য শব্দার্থিক ট্যাগ ব্যবহার করতে চান, আপনি সতর্কতা অবলম্বন করা প্রয়োজন যে আপনি তাদের সাধারণ প্রদর্শন বৈশিষ্ট্য জন্য ভুলভাবে কেবল তাদের ব্যবহার করবেন না। বেশিরভাগ অপব্যবহারের শব্দার্থিক ট্যাগগুলির মধ্যে রয়েছে:
- ব্লককোট - কিছু লোক এমন একটি ট্যাগ ব্যবহার করে ট্যাগ ব্যবহার করে যা উদ্ধৃতি নয়। এটি হল কারণ blockquotes ডিফল্টভাবে ইন্ডেন্ট করা হয়। যদি আপনি কেবল ইন্ডেন্টেশনটির উপকার করতে চান, তবে পাঠ্য ব্লককোট নয়, বরং CSS মার্জিন ব্যবহার করুন।
- p - কিছু ওয়েব সম্পাদক
& nbsp; p> (একটি প্যারাগ্রাফে অন্তর্ভুক্ত একটি অ-ব্রেকিং স্থান) ব্যবহার করে পৃষ্ঠার পাঠ্যের জন্য প্রকৃত অনুচ্ছেদ নির্ধারণের পরিবর্তে পৃষ্ঠার উপাদানগুলির মধ্যে অতিরিক্ত স্থান যোগ করতে ব্যবহার করে। পূর্বে উল্লিখিত indenting উদাহরণ হিসাবে, আপনি স্থান যোগ করার জন্য মার্জিন বা প্যাডিং শৈলী সম্পত্তি ব্যবহার করা উচিত।
- ul - ব্লককোট মত, অধিকাংশ ব্রাউজারে পাঠ্য যে একটি
ট্যাগ ইন্ডেন্টের ভিতরে পাঠ্য ধারণ করে। এটি উভয়ই শব্দগতভাবে ভুল এবং অবৈধ এইচটিএমএল, কারণ - ট্যাগ একটি
ট্যাগের মধ্যে বৈধ। আবার, ইন্ডেন্ট টেক্সটতে মার্জিন বা প্যাডিং স্টাইল ব্যবহার করুন।
- h1-h6 - শিরোনাম ট্যাগ ফন্টগুলি বড় এবং সাহসী করতে ব্যবহার করা যেতে পারে, কিন্তু পাঠ্য শিরোনাম না থাকলে এটি শিরোনাম ট্যাগের ভিতরে থাকা উচিত নয়। ফন্ট ওজন এবং ফন্ট-আকার সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করুন যদি আপনি আপনার পৃষ্ঠার নির্দিষ্ট টেক্সটের আকার বা ওজন পরিবর্তন করতে চান।
এইচটিএমএল ট্যাগ ব্যবহার করে আপনি এমন পৃষ্ঠা তৈরি করেন যা শুধু
ট্যাগ দিয়ে সব কিছু ঘিরেই বেশি তথ্য দেয়।
কোন এইচটিএমএল ট্যাগ অর্থপূর্ণ?
যদিও প্রায় সব এইচটিএমএল 4 ট্যাগ এবং সমস্ত এইচটিএমএল ট্যাগ একটি সিমান্তিক অর্থ আছে, কিছু ট্যাগ প্রাথমিকভাবে শব্দার্থগত রূপে।
সিমান্তিক এইচটিএমএল ট্যাগগুলি
<সংক্ষিপ্তকরণ> সংক্ষেপ <আদ্যক্ষরা> অন্য শব্দের আদ্যক্ষর দ্বারা গঠিত শব্দ <ব্লককোট> লম্বা উদ্ধৃতি সংজ্ঞা <ঠিকানা> নথির লেখক (গুলি) জন্য ঠিকানা তলব <কোড> কোড রেফারেন্স টেলিটাইপ পাঠ্য
লজিক্যাল বিভাগ এর জেনেরিক ইনলাইন শৈলী কন্টেনার করে মুছে ফেলা পাঠ্য <ইনগুলি> ঢোকানো পাঠ্য পারে জোর এ বিশেষ গুরুত্ব থেকে
প্রথম স্তরের শিরোনাম
দ্বিতীয় স্তরের শিরোনাম
তৃতীয় স্তরের শিরোনাম
চতুর্থ স্তরের শিরোনাম <শিরোলেখ 5> পঞ্চম স্তরের শিরোনাম <শিরোলেখ 6> ছয় স্তরের শিরোনাম <ঘন্টা> থেম্যাটিক ব্রেক পাঠ্য ব্যবহারকারী দ্বারা প্রবেশ করা হবে <প্রাক> প্রাক-ফরম্যাট করা পাঠ্য করে
সংক্ষিপ্ত ইনলাইন উদ্ধৃতি <ভুট্টার মোটা-দানা আটা> নমুনা আউটপুট <সাব> সাবস্ক্রিপ্ট করুন সুপারস্ক্রিপ্ট পরিবর্তনশীল বা ব্যবহারকারী নির্ধারিত পাঠ্য
, এবং এর মাধ্যমে অন্তর্ভুক্ত করে। অনেকগুলি সিমান্তিক এইচটিএমএল ট্যাগ রয়েছে যা আপনি একটি স্ট্যান্ডার্ড-কমিক্যাল ওয়েবসাইট তৈরিতে ব্যবহার করতে পারেন।
কেন আপনি সিনট্যান্ট সম্পর্কে যত্ন নেওয়া উচিত
সিমান্তিক এইচটিএমএল লেখার সুবিধা কোনও ওয়েব পেজের ড্রাইভিং লক্ষ্য হওয়া উচিত- যোগাযোগ করার ইচ্ছা। আপনার নথিতে শব্দার্থিক ট্যাগ যুক্ত করে, আপনি সেই নথির বিষয়ে অতিরিক্ত তথ্য প্রদান করেন, যা যোগাযোগের জন্য সহায়ক। বিশেষভাবে, শব্দার্থিক ট্যাগ ব্রাউজারে স্পষ্ট করে দেয় যে কোন পৃষ্ঠা এবং এর সামগ্রীটির অর্থ কি।
এই স্পষ্টতা এছাড়াও অনুসন্ধান ইঞ্জিনের সাথে যোগাযোগ করা হয়, ডান পৃষ্ঠাগুলি সঠিক প্রশ্ন জন্য বিতরণ করা হয় তা নিশ্চিত করা।
সিমান্তিক এইচটিএমএল ট্যাগগুলি সেই ট্যাগগুলির বিষয়বস্তু সম্পর্কে তথ্য সরবরাহ করে যা তারা একটি পৃষ্ঠায় কীভাবে দেখেন তার বাইরেও যায়। টেক্সট যে ট্যাগের সাথে সংযুক্ত করা হয় তা অবিলম্বে ব্রাউজার দ্বারা কিছু ধরণের কোডিং ভাষা হিসাবে স্বীকৃত।
যে কোড রেন্ডার করার চেষ্টা করার পরিবর্তে, ব্রাউজার বোঝে যে আপনি একটি প্রবন্ধ বা কোন ধরণের অনলাইন টিউটোরিয়ালের উদ্দেশ্যে কোডের একটি উদাহরণ হিসাবে যে টেক্সট ব্যবহার করছেন।
শব্দার্থিক ট্যাগ ব্যবহার করে আপনি আপনার কন্টেন্ট স্টাইলিং জন্য আরো অনেক hooks দেয়। সম্ভবত আজ আপনি আপনার কোড নমুনার ডিফল্ট ব্রাউজার শৈলী প্রদর্শন করতে পছন্দ করেন, কিন্তু আগামীকাল, আপনি একটি ধূসর পটভূমির রঙ দিয়ে তাদের কল করতে চান, এবং পরে আপনি নির্দিষ্ট মন-ফাঁকা ফন্ট পরিবার বা ফন্ট স্ট্যাকের জন্য ব্যবহার করতে চান আপনার নমুনা আপনি সহজেই এই সমস্ত জিনিসগুলি শব্দার্থিক মার্কআপ এবং স্মার্টভাবে প্রয়োগ করা CSS ব্যবহার করে করতে পারেন।
সিনেটিক ট্যাগ সঠিকভাবে ব্যবহার করুন
আপনি উপস্থাপনা উদ্দেশ্যে পরিবর্তে অর্থ বোঝানোর জন্য শব্দার্থিক ট্যাগ ব্যবহার করতে চান, আপনি সতর্কতা অবলম্বন করা প্রয়োজন যে আপনি তাদের সাধারণ প্রদর্শন বৈশিষ্ট্য জন্য ভুলভাবে কেবল তাদের ব্যবহার করবেন না। বেশিরভাগ অপব্যবহারের শব্দার্থিক ট্যাগগুলির মধ্যে রয়েছে:
- ব্লককোট - কিছু লোক এমন একটি ট্যাগ ব্যবহার করে ট্যাগ ব্যবহার করে যা উদ্ধৃতি নয়। এটি হল কারণ blockquotes ডিফল্টভাবে ইন্ডেন্ট করা হয়। যদি আপনি কেবল ইন্ডেন্টেশনটির উপকার করতে চান, তবে পাঠ্য ব্লককোট নয়, বরং CSS মার্জিন ব্যবহার করুন।
- p - কিছু ওয়েব সম্পাদক
& nbsp; p> (একটি প্যারাগ্রাফে অন্তর্ভুক্ত একটি অ-ব্রেকিং স্থান) ব্যবহার করে পৃষ্ঠার পাঠ্যের জন্য প্রকৃত অনুচ্ছেদ নির্ধারণের পরিবর্তে পৃষ্ঠার উপাদানগুলির মধ্যে অতিরিক্ত স্থান যোগ করতে ব্যবহার করে। পূর্বে উল্লিখিত indenting উদাহরণ হিসাবে, আপনি স্থান যোগ করার জন্য মার্জিন বা প্যাডিং শৈলী সম্পত্তি ব্যবহার করা উচিত।
- ul - ব্লককোট মত, অধিকাংশ ব্রাউজারে পাঠ্য যে একটি
ট্যাগ ইন্ডেন্টের ভিতরে পাঠ্য ধারণ করে। এটি উভয়ই শব্দগতভাবে ভুল এবং অবৈধ এইচটিএমএল, কারণ - ট্যাগ একটি
ট্যাগের মধ্যে বৈধ। আবার, ইন্ডেন্ট টেক্সটতে মার্জিন বা প্যাডিং স্টাইল ব্যবহার করুন।
- h1-h6 - শিরোনাম ট্যাগ ফন্টগুলি বড় এবং সাহসী করতে ব্যবহার করা যেতে পারে, কিন্তু পাঠ্য শিরোনাম না থাকলে এটি শিরোনাম ট্যাগের ভিতরে থাকা উচিত নয়। ফন্ট ওজন এবং ফন্ট-আকার সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করুন যদি আপনি আপনার পৃষ্ঠার নির্দিষ্ট টেক্সটের আকার বা ওজন পরিবর্তন করতে চান।
এইচটিএমএল ট্যাগ ব্যবহার করে আপনি এমন পৃষ্ঠা তৈরি করেন যা শুধু
ট্যাগ দিয়ে সব কিছু ঘিরেই বেশি তথ্য দেয়।
কোন এইচটিএমএল ট্যাগ অর্থপূর্ণ?
যদিও প্রায় সব এইচটিএমএল 4 ট্যাগ এবং সমস্ত এইচটিএমএল ট্যাগ একটি সিমান্তিক অর্থ আছে, কিছু ট্যাগ প্রাথমিকভাবে শব্দার্থগত রূপে।
সিমান্তিক এইচটিএমএল ট্যাগগুলি
<সংক্ষিপ্তকরণ> সংক্ষেপ <আদ্যক্ষরা> অন্য শব্দের আদ্যক্ষর দ্বারা গঠিত শব্দ <ব্লককোট> লম্বা উদ্ধৃতি সংজ্ঞা <ঠিকানা> নথির লেখক (গুলি) জন্য ঠিকানা তলব <কোড> কোড রেফারেন্স টেলিটাইপ পাঠ্য
লজিক্যাল বিভাগ এর জেনেরিক ইনলাইন শৈলী কন্টেনার করে মুছে ফেলা পাঠ্য <ইনগুলি> ঢোকানো পাঠ্য পারে জোর এ বিশেষ গুরুত্ব থেকে
প্রথম স্তরের শিরোনাম
দ্বিতীয় স্তরের শিরোনাম
তৃতীয় স্তরের শিরোনাম
চতুর্থ স্তরের শিরোনাম <শিরোলেখ 5> পঞ্চম স্তরের শিরোনাম <শিরোলেখ 6> ছয় স্তরের শিরোনাম <ঘন্টা> থেম্যাটিক ব্রেক পাঠ্য ব্যবহারকারী দ্বারা প্রবেশ করা হবে <প্রাক> প্রাক-ফরম্যাট করা পাঠ্য করে
সংক্ষিপ্ত ইনলাইন উদ্ধৃতি <ভুট্টার মোটা-দানা আটা> নমুনা আউটপুট <সাব> সাবস্ক্রিপ্ট করুন সুপারস্ক্রিপ্ট পরিবর্তনশীল বা ব্যবহারকারী নির্ধারিত পাঠ্য