در این مقاله لیستی از رایج ترین اشتباهاتی که هنگام پیاده سازی صفحه HTML رخ میدهند را بررسی کرده ایم.
1. المان های بلاک را داخل المان های اینلاین قرار ندهید
المان های HTML بصورت پیشفرض یا inline هستند و یا block. المان های بلاک، مانند دیوها و پاراگراف ها، ساختار سند را ایجاد میکنند. المان های اینلاین داخل المان های بلاک قرار میگیرند، مانند تگ span. بنابراین نمیتوانید المان های بلاک را داخل المان های اینلاین قرار دهید.
مطالعه بیشتر: المان های بلاک (block) و اینلاین (inline) در زبان HTML
غلط
<strong><h2>Block inside Inline</h2></strong>
درست
<h2><strong>Inline inside Block</strong></h2>
2. همواره اتریبیوت alt را برای تگ img استفاده کنید
اتریبیوت alt باید برای تگ img استفاده شود. این اتریبیوت وظیفه دارد محتوای عکس را توضیح دهد. این اتریبیوت به کاربرانی که از اسکرین ریدر استفاده میکنند و یا کاربرانی که اینترنت ضعیف دارند کمک میکند که متوجه شوند که آیا تصویر مهم است یا نه. همچنین به کرولرهای وب کمک میکند تا محتوای صفحه شما را بهتر ایندکس کنند. اگر تصاویر شما تنها برای نمایش هستند اتریبیوت alt را به این صورت خالی بگذارید: alt=””
غلط
<img src="images/logo.png" />
درست
<img src="/images/logo.png" alt="کاتبان" />
3. برای نمایش لیست هرگز از تگ بریک یا br استفاده نکنید
اگر شما میخواهید لیست شما بولت یا عدد داشته باشد، هرگز از br استفاده نکنید. برای اینکار از لیست غیر ترتیبی ul یا لیست ترتیبی ol استفاده کنید.
غلط
1. Steve Jobs <br /> 2. Bill Gates <br/> 3. Linus Torvalds
درست
<ol> <li>Steve Jobs</li> <li>Bill Gates</li> <li>Linus Torvalds</li> </ol>
4. برای بلد و آیتالیک نشان دادن کلمات از تگ های bو i استفاده نکنید
تگ های bو i برای بلد و آیتالیک نشان دادن متن استفاده میشوند ولی کارکرد معنایی متفاوتی دارند. برای بلد یا آیتالیک نشان دادن متن بهتر است از CSS استفاده شود و اگر کلمات بار معنایی داشته باشند برای این کار از تگ های strongو em استفاده کنید.
مطالعه بیشتر: تگ b | آموزش HTML
مطالعه بیشتر: تگ strong | آموزش HTML
مطالعه بیشتر: تگ i | آموزش HTML
مطالعه بیشتر: تگ em | آموزش HTML
5. هرگز از چند لاین بریک یا br پشت سرهم استفاده نکنید
تگ لاین بریک یا br تنها برای یکبار استفاده میشود و باید برای بخشهایی که واقعا بخشی از محتوا هستند استفاده شود مانند آدرس یا شعر و نباید گروه های موضوعی را درون یک پاراگراف جدا کند.
غلط
This is a line <br /> <br /> This is another line
درست
<p>This is a line</p> <p>This is another line</p>
6. از استایل دادن بصورت اینلاین اجتناب کنید
این موضوع را حتما بارها شنیده اید. نکته اصلی HTML و CSS این است که بحث ساختار و استایل را از هم جدا کنند، بنابراین هرگز استایل دهی را مستقیما وارد HTML نکنید.
غلط
<h2 style="color: red;">Wrong</h2>
درست
HTML => <h2 class="red">Right</h2> CSS => h2.red { color: red; }
7. هرگز با اتریبیوت border در HTML آنرا اضافه (یا حذف) نکنید
اتریبیوت border خاصیت نمایشی دارد و این کار باید به CSS واگذار شود. بنابراین نباید این اتریبیوت در HTML آورده شود.
غلط
<img src="/images/logo.png" alt="کاتبان" border="0" />
درست
HTML =>
<img class="no-border" src="/images/logo.png" alt="کاتبان" />
CSS =>
img.no-border
{
border: none;
}
8. هرگز از blink یا marquee استفاده نکنید
این تگها هرگز جزء استانداردهای کنسرسیوم W3C نبودند. سوای این موضوع، استفاده از آنها زشت و غیر تاثیرگذار است. هرچند مرورگرهای مدرن از این تگها پشتیبانی میکنند، اما ممکن است در آینده اینکار را انجام ندهند.
9. از المانهای منسوخ استفاده نکنید
تگها و اتریبیوتهای HTML وجود دارند که توسط کنسرسیوم W3C منسوخ شده معرفی شده اند. هرچند مرورگرهای مدن هنوز از آنها پشتیبانی میکنند ولی ممکن است در آینده اینکار را انجام ندهند.
مطالعه بیشتر: تگ ها و اتریبیوت های ممنوع و منسوخ شده در HTML
10. هرگز فراموش نکنید که از DOCTYPE استفاده کنید.
DOCTYPE نشان میدهد که از چه نوع HTML استفاده میکنید. اگر DOCTYPE نوشته نشود، شما نمیدانید که کد شما معتبر است یا نه. علاوه براین مرورگر برای سند شما DOCTYPE فرض میکند، و ممکن است آنطوری که شما در نظر داشتید کار کند. DOCTYPE های HTML4.01 و XHTM1.0 طولانی هستند، بنابراین اگر خواستید به آن زبان و یا حتی به زبان HTML5 بنویسید میتوانید از یک تمپلیت خالی استفاده کنید. به این ترتیب دیگر نیازی به حفظ کردن آن ندارید.
مطالعه بیشتر: DOCTYPE چیست
درنهایت، میتوانید HTML و CSS خود را به صورت آنلاین ارزیابی کنید تا اگر خطایی داشت از طریق سایت های زیر آنرا رفع کنید:
به نقل از: Tips and Tricks HQ