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

‌HTML اصل و بنیاد اولیه توسعه وب و طراحی وبسایت است. البته این اشتباه صورت نگیرد که HTML یک زبان برنامه‌نویسی نیست و با آن نمی‌توان کارهایی که یک زبان برنامه‌نویسی مانند PHP و یا PYTHON انجام می‌دهد را انجام دهید. HTML یک زبان نشانه‌گذاری است که به شما اجازه می‌دهد تا فنداسیون (Foundation) یک وبسایت را پایه‌ریزی کنید. در این ساختار المان‌های یک صفحه نه با استفاده از دستورات برنامه‌نویسی که با تگ‌ها و خصوصیات مربوط به آن ها ایجاد می‌شود.

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

در این مطلب از وبسایت آموزشی راکت قصد داریم در رابطه ۵ مورد از این اشتباهات صحبت کنیم که تصحیح کردن‌شان در همین قدم‌های اولیه به پیشرفت‌تان کند.

پیش از آنکه وارد بخش‌های بعدی این مطلب شوید به شما پیشنهاد می‌کنم در صورت آشنایی نداشتن با HTML دوره آموزشی رایگان HTML را مشاهده کنید.

۱. استفاده از تکنیک Inline Styling

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

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

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

<H1 Style="Color: #000">Hello World</H1>

رویکرد درست:

H1{
 Color: #000;
}

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

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

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

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

<Img Src="Images/Img" Alt="Alt Text" />
<P>This Is An Image.</P>

رویکرد درست:

<Figure>
  <Img Src="Images/Img" Alt="Alt Text">
  <Figcaption>This An Image Of A Car.</Figcaption>
</Figure>

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

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

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

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

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

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

<Div Class="Header">This Is A Header</Div>
<Div Class="Section">This Is A Section</Div>
<Div Class="Footer">This Is A Footer</Div>

رویکرد درست:

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

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

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

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

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

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

رویکرد درست:

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

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

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

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

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

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

رویکرد درست:

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

در پایان

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

در صورت آشنایی نداشتن با HTML به شما پیشنهاد می‌کنم دوره آموزشی رایگان HTML را مشاهده کنید.