بهترین روش ها در HTML جهت بهینه سازی سایت که باید دنبال کرد
بهترین روش ها در HTML جهت بهینه سازی
بیشتر صفحات وب که در اینترنت با آنها روبرو می شوید با HTML ، زبان نشانه گذاری وب در سراسر جهان برای شما ارائه می شود. در این مقاله ، 20 روش برتر را که منجر به نشانه گذاری تمیز و صحیح خواهد شد ، با شما به اشتراک می گذاریم.
- همیشه یک Doctype را اعلام کنید
اعلام یا شناسایی doctype باید اولین چیزی باشد که در اسناد HTML شما وجود دارد. اعلامیه doctype در مورد استانداردهای XHTML به مرورگر می گوید و به شما کمک می کند تا خواندن و نشانه گذاری را به درستی انجام دهید.
من توصیه می کنم از XHTML 1.0 استفاده کنید. برخی از توسعه دهندگان آن را یک انتخاب دشوار می دانند زیرا این استاندارد خاص نسبت به اعلامیه های سست و یا گذرنده کمتر بخشنده است ، اما همچنین تضمین می کند که کد شما طبق آخرین استانداردها کاملاً رعایت می شود.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">2. از تگ عنوان معنی دار استفاده کنید
تگ <title> به ایجاد صفحه وب با معنی و به موتور جستجو کمک می کند. به عنوان مثال ، متن درون تگ <title> در صفحه نتایج موتور جستجوی Google و همچنین در نوار و برگه مرورگر وب کاربر ظاهر می شود.
به عنوان مثال:
<title>Six Revisions - Web Development and Design Information</title>مثال بالا مانند تصویر زیر در صفحه نتایج موتور جستجوی Google ظاهر می کند:
3. از تگ های توصیفی متا استفاده کنید
تگ های متا باعث می شوند صفحه وب شما برای نمایندگان کاربر مانند عنکبوت موتورهای جستجو معنی دار شود.
ویژگی متا توضیحات
ویژگی متا توضیحات rاصلی صفحه وب شما را نشان می دهد (خلاصه آنچه در صفحه وب موجود است). برای هر صفحه وب ، باید یک کنسول و خلاصه مربوطه را در برچسب توضیحات متا قرار دهید.
به عنوان مثال:
<meta name="description" content="Six Revisions is a blog that shares useful information about web development and design, dedicated to people who build websites." />کد بال ادر صفحه نتایج موتور جستجوی Google به شرح زیر نمایش داده می شود:
سعی نکنید توضیحات خود را با کلمات و عبارات مکرر اسپم کنید زیرا موتورهای جستجو به اندازه کافی هوشمند هستند که آن را تشخیص دهند. درعوض ، فقط سعی کنید در توضیح هدف صفحه وب خود ساده و سر راست باشید.
ویژگی کلمات کلیدی متا
<meta name="keywords" content="web design, web development" />ویژگی کلمات کلیدی متا حاوی یک لیست جدا از کاما از کلمات و عبارات کلیدی است که به صفحه وب شما مربوط می شود. این کلمات کلیدی باعث می شود صفحه وب شما حتی پر معنی تر شود.
باز هم درست مانند ویژگی توصیف متا ، از تکرار کلمات و عبارات خودداری کنید. فقط چند کلمه ذکر کنید که به طور مناسب صفحه وب شما را توصیف و طبقه بندی می کند.
4- از Divs استفاده کنید تا طرح خود را به بخش های اصلی تقسیم کنید
به عنوان اولین گام برای ساخت طراحی وب سایت ، صفحه وب خود را به بخش های اصلی تقسیم کنید.
انجام این کار از ابتدا باعث تشدید کدی تمیز و خوب می شود. همچنین به شما کمک می کند تا از سردرگمی و استفاده بیش از حد از divs خودداری کنید ، به خصوص اگر در حال نوشتن علائم پیچیده و طولانی هستید.
5- محتوا را از ارائه جدا کنید
HTML محتوای شماست CSS ارائه بصری مطالب شما را ارائه می دهد. هرگز هر دو را با هم مخلوط نکنید.
از سبک های درون خطی در HTML استفاده نکنید. همیشه یک فایل CSS جداگانه برای سبک های خود ایجاد کنید. این به شما و توسعه دهندگان آینده کمک خواهد کرد که ممکن است روی کد شما کار کنند ، تغییراتی سریع در طراحی ایجاد کنند و محتوای شما را آسان تر برای عوامل کاربر هضم کنند.
تمرین بد: سبک های درون خطی
در زیر می توانید یک عنصر پاراگراف را مشاهده کنید که با استفاده از ویژگی سبک طراحی شده است. این کار خواهد کرد ، اما این عمل بد است.
<p style="color:#abc; font-size:14px; font-family:arial,sans-serif;">I hate to separate my content from presentation</p>6. CSS را کم و زیاد کنید
یک وب سایت ساده معمولاً دارای یک فایل اصلی CSS و احتمالاً چند مورد دیگر برای مواردی مانند تنظیم مجدد CSS و اصلاحات مربوط به مرورگر است.
اما هر فایل CSS باید درخواست HTTP کند ، که زمان بارگذاری وب سایت را کند می کند.
راه حل این مشکل این است که تمام کد خود را به حداقل برسانید (از کاراکترهای غیر ضروری مانند فضاها ، خطوط جدید و برگه ها استفاده نکنید) و سعی کنید فایلهایی را که می توانند در یک پرونده ترکیب شوند ، متحد کنید. این بار وب سایت شما را بهبود می بخشد.
مشکلی که در این رویکرد وجود دارد این است که شما باید "ناخوشایند" شوید (زیرا خواندن کد بدون شکل دشوار است) و سپس هر بار که بخواهید کد خود را به روز کنید ، فرآیند کوچک سازی را دوباره مرتب کنید. بنابراین بهتر است این کار را در پایان چرخه تولید خود انجام دهید.
ابزارهای آنلاین برای به حداقل رساندن و بهینه سازی CSS را می توان در این لیست از بهینه سازهای CSS یافت.
همچنین ، همیشه لینک مرجعstylesheet خود را درون برچسب های <head> </head> قرار دهید زیرا به شما کمک می کند تا هنگام بارگیری ، صفحه وب شما احساس پاسخگویی بیشتری کند.
7. استفاده از جاوا اسکریپ را به حداقل برسانید
مانند CSS ، هرگز از JavaScript درون خطی استفاده نکنید و سعی کنید کتابخانه های جاوا اسکریپت خود را به حداقل رسانده و متحد کنید تا تعداد درخواست های HTTP را که باید برای تولید یکی از صفحات وب خود ایجاد کنید ، کاهش دهید.
اما بر خلاف CSS ، یک چیز واقعاً بد وجود دارد: مرورگرها اجازه بارگیری موازی را نمی دهند ، این بدان معناست که مرورگر نمی تواند در حالی که جاوا اسکریپت را بارگیری می کند ، هر چیزی را بارگیری کند ، در نتیجه باعث می شود صفحه به آرامی بارگیری شود.
بنابراین ، بهترین استراتژی در اینجا بارگذاری جاوا اسکریپت آخر است (یعنی بعد از بارگذاری CSS شما). برای انجام این کار ، جاواسکریپت را در پایین سند HTML خود در صورت امکان قرار دهید. بهترین تمرین توصیه می کند قبل از برچسب <body> این کار را درست انجام دهید.
به عنوان مثال:
8- از عناصر عنوان به صورت خردمندانه استفاده کنید
یاد بگیرید که از عناصر <h1> تا <h6> استفاده کنید تا سلسله مراتب محتوای HTML خود را بیان کنید. این کمک می کند تا محتوای شما برای نرم افزارهای خواندن صفحه نمایش و موتورهای جستجو و سایر نمایندگان کاربر معنا پیدا کند.
<h1>This is the topmost heading</h1>
<h2>This is a sub-heading underneath the topmost heading.</h2>
<h3>This is a sub-heading underneath the h2 heading.</h3>برای وبلاگ ها ، واقعاً توصیه می شود به جای نام سایت از عنصر <h1> برای عنوان پست وبلاگ استفاده کنید زیرا این مهمترین چیز برای موتورهای جستجو است.
مثال کد وردپرس:
<h1 class="entry-title"><?php the_title(); ?></h1>9. از عنصر HTML مناسب در مکان مناسب استفاده کنید
در مورد همه عناصر HTML موجود بیاموزید و از آنها به درستی برای یک ساختار محتوای معنایی و معنی دار استفاده کنید.
به جای <i> یا <b> (که مستهلک شده اند) از <em> برای تأکید و <strong> برای تاکید سنگین استفاده کنید.
به عنوان مثال:
<em>emphasized text</em>
<strong>strongly emphasized text</strong>برای پاراگرافها از <p> استفاده کنید. برای اضافه کردن خط جدید بین پاراگرافها از <br /> استفاده نکنید. به جای آن از خصوصیات حاشیه CSS و / یا بالشتک استفاده کنید.
برای مجموعه ای از عناصر مرتبط ، از موارد زیر استفاده کنید:
- <ul> (لیست های نامرتب) وقتی ترتیب موارد لیست مهم نیست
- <ol> (لیست های سفارش داده شده) هنگام سفارش لیست موارد مهم است
- <dl> (لیست های تعریف) برای مورد / تعریف جفت ها
از <blockquote> برای اهداف تورفتگی استفاده نکنید. هنگام نقل قول متن ، از آن استفاده کنید.
10. از Div برای همه چیز استفاده نکنید
گاهی اوقات توسعه دهندگان تگ های <div> در اطراف تگ های <div> های متعدد که حاوی تگ های <div> های بیشتری هستند ، می پوشند و کوهی از شکافها ایجاد می کنند.
براساس آخرین پیش نویس مشخصات W3C HTML ، یک <div> یک عنصر بی معنی است که باید "به عنوان عنصر راه حل آخر استفاده شود ، زیرا وقتی هیچ عنصر دیگری مناسب نباشد" استفاده می شود.
اما بسیاری از آنها حتی برای موارد مهمی مانند نمایش عناصر درون خطی به عنوان عناصر بلوک (به جای صفحه نمایش: بلوک ، خاصیت CSS) از آن استفاده می کنند.
11. برای فهرست یابی از یک لیست بدون کنترل (<ul>) استفاده کنید
ناوبری جنبه بسیار مهمی در طراحی وب سایت دارد و عنصر <ul> همراه با CSS منوهای ناوبری شما را معنادار می کنند (زیرا ، به هر حال ، یک منوی پیمایش لیستی از پیوندها است) و همچنین زیبا است.
همچنین ، طبق کنوانسیون ، یک لیست نامرتب برای منوی پیمایش شما پذیرش علامت گذاری بوده است.
نمونه ای از لیست بدون کنترل
<ul id="main_nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>CSS برای Style لیست نامرتب در نوارناوبری افقی
#main_nav { position:absolute; right:30px; top:40px;}
#main_nav li { float:left; margin-left:2px; }
#main_nav li a{ font-size:16px; color:#fff; text-decoration:none; padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;}
#main_nav li a.active,
#main_nav li a:hover{ background-color:#0b86cb; }خروجی کد بالا تصویر زیر است:
12. تگ های خود را ببندید
بستن تمام تگ های شما مشخصات W3C است. ممکن است برخی از مرورگرها صفحات شما را به درستی ارائه دهند (در حالت Quirks) ، اما نبستن تگ های شما مطابق با استاندارد نامعتبر است.
به عنوان مثال:
<div id="test">
<img src="images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>13. از Markup Case Low استفاده کنید
این یک روش استاندارد در صنعت است که نشانه گذاری های خود را به صورت lower-cased داشته باشید. با حروف درشت نوشتن در نشانه گذاری شما کار خواهد کرد و احتمالاً تاثیری در نحوه ارائه صفحات وب شما نخواهد داشت ، اما بر خوانایی کد تأثیر می گذارد.
کد نادرست:
<DIV>
<IMG SRC="images/sample.jpg" alt="sample"/>
<A HREF="#" TITLE="TEST">test</A>
<P>some sample text</P>
</DIV>کد صحیح:
<div id="test">
<img src="images/sample.jpg" alt="sample" />
<a href="#" title="test">test</a>
<p>some sample text </p>
</div>14. از ویژگی های Alt برای تصاویر استفاده کنید
استفاده از یک ویژگی alt معنی دار با عناصر <img> برای نوشتن کد معتبر و معنایی یک ضرورت است.
کد نادرست:
<img id="logo" src="images/bgr_logo.png"/>
<!-- has an alt attribute, which will validate, but alt value is meaningless -->
<img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" />کد صحیح:
<img id="logo" src="images/bgr_logo.png" alt="Six Revisions Logo" />15. از ویژگی های عنوان همراه با لینک استفاده کنید (در صورت لزوم)
استفاده از یک ویژگی عنوان در عناصر لنگر شما باعث می شود دسترسی به روش صحیح بهبود یابد.
درک این نکته ضروری است که از ویژگی عنوان برای افزایش معنی تگ لنگر استفاده می شود.
کد نادرست:
<!-- Redundant title attribute -->
<a href="http://blog.com/all-articles" title="Click Here">Click here.</a>هنگامی که یک خواننده صفحه نمایش تگ لنگر را می خواند ، شنونده باید دو بار به همان متن گوش کند. بدتر این است که توضیح نمی دهد صفحه مربوط به چیست.
اگر فقط متن لنگر را تکرار می کنید یا قصد ندارید توصیف صفحه لینک داده شود ، بهتر است به هیچ عنوان از عنوانی استفاده نکنید.
کد صحیح:
<a href="http://blog.com/all-articles" title="A list of all articles.">Click here.</a>16. از Fieldset و Labels در فرم وب استفاده کنید
از عنصر <label> برای تگ فیلدهای ورودی استفاده کنید. با استفاده از <fieldset> قسمت های ورودی را به مجموعه های منطقی تقسیم کنید. با استفاده از <legend> یک <fieldset> را بنویسید. همه این موارد باعث می شود فرم های شما برای کاربران قابل درک تر شود و کیفیت کد شما بهبود یابد.
به عنوان مثال:
<fieldset>
<legend>Personal Details</legend>
<label for="name">name</label><input type="text" id="name" name="name" />
<label for="email">email</label><input type="text" id="email" name="email" />
<label for="subject">subject</label><input type="text" id="subject" name="subject" />
<label for="message" >message</label><textarea rows="10" cols="20" id="message" name="message" ></textarea>
</fieldset>17. استفاده از IE ماژولار
اگر در صفحات وب خود مشکلی دارید می توانید از نظرات مشروط برای هدف قرار دادن اینترنت اکسپلورر استفاده کنید.
مثالی از کد IE7:
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]-->مثالی از کد IE6:
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie-6.css" media="all">
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#logo');
</script>
<![endif]-->با این حال ، سعی کنید اصلاحات خود را به صورت اثبات شده در آینده انجام دهید تا وقتی نسخه های قدیمی تر اینترنت اکسپلورر دیگر نیازی به پشتیبانی نداشت ، فقط کافی است سایت خود را در یک مکان به روز کنید.
18. کد خود را اعتبار دهید
اعتبار سنجی نباید ارزیابی نهایی کار خوب و کار بد باشد. فقط به این دلیل که اعتبار شما تأیید شود به معنای خودکار به معنای کد خوب آن نیست. و برعکس ، اثری که به طور کامل تأیید نشود ، به معنای بد بودن آن نیست (اگر به من اعتقاد ندارید ، اعتبار خودکار Google یا Yahoo! را امتحان کنید)
اما خدمات اعتبار سنجی خودکار مانند سرویس تأیید اعتبار رایگان W3C می تواند یک اشکال زدایی مفید باشد که به شما در شناسایی خطاهای رندر کمک می کند.
هنگام نوشتن HTML ، عادت کنید که به طور مکرر اعتبار دهید. این کار پس از اتمام کار طولانی تر ، شما را از مشکلاتی که دشوارتر برای شناسایی (یا تغییر مجدد)می باشد ، نجات می دهد.
19. نوشتن کد به طور مداوم
یک پایه کد کاملاً نوشته شده و کاملاً تمیز نشانگر حرفه ای بودن شما و همچنین توجه شما به سایر افرادی است که ممکن است نیاز به کار بر روی کد شما داشته باشند.
از ابتدا به طور صحیح نشانه گذاری تمیز بنویسید. این قابلیت خوانایی کار شما را افزایش می دهد.
20. از اظهارنظرهای بیش از حد خودداری کنید
در ضمن مستند سازی کد خود ، هدف این است که درک آن راحت تر شود ، بنابراین اظهار نظر در مورد منطق کد شما چیز خوبی برای برنامه نویسی زبانهایی مانند PHP ، Java و C # است.
اما نشانه گذاری بسیار توضیحی است و اظهار نظر در مورد هر خط کد در HTML / XHTML معنی ندارد. اگر متوجه شدید که HTML خود را زیاد توضیح می دهد که چه اتفاقی می افتد ، باید کار خود را برای معنایی و کنوانسیون های نامگذاری مناسب مرور کنید.