در HTML بیشتر لینک‌هایی که می‌نویسیم به‌صورت مسیر نسبی (Relative URL) هستند. یعنی مرورگر مسیر فایل‌ها را نسبت به صفحه فعلی محاسبه می‌کند. این موضوع در پروژه‌های ساده شاید مسئله‌ای ایجاد نکند، اما وقتی ساختار پوشه‌ها پیچیده‌تر می‌شود، مدیریت مسیرها سخت‌تر خواهد شد.
اینجاست که تگ base در HTML وارد می‌شود. این تگ به شما اجازه می‌دهد یک مسیر پیش‌فرض تعریف کنید تا تمام لینک‌های نسبی صفحه بر اساس آن محاسبه شوند. در ظاهر ساده است، اما در عمل اگر دقیق متوجه عملکردش نباشید، ممکن است باعث بروز خطاهای جدی در پروژه شود.
در ادامه قدم‌به‌قدم بررسی میکنیم:
- تگ base دقیقاً چیست؟
- چطور کار می‌کند؟
- چه زمانی استفاده از آن منطقی است؟
- چه اشتباهاتی ممکن است کل ساختار لینک سایت را خراب کند؟
تگ base در HTML چیست و چه کاربردی دارد؟
تگ base در HTML عنصری است که داخل بخش <head> قرار می‌گیرد و یک آدرس پیش‌فرض (Base URL) برای تمام لینک‌های نسبی صفحه تعریف می‌کند. به زبان ساده‌تر، این تگ به مرورگر می‌گوید وقتی با یک مسیر نسبی مواجه شدی، آن را نسبت به این آدرس محاسبه کن.
پیشنهاد: اگر به یادگیری عمیق و تخصصی HTML علاقه دارین پیشنهاد میکنم در دوره صفر تا صد HTML ما شرکت کنید!
اگر از این تگ استفاده نکنیم، مرورگر همیشه مسیر فایل‌ها را نسبت به URL صفحه فعلی محاسبه می‌کند. اما با تعریف <base>، می‌توانیم این رفتار را تغییر دهیم.
جایگاه تگ base در ساختار HTML
این تگ باید:
- داخل <head> قرار بگیرد
- قبل از تگ‌هایی که دارای URL هستند نوشته شود (مثل <link>, <script>, <a>)
- فقط یکبار در هر سند HTML استفاده شود
نمونه ساختار صحیح:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<base href="https://example.com/assets/">
<link rel="stylesheet" href="style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.owl-carousel .owl-video-play-icon{--wpr-bg-dfde2f78-6c25-4222-ae83-2ccc360b20ae: url('https://bitamooz.com/wp-content/themes/studiare/assets/css/owl.video.play.png');}.site-footer.footer-color-light a i.fab.fa-apart:before,.light a i.fab.fa-apart:before{--wpr-bg-d1fbff9b-2a73-46a0-b1af-e9d0f1b02e89: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat-light.png');}i.fab.fa-apart:before,.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-b9da9a78-793a-49fc-8efe-b3edeb1e6f16: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat.png');}.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-37e06a64-954c-4d6d-be10-9454f681fc66: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat-light.png');}.commentlist .comment .star-rating{--wpr-bg-bf4fd127-40ae-44d0-967d-22e59d573632: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.commentlist .comment .star-rating>span{--wpr-bg-b6c8e52f-9671-486d-a7cf-8c86ee8e004b: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.commentlist .review .star-rating{--wpr-bg-7b112d85-ec04-479c-9758-211104b610f4: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.commentlist .review .star-rating>span{--wpr-bg-e8ee2b88-30d1-41b0-a4ea-7191637ad475: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.admin_vc_addon{--wpr-bg-414a2509-a87b-4589-b223-0a321485dcb1: url('https://bitamooz.com/wp-content/themes/studiare/assets/css/assets/images/icons/favicon.png');}.page-title{--wpr-bg-4c505db8-dae0-4151-8500-4522162833fa: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/icon-back-OWL.png');}.average-rating .avareage-rating-inner .average-rating-stars .star-rating{--wpr-bg-ee14adca-662a-4cc3-8ab6-0cc00b5e88d3: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.average-rating .avareage-rating-inner .average-rating-stars .star-rating>span{--wpr-bg-9b9732bc-130a-465d-8884-3cd385dc953c: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.sale-perc{--wpr-bg-afb14ad5-cee4-4b2c-8e25-4a6ee1076ce6: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/discont_badge.png');}.sale-perc.sc_coming_soon_badge{--wpr-bg-876b02f3-446d-4961-8e2a-3ed153fff7ac: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/comibg-soon-1.png');}.sale-perc.sc_full_capacity_badge{--wpr-bg-5cae37dd-f4ce-430d-8c93-feca557c3d46: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/full-capacity-bg.png');}span.sc-toman-cur{--wpr-bg-39569bd6-551f-4687-b687-35bdac02138c: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/toman.svg');}.teacher-item .teacher-item-inner .teacher-bg{--wpr-bg-536a8662-2bb4-443f-abbf-478d2ba63e3b: url('http://localhost/wpdev/studiare/wp-content/uploads/sites/8/2014/01/spectacles.gif');}.product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot{--wpr-bg-a60e587b-cab3-4022-9c82-a96c1a754ba1: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/icon-back-OWL.png');}.rll-youtube-player .play{--wpr-bg-2d9458bc-a6cc-4cad-aab0-d22512a43073: url('https://bitamooz.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".owl-carousel .owl-video-play-icon","style":".owl-carousel .owl-video-play-icon{--wpr-bg-dfde2f78-6c25-4222-ae83-2ccc360b20ae: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/owl.video.play.png');}","hash":"dfde2f78-6c25-4222-ae83-2ccc360b20ae","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/owl.video.play.png"},{"selector":".site-footer.footer-color-light a i.fab.fa-apart,.light a i.fab.fa-apart","style":".site-footer.footer-color-light a i.fab.fa-apart:before,.light a i.fab.fa-apart:before{--wpr-bg-d1fbff9b-2a73-46a0-b1af-e9d0f1b02e89: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png');}","hash":"d1fbff9b-2a73-46a0-b1af-e9d0f1b02e89","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png"},{"selector":"i.fab.fa-apart,.site-footer.footer-color-light a i.fab.fa-apart","style":"i.fab.fa-apart:before,.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-b9da9a78-793a-49fc-8efe-b3edeb1e6f16: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat.png');}","hash":"b9da9a78-793a-49fc-8efe-b3edeb1e6f16","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat.png"},{"selector":".site-footer.footer-color-light a i.fab.fa-apart","style":".site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-37e06a64-954c-4d6d-be10-9454f681fc66: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png');}","hash":"37e06a64-954c-4d6d-be10-9454f681fc66","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png"},{"selector":".commentlist .comment .star-rating","style":".commentlist .comment .star-rating{--wpr-bg-bf4fd127-40ae-44d0-967d-22e59d573632: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"bf4fd127-40ae-44d0-967d-22e59d573632","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".commentlist .comment .star-rating>span","style":".commentlist .comment .star-rating>span{--wpr-bg-b6c8e52f-9671-486d-a7cf-8c86ee8e004b: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"b6c8e52f-9671-486d-a7cf-8c86ee8e004b","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".commentlist .review .star-rating","style":".commentlist .review .star-rating{--wpr-bg-7b112d85-ec04-479c-9758-211104b610f4: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"7b112d85-ec04-479c-9758-211104b610f4","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".commentlist .review .star-rating>span","style":".commentlist .review .star-rating>span{--wpr-bg-e8ee2b88-30d1-41b0-a4ea-7191637ad475: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"e8ee2b88-30d1-41b0-a4ea-7191637ad475","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".admin_vc_addon","style":".admin_vc_addon{--wpr-bg-414a2509-a87b-4589-b223-0a321485dcb1: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/assets\/images\/icons\/favicon.png');}","hash":"414a2509-a87b-4589-b223-0a321485dcb1","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/assets\/images\/icons\/favicon.png"},{"selector":".page-title","style":".page-title{--wpr-bg-4c505db8-dae0-4151-8500-4522162833fa: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png');}","hash":"4c505db8-dae0-4151-8500-4522162833fa","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png"},{"selector":".average-rating .avareage-rating-inner .average-rating-stars .star-rating","style":".average-rating .avareage-rating-inner .average-rating-stars .star-rating{--wpr-bg-ee14adca-662a-4cc3-8ab6-0cc00b5e88d3: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"ee14adca-662a-4cc3-8ab6-0cc00b5e88d3","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".average-rating .avareage-rating-inner .average-rating-stars .star-rating>span","style":".average-rating .avareage-rating-inner .average-rating-stars .star-rating>span{--wpr-bg-9b9732bc-130a-465d-8884-3cd385dc953c: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"9b9732bc-130a-465d-8884-3cd385dc953c","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".sale-perc","style":".sale-perc{--wpr-bg-afb14ad5-cee4-4b2c-8e25-4a6ee1076ce6: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/discont_badge.png');}","hash":"afb14ad5-cee4-4b2c-8e25-4a6ee1076ce6","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/discont_badge.png"},{"selector":".sale-perc.sc_coming_soon_badge","style":".sale-perc.sc_coming_soon_badge{--wpr-bg-876b02f3-446d-4961-8e2a-3ed153fff7ac: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/comibg-soon-1.png');}","hash":"876b02f3-446d-4961-8e2a-3ed153fff7ac","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/comibg-soon-1.png"},{"selector":".sale-perc.sc_full_capacity_badge","style":".sale-perc.sc_full_capacity_badge{--wpr-bg-5cae37dd-f4ce-430d-8c93-feca557c3d46: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/full-capacity-bg.png');}","hash":"5cae37dd-f4ce-430d-8c93-feca557c3d46","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/full-capacity-bg.png"},{"selector":"span.sc-toman-cur","style":"span.sc-toman-cur{--wpr-bg-39569bd6-551f-4687-b687-35bdac02138c: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/toman.svg');}","hash":"39569bd6-551f-4687-b687-35bdac02138c","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/toman.svg"},{"selector":".teacher-item .teacher-item-inner .teacher-bg","style":".teacher-item .teacher-item-inner .teacher-bg{--wpr-bg-536a8662-2bb4-443f-abbf-478d2ba63e3b: url('http:\/\/localhost\/wpdev\/studiare\/wp-content\/uploads\/sites\/8\/2014\/01\/spectacles.gif');}","hash":"536a8662-2bb4-443f-abbf-478d2ba63e3b","url":"http:\/\/localhost\/wpdev\/studiare\/wp-content\/uploads\/sites\/8\/2014\/01\/spectacles.gif"},{"selector":".product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot","style":".product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot{--wpr-bg-a60e587b-cab3-4022-9c82-a96c1a754ba1: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png');}","hash":"a60e587b-cab3-4022-9c82-a96c1a754ba1","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-2d9458bc-a6cc-4cad-aab0-d22512a43073: url('https:\/\/bitamooz.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"2d9458bc-a6cc-4cad-aab0-d22512a43073","url":"https:\/\/bitamooz.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<a href="about.html">درباره ما</a>
</body>
</html>
در این مثال:
فایل style.css به این مسیر تبدیل می‌شود:
https://example.com/assets/style.css
لینک about.html به این مسیر تبدیل می‌شود:
https://example.com/assets/about.html
کاربرد اصلی تگ base
کاربرد اصلی آن زمانی مشخص می‌شود که:
- پروژه چند پوشه‌ای دارید
- فایل‌ها در سطوح مختلف قرار گرفته‌اند
- نمی‌خواهید دائم از ../ استفاده کنید
- می‌خواهید مدیریت مسیرها ساده‌تر شود
درواقع، تگ base یک نقطه مرجع ثابت برای همه URLهای نسبی صفحه ایجاد می‌کند.
نحوه استفاده از تگ base با مثال عملی
تا اینجا فهمیدیم که تگ base در HTML یک مسیر پیش‌فرض برای لینک‌های نسبی تعیین می‌کند.
حالا بیایید دقیق و عملی ببینیم وقتی از آن استفاده میکنیم چه تغییری اتفاق می‌افتد.
سناریوی واقعی (بدون استفاده از تگ base)
فرض کنید ساختار پروژه شما این‌طور است:
example.com/
│
├── blog/
│ └── index.html
├── assets/
│ ├── style.css
│ └── logo.png
شما داخل فایل blog/index.html هستید و می‌خواهید:
- فایل CSS را لود کنید
- تصویر لوگو را نمایش دهید
در حالت عادی باید بنویسید:
<link rel="stylesheet" href="../assets/style.css">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟" data-lazy-src="http://../assets/logo.png"><noscript><img decoding="async" src="../assets/logo.png" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟"></noscript>
اینجا از ../ استفاده کردیم چون باید یک سطح به عقب برگردیم.
مشکل کجاست؟
در پروژه‌های بزرگ‌تر این مسیرها پیچیده‌تر می‌شوند و خوانایی کد کاهش پیدا می‌کند.
همان سناریو با استفاده از تگ base
حالا داخل <head> این خط را اضافه میکنیم:
<base href="https://example.com/">
کد جدید ما می‌شود:
<head>
<base href="https://example.com/">
<link rel="stylesheet" href="assets/style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.owl-carousel .owl-video-play-icon{--wpr-bg-dfde2f78-6c25-4222-ae83-2ccc360b20ae: url('https://bitamooz.com/wp-content/themes/studiare/assets/css/owl.video.play.png');}.site-footer.footer-color-light a i.fab.fa-apart:before,.light a i.fab.fa-apart:before{--wpr-bg-d1fbff9b-2a73-46a0-b1af-e9d0f1b02e89: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat-light.png');}i.fab.fa-apart:before,.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-b9da9a78-793a-49fc-8efe-b3edeb1e6f16: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat.png');}.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-37e06a64-954c-4d6d-be10-9454f681fc66: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/aparat-light.png');}.commentlist .comment .star-rating{--wpr-bg-bf4fd127-40ae-44d0-967d-22e59d573632: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.commentlist .comment .star-rating>span{--wpr-bg-b6c8e52f-9671-486d-a7cf-8c86ee8e004b: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.commentlist .review .star-rating{--wpr-bg-7b112d85-ec04-479c-9758-211104b610f4: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.commentlist .review .star-rating>span{--wpr-bg-e8ee2b88-30d1-41b0-a4ea-7191637ad475: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.admin_vc_addon{--wpr-bg-414a2509-a87b-4589-b223-0a321485dcb1: url('https://bitamooz.com/wp-content/themes/studiare/assets/css/assets/images/icons/favicon.png');}.page-title{--wpr-bg-4c505db8-dae0-4151-8500-4522162833fa: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/icon-back-OWL.png');}.average-rating .avareage-rating-inner .average-rating-stars .star-rating{--wpr-bg-ee14adca-662a-4cc3-8ab6-0cc00b5e88d3: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-empty.svg');}.average-rating .avareage-rating-inner .average-rating-stars .star-rating>span{--wpr-bg-9b9732bc-130a-465d-8884-3cd385dc953c: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/star-fill.svg');}.sale-perc{--wpr-bg-afb14ad5-cee4-4b2c-8e25-4a6ee1076ce6: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/discont_badge.png');}.sale-perc.sc_coming_soon_badge{--wpr-bg-876b02f3-446d-4961-8e2a-3ed153fff7ac: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/comibg-soon-1.png');}.sale-perc.sc_full_capacity_badge{--wpr-bg-5cae37dd-f4ce-430d-8c93-feca557c3d46: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/full-capacity-bg.png');}span.sc-toman-cur{--wpr-bg-39569bd6-551f-4687-b687-35bdac02138c: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/toman.svg');}.teacher-item .teacher-item-inner .teacher-bg{--wpr-bg-536a8662-2bb4-443f-abbf-478d2ba63e3b: url('http://localhost/wpdev/studiare/wp-content/uploads/sites/8/2014/01/spectacles.gif');}.product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot{--wpr-bg-a60e587b-cab3-4022-9c82-a96c1a754ba1: url('https://bitamooz.com/wp-content/themes/studiare/assets/images/icon-back-OWL.png');}.rll-youtube-player .play{--wpr-bg-2d9458bc-a6cc-4cad-aab0-d22512a43073: url('https://bitamooz.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".owl-carousel .owl-video-play-icon","style":".owl-carousel .owl-video-play-icon{--wpr-bg-dfde2f78-6c25-4222-ae83-2ccc360b20ae: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/owl.video.play.png');}","hash":"dfde2f78-6c25-4222-ae83-2ccc360b20ae","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/owl.video.play.png"},{"selector":".site-footer.footer-color-light a i.fab.fa-apart,.light a i.fab.fa-apart","style":".site-footer.footer-color-light a i.fab.fa-apart:before,.light a i.fab.fa-apart:before{--wpr-bg-d1fbff9b-2a73-46a0-b1af-e9d0f1b02e89: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png');}","hash":"d1fbff9b-2a73-46a0-b1af-e9d0f1b02e89","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png"},{"selector":"i.fab.fa-apart,.site-footer.footer-color-light a i.fab.fa-apart","style":"i.fab.fa-apart:before,.site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-b9da9a78-793a-49fc-8efe-b3edeb1e6f16: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat.png');}","hash":"b9da9a78-793a-49fc-8efe-b3edeb1e6f16","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat.png"},{"selector":".site-footer.footer-color-light a i.fab.fa-apart","style":".site-footer.footer-color-light a i.fab.fa-apart:before{--wpr-bg-37e06a64-954c-4d6d-be10-9454f681fc66: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png');}","hash":"37e06a64-954c-4d6d-be10-9454f681fc66","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/aparat-light.png"},{"selector":".commentlist .comment .star-rating","style":".commentlist .comment .star-rating{--wpr-bg-bf4fd127-40ae-44d0-967d-22e59d573632: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"bf4fd127-40ae-44d0-967d-22e59d573632","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".commentlist .comment .star-rating>span","style":".commentlist .comment .star-rating>span{--wpr-bg-b6c8e52f-9671-486d-a7cf-8c86ee8e004b: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"b6c8e52f-9671-486d-a7cf-8c86ee8e004b","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".commentlist .review .star-rating","style":".commentlist .review .star-rating{--wpr-bg-7b112d85-ec04-479c-9758-211104b610f4: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"7b112d85-ec04-479c-9758-211104b610f4","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".commentlist .review .star-rating>span","style":".commentlist .review .star-rating>span{--wpr-bg-e8ee2b88-30d1-41b0-a4ea-7191637ad475: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"e8ee2b88-30d1-41b0-a4ea-7191637ad475","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".admin_vc_addon","style":".admin_vc_addon{--wpr-bg-414a2509-a87b-4589-b223-0a321485dcb1: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/assets\/images\/icons\/favicon.png');}","hash":"414a2509-a87b-4589-b223-0a321485dcb1","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/css\/assets\/images\/icons\/favicon.png"},{"selector":".page-title","style":".page-title{--wpr-bg-4c505db8-dae0-4151-8500-4522162833fa: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png');}","hash":"4c505db8-dae0-4151-8500-4522162833fa","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png"},{"selector":".average-rating .avareage-rating-inner .average-rating-stars .star-rating","style":".average-rating .avareage-rating-inner .average-rating-stars .star-rating{--wpr-bg-ee14adca-662a-4cc3-8ab6-0cc00b5e88d3: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg');}","hash":"ee14adca-662a-4cc3-8ab6-0cc00b5e88d3","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-empty.svg"},{"selector":".average-rating .avareage-rating-inner .average-rating-stars .star-rating>span","style":".average-rating .avareage-rating-inner .average-rating-stars .star-rating>span{--wpr-bg-9b9732bc-130a-465d-8884-3cd385dc953c: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg');}","hash":"9b9732bc-130a-465d-8884-3cd385dc953c","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/star-fill.svg"},{"selector":".sale-perc","style":".sale-perc{--wpr-bg-afb14ad5-cee4-4b2c-8e25-4a6ee1076ce6: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/discont_badge.png');}","hash":"afb14ad5-cee4-4b2c-8e25-4a6ee1076ce6","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/discont_badge.png"},{"selector":".sale-perc.sc_coming_soon_badge","style":".sale-perc.sc_coming_soon_badge{--wpr-bg-876b02f3-446d-4961-8e2a-3ed153fff7ac: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/comibg-soon-1.png');}","hash":"876b02f3-446d-4961-8e2a-3ed153fff7ac","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/comibg-soon-1.png"},{"selector":".sale-perc.sc_full_capacity_badge","style":".sale-perc.sc_full_capacity_badge{--wpr-bg-5cae37dd-f4ce-430d-8c93-feca557c3d46: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/full-capacity-bg.png');}","hash":"5cae37dd-f4ce-430d-8c93-feca557c3d46","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/full-capacity-bg.png"},{"selector":"span.sc-toman-cur","style":"span.sc-toman-cur{--wpr-bg-39569bd6-551f-4687-b687-35bdac02138c: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/toman.svg');}","hash":"39569bd6-551f-4687-b687-35bdac02138c","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/toman.svg"},{"selector":".teacher-item .teacher-item-inner .teacher-bg","style":".teacher-item .teacher-item-inner .teacher-bg{--wpr-bg-536a8662-2bb4-443f-abbf-478d2ba63e3b: url('http:\/\/localhost\/wpdev\/studiare\/wp-content\/uploads\/sites\/8\/2014\/01\/spectacles.gif');}","hash":"536a8662-2bb4-443f-abbf-478d2ba63e3b","url":"http:\/\/localhost\/wpdev\/studiare\/wp-content\/uploads\/sites\/8\/2014\/01\/spectacles.gif"},{"selector":".product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot","style":".product-info-box.sc-amazing-offer,.sc-single-product-message,.woosw-area .woosw-inner .woosw-content .woosw-content-top,.woosw-area .woosw-inner .woosw-content .woosw-content-bot{--wpr-bg-a60e587b-cab3-4022-9c82-a96c1a754ba1: url('https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png');}","hash":"a60e587b-cab3-4022-9c82-a96c1a754ba1","url":"https:\/\/bitamooz.com\/wp-content\/themes\/studiare\/assets\/images\/icon-back-OWL.png"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-2d9458bc-a6cc-4cad-aab0-d22512a43073: url('https:\/\/bitamooz.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"2d9458bc-a6cc-4cad-aab0-d22512a43073","url":"https:\/\/bitamooz.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟" data-lazy-src="http://assets/logo.png"><noscript><img decoding="async" src="assets/logo.png" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟"></noscript>
</body>
چه اتفاقی افتاد؟
مرورگر حالا تمام مسیرهای نسبی را نسبت به:
https://example.com/
محاسبه می‌کند.
یعنی دیگر نیازی به ../ نداریم.
مقایسه قبل و بعد از استفاده از base
| حالت | مسیر نوشته شده در کد | مسیر نهایی در مرورگر |
|---|---|---|
| بدون base | ../assets/style.css | example.com/assets/style.css |
| با base | assets/style.css | example.com/assets/style.css |
از نظر خروجی یکی هستند،
اما از نظر مدیریت پروژه، حالت دوم خواناتر است.
تفاوت مسیر نسبی و مطلق و ارتباط آن با تگ base
برای اینکه تگ بیس (base) در HTML را عمیق و اصولی درک کنید، باید اول تفاوت بین مسیر نسبی (Relative URL) و مسیر مطلق (Absolute URL) را کاملاً متوجه شوید. چون تگ base دقیقاً روی مسیرهای نسبی اثر می‌گذارد، نه مطلق.
مسیر مطلق (Absolute URL) چیست؟
مسیر مطلق یک آدرس کامل است که شامل:
- پروتکل (https)
- دامنه
- مسیر فایل
مثال:
<a href="https://example.com/assets/style.css" target="_blank" rel="noopener">فایل CSS</a>
مرورگر دقیقاً می‌داند باید به چه آدرسی برود. اینجا دیگر چیزی برای محاسبه وجود ندارد.
مسیر نسبی (Relative URL) چیست؟
مسیر نسبی بر اساس موقعیت فایل فعلی محاسبه می‌شود.
مثال:
<link rel="stylesheet" href="assets/style.css">
مرورگر این مسیر را نسبت به URL صفحه فعلی تفسیر می‌کند.
اگر صفحه شما این باشد:
https://example.com/blog/index.html
مرورگر مسیر را این‌طور می‌سازد:
https://example.com/blog/assets/style.css
حالا نقش تگ base دقیقاً چیست؟
وقتی تگ base تعریف شود، مرورگر دیگر مسیر نسبی را نسبت به URL صفحه فعلی محاسبه نمی‌کند؛
بلکه آن را نسبت به آدرسی که در <base href=””> تعریف شده می‌سازد.
یعنی:
<base href="https://example.com/">
<link rel="stylesheet" href="assets/style.css">
نتیجه می‌شود:
https://example.com/assets/style.css
حتی اگر فایل داخل پوشه blog باشد.
جدول مقایسه کامل
| ویژگی | مسیر نسبی | مسیر مطلق |
|---|---|---|
| شامل دامنه کامل | ❌ | ✅ |
| وابسته به موقعیت فایل | ✅ | ❌ |
| تحت تأثیر تگ base | ✅ | ❌ |
| خوانایی در پروژه بزرگ | متوسط | بالا |
| انعطاف در جابه‌جایی دامنه | بالا | پایین |
ویژگی‌های (Attributes) تگ base
تگ <base> دو ویژگی اصلی دارد که هر کدام نقش مهمی در عملکرد لینک‌های نسبی و هدف‌دهی مرورگر دارند:
1. اتریبیوت href
- مشخص‌کننده آدرس پیش‌فرض برای تمام لینک‌های نسبی است.
- می‌تواند مسیر مطلق (Full URL) یا مسیر نسبی نسبت به فایل فعلی باشد.
پیشنهاد: مقاله «اتریبیوت‌های HTML | لیست جامع»
مثال عملی:
<base href="https://example.com/assets/">
<link rel="stylesheet" href="style.css">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟" data-lazy-src="http://logo.png"><noscript><img decoding="async" src="logo.png" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟"></noscript>
در این مثال:
- مسیر CSS به: https://example.com/assets/style.css تبدیل می‌شود
- مسیر تصویر به: https://example.com/assets/logo.png
نکته: اگر href اشتباه باشد، تمام لینک‌ها و منابع صفحه خراب می‌شوند.
2. اتریبیوت target
تعیین می‌کند لینک‌های صفحه در چه حالتی باز شوند.
مقادیر متداول:
- _self ← باز شدن در همان تب (پیش‌فرض)
- _blank ← باز شدن در تب جدید
- _parent ← باز شدن در فریم والد
- _top ← باز شدن در کل پنجره
مثال:
<base href="https://example.com/" target="_blank">
<a href="page.html">صفحه جدید</a>
نتیجه: لینک page.html در تب جدید باز می‌شود و مسیر آن نسبت به base محاسبه می‌شود.
نکات مهم Attributes
- فقط یک تگ base در هر سند مجاز است.
- اگر href مشخص نشده باشد، target هنوز می‌تواند اعمال شود.
- target روی تمام لینک‌های نسبی اعمال می‌شود، حتی لینک‌های داخل JS و CSS گاهی تحت تأثیر قرار می‌گیرند.
اشتباهات رایج در استفاده از تگ base
با وجود اینکه تگ بیس ساده به نظر می‌رسد، اما بسیاری از مبتدی‌ها و حتی توسعه‌دهندگان متوسط، اشتباهات رایجی در استفاده از آن دارند. این اشتباهات می‌توانند باعث خراب شدن تمام لینک‌ها، تصاویر و فایل‌های CSS/JS شوند.
1. تعریف چندین تگ base در یک صفحه
- استاندارد HTML می‌گوید فقط یک تگ base مجاز است.
- اگر چند base وجود داشته باشد، تنها اولین base اعمال می‌شود و بقیه نادیده گرفته می‌شوند.
مثال اشتباه:
<base href="https://example.com/">
<base href="https://example2.com/">
نتیجه: مرورگر فقط base اول را اعمال می‌کند و مسیرها به example2.com نمی‌روند.
2. قرار دادن <base> بعد از لینک‌ها
- <base> باید قبل از هر تگ دارای URL در <head> نوشته شود.
- اگر بعد از <link> یا <script> قرار گیرد، آن لینک‌ها از base جدید استفاده نمی‌کنند.
مثال اشتباه:
<link rel="stylesheet" href="assets/style.css">
<base href="https://example.com/">
نتیجه: فایل CSS لود نمی‌شود زیرا base بعد از آن تعریف شده است.
3. استفاده در پروژه‌های چندصفحه‌ای یا SPA
- در پروژه‌های SPA (Single Page Application) یا سایت‌های فریم‌ورکی، استفاده از base می‌تواند اختلال در مسیرهای داخلی ایجاد کند.
- گاهی مسیرهای js-routing یا لینک‌های پویا با base ناسازگار می‌شوند.
4. خراب شدن مسیر فایل‌های CSS، JS و تصاویر
- اگر مسیر base اشتباه باشد، تمام منابع نسبی صفحه دیگر لود نمی‌شوند.
- کاربران ممکن است یک صفحه خالی یا ناقص ببینند.
- این موضوع می‌تواند روی تجربه کاربری و حتی سئو سایت تأثیر منفی بگذارد.
چه زمانی نباید از تگ base استفاده کنیم؟
با وجود مزایای تگ <base>, در برخی شرایط استفاده از آن می‌تواند مشکل‌ساز شود. شناخت این شرایط برای جلوگیری از خطاهای عملی و سئویی ضروری است.
پروژه‌های SPA (Single Page Application)
- در SPA مسیرها معمولاً توسط روتر فریم‌ورک مدیریت می‌شوند (مثل React Router یا Vue Router)
- تعریف base می‌تواند باعث شود لینک‌ها و مسیرهای js-routing به اشتباه محاسبه شوند
- نتیجه: مسیرهای داخلی کار نمی‌کنند و فایل‌ها لود نمی‌شوند
سایت‌های با URL داینامیک یا متغیر
- اگر مسیر فایل‌ها یا لینک‌ها در runtime تغییر می‌کند، base ثابت باعث خراب شدن مسیرها خواهد شد
- مثال: CMSهایی مثل وردپرس که مسیر تصاویر یا اسکریپت‌ها بر اساس برگه یا صفحه متفاوت است
پروژه‌های چند base-layer
- پروژه‌هایی با چند پوشه و زیردامنه
- base global ممکن است باعث شود لینک‌ها به اشتباه به دامنه یا پوشه‌ای دیگر اشاره کنند
- در این حالت بهتر است از مسیرهای نسبی محلی استفاده شود
زمانی که همه لینک‌ها مطلق هستند
- اگر تمام لینک‌ها و منابع سایت Absolute URL باشند، نیاز به base وجود ندارد
- اضافه کردن base در این حالت اضافه‌کاری است و می‌تواند باعث سردرگمی شود
تأثیر تگ base بر سئو و کراول لینک‌ها
استفاده از تگ base می‌تواند تجربه کاربر را ساده‌تر کند، اما اگر غیر اصولی استفاده شود، می‌تواند بر سئو و کراولینگ موتورهای جستجو اثر منفی بگذارد. شناخت این تأثیرات برای هر توسعه‌دهنده یا مدیر سایت حیاتی است.
تأثیر روی URLهای نسبی
- تگ base مسیر تمام لینک‌های نسبی صفحه را تغییر می‌دهد
- اگر مسیر اشتباه باشد، لینک‌های داخلی شکسته می‌شوند (http status code 404)
- لینک‌های شکسته به موتور جستجو اعلام می‌کند که صفحه ناقص است و امتیاز سئو کاهش می‌یابد
پیشنهاد: مقاله «لیست کامل کدهای وضعیت HTTP»
جلوگیری از ایندکس اشتباه
- موتورهای جستجو مسیرها را نسبت به URL صفحه تحلیل می‌کنند
- استفاده نادرست از base ممکن است باعث شود موتور جستجو لینک‌ها را نادرست دنبال کند
- این موضوع به خصوص برای فایل‌های CSS/JS و تصاویر مهم است، چون rendering صفحه را مختل می‌کند
نکات ایمن برای سئو
- فقط یک base در هر صفحه تعریف کنید
- قبل از لینک‌ها یا اسکریپت‌ها قرار دهید
- مسیر href را دقیق و معتبر بنویسید
- لینک‌های مطلق را در صورت نیاز استفاده کنید
- پس از انتشار، همه لینک‌های نسبی را تست کنید (Google Search Console و ابزارهای Crawl)
خلاصه تأثیر روی سئو
| عامل | اثر مثبت | اثر منفی |
|---|---|---|
| مسیرهای نسبی | مدیریت آسان | خراب شدن لینک‌ها در صورت اشتباه |
| کراولینگ | مسیر ثابت برای ربات گوگل | احتمال ایندکس نادرست |
| تجربه کاربری | لینک‌ها سریع‌تر و صحیح‌تر لود می‌شوند | شکسته شدن منابع و کاهش سرعت بارگذاری |
تمرین عملی برای درک بهتر تگ base
برای اینکه مفهوم تگ <base> کاملاً جا بیفتد، بهترین روش تمرین عملی و مشاهده نتیجه است. این بخش مخصوص کسانی است که می‌خواهند مسیرهای نسبی و عملکرد base را روی پروژه واقعی تست کنند.
ساختار تمرینی پروژه
ساختار پیشنهادی پوشه‌ها:
project/
│
├── index.html
├── about.html
├── assets/
│ ├── style.css
│ └── logo.png
└── blog/
└── post1.html
- فایل CSS و لوگو داخل پوشه assets هستند
- صفحه اصلی در root (index.html) قرار دارد
- صفحه بلاگ در پوشه blog
تمرین بدون base
در فایل blog/post1.html بنویسید:
<link rel="stylesheet" href="../assets/style.css">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟" data-lazy-src="http://../assets/logo.png"><noscript><img decoding="async" src="../assets/logo.png" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟"></noscript>
<a href="../about.html">درباره ما</a>
- مسیرها نسبی به پوشه parent (../) اشاره دارند
- توجه کنید هر حرکت به پوشه جدید نیازمند ../ اضافی است
نتیجه: کار می‌کند اما اگر پروژه پیچیده شود، خوانایی و مدیریت سخت می‌شود.
تمرین با base
حالا همان فایل را این‌طور تغییر دهید:
<base href="https://example.com/">
<link rel="stylesheet" href="assets/style.css">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟" data-lazy-src="http://assets/logo.png"><noscript><img decoding="async" src="assets/logo.png" alt="لوگو" title="تگ base در HTML چیست و چه کاربردی دارد؟"></noscript>
<a href="about.html">درباره ما</a>
- مسیرهای نسبی نسبت به base محاسبه می‌شوند
- دیگر نیازی به ../ نیست
- مدیریت پروژه آسان‌تر و تمیزتر می‌شود
تمرین پیشرفته
- تغییر target:
<base href="https://example.com/" target="_blank">
- حالا تمام لینک‌ها در تب جدید باز می‌شوند
- مشاهده کنید که چه تاثیری روی تجربه کاربری و رفتار مرورگر دارد
جمع‌بندی و نکات نهایی
استفاده صحیح از تگ <base> می‌تواند مسیرهای نسبی شما را مدیریت کند و تجربه کاربری بهتری ایجاد کند، اما ناآگاهی در استفاده از آن می‌تواند باعث خراب شدن لینک‌ها، تصاویر و فایل‌های CSS/JS شود و حتی روی سئو و کراول موتورهای جستجو تأثیر منفی بگذارد.
در این مقاله یاد گرفتید:
- <base> یک آدرس پیش‌فرض برای مسیرهای نسبی ایجاد می‌کند
- باید فقط یکبار در <head> قرار گیرد و قبل از لینک‌ها و اسکریپت‌ها نوشته شود
- ویژگی‌های اصلی href و target نحوه محاسبه مسیر و باز شدن لینک‌ها را کنترل می‌کنند
- مسیرهای مطلق تحت تأثیر base نیستند
- اشتباهات رایج شامل تعریف چند base، قرار دادن base بعد از لینک‌ها و استفاده در پروژه‌های SPA یا پویا است
- قبل از انتشار حتما مسیرها را تست کنید تا از مشکلات سئو جلوگیری شود
اگر می‌خواهید HTML را از پایه تا سطح حرفه‌ای یاد بگیرید و بتوانید به صورت عملی همه تگ‌ها و اتریبیوت‌ها را مدیریت کنید، پیشنهاد میکنیم در دوره جامع HTML شرکت کنید.
در این دوره:
- از مباحث پایه شروع میکنیم (مثل تگ HTML چیست؟)
- با اکثر تگ‌های HTML به صورت عملی آشنا می‌شوید
- مثال‌ها و پروژه‌های واقعی کار شده‌اند
- مهارت‌های مدیریت مسیرها، لینک‌ها و فایل‌ها به شما کمک می‌کند سایت‌های کاملاً استاندارد و بهینه برای سئو بسازید
- پس از اتمام دوره، شما به یک متخصص HTML واقعی تبدیل می‌شوید
- دارای گواهی پایان دوره
سوالات متداول
تگ <base> باید همیشه داخل <head> و قبل از هر تگ لینک، اسکریپت یا تصویر قرار گیرد تا مسیرهای نسبی به درستی محاسبه شوند. تنها یک بار در هر صفحه کافی است.
خیر، تنها یک base در هر صفحه معتبر است و اگر چند base تعریف شود، مرورگر فقط اولین base را اعمال می‌کند و بقیه نادیده گرفته می‌شوند.
خیر، تگ <base> تنها مسیرهای نسبی را تحت تأثیر قرار می‌دهد و مسیرهای مطلق بدون تغییر باقی می‌مانند.
اگر base اشتباه یا در جای نامناسب قرار گیرد، لینک‌ها، تصاویر و فایل‌های CSS یا JS ممکن است خراب شوند و این موضوع هم تجربه کاربری و هم سئو سایت را تحت تأثیر قرار می‌دهد.
استفاده از base فقط زمانی توصیه می‌شود که پروژه شما مسیرهای نسبی زیادی دارد و مدیریت آن‌ها دشوار است. در پروژه‌های SPA، CMSهای پویا یا وقتی تمام لینک‌ها مطلق هستند، نیاز به base نیست.
ویژگی target مشخص می‌کند که لینک‌های نسبی در چه جایی باز شوند؛ به طور مثال _self در همان تب و _blank در تب جدید باز می‌شود و تجربه کاربری را کنترل می‌کند.
