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

HTML‏ (‏‎ ‎اچ تی ام ال‎ ‎‏) اولی ، بی آلایش ترین ، پرکاربردترین و مهم ترین لهجه برای ساخت وب سایت ‏هست. صفحات اینترنتی مشمول اطلاعاتی می‌باشد که حاوی متن ، تصویر ، ویدیو ، صوت و… می ‏باشد . این محتوا بوسیله سه لایه به کاربر نشان داده میشود . لایه محتوا 

طراحی سایت در مشهد

همیشه وجود ‏دارااست و حاوی محتوایی است که طراح تارنما قصد داراست آن را به کاربر نمایش دهد . این ‏محتوا بصورت کدهای ‏HTML‏ مابین دو تگ <‏html> قرار می‌گیرد .‏
HTML‏ گویش اپ‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است 

طراحی سایت

و در اصلً برای ‏ساختار بندی اطلاعات و جدایش اجزای منطقی یک نوشتار ، نظیر عنا وین، تصاویر، فهرست‌ها، ‏بندها و جداول به فعالیت می‌رود. از سوی دیگر، کدهای ‏HTML‏ را نباید به عنوان زبانی برای ‏شیت ‌آرایی یا نقاشی صفحه ها وب سایت به عمل توفیق، این وظیفه موقتی بر دوش فناوری‌های ‏دیگری همچون ‏CSS‏ میباشد.‏




یادگیری اصول کدنویسی کار بسیار پیچیده ای نیست البته آشنایی و اشراف بر این قوانین و ‏رعایت اصول استاندارد و صحیح در کدنویسی نیاز به تجربیات و فعالیت فراوان دارد . در این مجموعه ‏به رسیدگی ده خطا گران قدر در نوشتن کدهای‎ HTML ‎می پردازیم که رعایت آنان قادر است در ‏استاندارد سازی کدهای‎ HTML ‎شما تاثیر بخش اعظمی داشته باشد و همچنین اثر مثبتی بر ‏سئوی سایت شما داشته باشد. ‏
تفاوت یک طراح تارنما و سئو فعالیت حرفه‌ای و آماتور در رعایت همین اصول و قوانین می باشد که ‏در ذیل به ده آیتم از آنها اشاره میشود.‏


استفاده نکردن از لیست ها ‏ul ‎، ‏ol ‎در جای مورد نیاز‎
تگ های ‏‎ ul،‎ ol ‎، ‏li‏ برای لیست کردن مطالب تشکیل شده اند و کار با آن ها بسیار ساده است ‏و اقتدار های بسیاری را برای کنترل لیست بوسیله‎ css ‎ایجاد کرد خواهد نمود . استعمال از تگ ‏های‎ p ‎، ‏br ‎‏ و هر نوع دیگر از کدهای‎ HTML ‎به غیر از تگ های تعریف شده لیست ها ، برای ‏شکل دهی یک لیست فعالیت اشتباهی میباشد که نباید اعمال دهید‎.‎


به کارگیری از تگهای‎ s ‎، ‏strike ‎‏ برای نمایش متن های حذف شده‎
در نسخه های تازه از تگهای‎ del – ‎برای علامت دادن متن حذف شده – و از تگ‎ ins – ‎برای ‏علامت دادن متن وارد شده به جای متن حذف شده – به یاروهمدم هم استفاده می شود. به این ترتیب ‏مبتلا اشتباه نشوید و از‎ strike ‎و‎ s ‎به کار گیری نکنید‎ .‎
در نسخه های سابق تری از‎ HTML ‎از این دو نوع تگ برای نماد دادن کلمه ها حذف شده‎ ( ‎Strikethrough ) – ‎‏ با ساخت یک خط بر روی آنها – استفاده می گردیده است‎ . ‎این نوع از تگ ها ‏با ورود نسخه های جدیدی از‎ HTML ‎دگرگون شده اند و تگ های ‏strike ‎‏ و‎ s ‎که تا قبل از این برای این ‏منظور استفاده می شده اند دیگر کاربردی نخواهند داشت و استعمال از آن‌ها غیر استاندارد ‏خواهد بود.‏




