কম্পিউটার টিউটোরিয়াল

HTML Title Tag: ধাপে ধাপে নির্দেশিকা

HTML <title> ট্যাগ একটি ওয়েব পেজের টাইটেল নির্ধারণ করে। এই টাইটেল আপনার ব্রাউজারের ট্যাব বারে এবং আপনি পেজটি বুকমার্ক লিস্টে যোগ করলে দেখায়। সব ওয়েব পেজে একটি <title> ট্যাগ থাকা উচিত।


যখন আপনি একটি ওয়েব পেজ তৈরি করছেন, আপনি সেটির জন্য একটি টাইটেল নির্দিষ্ট করতে চাইবেন। উদাহরণস্বরূপ, বলুন আপনি একটি স্থানীয় বেকারির ওয়েবসাইটের হোম পেজ বানাচ্ছেন। আপনি বেকারির নামটি ওয়েব পেজের টাইটেল হিসেবে দেখাতে চাইতে পারেন।

সেটিই হলো <title> HTML ট্যাগের কাজ। <title> ট্যাগ HTML-এ একটি ডকুমেন্টের টাইটেল নির্ধারণ করে এবং একটি ওয়েব পেজের head সেকশনে রাখা হয়। এই টিউটোরিয়াল একটি উদাহরণের রেফারেন্সে <title> ট্যাগের গুরুত্ব এবং আপনি আপনার কোডে কীভাবে এটি ব্যবহার করতে পারেন সেটি আলোচনা করবে।

HTML Head রিফ্রেশার

HTML-এ, <head> এলিমেন্ট হেডিং এলিমেন্টগুলো সংরক্ষণ করতে ব্যবহৃত হয়। এই এলিমেন্টগুলো একটি ওয়েব পেজ সম্পর্কে অতিরিক্ত তথ্য প্রদান করে, যেন ওয়েব পেজের জন্য কোন আইকন দেখাবে।

একসাথে, <head> সেকশনে এলিমেন্টগুলো একটি ডকুমেন্টের মূল তথ্য বর্ণনা করে। সেগুলো ব্রাউজারকে একটি ডকুমেন্টে ব্যবহৃত স্টাইলশিট এবং স্ক্রিপ্টগুলোর দিকে নির্দেশ করতে পারে (যদি কোনো থাকে)।

HTML <title>

HTML <title> ট্যাগ ডকুমেন্টের টাইটেল নির্ধারণ করে। এই ট্যাগ <head> ট্যাগের মধ্যে থাকে। এই ট্যাগটি একটি ওয়েব পেজের উদ্দেশ্য সারসংক্ষেপ করা উচিত। আপনাকে প্রতি পেজে শুধু একটি <title> ট্যাগ নির্দিষ্ট করতে হবে।

এই ট্যাগের সিনট্যাক্স দেখা যাক:

<head> <title>Home | Career Karma</title> </head>

<title> ট্যাগের ওপেনিং এবং ক্লোজিং উভয় ট্যাগ আছে। এই ট্যাগগুলোর মাঝপথে, আমরা একটি ওয়েব পেজের জন্য একটি টাইটেল লিখেছি।

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

গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।

আমাদের <title> ট্যাগের টেক্সট ওয়েব পেজে দেখায় না। কারণ আমাদের <title> ট্যাগ আমাদের ওয়েব পেজে <body> ট্যাগের বদলে <head>-এ এনক্লোজড।

আমাদের উপরের টাইটেলটি স্ট্রং কারণ এটি ব্যবহারকারীকে সঠিকভাবে বলে দেয় যে তারা কী পেজ দেখছে। আমরা সাইটের নামও নির্দিষ্ট করেছি যাতে ব্যবহারকারীর একাধিক ট্যাব খোলা থাকলে "Home" টাইটেল দিয়ে বিভ্রান্তি না হয়।

আপনার টাইটেল স্পষ্ট, পড়া সহজ, এবং খুব বড় নয় হওয়া উচিত। নিচের টাইটেল উদাহরণগুলো বিবেচনা করুন:

  • Blog – Career Karma
  • Contact Career Karma
  • Career Karma Blog

এই সব টাইটেল পেজের উদ্দেশ্য প্রকাশ করে। আপনার টাইটেল খুব বড় হওয়া উচিত না কারণ ট্যাব বারে টাইটেলের সীমিত জায়গা থাকে।

<title> ট্যাগ HTML5-এ সব গ্লোবাল অ্যাট্রিবিউট সাপোর্ট করে। এই ট্যাগ সমস্ত বড় আধুনিক ব্রাউজার দ্বারা সমর্থিত। title ট্যাগের কোনো এলিমেন্ট-নির্দিষ্ট HTML অ্যাট্রিবিউট নেই।

HTML Title Tag উদাহরণ

