Deep learning

در سال 1960 میلادی دولت ایالات متحده در پی ساخت شبکه‌ای گسترده و غیرقابل نفوذ از کامپیوترها برای وصول به اهداف تجاری سری خود بود؛ 20 سال بعد، همزمان با تشکیل اولین هسته‌ی هیات علمی جهانی در امریکا و عضو شدن سازمان‌های خصوصی به آن، پوسته‌ی اولیه‌ی این رویا به حقیقت پیوست و 10 سال بعد، این شبکه به صورت عمومی عرضه و بسیاری از ابعاد زندگی انسان را تحت تاثیر قرار داد.
«وب» بی شک بزرگ ترین اتفاق و پیشرفت، در تاریخ زندگی بشر بوده است.
اگر شما فقط کمی با وب و دنیای گسترده‌ی آن آشنایی داشته باشید کلمه‌ی html حتما به گوشتان خورده خورده است، html مخفف عبارت Hyper Text Markup Language می‌باشد و به طور خلاصه، ابزاری است که با استفاده از تگ ها، قالب و اسکلت کلی وب را می‌سازد؛
html ساده ترین و پرکاربرد ترین مفهوم در ساخت و طراحی سایت می‌باشد
صفحات وب دارای سطوح مختلفی برای نمایش اطلاعات شامل: متن، تصویر، ویدئو و … می‌باشد.
این محتوا و مضامین توسط سه لایه اصلی به کاربران نمایش داده می شوند، لایه محتوا همواره وجود دارد و حاوی مطالبی است که طراح سایت می‌خواهد آن را به کاربران نمایش دهد . این ‏محتوا بصورت کدهای html میان دو تگ <‏html> قرار میگیرد .‏
html زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ‏ساختار بندی اطلاعات و جدایش اجزای منطقی یک نوشتار ، نظیر عناوین، تصاویر، فهرست‌ها، ‏بندها و جداول به کار می‌رود.
از سوی دیگر، کدهای ‏html را نباید به عنوان زبانی برای ‏صفحه ‌آرایی یا نقاشی صفحات وب سایت به کار برد، این وظیفه اکنون بر دوش حوزه دیگری ‏دیگری همچون ‏CSS‏ است.‏

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

1) استفاده نادرست از لیست ها ‏ul ‎، ‏ol ‎ در جای لازم‎
 

در html ما به طور کلی دو نوع لیست داریم :

لیست شمارشی یا مرتب: برای نمایش این لیست از تگ <ol></ol> استفاده می کنیم.
لیست غیر شمارشی یا نامرتب: برای نمایش این لیست از تگ <ul></ul> استفاده می کنیم، که معمولا برای ایجاد منو در سایت استفاده می‌شود.

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

 

2) استفاده از تگهای‎ s ‎، ‏strike ‎‏ و del برای نمایش متن های حذف شده‎ 

شما با استفاده از تگ del در html می‌توانید روی محتوایی که درون این تگ قرار گرفته یک خط بکشیم. تگ s و strike هم در اچ تی ام ال برای کشیدن خط روی متن استفاده می شود،
این دو تگ مشابه تگ del عمل می کنند اما از نظر معنایی با هم تفاوت دارند برای مثال ممکن است شما محتوای “دوره جامع آموزش طراحی سایت” را بر روی صفحه سایت خود منتشر کنید اما مثلا به مناسب عید نوروز تصمیم بگیرید به مخاطبان خود 30 درصد تخفیف دهید با استفاده از تگ del می‌توانید بر روی قیمت قبلی یک خط بکشید و سپس قیمت جدید را درج کنید.

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

 

3) استفاده نکردن از تگهای ‎ Heading

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

4) اضافه نکردن‎ alt image به تصاویر در وبسایت‎

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

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

1) <b> متن مورد نظر را بولد می کند بدون اینکه از نظر معنایی اهمیتی بیشتری برای آن در نظر بگیرد.
2) <strong> متون قوی را مشخص میکند، از نظر ظاهری متن مورد نظر تفاوتی با زمانی که عنصر <b> را روی آن اعمال می کنیم ندارد؛ اما از نظر معنایی این تگ اهمیت بیشتری به متن ما می بخشد و زمانی از آن استفاده میشود که بخواهیم به کاربر بفهمانیم متن مورد نظر ما مهم است.
3) <i> کجی متون را مشخص میکند اما از نظر معنایی اهمیت بیشتری برای آن در نظر نمی گیرد.
4) <em> برای متونی استفاده میشود که بر آن تاکید شده است و از نظر معنایی اهمیت بیشتری به متن ما میدهد، <em> از نظر ظاهری تفاوتی با زمانی که از تگ <i> برای متون استفاده میکنیم ندارد.‌

اگر شما به بهینه سازی و سئوی سایت خود اهمیت می دهید بهتر ‏است از تگ های‎ strong ‎و‎ em ‎به صورت مستقیم در کدhtml ‎ به جای تگهای‎ b ‎و‎ i ‎و همچنین‎ ‎style ‎‏ ها استفاده نمائید .