به کار گیری نکردن از تگهای ‎ Heading
مسلما از عنایت تگ های‎ heading – h1,h2,h3,h4,h5,h6 – ‎در طراحی وب سایت و سئوی تارنما ‏با خبر میباشید از این تگ ها برای مشخص و معلوم نمودن رمز فصل ها و عناوین برای مطالب منتشر ‏شده در تارنما با تمرکز به درجه التفات آنها استعمال می‌گردد.‏
رمز فصل هایی که با تگهایی غیر از تگهای‎ Heading ‎تشکیل داد شده اند در مرورگرهای متنی قابل ‏تشخیص نخواهند بود و همچنین از نگاه موتورهای جستجو اهمیتی نخواهند داشت‎.
استفاده از اشکال تگ های دیگر و استفاده از‎ CSS ‎برای تغییر و تحول ظاهری عناصری غیر از تگهای‎ ‎heading ‎‏ ، برای ایجاد کرد سر فصل غلط بزرگی خواهد بود.




اضافه نکردن خصوصیت‎ alt ‎به تصاویر‎
استعمال از‎ alt ‎برای تصاویر به بازدیدکنندگان صفحه ها تارنما شما و همچنین موتورهای ‏جستجو یاری میکند تا آیتم تصویر منتشر شده در سایت شما را تشخیص دهند.‏
موتورهای جستجو به توضیحات یا همان ‏alt‏ تصاویر خیلی دقت می کنند و این ‏alt‏ ها روی seo ‏اثر بسیار مثبتی دارد. به کار گیری از خصوصیت‎ alt ‎برای تصاویر یک قانون هست .برای استاندارد ‏بودن کدهای‎ HTML ‎خود مسلما این نکته را رعایت فرمائید . این نکته زمانی برجسته تر و اساسی تر ‏میشود که مخاطبان شما از سرعت اینترنت ذیل و یا مرورگرهای متنی ( مانند موتورهای ‏جستجو ) استفاده میکنند و یا به هر دلیلی این تصویر در مرورگر بازدیدکننده وب سایت شما ‏نمایش داده نشده است .‏
از این خصوصیت حتی‌د‌ر زمانی که توضیحی برای تصویر خود ندارید نیز به کار گیری فرمائید و ‏مقدار آن را خالی بگذارید‎ . ‎
‎
استعمال از تگهای ‏b‏ ،I ‎‏ ،strong ‎‏ ،em ‎‏ برای‎ bold ‎و‎ italic ‎کردن متن سوای در لحاظ ‏تهیه کردن موتورهای جستجو
از ‏b ‎و‎ i ‎در زمانی که نیازی به لبریز التفات کردن متن باطن این تگ ها نیست و صرفا میخواهید ‏شکل ظاهری را تغییر تحول دهید و از‎ strong ‎و‎ em ‎در مواردی که خلال شکل ظاهری می ‏خواهید سکو اهمیت متن داخل آن را نیز نسبت به سایر عبارات ارتقاء دهید استفاده نمائید‎.
درصورتی که شما به بهینه سازی و سئوی تارنما خود برای موتورهای جستجو عنایت می دهید بهتر ‏میباشد از تگ های‎ strong ‎و‎ em ‎به صورت مستقیم در کد‎ HTML ‎به جای تگهای‎ b ‎و‎ i ‎و همچنین‎ ‎style ‎‏ ها به کارگیری فرمائید . به این نکته بسیار مهم توجه داشته باشید که تگ های‎ b ‎و‎ i ‎تگهای نمایشی می باشند و تگهای‎ strong ‎و‎ em ‎تگ های مفهومی و نمایشی می‌باشند‎ . ‎مضمون‌ ‏این گزاره این خواهد بود که متن ها به وسیله‎ b ‎و‎ i ‎فقط یک تغییر‌و تحول وضعیت ظاهری پیدا کرده اند ‏و به همین ادله مورد دقت موتورهای جستجو قرار نخواهند گرفت . ولی با به کار گیری از تگهای‎ ‎strong ‎و‎ em ‎شما به یار و همدم تغییرات ظاهری یک شخصیت نیز به متن خود خواهید داد و ‏اعلام خواهید کرد که این متن در داخل این نوع از تگ ها از التفات بیشتری برخوردار خواهد ‏بود‎ . ‎بدین ترتیب همت فرمائید از این نوع از تگ ها در جای مناسب خود استعمال فرمایید .‏
تگهای‎ b ‎و‎ i ‎میتوانند یک متن و یا واژه و کلمه را به وضعیت‎ bold ‎و‎ Italic ‎تغییر تحول دهند . شاید با وجود‎ ‎CSS ‎و توانائی های فوق العاده در کنترل متن‌ها به ذهن شما برسد که از این ابزار برای ‏راحتی عمل خود استفاده کنید . توانائی های ‏font-weight ‎‏ و‎ font-style ‎میتوانند جایگزین ‏نه برای‎ b ‎و‎ i ‎باشند ولی مشکلاتی را نیز خواهد داشت . در مواردی مخاطبان شما از ‏مرورگرهای متنی فارغ از استفاده از‎ style ‎ها استفاده خواهند کرد که در‌این‌صورت‌ تفاوتی ‏مابین لغات ‏bold ‎‏ و‎ italic ‎شده بوسیله‎ CSS ‎با سایر لغت ها نخواهند مشاهده کرد و این نقص‌ باعث ‏کاهش خوانایی مطالب شما می‌گردد و کلمات با درجه اهمیت بیشتر مورد دقت مخاطب قرار ‏نخواهد گرفت‎.




