بررسی ده اشتباه بزرگ در کدهای HTML که نباید مرتکب شویدبررسی ده اشتباه بزرگ در کدهای HTML که نباید مرتکب شوید تاریخ انتشار : 01 اردیبهشت، 1396

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

HTML‏ (‏‎ ‎اچ تی ام ال‎ ‎‏) اولین ، ساده ترین ، پرکاربردترین و مهم ترین زبان برای طراحی سایت ‏است. صفحات اینترنتی شامل اطلاعاتی است که حاوی متن ، تصویر ، ویدئو ، صوت و… می ‏باشد . این محتوا توسط سه لایه به کاربر نمایش داده می شود . لایه  محتوا همیشه وجود ‏دارد و حاوی محتوایی می باشد که طراح سایت قصد دارد آن را به کاربر نمایش دهد . این ‏محتوا بصورت کدهای ‏HTML‏ مابین دو تگ <‏html> قرار میگیرد .‏
HTML‏ زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای  ‏ساختار بندی اطلاعات و جدایش اجزای منطقی یک نوشتار ، نظیر عناوین، تصاویر، فهرست‌ها، ‏بندها و جداول به کار می‌رود. از سوی دیگر، کدهای ‏HTML‏ را نباید به عنوان زبانی برای ‏صفحه ‌آرایی یا نقاشی صفحات وب سایت به کار برد، این وظیفه اکنون بر دوش فناوری‌های ‏دیگری همچون ‏CSS‏ است.‏

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


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


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


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

HTML


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

کدهای HTML


اضافه نکردن خصوصیت‎ alt ‎به تصاویر‎
استفاده از‎ alt ‎برای تصاویر به بازدیدکنندگان صفحات وب سایت شما و همچنین موتورهای ‏جستجو کمک میکند تا موضوع تصویر منتشر شده در وب سایت شما را تشخیص دهند.‏
موتورهای جستجو به توضیحات یا همان ‏alt‏ تصاویر خیلی توجه می کنند و این ‏alt‏ ها روی سئو ‏اثر بسیار مثبتی دارد. استفاده از خصوصیت‎ 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 ‎با سایر کلمات نخواهند دید و این مشکل باعث ‏کاهش خوانایی مطالب شما می شود و کلمات با درجه اهمیت بیشتر مورد توجه مخاطب قرار ‏نخواهد گرفت‎.

استفاده از تگهای ‏b‏ ،I ‎‏ ،strong ‎‏ ،em ‎‏ برای‎ bold ‎و‎ italic ‎کردن متن بدون در نظر ‏گرفتن موتورهای جستجو


استفاده از تگهای‎ 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 و سئوی سایت - طراحی سایت

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


اشتراک گذاری در :

مقالاتی که پیشنهاد می شود بخوانید

الگوریتم گوگل پاندا در سئو چه نقشی دارد؟
29 فروردین

الگوریتم گوگل پاندا در سئو چه نقشی دارد؟

بازدید: 241

گوگل پاندا (Google Panda) به تغییراتی گفته می شود  که از اواخر اسفند  1389  (فوریه 2011) در الگوریتم نمایش نتایج جستجو در گوگل اعمال شد و همچنان ادامه دارد. این تغییرات با هدف کاهش سایت های رتبه بندی شده یا  کیفیت پایین دنبال می شود و سایت های با کیفیت را در بالای صفحه نمایش نتایج جستجو نشان می دهد. در اثر این تغییرات، سایت هایی که حجم بسیار زیادی آگهی تبلیغاتی در خود جای داده بودند به رده های پایین سقوط کننند و وب [...]

وب چیست و چگونه کار میکند؟
28 فروردین

وب چیست و چگونه کار میکند؟

بازدید: 518

وب (WEB)یک سیستم مبتنی بر سرویس دهنده سرویس گیر (Client/Server) بر روی اینترنت است که با استفاده از ابزار فرامتن(HyperText) و پیوند(Link)  دادن اجزای اطلاعات به یکدیگر دسترسی به منابع اطلاعاتی را تسهیل می کند .وب از ابزار فوق رسانه ای (HyperMedia) که شامل فوق متن و چند رسانه ای (MultiMedia) است بهره می گیرد. از طریق وب می توان اطلاعات را ارسال ویا دریافت نمود و متفاوت بودن سیستمهای سخت افزاری و نرم افزاری (سیستم عامل(  مانع ایجاد ارتباط [...]

چگونه یک وب سایت را قبل از تحویل به مشتری تست کنیم؟
01 اردیبهشت

چگونه یک وب سایت را قبل از تحویل به مشتری تست کنیم؟

بازدید: 335

بعد از طراحی یک سایت و قبل از تحویل آن به مشتری باید عملکرد آن تست شود و از صحت ‏کارکرد قسمت های مختلف آن مطمئن شویم. در طراحی بعضی از سایت ها ممکن است ‏طراحی سایت خیلی طول نکشد ولی تست آن وقتگیر و خسته کننده باشد و بیش از حد ‏انتظار انرژی شما را بگیرد.‏این مسئله طراح سایت را خیلی خسته می کند و برای هر طراحی بارهای بار اتفاق افتاده ‏است ، این موضوع شما را دچار نا امیدی یا استهلاک و خستگی می کند و باعث میشود [...]

اینفوگرافیک چیست و کاربرد اینفوگرافیک در طراحی سایت چیست؟
31 فروردین

اینفوگرافیک چیست و کاربرد اینفوگرافیک در طراحی سایت چیست؟

بازدید: 350

اولین اینفوگرافیک ها را می توان در نگاره های داخل غار انسان های نخستین یافت. با گذشت زمان و پیشرفت بشر ، اینفوگرافیک ها جنبه علمی تر و کاربردی تری به خود گرفتند . به گونه ای که اواخر سال 1400 میلادی لئوناردو داوینچی برای بیان ایده ها و تشریح مسائل علمی خود از اینفوگرافیک استفاده نمود. یکی از نخستین اینفوگرافیک های مدرن و کاربردی ، در کتاب اطلس سیاسی و تجاری ویلیام سیلوستر مورد استفاده قرارگرفت. این کتاب توسط [...]

خدمات پاک سئو و اثر خدمات پاک سئو
01 اردیبهشت

خدمات پاک سئو و اثر خدمات پاک سئو

بازدید: 311

برای درک بهتر از خدمات پاک سئو ابتدا بهتر است که خود سئو را بشناسیم.  سئو، فرایند آوردن بیننده به سایت از نتایج موتور جست‌وجو است. حال اگر آوردن بیننده از روش‌های قانونی و اخلاقی بدست آید، این خدمت پاک است. راهکارهای قانونی و اخلاقی، رضایت مدیران سایت‌ها و ماندگاری رتبه‌ها را در پی دارد، به تولید محتوا و ارتباط بین سایت‌ها کمک می‌کند و از همه مهم‌تر درآمد مالی را بین سایت‌ها توزیع [...]

ویژگی های مثبت و نکات منفی طراحی سایت با دکمه های نامرئی
01 اردیبهشت

ویژگی های مثبت و نکات منفی طراحی سایت با دکمه های نامرئی

بازدید: 478

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