8 اشتباه در استفاده از تگ های HTML

پیشتر در ارسالی با عنوان 10 اشتباه در کدنویسی HTML که نباید مرتکب شوید مواردی را برای استفاده صحیح از نمادها در HTML بررسی کردیم. در این ارسال کلکسیونی از رایجترین اشتباهات در نحوه استفاده از تگ های HTML را مورد بررسی قرار میدهم و در مورد هرکدام نحوه استفاده درست را با رعایت اصول و معنای تگ مورد نظر شرح خواهم داد. خطاهای مشترکی که در سورس کد اکثر وب سایت ها مشاهده و بارها و بارها تکرار شده اند و بسیاری از این اشتباهات، دیگر به عادت هایی تبدیل شده اند که ما در روزهای اول کدنویسی خود کسب کرده ایم.

• نحوه استفاده از تگ <br>

The <br> HTML tag

چگونگی استفاده نادرست از تگ <br>

اشتباهی که برخی طراحان مرتکب میشوند، استفاده از تگ <br> برای ایجاد فضای خالی و فاصله بین عناصر و محتوا در صفحات است. مثلا گاهی از تعدادی تگ <br> برای ایجاد فاصله زیاد بین دو عنصر استفاده میکنند. ادیتورهای متن آنلاین (WYSIWYG ) معمولا از تگ <br> برای فاصله بین پاراگراف ها استفاده میکنند.

چگونگی استفاده صحیح از تگ <br>

تگ <br> برای شکستن خط و رفتن به خط بعدی در داخل عناصر مانند پاراگراف باید استفاده شود. برای جدا کردن محتوا از عناصری مانند پاراگراف استفاده کنید و برای ایجاد فاصله بین آنها از خاصیت margin در CSS استفاده نمایید.

• نحوه استفاده از تگ <div>

The <div> HTML tag

چگونگی استفاده نادرست از تگ <div>

هنگامی که با HTML انس میگیریم و با CSS آشنایی پیدا میکنیم، معمولا تگ <div> اولین و راحترین عنصری است که به کار کردن با آن مسلط می شویم. بنابراین سعی میکنیم هر چیزی در صفحه را با تگ <div> احاطه کنیم. این امر باعث میشود از کاربرد سایر عناصر در جای مناسب خود غافل شویم.

چگونگی استفاده صحیح از تگ <div>

تگ <div> معمولا برای تعیین ساختار اصلی صفحه مورد استفاده قرار میگیرد و پس از آن باید در بخش های داخلی ساختار ایجاد شده در هر قسمت از مناسبترین تگ موجود در HTML استفاده کرد. برای رعایت HTML معنایی عناصری مانند پاراگراف، لیست های مرتب و نامرتب، برچسب ها و سایر عناصر موجود در HTML باید در جای مناسب خود بکار گرفته شوند.

• نحوه استفاده از تگ <small>

The <small> HTML tag

چگونگی استفاده نادرست از تگ <small>

استفاده کردن از تگ <small>به منظور کوچک نشان دادن نوشته مورد نظر اشتباهی است که ممکن است به علت نام small که بر روی این تگ گذاشته شده مرتکب شوید.

چگونگی استفاده صحیح از تگ <small>

همواره برای استایل دهی به عناصر در صفحات وب باید از CSS استفاده کرد. بنابراین برای کوچک کردن یک نوشته باید font-size استفاده نمود. تگ <small>برای متن هایی که در چاپ نیز کوچک باید نشان داده شوند و یا جملات حقوقی مانند جمله کپی رایت در نظر گرفته شده است.

• نحوه استفاده از تگ <hr>

The <hr> HTML tag

چگونگی استفاده نادرست از تگ <hr>

استفاده از این تگ این روزها بسیار رایج شده است. بسیاری از افراد به اشتباه از تگ <hr> برای رسم کردن یک خط جداکننده بین بخش های مختلف در یک صفحه وب استفاده میکنند.

چگونگی استفاده صحیح از تگ <hr>

برای جدا کردن بخش های مختلف در یک صفحه می توانید خاصیت border در CSS استفاده کنید. تگ <hr> نیز هنوز به قوت خود باقیست اما تگ <hr> برای شرایط خاص مانند مشخص کردن فصل های یک کتاب، پانوشت و یا بندهای اشعار در نظر کرفته شده است.

• نحوه استفاده از تگ <title>

The <title> HTML tag

چگونگی استفاده نادرست از تگ <title>

در استفاده از تگ <title> دو افراط وجود دارد. یا اینکه بخش <title>شامل اطلاعات بی ارزش می شود و یا اینکه با کلمات کلیدی برای SEO انباشته میشود.

چگونگی استفاده صحیح از تگ <title>

در محتویات تگ <title>باید دقت کنید. تگ <title>باید حاوی توصیف کوتاهی از محتویات صفحه باشد و این توصیف کوتاه باید حاوی کلماتی مرتبط با محتویات درج شده در صفحه باشد. کلماتی که موتورهای جستجو را به درستی هدایت کنند.

• نحوه استفاده از تگ <img>

The <img> HTML tag

چگونگی استفاده نادرست از تگ <img&gt

مورد منفی که در استفاده از تگ <img&gt وجود دارد بیشتر مربوط به صفت alt در این تگ است. بسیاری از تصاویر در صفحات وب صفت alt را ندارند و برخی دیگر حاوی توضیح بی ربط به تصویر مورد نظر هستند. همانطور که در مطلب تفاوت بین HTML و XHTML چیست؟ عنوان شد، در XHTML استفاده از تگ alt در صفحات وب یک ضرورت است.