به کارگیری از تگهای‎ blink ‎و‎ marquee
این گونه از تگ ها بر خلاف تصور شما ممکن می‌باشد موجب عدم دقت به سایت شما شود.‏‎ ‎جدای از غیر استاندارد اعلام شدن این تگ ها بوسیله سازمان جهانی استانداردهای وب ‏‎ wc3‎‏ ‏، به کار گیری از این نوع از تگ ها در طراحی سایت می‌تواند فاجعه ساز شود.‏
برای تشکیل داد جلب توجه و نماد دادن التفات یک زمینه بهتر میباشد از روش های دیگری ‏به کارگیری نمایید . ‏


اضافه و حذف کردن‎ border ‎در تگ‎ HTML ‎
در استاندارد های امروزی استعمال از این نوع خصوصیت به صورت بی واسطه در تگ‎ ‎های‎ HTML ‎سفارش نمیشود و بهتر است به جای استفاده از این خصوصیت در تگهای‎ HTML ‎چشم پوشی ‏نمائید و تغییرات مورد نظر خود را با به کارگیری از خصوصیت‎ border ‎در‎ CSS ‎جاری ساختن دهید . شما با ‏استفاده از‎ CSS ‎قدرت بیشتری در در اختیار گرفتن این خصوصیت خواهید داشت‎ .
‎ Border ‎ها یکی‌از‌از سایر از خصوصیات تعدادی از موادتشکیل دهنده‎ HTML ‎می باشند که شما می توانید با ‏استعمال از این خصوصیت به صورت مستقیم در تعدادی از تگ‎ ‎های‎ HTML ‎آنها‌را حذف ، اضافه ‏و بازنویسی فرمایید‎ . ‎

