اشتباهات رایج html وب سایت، 10 مورد از این اشکالات
یاد گرفتن تمامی اصول و قواعدی که در کدنویسی باید اجرا شود کار غیر ممکن و پیچیده‌ای نیست ولی برای اینکه بتوانید در کدنویسی هر آن چه را که دوست دارید پیاده سازی کنید، باید طبق اصول برنامه ریزی شده‌ای پیش بروید. زبان نشانه گذاری html به زبانی گفته می‌شود که با استفاده از آن شما این امکان را دارید تا اسکلت یک وب‌سایت را بسازید. ما در این مقاله قصد داریم تا به برسی اشتباهات رایج html وب سایت بپردازیم تا شما را با این موضوع بیشتر آشنا شوید.
در واقع زبان html برگرفته از واژه Hyper Text Markup Language است که به شما کمک می‌کند تا بتوانید صفحات یک وب‌سایت را بسازید. اما گاهی اوقات وقتی که مشغول نوشتن کدهای با استفاده از زبان html هستید، امکان دارد دچار خطاها و اشتباهاتی شوید که بعضا اثرات منفی را بر روی عملکرد وب‌سایت شما می‌گذارد. در ادامه با ما همراه باشید تا به برسی اشتباهات رایج html وب سایت بپردازیم.
برسی اشتباهات رایج html وب سایت
اشتباه در نوشتن کدهای html عملکرد کلی وب‌سایت را تحت شعاع قرار خواهد داد و شما را با مشکلاتی مواجعه خواهد کرد، برای از بین بردن این معضل در ادامه با ما امرا باشید:
1- از تگ (del) به جای تگ‌های (strike ، s) برای نمایش دادن متن‌های حذف شده
تگ del در زبان نشانه گذاری html برای این است تا بر روی محتواهایی که درون این تگ قرار داده شده است یک خط کشیده شود. شما می‌توانید برای این کار از تگ های s ،strik نیز استفاده کنید ولی توجه داشته باشید استفاده از تگ های s ، strik از نظر معنایی با تگ del تفاوت دارند.
مثلا زمانی که شما دوره طراحی سایت در مجموعه سایبری شو را در وب‌سایتتان قرار می‌دهید و قرار آیت به دلیل تعطیلات و مناسبت‌های ملی تخفیفاتی را در این دوره درج کنید، با استفاده از تگ del شما این امکان را دارید تا بر روی قیمت دوره یک خط بکشید و قیمت جدید را اعمال کنید.
استفاده از تگ های strike و s برای نشان دادن متن‌های حذف شده دیگر مرسوخ شده است و در نسخه های جدیدی html این تگ‌ها کاربرد زیادی ندارند. استفاده از این تگ باعث اشتباهات رایج html وب سایت خواهد شد.
2- (alt image) را به تصاویر وب‌سایت اضافه کنید
زمانی که شما alt image را به تصاویر وب سایتتان اضافه می‌کنید، این کار سبب می‌شود تا موتورهای جستجو به شکل راحتر قادر باشند تا محتوای درون عکس‌های شما را تشخیص دهند و این کار به بهبود سئو سایت شما می‌انجام. کاربران زمانی که سرعت لود وب‌سایت شما پایین باشد با خواند alt متوجه محتوای عکس مد نظر خواهند شد و می‌توانند به درک درستی از آن برسند.
3- در (html) از تگ‌هایblink) و (marquee استفاده کنید
تگ marquee به تگی گفته می‌شود قابلیت متحرک کردن تصاویر و متن در وب‌سایت را دارد و قابلیت اسکرول کردن در تمامی جهات با تنظیم سرعت را در صفحات وب سایت فراهم می‌کند.
برا اولین بار مرورگر اکسپلورر بود که از تگ marquee رونمایی کرد و طولی نکشید که تمامی مررگرها توانستند از این تگ به خوبی پشتیبانی کنند. تگ blink برای ایجاد کردن لینک‌های چشمک زن و متن‌ها مورد استفاده قرار می‌گیرد، در صورتی که تگ marquee استفاده‌های زیادتری همچون اسکرول کردهای متن باز با قابلیت‌های زیادتری دارد.
4- از تگ‌های (block) در بین تگ‌های (inline) استفاده نکنید
عناصر که در زبان نشانه گذاری html وجود دارند از دو گروه block و inline تشکیل شده‌اند:
- lnline به عنصری گفته می‌شود که به اندازه‌ای که نیازمند است در یک سطر فضای مورد نظر را اشغال می‌کند و در واقع احتیاج به اشغال کردن یک سطر در کدنویسی ندارد.
- block به عنصری در زبان نشانه گذاری html گفته می‌شود که با توجه به ویژگی که دارد تمامی طول یک سطر در کدنویسی را به خودش اختصاص می‌دهد و بعد و قبل از آن هیچ سطری وجود ندارد.
تمامی تگ‌های html به صورت پیش فرض دارای خصوصیات عناصر block و inline هستند و با توجه به ویژگی‌هایی که در عناصر inline وجود دارد، آنها باید در داخل block قرار داده شوند تا امکان قرار گرفتن در جریان صفحه را داشته باشند.
پس توجه داشته باشید که استفاده کردن از عناصر block در میان تگ‌های inline کار اصولی و استانداردی محسوب نمی‌شود و شما باید زمانی که از عناصر inline در کدهای html وب‌سایتتان استفاده می‌کنید از block درون این عناصر به کار گیرید. در صورت توجه نکردن به این موضوع اشتباهات رایج html وب سایت را مرتکب می‌شوید.
5- از تگ (br) نباید بیش از اندازه استفاده کرد
برای شکشته شدن یک خط در متن و برای به وجود آوردن فاصله در بین کدهای html، از تگ br استفاده می‌شود. توجه داشته باشید که برای ایجاد فاصله بیش از یک خطی در بین خطوت و دیگر عناصر توسط تگ br در html کار درستی نیست و از این روش نباید استفاده کرد.
زمانی که قرار است شما فاصله‌ای بیشتر از یک خط را در میان عناصر html ایجاد کنید، می‌توانید این کار را با استفاده از تگ p انجام دهید. line-height , padding و margin از دیگر تگ‌هایی هستند که شما می‌توانید با استفاده از آن ها این کار را انجام دهید.
6- از لیست‌های (ol و ul) باید در جای درست استفاده شود
در زبان نشانه گذاری html به صورت کلی دو نوع لیست و جود دارد:
- اولین گروه لیست‌هایی هستند که به صورت نامرتبت و غیر شمارشی هستند، تگ‌های <ul></ul> برای نمایش دادن لیست های نا مرتبت مورد استفاده قرار می‌گیرند و زمانی که در وب‌سایت نیاز به منو باشد از این تگ‌ها استفاده می‌شود.
- دومین گروه لیست‌های شمارشی و مرتب هستند و برای نمایش دادن آنها لیست‌ها از <ol></ol> استفاده می‌شود. برای ایجاد کردن آیتم داخل هر دو تگ <ol><ul> تگ‌های <li><li> مورد استفاده قرار می‌گیرند و این به این معنی است که اگر تگ <li> استفاده نشود، استفاده کردن از تگ‌های <ul><ol> هیچ معنی خاصی نخواهد داشت. برای اینکه شما بتوانید مطالب را به خوبی لیست کنید می‌توانید از این تگ‌ها در زبان html استفاده کنید.
7- ضرورت استفاده از تگ‌های (Heading) در زبان html
استفاده از تگ‌های h1,h2,h3,h4,h5,h6 در سئو سایت نقش مهمی دارد و شما با قرار دادن این تگ‌ها، عنوان‌های مقاله وب‌سایت را دارای اهمیت و اولویت می‌کنید. برا اینکه بتوانید سرفصل و عنوان‌های مطالب وب‌سایت را دسته بندی کنید، می‌توانید از تگ‌های هدینگ استفاده کنید.
شما باید در سرفصل‌های مطالب و مقالات وب‌سایتتان از تگ‌های هدینگ استفاده کنید تا هم برای کاربران به خوبی قابل درک باشد و هم موتورهای جستجوی گوگل میزان اهمیت این سرفصل‌ها را درک کنند، در ضمن اشتباهات رایج html وب سایت را مرتکب نشوید.
8- استفاده کردن از تگ‌های (b ،I ،strong ،em ) در کدهای html وب‌سایت
استفاده هر کدام از تگ‌های b ،I ،strong ،em در زبان کدنویسی نقش مهمی را ایفا می‌کند و اشتباهات رایج html وب سایت را گم خواهد کرد، در ادامه به کاربرد این تگ‌ها اشاره خواهیم کرد:
- تگ <strong> برای اهمیت بخشیدن به متن‌ها مورد استفاده قرار می‌گیرد و با استفاده از این تگ می‌توانید متن‌های مطالب را به خوبی مشخص کنید. بیشترین کاربرد این تگ در زمان‌هایی است که شما می‌خواهید در جمله و یا عنوانی به کاربران بفهمانید که این عنوان از اهمیت بالایی برخوردار است.
- تگ <em>در متن‌هایی مورد استفاده قرار می‌گیرد که از نظر معنا و مفهموم می تواند اهمیت بیشتری را به متن مورد نظر انتقال دهد.
- تگ <b> به منظور بلد کردن متن مورد نظر مورد استفاده قرار می‌گیرد و از نظر معنی هیچ گونه اهمیتی را برای متن مورد نظر نخواهد داشت.
- تگ <i> به منظور مشخص کردن کجی متن مورد استفاده قرار می‌گیرد و زمانی که از این تگ استفاده می‌شود اهمیت معنای زیادتری برای متن‌ها در نظر خواهد گرفت.
9- حذف و اضافه کردن (border) در تگ html که باید به خوبی رعایت شود
border از دیگر خصوصیتی است که در زبان html وجود دارد و به شما این امکان را می‌دهد تا در برخی از تگ‌های زبان نشانه‌گذاری html آن را ویرایش، اضافه و یا حذف کنید. اگر این تگ به خوب استفاده نشود امکان اشتباهات رایج html وب سایت وجود خواهد داشت.
استفاده کردن از خصوصیت border در تگ‌های html با توجه به پیشرفت‌های زیادی که در زبان برنامه‌نویسی شاهد آن هستیم، کار اصولی قلمداد نمی‌شود. برای اینکه بتوانید به بهترین شکل ممکن از border در کدهای وب‌سایت استفاده کنید، می‌توایند این خصوصیت را در زبان نشانه گذاری css استفاده کنید.
10- استفاده نکردن از روش inline) style) در کدهای html وب‌سایت
یکی دیگر از اشتباهات رایج html وب سایت که در برخی از موارد مشاهده می‌شود، استفاده از روش استایل دهی با استفاده از خاصیت inline است، استفاده از این روش به چند دلیل غیر اصولی است:
- اولین مورد این است که در زمان‌هایی که شما از چند فایل با خطوط زیاد استفاده می‌کنید، ویرایش کدهایی که با استفاده از خصوصیت inline استایل دهی شده‌اند، مشکلات زیادی را در کدهای شما ایجاد خواهد کرد و در زمانی که قرار است استایل مورد نظر را پیدا کنید کار سخت و زمان بری خواهد بود.
- به وجود آمدن مشکل برای کدهای css خارجی وب‌سایت از دیگر مشکلاتی است که استفاده از خصوصیت inline در کدهای ایجاد می‌کند. زمانی که استایل دهی با استفاده از inline به صفحات html وب‌سایت داد شوند، این روش از اولویت بالاتری نسبت به استایل های خارجی برخوردار است که این عامل سبب می‌شود تا برخی از اشکالات در کدهای وب‌سایت به وجود آید. مثلا در زمان‌هایی که شما قصد دارید تگی را با یک کلاس خاص استایل دهی کنید، امکان دارد که این تگ دارای یک استایل درون خطی باشد و این استایل درون خطی یک بی نظمی را در مدهای html وب‌سایت شما ایجاد می‌کند و باعث می‌شود تا استایل خارجی شما به خوبی عمل نکند.
- مشکل دیگری که استفاده از روش inline style امکان دارد برای شما ایحاد کند، بالا بردن حجم صفحات و ب‌سایت است. با استفاده از روش استایل درون فایل‌های، وب‌سایت شما تا حد زیادی با حجم اضافی همراه می‌شود که این عامل برای شما یک امتیاز منفی به حساب می آید. با توجه به اینکه سرعت بارگذاری درهر وب‌سایت از اهمیت زیاد برای موتورهای جستجو برخوردار است، اگر سرعت لود یک وب‌سایت کم باشد در عملکرد سئو و بهینه سازی نمرات منفی را به جا می‌گذارد.
سخن پایانی
ما در این مقاله به برسی 10 مورد از اشتباهات رایج html وب سایت پرداختیم، شما می‌توایند با در نظر گرفتن این موارد تمامی کدهای html ول‌سایت خودتان را بهینه کنید تا هم سرعت بارگذاری محتوای سایتتان بالا رود و هم تمامی کدهای آن برای موتورهای جستجو بهینه شده و امتیازات خوبی را برای سئو سایت شما به همراه داشته باشد.
