در سال ۱۹۶۰ میلادی دولت ایالات متحده در پی ساخت شبکه‌ای گسترده و غیرقابل نفوذ از کامپیوترها برای وصول به اهداف تجاری سری خود بود؛ ۲۰ سال بعد، همزمان با تشکیل اولین هسته‌ی هیات علمی جهانی در امریکا و عضو شدن سازمان‌های خصوصی به آن، پوسته‌ی اولیه‌ی این رویا به حقیقت پیوست و ۱۰ سال بعد، این شبکه به صورت عمومی عرضه و بسیاری از ابعاد زندگی انسان را تحت تاثیر قرار داد.
«وب» بی شک بزرگ ترین اتفاق و پیشرفت، در تاریخ زندگی بشر بوده است
اگر شما فقط کمی با وب و دنیای گسترده‌ی آن آشنایی داشته باشید کلمه‌ی html حتما به گوشتان خورده خورده است، html مخفف عبارت Hyper Text Markup Language میباشد و به طور خلاصه، ابزاری است که با استفاده از تگ ها، قالب و اسکلت کلی وب را می‌سازد؛ صفحات وب دارای سطوح مختلفی برای نمایش اطلاعات شامل: متن، تصویر، ویدئو و … میباشد.
این محتوا و مضامین توسط سه لایه اصلی به کاربران نمایش داده می شوند، لایه محتوا همواره وجود دارد و حاوی مطالبی است که طراح سایت می‌خواهد آن را به کاربران نمایش دهد . این محتوا بصورت کدهای html میان دو تگ <html> قرار میگیرد .
html زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساختار بندی اطلاعات و جدایش اجزای منطقی یک نوشتار ، نظیر عناوین، تصاویر، فهرست‌ها، بندها و جداول به کار می‌رود.
از سوی دیگر، کدهای html را نباید به عنوان زبانی برای صفحه آرایی یا نقاشی صفحات وب سایت به کار برد، این وظیفه اکنون بر دوش حوزه دیگری دیگری همچون CSS است.
html ساده ترین و پرکاربرد ترین مفهوم در ساخت و طراحی سایت میباشد
یادگیری اصول اولیه کدنویسی کار بسیار سخت و پیچیده ای نیست اما آشنایی و تسلط بر این قوانین و رعایت اصول استاندارد و صحیح در کدنویسی نیاز به تجربه و کار فراوان دارد.
در این مجموعه به بررسی اشتباه بزرگ در نوشتن کدهای HTML می پردازیم که رعایت آنها می تواند در استاندارد سازی کدهای HTML شما تاثیر بسیاری داشته باشد و در ساختمان اصلی وبسایت شما و در ادامه سئوی سایت شما تاثیرات مثبت و موثری بگذارد.
شما همچنین می توانید pdf این مقاله را نیز به صورت رایگان دانلود کرده تا در فرصت مناسب به مطالعه ان بپردازید.
آنچه در این نوشته خواهیم داشت
۱) استفاده نادرست از لیست ها ul ، ol در جای لازم
در html ما به طور کلی دو نوع لیست داریم :
لیست شمارشی یا مرتب: برای نمایش این لیست از تگ <ol></ol> استفاده می کنیم.
لیست غیر شمارشی یا نامرتب: برای نمایش این لیست از تگ <ul></ul> استفاده می کنیم، که معمولا برای ایجاد منو در سایت استفاده میشود.
داخل هر دو تگ <ol> و <ul> از تگ <li></li> برای ایجاد آیتم استفاده می شود. در واقع بدون تگ <li> تگ ul و ol کاربردی ندارند.
این تگ ها برای لیست کردن مطالب ساخته شده اند و کار با آنها بسیار ساده و آسان است و توانایی های بسیاری را برای کنترل لیست به وسیله css ایجاد خواهد نمود . استفاده از تگ های p ، br و هر نوع دیگر از کدهای htmlبه غیر از تگ های تعریف شده لیست ها ، برای شکل دهی یک لیست کار اشتباهی است که نباید انجام دهید.
۲) استفاده از تگهای s ، strike و del برای نمایش متن های حذف شده
شما با استفاده از تگ del در html می‌توانید روی محتوایی که درون این تگ قرار گرفته یک خط بکشیم. تگ s و strike هم در اچ تی ام ال برای کشیدن خط روی متن استفاده می شود،
این دو تگ مشابه تگ del عمل می کنند اما از نظر معنایی با هم تفاوت دارند برای مثال ممکن است شما محتوای “دوره جامع آموزش طراحی سایت” را بر روی صفحه سایت خود منتشر کنید اما مثلا به مناسب عید نوروز تصمیم بگیرید به مخاطبان خود ۳۰ درصد تخفیف دهید با استفاده از تگ del می‌توانید بر روی قیمت قبلی یک خط بکشید و سپس قیمت جدید را درج کنید.
در نسخه های جدید از تگهای del برای نشان دادن متن حذف شده و از تگ ins برای نشان دادن متن وارد شده به جای متن حذف شده به همراه هم استفاده می شود. بنابراین دچار اشتباه نشوید و از strike و s استفاده نکنید.. این نوع از تگ ها با ورود نسخه های جدیدی دگرگون شده اند و تگ های strike و s که قبلا برای این منظور استفاده می شده اند دیگر کاربردی نخواهند داشت و استفاده از آنها غیر استاندارد و به نوعی اشتباه خواهد بود.
افرادی که این مقاله را مطالعه کرده اند به مطالعه مقالات زیر نیز علاقه نشان داده اند:
پنج اشتباه مهلک کارفرمایان در سفارش طراحی سایت
رازهای استفاده از تصاویر در طراحی سایت
۳) استفاده نکردن از تگهای Heading
حتما از اهمیت تگ های heading – h1,h2,h3,h4,h5,h6 – در طراحی و سئوی سایت با خبر هستید از این تگ ها برای مشخص نمودن سر فصل ها و تیتر ها برای مطالب منتشر شده در وب سایت با توجه به درجه اهمیت آنها استفاده می شود همین الان متنی که دارید مطالعه میفرمایید دارای تگهای هدینگ متفاوت است که با توجه به مضمون و عناوین در بین متون قرار داده ام.
سر فصل هایی که با تگهایی غیر از تگهای Heading ایجاد شده اند در مرورگرهای متنی قابل تشخیص نخواهند بود و همچنین از نظر موتورهای جستجو اهمیتی نخواهند داشت.
استفاده از انواع تگ های دیگر و استفاده از CSS برای تغییر ظاهری عناصری غیر از تگهای heading ، برای ایجاد سر فصل اشتباه بزرگی خواهد بود.
۴) اضافه نکردن alt image به تصاویر در وبسایت
استفاده از alt برای تصاویر به بازدیدکنندگان صفحات وب سایت شما و همچنین موتورهای جستجو کمک میکند تا موضوع تصویر منتشر شده در وب سایت شما را تشخیص دهند.
موتورهای جستجو به توضیحات یا همان alt تصاویر خیلی توجه می کنند و این alt ها روی سئوسایت شما نیز اثر بسیار مثبتی دارد.
برای استاندارد بودن کدهای htmlخود حتما این نکته را رعایت کنید، این نکته زمانی پر رنگ تر و مهم تر میشود که مخاطبان شما از سرعت اینترنت پایین و یا مرورگرهای متنی استفاده میکنند و یا به هر دلیلی این تصویر در مرورگر بازدیدکننده وب سایت شما نمایش داده نشده است .
از این خصوصیت حتی در هنگامی که توضیحی برای تصویر خود ندارید نیز استفاده نمایید و از کلمات کلیدی فرعی خود در آن استفاده کنید.
۵) استفاده از تگهای b ،I ،strong ،em برای bold و italic کردن متن
۱) <b> متن مورد نظر را بولد می کند بدون اینکه از نظر معنایی اهمیتی بیشتری برای آن در نظر بگیرد.
۲) <strong> متون قوی را مشخص میکند، از نظر ظاهری متن مورد نظر تفاوتی با زمانی که عنصر <b> را روی آن اعمال می کنیم ندارد؛ اما از نظر معنایی این تگ اهمیت بیشتری به متن ما می بخشد و زمانی از آن استفاده میشود که بخواهیم به کاربر بفهمانیم متن مورد نظر ما مهم است.
۳) <i> کجی متون را مشخص میکند اما از نظر معنایی اهمیت بیشتری برای آن در نظر نمی گیرد.
۴) <em> برای متونی استفاده میشود که بر آن تاکید شده است و از نظر معنایی اهمیت بیشتری به متن ما میدهد، <em> از نظر ظاهری تفاوتی با زمانی که از تگ <i> برای متون استفاده میکنیم ندارد.
اگر شما به بهینه سازی و سئوی سایت خود اهمیت می دهید بهتر است از تگ های strong و em به صورت مستقیم در کدhtml به جای تگهای b و i و همچنین style ها استفاده نمائید .
به این نکته بسیار مهم توجه داشته باشید که تگ های b و i تگهای نمایشی هستند و تگهای strong و em تگ های مفهومی و نمایشی می‌باشند، مفهوم این جمله این خواهد بود که متن ها به وسیله b و i فقط یک تغییر حالت ظاهری پیدا کرده اند و به همین دلیل مورد توجه موتورهای جستجو قرار نخواهند گرفت،
اما با استفاده از تگهای strong و em شما به همراه تغییرات ظاهری یک شخصیت نیز به متن خود خواهید بخشید و اعلام خواهید کرد که این متن در داخل این نوع از تگ ها از اهمیت بیشتری برخوردار خواهد بود.
در مواردی مخاطبان شما از مرورگرهای متنی بدون استفاده از style ها استفاده خواهند کرد که در این صورت تفاوتی مابین کلمات bold و italic شده توسط CSS با سایر کلمات نخواهند دید و این مشکل باعث کاهش خوانایی مطالب شما می شود و کلمات با درجه اهمیت بیشتر مورد توجه مخاطب قرار نخواهد گرفت.
۶) استفاده از تگهای blink و marquee
marquee نام تگی است که اولین بار توسط مرورگر اینترنت اکسپلورر (Internet Explorer) معرفی شد، این تگ با هدف متحرک سازی متن، تصویر و… در صفحات به صورت های مختلف، از جمله اسکرول در جهات مختلف با قابلیت تنظیم سرعت، رنگ و برخی ویژگی های دیگر ارائه گردید و در حال حاضر توسط اکثر مرورگرهای وب به خوبی پشتیبانی می شود.
برخی آن را با تگ مشابه blink مقایسه می کنند که البته marquee با blink تفاوتهای زیادی دارد، چرا که از تگ blink صرفا جهت ایجاد متون و لینک های چشمک زن استفاده می شود،
اما تگ marquee، گستره استفاده جامع‌تری دارد و برای اسکرول متن یا تصویر با قابلیت های بیشتر، کاربرد دارد؛
با این وجود کنسرسیوم جهانی وب W3C، به دلایلی توصیه می کند که از آن در طراحی صفحات وب، استفاده نشود که خود جای تامل دارد.
۷) اضافه و حذف کردن border در تگ html
در استاندارد های امروزی استفاده از این نوع خصوصیت به صورت مستقیم در تگ هایhtml توصیه نمی شود و بهتر است به جای استفاده از این خصوصیت در تگهایhtml چشم پوشی کنید و تغییرات مورد نظر خود را با استفاده از خصوصیت border در CSS انجام دهید.
Border ها یکی دیگر از خصوصیات تعدادی از عناصر htmlهستند که شما می توانید با استفاده از این خصوصیت به صورت مستقیم در تعدادی از تگ هایhtml آنها را حذف ، اضافه و ویرایش نمایید.
۸) قرار دادن تگ های Block در بین تگ های Inline
یک عنصر Block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.
یک عنصر Inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.
عناصر html به دو گروه inline و block تقسیم بندی می شوند.
هر تگ به صورت پیش فرض دارای خصوصیت inline و یا block است. عناصر Inline با توجه به نوع و خصوصیت شان باید در درون عناصر block قرار بگیرند تا بتوانند با استفاده از این نوع از تگ ها در جریان صفحه قرار بگیرند.
عناصر block تگ هایی مانند div ،p و مواردی دیگر را شامل می شوند که بیشتر در ایجاد ساختار صفحات مورد استفاده قرار میگیرند.
استفاده از عناصر block در بین تگ های inline کار نادرستی است که هرگز انجام ندهید، اما عناصر inline به راحتی درون عناصر block قرار خواهند گرفت.
۹) استفاده از inline style
استفاده از روش استایل دهی inline کار غیر استانداردی نیست ولی خب توصیه می کنیم از این روش استفاده نکنید.
استفاده از این روش یه سری مشکلات و معایب برای شما به وجود میاورد که در ادامه به توضیح آن می‌پردازیم.
۱) افزایش حجم صفحات
زمانی که از استایل دهی درون خطی استفاده می کنید، حجم فایل های شما تا حد زیادی افزایش پیدا میکند و این موضوع یک نکته منفی برای سایت شما به حساب می‌آید؛ از آنجایی که موتورهای جستجو به سرعت بارگذاری سایت اهمیت زیادی میدهند، سنگین شدن صفحات، تاثیر نامناسبی بر سئوی سایت شما میگذارد.
۲) ویرایش سخت کدها
ویرایش کدهایی که به صورت inline استایل دهی شدند، مشکلات زیادی دارد، به خصوص زمانی که تعداد خطوط کدهای شما خیلی بالاست یا چند فایل جدا دارید، پیدا کردن این استایل ها و تغییر اونها یک کار سخت و در برخی موارد حتی غیرممکن میباشد.
۳) ایجاد مشکل برای کدهای css خارجی
استایل هایی که به صورت inline به صفحات html داده شدند، نسبت به استایل های خارجی الویت بالاتری دارند و همین موضوع باعث ایجاد برخی مشکلات میشود. مثلا زمانی که میخواید یک سری تگ رو با یک کلاس خاص استایل دهی کنید و یکی از این تگ ها یک استایل درون خطی دارد ممکن است آن استایل درون خطی نظم کدهای شما رو بهم زده و از عمل کردن استایل خارجی جلوگیری کند.
۱۰) استفاده بیش از حد از تگ br
تگ br برای ایجاد فاصله و شکست تنها یک خط در متن مورد استفاده قرار می گیرد . استفاده از تگ br برای ایجاد فاصله هایی بیشتر از یک خط در بین خطوط و یا عناصر دیگر اشتباه است . برای ایجاد فاصله بیشتر از یک خط در بین خطوط می توانید به راحتی از تگهای p و یا خصویت padding و margin و حتی line-height استفاده نمائید .
جمع بندی
۱۰ نکته مهمی که این مقاله عنوان شد جز مهم ترین اشتباهاتی است که در کدهای html ممکن است برای هر طراح سایت و کارشناس سئو، چه مبتدی چه پیشرفته اتفاق بیافتد. سعی کنید در تمام آنها دقت لازم را به کار برده و در صورت بروز هرگونه ابهام، حتما نظرات و سوالات خود را با ما در میان بگذارید.
سپاس از همراهی شما