قرار دادن تگ‎ ‎های‎ Block ‎فی مابین تگ های ‏‎ Inline
عنصرها‎ HTML ‎به دو تیم‎ inline ‎و‎ block ‎تقسیم بندی می شوند . هر تگ به صورت پیش فرض ‏دارای خصوصیت‎ inline ‎و یا ‏block‏ است . موادتشکیل دهنده‎ Inline ‎با دقت به نوع و خصوصیت شان می بایست در ‏درون موادسازنده‎ block ‎قرار بگیرند تا بتوانند با استفاده از این نوع از تگ ها در جریان صفحه قرار ‏بگیرند . موادسازنده‎ block ‎تگ هایی مانند‎ div ‎،p ‎‏ و مواردی دیگر را شامل می شوند که بیشتر در ‏تشکیل داد ساختار صفحات مورد به کارگیری قرار می‌گیرند . استفاده از عناصر‎ block ‎میان تگ های‎ ‎inline ‎کار نادرستی است که هیچوقت اعمال ندهید، ولی عنصرها‎ inline ‎به راحتی داخل ارکان‎ ‎block ‎قرار خواهند گرفت‎.


به کارگیری از‎ inline style
استفاده از‎ style ‎های‎ inline ‎یک کار غیر استاندارد نیست ولی دارای خطاها و معایبی میباشد ‏که می‎ ‎تواند ما را برای استفاده از این نوع از‎ style ‎منصرف کند،‎ ‎هر چند که از‎ style ‎ها می ‏قدرت به سه طرز مختلف استفاده کرد و یک کدام از این سه شیوه استفاده از‎ style ‎های‎ inline ‎در داخل هر تگ میباشد . ولی سفارش میشود که از‎ inline style ‎به کارگیری کمتری فرمائید‎. ‎
بازنویسی این نوع از‎ style ‎با تمرکز به خطی بودن آن‌ها بسیار نقص‌ میباشد و با ارتقاء تعداد ‏سندهای‎ HTML ‎گاهی به کار غیر ممکنی تبدیل می‌گردد‎ . ‎این نوع از‎ style ‎حجم صفحه ها را ‏به شدت افزایش میدهد و این نکته ای بسیار منفی در طراحس تارنما و سئوی وبسایت میباشد‎ ‎‎. ‎به کار گیری از‎ inline style ‎‏ کدها را نا مرتب و ناخوانا خواهند کرد و دستکاری کد ها را از لحاظ ‏خوانایی بسیار دشوار خواهد نمود‎.‎
گاهی کدهای‎ CSS ‎خارجی را در گیر نقص‌ می کنند، بایستی بدانید که کدهای‎ inline ‎بر کدهای‎ ‎CSS ‎‏ خارجی تقدم دارا‌هستند.‏‎ ‎با همه ی این خطاها در ارتباط ها بسیار خاصی استفاده از این تگ ها ‏میتواند ایرادات شمارا برطرف نماید‎ . ‎البته به صورت عمومی استفاده از‎ inline style ‎سفارش ‏نمیشود‎ .
‎
به کار گیری بیشتراز حد از تگ ‏‎ br
استعمال از تگ‎ br ‎برای ایجاد کرد فاصله هایی بیشتر از یک خط در بین خطوط و یا موادتشکیل دهنده دیگر ‏اشتباه است . تگ‎ br ‎برای ایجاد کرد فاصله و باخت فقط یک خط در متن مورد به کارگیری قرار می ‏گیرد . برای ایجاد کرد فاصله بیشتر از یک خط در بین خطوط می توانید به راحتی از تگهای‎ p ‎و یا ‏خصویت‎ padding ‎‏ و‎ margin ‎و حتی ‏line-height ‎‏ استفاده فرمائید‎.‎



نکات نام برده چند خطا های اساسی در کدهای ‏HTML‏ می‌باشد که باید در طراحی وب سایت و ‏سئوی تارنما به آنها دقت شود، مجموعه طراحی وب سایت وب کو وب همیشه کوشش می کند با دقت ‏به آخرین استانداردهای جهانی کدنویسی و برنامه نویسی تارنما های خود را طراحی و seo ‏نماید، به جز نکات نام برده نکات بسیار مهم دیگری وجود داراست که یک طراح می بایست به آن توجه ‏نماید و همت می کنیم در مقالات دیگر به آن ها اشاره نماییم.‏