تفاوت href و src در زبان HTML

در این مقاله قصد داریم به تفاوت href و src در زبان HTML اشاره کنیم، ویژگی href یا Hypertext Reference در عناصری(تگ‌‌هایی) چون a, base, area, link و ویژگی src یا Source نیز در تگ‌هایی چون audio, embed, iframe, img, input, script, source, track, video استفاده می شود، اما تفاوت href و src چیست؟ با توجه به اینکه هر دو به یک آدرس اینترنتی اشاره می‌کنند چرا برخی از تگ‌ها از href و برخی دیگر از ویژگی src استفاده می کنند؟

تفاوت href و src

در واقع تفاوت href و src در رابطه و نوع عملکرد این دو ویژگی است، از href برای ایجاد ارتباط بین سند مرجع ( صفحه فعلی ) و یک منبع خارجی استفاده می‌شود، اما از ویژگی src برای عناصر جایگزین استفاده می‌شود. پس نوع ارتباط پیوند و فایل یکی از تفاوت های بین src و href است بین برای اینکه درک بهتری از موضوع داشته باشید به مثال‌های زیر توجه کنید:

ویژگی href مکان یک منبع وب را مشخص می‌کند، بنابراین یک پیوند(ارتباط) بین مثال تگ a یا تگ link واقع در سند مرجع با منبع مقصد وارد شده توسط این ویژگی تعریف می‌شود. به قطعه کد زیر دقت کنید:

<link href="style.css" rel="stylesheet" />

توجه داشته باشید که استفاده از تگ link به مانند @import در css نیست، تفاوت src و href فقط به نوع ارتباط محدود نیست برای مثال در قطعه کد بالا مرورگر می‌داند که این یک منبع CSS یا شیوه‌نامه است و نیازی به توقف پردازش صفحه نیست. این در حالیست که ویژگی src فقط منبع را در محل تعریف تگ یا عنصر جاسازی می‌کند قطعه کد زیر در درک موضوع برای شما مفید خواهد بود:

<script src="script.js"></script>

وقتی مرورگر با کد بالا مواجه می‌شود، بارگیری و پردازش صفحه تا زمانی که فایل را گردآوری و اجرا کند متوقف خواهد شد دقیقا مشابه زمانی که شما از کد‌های Javascript به صورت inline و داخل تگ script استفاده می‌کنید. این مورد در خصوص سایر تگ‌ها و همینطور تگ img نیز صدق می‌کند و مرورگر پردازش صفحه را تا زمانی که فایل تعریف شده در عنصر بارگیری نشده است متوقف می‌کند. به همین دلیل برای بهبود سرعت سایت توصیه می‌شود که در تصاویر از حالت Lazy استفاده و فایل‌های جاوااسکریپت در انتهای صفحه و قبل بسته شدن تگ body قرار داده شوند.