نویسنده سایتاکثر صفحات وب که با آن‌ها روبرو می‌‌شوید، از طریق HTML (زبان نشانهگذاری وب جهانی) به شما ارائه می‌شوند. در این مقاله، 20 روش برتر HTML را به اشتراک خواهم گذاشت که موجب نشانهگذاری تمیز و صحیح میشود.
داشتن ساختار مناسب برای HTML به دستگاه‌های مختلف اجازه میدهد تا محتوای شما را به درستی نمایش دهند.
این بدین معنی است که قالب‌بندی مناسب برای HTML میتواند، تفاوتی بین یک تجربه لذت‌بخش یا یک پرش سریع از سایت شما، برای کاربر ایجاد کند.
HTML5 پنجمین نسخه HTML است و مدیریت محتوای وب و برنامه‌های وب بهتری را ارائه میدهد. نکات ذکر شده در هر دو HTML و HTML5 اعمال میشود.
1. همیشه یک DocType اعلام کنید.
اعلان doctype باید اولین محتوا در صفحه HTML شما باشد. اعلان doctype به مرورگر در مورد استانداردهای XHTML که استفاده میکنید، می‌گوید و به آن کمک میکند نشانهگذاری شما را به درستی بخواند و ارائه دهد(من استفاده از XHTML 1.0 strict doctype را توصیه می‌کنم.).
<“DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd!>
2. از title tags های معنی دار استفاده کنید.
تگ <title> به شما کمک میکند تا صفحه وب معنی‌دارتر باشد و برای موتورهای جستجو سازگارتر شود. به عنوان مثال، متن داخل تگ <title> در صفحه نتایج جستجوی Google و همچنین در نوار مرورگر وبِ کاربر ظاهر میشود. مثال زیر را در نظر بگیرید:
<title>Six Revisions – Web Development and Design Information</title>
مثال بالا مانند تصویر زیر در صفحه نتایج موتور جستجوی گوگل ظاهر میشود:
3. از meta tag های توصیفی استفاده کنید.
تگ <meta> را در یک صفحه HTML تعریف میکنند. تگهای <meta> همیشه درون عنصر <head> قرار می‌گیرند و معمولاً برای تعیین، توضیحات صفحه، کلمات کلیدی، نویسنده، سند و تنظیمات viewport (ناحیه قابل مشاهده کاربر از یک صفحه وب) استفاده می‌شوند.
ویژگی <meta> حاوی لیستی از کلمات و عبارات کلیدی جدا شده با کاما است که به صفحه وب شما مربوط میشود. این کلمات کلیدی صفحه وب شما را معنادارتر میکنند:
<meta name=”keywords” content=”web design, web development” />
در صفحه نتایج جستجوی گوگل به صورت زیر نمایش داده می شود:
شما میتوانید ابعاد تگ <meta> را با استفاده از کلمات کلیدی مخصوص HTML تعیین کنید!
سعی نکنید توضیحات خود را با کلمات و عبارات تکراری spam کنید! زیرا موتورهای جستجو برای تشخیص آن به اندازه کافی هوشمند هستند.
در عوض، فقط سعی کنید در توضیح هدف صفحه وب خود، ساده و کوتاه توضیح دهید!
4. از تگ <div> برای تقسیم‌بندی چیدمان خود به بخش‌های اصلی استفاده کنید.
تقسیم صفحه وب خود به بخش‌های اصلی را به عنوان اولین گام در ساخت یک طراحی وب سایت در نظر بگیرید. انجام این کار از همان ابتدا نوع کدنویسی شما را ارتقا میدهد. همچنین به شما کمک میکند از سردرگمی و استفاده بیش از حد از div جلوگیری کنید، به خصوص اگر در حال نوشتن نشانهگذاری پیچیده و طولانی هستید.
5. جدا کردن محتوا از نمایش:
HTML محتوای شماست و CSS (Cascading Style Sheets) برای نوع نمایش محتوا به کار میرود. هیچ گاه هر دو را باهم ترکیب نکنید.(سعی کنید از internal style یا external style استفاده کنید.)
در کد زیر، شما میتوانید مثالی نادرست را مشاهده کنید که با استفاده از inline style مدل‌سازی شده است:
مثال نادرست:
<“;p style=”color:#abc; font-size:14px; font-family:arial,sans-serif>
I hate to separate my content from presentation
<p/>
6. Minify ،Unify در CSS:
یک وب‌سایت ساده معمولاً یک فایل CSS اصلی و چند فایل دیگر برای مواردی مانند تنظیم مجدد CSS و اصلاحات خاص مرورگر دارد. اما هر فایل CSS باید یک درخواست HTTP داشته باشد که، زمان بارگذاری، وب‌سایت را کند میکند. یک راه‌حل برای این مشکل این است که، تمام کد‌های خود را کوچک کنید (حذف کاراکتر‌های غیر‌ضروری مانند فاصله، خطوط جدید و برگه‌ها) و سعی کنید فایل‌هایی را که می‌توانند در یک فایل ترکیب شوند، یکپارچه کنید.
این امر زمان بارگذاری وب‌سایت شما را بهبود می‌بخشد. مشکلی که در این روش وجود دارد این است که شما باید “Unminify” را انجام دهید (زیرا خواندن کد‌های فرمت نشده سخت است) و سپس هر بار که نیاز به به‌روز‌رسانی کد خود دارید، فرآیند Minify را دوباره انجام دهید. بنابراین بهتر است این کار را در پایان چرخه تولید خود انجام دهید.
همچنین، همیشه لینک مرجع Stylesheet خود را در تگهای <head></head> قرار دهید زیرا به صفحه وب شما کمک میکند هنگام بارگذاری واکنش‌‌پذیری بیشتری داشته باشد.
در مثال زیر مشاهده میکنید:
<head>
<“link rel=”stylesheet” href=”style/media.css>
<head/>
7. Minify ،Unify در javascript:
مانند CSS، در جاوااسکریپت نیز از حالت inline استفاده نکنید و سعی کنید کتابخانه‌های جاوااسکریپت خود را کوچک و یکپارچه کنید تا تعداد درخواست‌های HTTP را که برای ایجاد یکی از صفحات وب نیاز دارید، کاهش دهید.
اما برخلاف CSS، یک مشکل که در مورد فایل‌‌های جاوااسکریپت خارجی وجود دارد: مرورگر‌ها اجازه دانلود موازی را نمی‌‌دهند، به این معنی است که مرورگر نمی‌‌‌تواند فایلی را در حین دانلود جاوااسکریپت دانلود کند، و در نتیجه باعث میشود صفحه احساس کند در حال بار‌گیریِ کند است. بنابراین، بهترین روش در اینجا این است که جاوااسکریپت را در آخر بار‌گیری کنید (یعنی پس از بار‌گیری CSS). در صورت امکان، برای انجام این کار، می‌بایست جاوااسکریپت را در پایین فایل HTML خود قرار دهید. شما میتوانید مثال درستی را مشاهده کنید، که بار‌گیری جاوااسکریپت، قبل از بسته شدن تگ <body> انجام شده است:
مثال:
8. از عنصر <head> هوشمندانه استفاده کنید.
یاد بگیرید که از عناصر <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> در عوض نام سایت، برای عنوان پست وبلاگ استفاده کنید. زیرا از مهمترین عوامل برای موتورهای جستجو است.
9. از عنصر مناسب در مکان مناسب استفاده کنید.
درباره تمام عناصر موجود در HTML بیاموزید و از آن‌ها برای هر ساختار محتوایی معنادار به درستی استفاده کنید.
مثال:
تگ <p>: نوشتن پاراگراف
تگ<em>: تاکید
تگ <strong>: تاکید زیاد
تگ <ul>: لیست های نامرتب (زمانی که ترتیب مهم نیست )
تگ <ol>: لیست های مرتب (زمانی که ترتیب اهمیت دارد )
تگ <dl>: تعریف فهرست
نکته: برای تورفتگی متن از تگ <blockquote> استفاده نکنید. به جای آن میتوانید، افزونه‌هایی را به کار بگیرید که متن یا پاراگراف شما را خوانا میکند.(مثلا در محیط VS code میتوانید با استفاده از justify متن خود را مرتب کنید.)
نکته: برای افزودن یک خط جدید بین پاراگراف‌ها از تگ <br> استفاده نکنید؛ به جای آن از ویژگی‌های margin و یا padding در CSS استفاده کنید.
10. برای هر چیز از <div> استفاده نکنید.
گاهی اوقات برنامه‌نویسان تگهای <div> را در اطراف چندین تگ <div> که حاوی تگهای <div> بیشتری هستند، قرار می‌دهند و کوهی از div را ایجاد میکنند. بر اساس آخرین طرح یا ادعا (در w3schooh.com)، <div>یک عنصر بی‌معنی است که باید از آن به عنوان آخرین گزینه استفاده شود (زمانی که هیچ عنصر دیگری مناسب نیست.). اما بسیاری از آن برای حتی کار‌های ساده که با تگهای دیگری امکان‌پذیر است، استفاده میکنند. (مانند استفاده از div به جای “;display:block” (یک ویژگی CSS) برای ستونی شدن عنصر) با استفاده اندک از ایجاد کوه‌های div خودداری کنید.
11. برای منوی سایت از لیست نامرتب (<ul>) استفاده کنید.
ساخت منو یکی از جنبه‌های مهم در طراحی سایت است. عنصر <ul> که با CSS ترکیب شده، منوی شما را زیبا و مفهومی میکند (زیرا در نهایت هر منو، مجموعه‌ای از لینک‌های نامرتب خواهد بود.).همچنین طبق قرارداد، در این نشانهگذاری انتظار میرود که هر منو یک لیست نامرتب باشد (ul>: unorder list>).
نمونه‌ای از لیست نامرتب:
<“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:
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. از علامت گذاری با حروف کوچک استفاده کنید.
این یک روش استاندارد صنعتی است، که نشانهگذاری خود را با حروف کوچک انجام دهید. استفاده از حروف بزرگ در نشانه گذاری شما کارساز خواهد بود و احتمالاً بر نحوه رندر شدن صفحات وب شما تأثیری نخواهد داشت، اما بر خوانایی کد تأثیر می گذارد.
مثال نادرست:
<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”/>
مثال درست:
</”img id=”logo” src=”images/bgr_logo.png” alt=”Six Revisions Logo>
15. از ویژگی Title همراه یک لینک (در صورت نیاز ) استفاده کنید:
Title، یکی از ویژگی‌هایی است که در عنصر Anchor (<a>) وجود دارد و در صورت استفاده صحیح، دسترسی را بهبود می‌بخشد. درک این نکته مهم است که از ویژگی title باید برای افزایش معنای تگ <a> استفاده شود.
مثال نادرست:
<a href=”http://blog.com/all-articles” title=”Click Here”>Click here.</a>
هنگامی که یک صفحهخوان تگ <a> را می‌‌خواند و متن title و عنصر anchore (تگ <a>) یکسان باشد، شنونده باید به همان متن دو بار گوش دهد. بدتر از آن ، این است که توضیح نمی‌دهد صفحه‌ای که به آن لینک شده است چیست.
اگر فقط متن anchore را تکرار میکنید و یا نمی‌‌خواهید صفحه در حال لینک را توصیف کنید، بهتر است اصلاً از عنوان استفاده نکنید.
مثال درست:
<a href=”http://blog.com/all-articles” title=”A list of all articles.”>Click here.</a>
16. از FEILDSET و LABLES در صفحه وب استفاده کنید.
از عنصر <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. از Modular IE Fixes استفاده کنید.
اگر در زمینه طراحی وب سایت فعالیت میکنید، حتما برای شما هم پیش آمده که کد‌های CSS در مرورگر‌های مختلف و مخصوصا مرورگر اینترنت اکسپلورر به‌درستی نمایش داده نمی‌شوند!
مرورگر‌های Firefox و Chrome بیشترین انعطاف را از خود برای کد‌های CSS نشان می‌دهند. در بعضی موارد که این کد‌ها با این مرورگر‌ها به درستی کار نمی‌کنند، طراحان وب با نوشتن یک پیشوند قبل از کد‌ها، به نتیجه مطلوب خود می‌رسند.
در این روش توسط تکه کدی در قسمت head مشخص می‌کنیم که اگر مرورگر کاربر IE بود از فایل CSS خاص خودش استایل بگیرد.
در حقیقت در این روش یه فایل CSS جداگانه برای نسخه مورد نظر IE نوشته و آن را توسط شرط در قسمت head وب‌سایت قرار می‌دهیم.
در اینجا فایل CSS مخصوص مرورگر اینترنت اکسپلورر را درون شرط فراخوانی کردیم.
مثال:
<[if IE 7]–!>
<“link rel=”stylesheet” href=”css/ie-7.css” media=”all>
<–[endif]!>
مثال:
<[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. کد خود را تایید کنید.
اعتبارسنجی، نباید ارزیابی نهایی کار خوب در مقابل کار بد باشد.
فقط به این دلیل که کار شما تأیید میشود به این معنی نیست که کد خوبی است. و برعکس، کاری که به طور کامل اعتبار سنجی ندارد، به این معنی نیست که بد است (اگر به من باور ندارید، اعتبارسنجی خودکار گوگل یا یاهو را امتحان کنید!). اما سرویس‌‌های اعتبارسنجی خودکار مانند سرویس اعتبارسنجی رایگان W3C میتواند یک اشکال‌‌زدایی مفید باشد که به شما در شناسایی خطا‌های رندر کمک میکند. هنگام نوشتن HTML، عادت به اعتبارسنجی مکرر داشته باشید. این شما را از مشکلاتی که مشخص کردن آن‌ها (یا انجام مجدد) دشوار‌تر است، پس از تکمیل و طولانی‌تر شدن کار، نجات میدهد.
19. کد‌هایی با فرمت پیوسته بنویسید.
یک پایه کد تمیز نوشته شده و دارای تورفتگی، حرفه‌ای بودن شما و همچنین رسیدگی و دقت شما را به سایر افرادی که ممکن است نیاز به کار روی کد شما داشته باشند نشان میدهد. از ابتدا نشانهگذاری تمیز با تورفتگی مناسب بنویسید. خوانایی کار شما را افزایش میدهد.
20. در کامنت‌گذاری افراط نکنید.
هنگام کدنویسی، هدف آسان‌‌تر کردن درک آن است، بنابراین کامنت کردن منطق کد برای زبان‌‌های برنامه‌‌نویسی مانند PHP، جاوا و سی‌شارپ چیز خوبی است. اما نشانهگذاری واضح است و کامنت‌کردن هر خط کد در HTML/XHTML معنی ندارد. اگر متوجه شدید که HTML خود را زیاد برای توضیح آنچه در حال وقوع است نظر می‌دهید، باید کار خود را از نظر معنایی و قرارداد‌های نامگذاری مناسب بررسی کنید.
آیا با این نکته های HTML هدفمند شده اید؟
همانطور که به ایجاد تغییرات در HTML خود فکر می کنید، ممکن است کمی احساس ناراحتی کنید.
