تگ های HTML که به تگ پایان نیاز ندارند

حتماً به یاد دارید تعریف تگ و عنصر چه بود؟ بگذارید به‌طور خلاصه بگویم. هر عبارتی که داخل علامت‌های کوچک‌تر و بزرگ‌تر قرار می‌گیرد تگ گفته می‌شود. گفتیم که تگ‌ها دو نوع هستند:

• تگ شروع
• تگ پایان

تگ شروع و تگ پایان به همراه محتوایش یک عنصر را تشکیل می‌دهند. اما در این قسمت به تعدادی از تگ‌ها می‌پردازیم که تگ پایان ندارند.

لیست تگ‌هایی که تگ پایان ندارند:

• <br />
• <hr />
• <img />
• <input />
• <link />
• <meta />

البته لیست بالا کامل نیست؛ فقط تگ‌هایی هستند که به‌شدت کاربرد دارند. از این به بعد در آموزش‌هایی که می‌دهیم هر وقت با عبارت «این تگ Self-Closing است.» مواجه شدید، بدانید آن تگ نیازی به تگ پایان ندارد. به این نوع تگ‌ها، تگ های خود بسته شونده نیز می‌گویند. در این قسمت با تگ br و img آشنا می‌شویم و در آینده مفصل در مورد هر یک از تگ‌ها توضیح خواهیم داد.

تگ‌های خود بسته شونده همان‌طور که در لیست بالا دیدید یک / در انتهای خود دارند؛ درست قبل از علامت بزرگ‌تر! در اوایل گذاشتن این / اجباری بود ولی بعد از معرفی آخرین ورژن HTML5 گذاشتن / در پایان این تگ‌ها اختیاری شد.

ایجاد خط جدید در HTML

اگر یادتان باشد معلم‌ها دیکته می‌گفتند یک عبارت را زیاد تکرار می‌کردند : «نقطه سر خط!» در HTML اگر میلیون‌ها جمله داشته باشید که در تگ p قرار گرفته است، به هیچ عنوان به سر خط نمی‌روند و برای اینکه به سر خط بروند باید از تگ br استفاده کنیم. تگ br منحصر به فرد است چون فقط تگ شروع دارد! می‌توانید از آن در هر کجای صفحه HTML استفاده کنید.

نکته: فاصله بین کدها در یک صفحه HTML، تأثیری در موقعیت محتوا به هنگام نمایش در مرورگر ندارد.

به مثال زیر توجه کنید:

<p>The Nile River is the longest river <br> in the world, measuring over 6,850 <br> kilometers long (approximately
    4,260
    <br>
    miles).
</p>

خروجی قطعه کد بالا چیزی شبیه به عبارت زیر است:

The Nile River is the longest river
in the world, measuring over 6,850
kilometers long (approximately 4,260
miles).

قرار دادن تصویر در HTML

در دنیا هیچ سایت خوبی را پیدا نمی‌کنید که از تصویر استفاده نکرده باشد. بعضی اوقات تصاویر مفاهیمی را منتقل می‌کنند که جملات طولانی قادر به رساندن مفهوم نیستند. همچنین مغز ما تصاویر را زودتر از متون پردازش می‌کند.

برای قرار دادن تصویر در یک فایل HTML می‌بایست از تگی به اسم img استفاده کنیم که مخفف عبارت image است. اما کمی با تگ‌های دیگری که آموختیم متفاوت است. جمله معروف که یادتان هست؟ این تگ Self-Closing است. یعنی این تگ، تگ پایان ندارد.

همه عناصری که تاکنون یاد گرفته‌اید مثل تگ‌های عنوان و پاراگراف‌ها یک چیز مشترک دارند؛ آن‌ها کاملاً از متن تشکیل شده‌اند! چگونه می‌خواهید محتوای تصویری را که متن نیست به صفحه HTML اضافه کنید؟

یادتان هست در مورد ویژگی‌ها صحبت کردیم؟ با ویژگی ID آشنا شدید در مورد کاربردهایش توضیح دادیم. اما در اینجا با ویژگی دیگری به اسم src آشنا می‌شویم. مقدار ویژگی src باید آدرس تصویر در اینترنت باشد.

به مثال زیر دقت کنید:

<img src="image.jpg" />

در این مثال ما تصویری بانام و فرمت image.jpg را بر روی صفحه قرار دادیم. فایل image.jpg در همان فولدری است که فایل HTML ما قرار دارد.

در مثال زیر، مقدار src، آدرس تصویر یک URL در اینترنت است. URL آدرس تصویری است که در جایی ذخیره شده است. تصویر می‌تواند در اینترنت یا در کامپیوتر شما ذخیره شده باشد.

<img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" />

نکته مهم: URL ها دو نوع هستند:

• URL نسبی
• URL مطلق

اگر اطلاع ندارید، پیشنهاد می‌کنم دو مقاله زیر را با دقت بخوانید:

• URL چیست؟
• URL نسبی و مطلق به چه معنا هستند؟

ویژگی Alt در تگ img در HTML

بخشی از وظایف یک توسعه دهنده وب خوب ، ایجاد سایتی است که در دسترس همه کاربران با همه زمینه‌ها باشد. برای اینکه وب را همه گیر کنیم ، باید در نظر بگیریم که وقتی خوانندگان سایت ما با تصاویر روبه‌رو می‌شوند، چه اتفاقی می‌افتد.

ویژگی alt چیست؟

• ویژگی alt مخفف عبارت alternate است.
• به‌منظور متن جایگزین، برای تصویر سایت استفاده می‌شود، در واقع تصاویر موجود در سایت‌های ما را برای موتورهای جستجو مثل گوگل معنا می‌بخشد.
• ویژگی alt را دقیقاً مانند ویژگی src می‌توانید به تگ img اضافه کنید.
• مقدار alt باید توصیفی از تصویر باشد.

به عبارت زیر توجه کنید:

<img src="#" alt="A field of yellow sunflowers" />

فواید استفاده از ویژگی alt چیست؟

• اگر یک تصویر در صفحه وب بارگیری نشود ، کاربر می‌تواند در آن‌جایی که برای تصویر در نظر گرفته بودید ماوس را حرکت داده و توضیحی مختصر را در مورد تصویر بخواند. این کار با متنی که در ویژگی alt ارائه می‌دهید امکان پذیر است.
• کاربران دارای اختلال بینایی اغلب با کمک نرم افزارهای خواندن، صفحات وب را مرور می‌کنند. هنگامی که ویژگی alt را درج می‌کنید ، نرم افزار خواندن صفحه، توضیحات تصویر را با صدای بلند برای کاربر دارای اختلال بینایی می‌خواند.
• ویژگی alt همچنین در بهینه سازی سایت برای موتورهای جستجو نقش دارد، زیرا موتورهای جستجو نمی‌توانند تصاویر را در سایت‌ها بررسی کنند. داشتن ویژگی alt می‌تواند باعث بهبود رتبه سایت شما شود.
• اگر تصویری که در صفحه وب قرار می‌دهید، اطلاعات معنی داری را به کاربری که مشکل بینایی دارد، منتقل نمی‌کند، ویژگی alt باید خالی باشد. ولی شما در نظر بگیرید نوشتن ویژگی alt امری اجباری است!