5 اشتباه تازه کاران در رابطه با HTML

HTML اصل و بنیاد اولیه توسعه وب و طراحی وبسایت است. البته سوء تفاهمی پیش نیاید که یک زبان برنامه نویسی نیست و با آن نمیتوان کارهایی که یک زبان برنامه نویسی مثل C# و یا Python انجام میدهد را انجام دهید HTML یک زبان نشانه گذاری است که به شما اجازه میدهد فندانسیون یک وبسایت را پایه ریزی کنید. در این ساختار المان های یکی صفحه نه با استفاده از دستورات برنامه نوسی که با تگ ها و خصوصیات مربوط به آن ها ایجاد میشوند.

هر برنامه نویس وبی برای استارت کار باید تگ های پایه ای HTML را فرا بگیرد برای ورود به دنیای توسعه و طراحی وب اهمیت بسیار زیادی دارد چرا که «خشت اول گر نهد معمار کج، تا ثریا می رود دیوار کج». به همین دلیل بسیار مهم است که بتوانید در کنار یادگیری مباحث اولیه، سعی کنید که اشتباهات و کارهای نادرستی که ممکن است براساس بی تجربگی انجام می‌دهید را در همین قدم‌های اول تصحیح نموده و با دید بهتری پیش بروید.

در این مطلب از وبسایت ویرگول قصد دارم در رابطه با 5 مورد از این اشتباهات رایج صحبت کنم که تصحیح کردن شان در همین قدم های اولیه به پیشرفت تان کمک میکند تا بتوانید کد های بهینه تر و خوانا تری بنویسید.

1. استفاده از تکنیک Inline styling

توسعه دهندگان زیادی وجود دارند که بدلیل کاهش فایل های CSS پروژه شان از استایل دهی خطی یا inline styling استفاده میکنند. باید بگویم که استفاده کردن از چنین روشی ابدا یک رویکرد مناسب نیست و باعث میشود که شما خطوط قرمز استاندارد بودن و اصول اولیه طراحی را زیر پا بگذارید.

مثال :

<h1 style="color: #1f1f1f">Hello World</h1> رویکرد اشتباه

H1{

Color: #000; رویکرد درست

}


۲. استفاده نکردن از تگ Figure

دسترسی‌پذیری یکی از عوامل مهم برای حرفه‌ای نشان دادن خودتان بعنوان یک توسعه‌دهنده وبسایت است. در این بین یکی از تکنیک‌های بسیار کاربردی برای بالا بردن دسترسی‌پذیری المان‌های تصویر خود، استفاده از تگ Figure است. در حال حاضر چیزی که ما مشاهده می‌کنیم استفاده بسیار کم از این تگ و تنها به کار بردن تگ img بصورت تنهاست. با این کار شما شانس استفاده از Caption را تا حد زیادی از دست می‌دهید.

برای اینکه بتوانید از این تگ بصورت درست استفاده کنید نیاز است که به رویکرد درست زیر توجه نمایید:

رویکرد اشتباه:

<P>This Is An Image.</P><Img Src=&quotImages/Img&quot Alt=&quotAlt Text&quot />

رویکرد درست:

</Figure><Figure><Img Src=&quotImages/Img&quot Alt=&quotAlt Text&quot><Figcaption>This An Image Of A Car.</Figcaption>

رعایت این مورد ارزشمندی طراحی و وبسایتی که شما ایجاد کرده‌اید را در نزد کاربر و همچنین موتورهای جستجوگر بسیار بالا می‌برد.

۳. استفاده نکردن از تگ‌های معنادار یا Semantic Tags

یکی دیگر از اشتباهاتی که بسیاری از افراد مبتدی مرتکب آن می‌شوند استفاده نکردن از تگ‌های معنادار HTML است. این نوع از تگ‌ها به بالا بردن قابلیت خوانایی یا Readability وبسایت کمک بسیار زیادی می‌کنند.

مطمئنا اگر با HTML آشنایی داشته باشید این نوع تگ‌ها را می‌شناسید و نام‌شان را شنیده‌اید. برای مثال Header، Nav، Main، Article و... شامل این دسته از تگ‌ها می‌شود. از طرفی تگ‌هایی مانند Div و Span تگ‌هایی معنادار نبوده و ما تنها برای فرایند ساختاردهی و لایه‌بندی از آن‌ها استفاده می‌کنیم.

بنابراین برای مکان‌هایی که تگ معنادار وجود دارد «مانند سربرگ، پاورقی و...) بجای استفاده از Div از Header و Footer استفاده کنید.

رویکرد اشتباه:

<Div Class=&quotFooter&quot>This Is A Footer</Div><Div Class=&quotHeader&quot>This Is A Header</Div><Div Class=&quotSection&quot>This Is A Section</Div>

رویکرد درست:

<Footer>This Is A Footer</Footer><Header>This Is A Header</Header><Section>This Is A Section</Section>

۴. استفاده از المان‌های Block محور در داخل Inline محور

این نکته را خوب به یاد بسپارید که هیچگاه المان‌های بلوک محور مانند h۱ را نباید در داخل المان‌های Inline محور مانند a قرار دهید. المان‌های بلوک‌محور همان‌هایی هستند که یک Block یا بصورت همه فهم‌تر یک خط کامل را به خود اختصاص می‌دهند. تگ‌های Heading، Div و... جزو این دسته هستند. از طرفی المان‌های Inline المان‌هایی هستند که تنها به اندازه محتوایی که دارند مکان و فضا را اشغال می‌کنند. تگ‌های span، a و... جزو این دسته از المان‌ها هستند.

بنابراین هیچگاه از المان‌های بلوک محور در داخل المان‌های درون-خط محور استفاده نکنید.

رویکرد اشتباه:

</a><a><h2>This is a link</h2>

رویکرد درست:

</h2><h2><a>This is a link</a>


۵. استفاده از تگ‌های Bold و Italic

همانطور که می‌دانید تگ‌های b و i برای bold و italic کردن (کلفت و کج) متون استفاده می‌شوند. با این حال در نظر بگیرید که این تگ‌ها ابدا تگ‌های معناداری نبوده و اصل دسترسی‌پذیری را نقض می‌کند.

برای اینکه متنی را به شکل‌های ذکر شده در بیاورید بهتر است از تگ‌های معنادارتری مانند strong و em استفاده کنید.

رویکرد اشتباه:

<b>This text is bold.</b><i>This text is italic.</i>

رویکرد درست:

<em>This text is bold.</em><strong>This text is italic.</strong>

در پایان

همانطور که مشاهده کردید در این مطلب پنج اشتباه بسیار تکنیکی و مهم را بررسی کردیم که به حرفه‌ای بودن شما در همین قدم‌های اول یادگیری طراحی وبسایت کمک بسیار زیادی می‌کند. این مقاله را حتما با کسانی که در ابتدای راه فراگیری هستند به اشتراک بگذارید و نکات گفته شده را متذکر شوید.