به این نکته بسیار مهم توجه داشته باشید که تگ های‎ b ‎و‎ i ‎تگهای نمایشی هستند و تگهای‎ strong ‎و‎ em ‎تگ های مفهومی و نمایشی می‌باشند، ‎مفهوم ‏این جمله این خواهد بود که متن ها به وسیله‎ b ‎و‎ i ‎فقط یک تغییر حالت ظاهری پیدا کرده اند ‏و به همین دلیل مورد توجه موتورهای جستجو قرار نخواهند گرفت،
اما با استفاده از تگهای‎ ‎strong ‎و‎ em ‎شما به همراه تغییرات ظاهری یک شخصیت نیز به متن خود خواهید بخشید و ‏اعلام خواهید کرد که این متن در داخل این نوع از تگ ها از اهمیت بیشتری برخوردار خواهد ‏بود.

در مواردی مخاطبان شما از ‏مرورگرهای متنی بدون استفاده از‎ style ‎ها استفاده خواهند کرد که در این صورت تفاوتی ‏مابین کلمات ‏bold ‎‏ و‎ italic ‎شده توسط‎ CSS ‎با سایر کلمات نخواهند دید و این مشکل باعث ‏کاهش خوانایی مطالب شما می شود و کلمات با درجه اهمیت بیشتر مورد توجه مخاطب قرار ‏نخواهد گرفت‎.

6) استفاده از تگهای‎ blink ‎و‎ marquee

marquee نام تگی است که اولین بار توسط مرورگر اینترنت اکسپلورر (Internet Explorer) معرفی شد، این تگ با هدف متحرک سازی متن، تصویر و… در صفحات به صورت های مختلف، از جمله اسکرول در جهات مختلف با قابلیت تنظیم سرعت، رنگ و برخی ویژگی های دیگر ارائه گردید و در حال حاضر توسط اکثر مرورگرهای وب به خوبی پشتیبانی می شود.

برخی آن را با تگ مشابه blink مقایسه می کنند که البته marquee با blink تفاوتهای زیادی دارد، چرا که از تگ blink صرفا جهت ایجاد متون و لینک های چشمک زن استفاده می شود،
اما تگ marquee، گستره استفاده جامع‌تری دارد و برای اسکرول متن یا تصویر با قابلیت های بیشتر، کاربرد دارد؛
با این وجود کنسرسیوم جهانی وب W3C، به دلایلی توصیه می کند که از آن در طراحی صفحات وب، استفاده نشود که خود جای تامل دارد.

7) اضافه و حذف کردن‎ border ‎در تگ‎ html

در استاندارد های امروزی استفاده از این نوع خصوصیت به صورت مستقیم در تگ‎ ‎هایhtml ‎ توصیه نمی شود و بهتر است به جای استفاده از این خصوصیت در تگهایhtml ‎ چشم پوشی کنید و تغییرات مورد نظر خود را با استفاده از خصوصیت‎ border ‎در‎ CSS ‎انجام دهید.

‎ Border ‎ها یکی دیگر از خصوصیات تعدادی از عناصر ‎ htmlهستند که شما می توانید با ‏استفاده از این خصوصیت به صورت مستقیم در تعدادی از تگ‎ ‎هایhtml ‎ آنها را حذف ، اضافه ‏و ویرایش نمایید.

‎8) قرار دادن تگ‎ ‎های‎ Block ‎در بین تگ های ‏‎ Inline

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

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

9) استفاده از‎ inline style

استفاده از روش استایل دهی inline کار غیر استانداردی نیست ولی خب توصیه می کنیم از این روش استفاده نکنید.
استفاده از این روش یه سری مشکلات و معایب برای شما به وجود میاورد که در ادامه به توضیح آن می‌پردازیم.
1) افزایش حجم صفحات
زمانی که از استایل دهی درون خطی استفاده می کنید، حجم فایل های شما تا حد زیادی افزایش پیدا میکند و این موضوع یک نکته منفی برای سایت شما به حساب می‌آید؛ از آنجایی که موتورهای جستجو به سرعت بارگذاری سایت اهمیت زیادی میدهند، سنگین شدن صفحات، تاثیر نامناسبی بر سئوی سایت شما میگذارد.
2) ویرایش سخت کدها
ویرایش کدهایی که به صورت inline استایل دهی شدند، مشکلات زیادی دارد، به خصوص زمانی که تعداد خطوط کدهای شما خیلی بالاست یا چند فایل جدا دارید، پیدا کردن این استایل ها و تغییر اونها یک کار سخت و در برخی موارد حتی غیرممکن میباشد.
3) ایجاد مشکل برای کدهای css خارجی
استایل هایی که به صورت inline به صفحات html داده شدند، نسبت به استایل های خارجی الویت بالاتری دارند و همین موضوع باعث ایجاد برخی مشکلات میشود. مثلا زمانی که میخواید یک سری تگ رو با یک کلاس خاص استایل دهی کنید و یکی از این تگ ها یک استایل درون خطی دارد ممکن است آن استایل درون خطی نظم کدهای شما رو بهم زده و از عمل کردن استایل خارجی جلوگیری کند.

10) استفاده بیش از حد از تگ ‏‎ br

تگ br برای ایجاد فاصله و شکست تنها یک خط در متن مورد استفاده قرار می گیرد . استفاده از تگ br برای ایجاد فاصله هایی بیشتر از یک خط در بین خطوط و یا عناصر دیگر اشتباه است . برای ایجاد فاصله بیشتر از یک خط در بین خطوط می توانید به راحتی از تگهای p و یا خصویت padding و margin و حتی line-height استفاده نمائید .

جمع بندی:

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

منبع:

https://amanjacademy.com/ten-common-mistakes-in-a-html-site-that-we-may-commit/