HTML title এলিমেন্ট একটি HTML পেজে <head> ট্যাগের মধ্যে নির্ধারিত হয়। মান লেন আমরা আমাদের স্থানীয় বেকারি, Joseph Abrams & Sons-এর জন্য একটি ওয়েব পেজ বানাচ্ছি। আমরা বর্তমানে হোম পেজ বানাচ্ছি, এবং আমরা বেকারির নাম সাইটের টাইটেলে দেখাতে চাই।

আমরা নিচের কোড ব্যবহার করে আমাদের পেজের টাইটেল "Joseph Abrams & Sons." সেট করতে পারি:

<head> <title>Joseph Abrams & Sons.</title> </head>

যখন আমাদের সাইটের ওয়েব পেজ খোলা হবে, পেজের টাইটেল "Joseph Abrams & Sons" সেট হবে।

এখন, বলুন আমরা আগের বেকারির জন্য একটি কন্টাক্ট পেজ বানাচ্ছি। আমরা "Contact | Joseph Abrams & Sons" টাইটেলটি ব্যবহার করতে পারি। এই টাইটেলটি সহজ এবং আমাদের ওয়েব পেজের উদ্দেশ্য ভালোভাবে বর্ণনা করে।

কেন <title> ট্যাগ ব্যবহার করবেন?

এক ডকুমেন্ট টাইটেল ট্যাগ নির্দিষ্ট করার অনেক কারণ আছে।

প্রথম, <title> ট্যাগ ওয়েব ব্রাউজারের টাইটেল বারে পেজের টাইটেল প্রদর্শন করে। উদাহরণস্বরূপ, এই পেজের টাইটেল "HTML Title Tag: A How-To Guide | Career Karma"। এটি এই সাইটের ট্যাবের নামে দেখায়।

দ্বিতীয়, <title> ট্যাগ ওয়েব পেজকে লেবেল করে যখন এটি ব্যবহারকারীর ওয়েব ব্রাউজারে বুকমার্ক বা ফেভারিট হিসেবে সেভ করা হয়। আপনি যা টাইটেল নির্দিষ্ট করবেন সেটিই স্বয়ংক্রিয়ভাবে সেভ হবে। আপনি যদি একটি ওয়েব পেজের জন্য উপযুক্ত টাইটেল ব্যবহার না করেন, তবে ব্যবহারকারী তাদের বুকমার্কে আপনার পেজ খুঁজে পাওয়া কঠিন হতে পারে।

সার্চ ইঞ্জিন টাইটেল ট্যাগের বিষয়বস্তুর ওপর নির্ভর করে। একটি টাইটেল ট্যাগে নির্দিষ্ট টাইটেল সার্চ ইঞ্জিন রেজাল্ট পেজ (SERP)-এ ওয়েব পেজের হেডলাইন হবে। SERP হলো একটি সার্চ রেজাল্ট পেজের এন্ট্রি।

অতিরিক্তভাবে, <title> ট্যাগের বিষয়বস্তু সার্চ ইঞ্জিন দ্বারা ওয়েব পেজের টপিক নির্ধারণ করতে ব্যবহৃত হয়।

তাহলে, এখন আমরা জানি <title> ট্যাগগুলো গুরুত্বপূর্ণ, আপনি জিজ্ঞাসা করতে পারেন: HTML title ট্যাগ কীভাবে ব্যবহার করব? চলুন সেই প্রশ্নের উত্তর দেই।

উপসংহার

<title> ট্যাগ একটি HTML ডকুমেন্টের টাইটেল নির্দিষ্ট করে। এই টাইটেল ওয়েব ব্রাউজারের ট্যাব নামগুলিতে দেখায়। এটি সার্চ ইঞ্জিন দ্বারা একটি ওয়েব পেজ প্রসেস করার সময় তার হেডলাইন এবং টপিক নির্ধারণ করতে ব্যবহৃত হয়।

এই টিউটোরিয়াল একটি উদাহরণের রেফারেন্সে HTML <title> ট্যাগের মৌলিক বিষয় আলোচনা করেছে। এখন আপনি HTML এক্সপার্টের মতো title ট্যাগ ব্যবহার করতে পারবেন!

আপনি কি HTML-এ কোডিং সম্পর্কে আরও জানতে চান? আমাদের How to Learn HTML গাইড দেখুন। এই গাইডে বিগিনার এবং ইন্টারমিডিয়েট ডেভেলপারদের জন্য টপ লার্নিং রিসোর্স এবং কোর্সের তালিকা আছে। আপনি HTML বিষয়ক টপ বুকগুলোও পাবেন।

  1. HTML <html> ট্যাগ

  2. HTML <q> ট্যাগ

  3. HTML <b> ট্যাগ

  4. HTML <dl> ট্যাগ