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 ها روی بهینه سازی اثر بسیار مثبتی دارد. استعمال از خصوصیت alt برای تصاویر یک قانون است .برای استاندارد بودن کدهای HTML خود مطلقا این نکته را رعایت کنید . این نکته هنگامی پررنگ تر و اصلی تر می شود که مخاطبان شما از سرعت اینترنت پایین و یا مرورگرهای متنی ( مانند موتورهای جستجو ) به کارگیری میکنند و یا به هر دلیلی این تصویر در مرورگر بازدیدکننده وبسایت شما نمایش داده نشده میباشد .
از این خصوصیت حتیدر هنگامی که توضیحی برای تصویر خود ندارید نیز استفاده فرمایید و مقدار آن را خالی بگذارید .
به کارگیری از تگهای b ،I ،strong ،em برای bold و italic کردن متن بدون در لحاظ تهیه کردن موتورهای جستجو
از b و i در زمانی که نیازی به لبریز مداقه کردن متن درون این تگ ها نیست و صرفا میخواهید شکل ظاهری را تغییر تحول دهید و از strong و em در مواردی که ضمن شکل ظاهری می خواهید درجه التفات متن داخل آن را نیز نسبت به سایر عبارات افزایش دهید به کار گیری فرمائید.
در شرایطیکه شما به seo و سئوی سایت خود برای موتورهای جستجو عنایت می دهید عالی هست از تگ های 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 است که باید در طراحی وب سایت و سئوی وب سایت به آنها دقت شود، دسته ساخت سایت وب کو وب همیشه عملکرد می کند با دقت به آخرین استانداردهای جهانی کدنویسی و اپلیکیشن نویسی سایت های خود را طراحی و بهینه سازی نماید، به جز نکات نام برده نکات بسیار مهم دیگری وجود دارااست که یک طراح می بایست به آن توجه نماید و همت میکنیم در مقالهها دیگر به آن ها اشاره نماییم.
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 ها روی بهینه سازی اثر بسیار مثبتی دارد. استعمال از خصوصیت alt برای تصاویر یک قانون است .برای استاندارد بودن کدهای HTML خود مطلقا این نکته را رعایت کنید . این نکته هنگامی پررنگ تر و اصلی تر می شود که مخاطبان شما از سرعت اینترنت پایین و یا مرورگرهای متنی ( مانند موتورهای جستجو ) به کارگیری میکنند و یا به هر دلیلی این تصویر در مرورگر بازدیدکننده وبسایت شما نمایش داده نشده میباشد .
از این خصوصیت حتیدر هنگامی که توضیحی برای تصویر خود ندارید نیز استفاده فرمایید و مقدار آن را خالی بگذارید .
به کارگیری از تگهای b ،I ،strong ،em برای bold و italic کردن متن بدون در لحاظ تهیه کردن موتورهای جستجو
از b و i در زمانی که نیازی به لبریز مداقه کردن متن درون این تگ ها نیست و صرفا میخواهید شکل ظاهری را تغییر تحول دهید و از strong و em در مواردی که ضمن شکل ظاهری می خواهید درجه التفات متن داخل آن را نیز نسبت به سایر عبارات افزایش دهید به کار گیری فرمائید.
در شرایطیکه شما به seo و سئوی سایت خود برای موتورهای جستجو عنایت می دهید عالی هست از تگ های 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 است که باید در طراحی وب سایت و سئوی وب سایت به آنها دقت شود، دسته ساخت سایت وب کو وب همیشه عملکرد می کند با دقت به آخرین استانداردهای جهانی کدنویسی و اپلیکیشن نویسی سایت های خود را طراحی و بهینه سازی نماید، به جز نکات نام برده نکات بسیار مهم دیگری وجود دارااست که یک طراح می بایست به آن توجه نماید و همت میکنیم در مقالهها دیگر به آن ها اشاره نماییم.
لوکر استودیو و نحوه ایجاد گزارشهای سفارشی و زیبا برای ارائه دادههای سئو به مشتریان و مدیران