8 اشتباه رایج در استفاده از تگ های html (طراح عزیز بخون)

خب میرم سر اصل مطلب،

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

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

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

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

http://line25.com/wp-content/uploads...l-misuse/1.png

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

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

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

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

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

http://line25.com/wp-content/uploads...l-misuse/2.png

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

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

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

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

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

http://line25.com/wp-content/uploads...l-misuse/3.png

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

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

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

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

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

http://line25.com/wp-content/uploads...l-misuse/4.png

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

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

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

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

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

http://line25.com/wp-content/uploads...l-misuse/5.png

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

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

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

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

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

http://line25.com/wp-content/uploads...l-misuse/6.png

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

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

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

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

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

http://line25.com/wp-content/uploads...l-misuse/7.png

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

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

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

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

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

http://line25.com/wp-content/uploads...l-misuse/8.png

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

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

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

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



منبع : وبسایت ها
پ.ن : در ادامه اینو بگم که بزودی اگه وقتش پیش بیاد یه سری مقالات در زمینه های برنامه نویسی، بازاریابی، گرافیک و مباحثی که بلدم، منتشر می کنم (امیدوارم این بزودی زیاد طول نکشه).
پ.ن 2 : یه اشتباه هم قفل کردن راست کلیک و انتخاب متنه :d ، دارم منبع رو می نویسم، اینکارو نکن، چون من متنو راحت برمیدارم.:))
پ.ن 3 : مطالب مفید دیگه ای هم داخل سایت هست که می تونید مطالعه کنید.

نقل قول:

---

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

---

البته ذکر کنم که padding و margin قوائد استفاده مختص به خود را دارند که متاسفانه همکاران طراح رعایت نمی کنند و طبق قانون برنامه نویسی جهانی وب سایت با مشکل روبروست.
خوشبختانه ما سابقه طراحی بین المللی را داریم ، ولی متاسفانه در ایران نه تنها رعایت نمیشه ، بلکه اگر رعایت هم شود مورد اهمیت نیست و ارزشی به آن نمی دهند.

امیدواریم روزی بشه که همکاران هم بتوانند در زمینه بین المللی رقابت کنند.

مقاله ی خوبی بود
یک مورد هم من اضافه کنم،بعضی ها هنوز برای کشاندن مطلب به وسط از تگ <center> استفاده می کنند.
درصورتی که با css باید انجام بشه
این تگ در html5 حذف شده

لیست تگ های حذف شده در HTML5