چگونگی استفاده صحیح از تگ <img&gt

صفت alt در تگ <img&gt باید حاوی شرح دقیقی از محتویات تصویر مورد استفاده باشد. اگر تصویر به صورت لینک استفاده شده است، محتویات صفت alt میتواند برای موتورهای جستجو به عنوان شرح لینک و موضوع آن تلقی شود. چراکه محتویات موجود در عکس برای موتورهای جستجو قابل درک نیست. اگر تصویر شما مهم نیست، حداقل از یک صفت alt به صورت خالی استفاده کنید.

• نحوه استفاده از تگ <label>

The <label> HTML tag

چگونگی استفاده نادرست از تگ <label>

تگ <label> معمولا در کنار مجموعه فیلدهای دیگر مانند جعبه متن ها، لیست ها و غیره مورد استفاده قرار میگیرد. اما به ندرت از صفت for برای آن استفاده میشود.

چگونگی استفاده صحیح از تگ <label>

از تگ <label> برای توصیف یک فیلد ورود اطلاعات مرتبط استفاده کنید و برای استفاده بهینه و کاربردی از تگ <label> صفت for را به آن اضافه کنید. با اینکار وقتی کاربر روی برچسب مورد نظر کلیک کنید، فیلد مربوط به آن برچسب فعال و آماده ورود اطلاعات خواهد شد.

• نحوه استفاده از تگ <address>

The <address> HTML tag

چگونگی استفاده نادرست از تگ <address>

نام تگ <address> باعث میشود تصویر کنیم این تگ تنها برای درج آدرس در صفحه تماس ها بکار میرود.

چگونگی استفاده صحیح از تگ <address>

کاربرد صحیح تگ <address> برای مشخص کردن نویسنده و یا مالک محتوا و سند مورد نظر در صفحه وب است. بنابراین در کنار نام می توانید آدرس، شماره تلفن، ایمیل و سایر اطلاعات را نیز درج کنید.

نظرات (8) -

  • حامد

    08/15/1390 02:02:43 ب.ظ | پاسخ به این نظر

    ممنون جناب میرزایی
    وبسایتتون مطالب بسیار مفیدی داره. واقعاً اینچنین مطالب تو وب فارسی خیلی کم دیده میشه.
    بیشتر محتواها کاذب شده متاسفانه.
    امیدوارم روند ارسال مطالبتون پیوسته باشه تا استفاده ببریم.

    • Admin

      08/15/1390 02:13:27 ب.ظ | پاسخ به این نظر

      مرسی حامد خان، شما استاد ما هستید و این نظر لطفتونه، من امروز با وب سایت بسیار عالی شما آشنا شدم و واقعا از مطالبتون لذت بردم و بوکمارک کردم . کاملا حق با شماست متاسفانه، امیدوارم بتونیم دست به دست یه گوشه از این اوضاع نابسامون وب فارسی رو بگیریم و دِین خودمون رو اَدا کنیم.
      خیلی خوشحال شدم شمارو اینجا دیدم حامد جان. از این به بعد بیشتر با شما در تماس خواهم بود.موفق باشید Smile

  • روژ

    10/16/1390 11:48:59 ب.ظ | پاسخ به این نظر

    ممنون ازمطالب جالبتون.واقعا خداقوت.من که کلی یادمیگیرم.واقعا کاربرد هرکدوم بهتریادگرفتم.آدم تو این جمع یه حس خوبی بهش دست میده ایرانی زیبا و........
    ممنون که اینقدرعالی می نویسید
    ولی تگlabelرو نفهمیدم.باید بیشتراطلاعات کسب کنم.باید بخونم وبخونم وبخونم.....درهرموردی ازطراحی وب

  • سید محسن موسوی

    04/29/1391 05:58:56 ب.ظ | پاسخ به این نظر

    سلام . با عرض تشکر و آرزوی سلامتی و موفقیت برای شما . من هم باید بگم که مطالب روی سایت وافعا خوبه و کمتر جایی میشه پیداشون کرد. راستی از اونجایی که اسم شما برای من خیلی آشناست میشه بیشتر خودتون رو معرفی کنید و بگید اهل کجا هستید و همینطور اگر خدمت سربازی رو گذروندید کجا بودید و کی ؟ با تشکر.

  • amin

    08/12/1391 11:28:54 ب.ظ | پاسخ به این نظر

    واقعا مطالبی که گذاشتید به دردم خورد ممنون از لطفتون خدا اجرتون بده

  • امیر

    11/19/1393 10:35:17 ق.ظ | پاسخ به این نظر

    سلام بر حامد عزیز
    من 2 سال پیش زیاد مزاحمتون شدم برای طراحی سایتم که با همکاری شما اگه خاطرتون باشه سایتم رو درست کردم و شما بی نهایت به من لطف و محبت کردید با راهنمایی های خوبتون. بسیار متشکرم از شما
    چون در حال حاضر دارم سایتم رو آپدیت می کنم باز نیاز به راهنمایی های شما دارم که انشاءالله استفاده خواهم کرد. بی نهایت سایت خوبی دارید و در عین اینکه خودتون بسیار انسان شریفی هستید.
    ارادتمند
    امیر

  • مهدی ربانی

    01/23/1394 11:02:17 ق.ظ | پاسخ به این نظر

    تگ img را اصلاح کنید. بجای استفاده از امپرسند جی تی ، از امپرسند امپ جی تی استفاده کرده اید.

  • محمد

    02/17/1394 10:50:15 ق.ظ | پاسخ به این نظر

    دوست عزیز برای فاصله بین خطوط پاراگراف باید از خاصیت line-height استفاده کرد نه margin !

Loading