مرتب کردن کدها html

زهرا آقاخانی

1402/12/27

399

مرتب کردن کدهای html یکی از کارهایی است که برای برنامه نویس شدن ضروری است. شما چه یک برنامه نویسی مبتدی باشید یا حرفه‌ای، در هر حال باید بتوانید کدهای‌تان را تمیز و خوانا بنویسید و نوشتن کدهای تمیز باید یکی از دغدغه‌های شما باشد.

مرتب سازی کدها در html یعنی پیروی از مجموعه‌ای از قوانین برای نظم دادن و یکنواخت کردن ساختار کدها. یک کد نامرتب یا اصطلاحا کثیف را حتی یک متخصص html هم نمی‌تواند بخواند.

بنابراین بهتر است قبل از شروع برنامه نویسی فرانت اند با نحوه مرتب سازی کدهای html آشنا شوید تا بتوانید از همان ابتدا روند نگارش کدها را به درستی انجام دهید. در این مقاله از سایت سبزلرن ما شما را با راه‌های مرتب کردن کدهای html آشنا می‌کنیم و ابزارهایی برای بهتر این کار به شما نشان می‌دهیم.

مرتب کردن کدهای html

همان‌طور که گفتیم مرتب کردن کدهای html، برای هر برنامه نویسی ضروری است. این کار نه تنها کدهای ما را تمیز نگه می‌دارد؛ بلکه روی سئوی سایت ما نیز تاثیر می‌گذارد. وقتی کدهای سایت شما تمیز باشد، سایت امن‌تر و قابل اطمینان تر می‌شود و مشکلات مربوط به‌ تجربه‌ی کاربری کاهش پیدا می‌کند. معمولا رایج‌ترین اشتباهاتی که در مرتب سازی دستورات در html برطرف می‌شوند، موارد زیر هستند:

1 | DOCTYPE به درستی اعلام نمی‌شود.

2 | در تگ head این سه اشتباه رخ می‌دهد:

3 | عنوان به درستی تنظیم نمی‌شود.

4 | Stylesheets به درستی لینک داده نمی‌شوند.

5 | اسکریپت‌ها فولدری متعلق به خود ندارند.

6 | محتوای صفحه در تگ اصلی div قرار ندارد.

7 | تگ‌های پایانی به طور مناسب تنظیم نشده‌اند.

8 | تکرار افزونگی‌هایی وجود دارد که کاربر متوجه آن نیست.

9 | تگ‌ <h1> به یک موجودیت واقعی اشاره نمی‌کند.

10 | لینک‌های ارسال شده توسط کاربران تگ‌های nofollow ندارند.

مرتب کردن کدهای html

چرا مرتب سازی کدها در html مهمه؟

همان‌طور که گفتیم مرتب سازی کدها در html باعث خوانایی کدها می‌شود و هر کسی که بخواهد کدها را بررسی کند، مشکلی نخواهد داشت. از سوی دیگر مرتب کردن کدهای html باعث کاهش خطاهای کدنویسی می‌شود و به ساختارهای ما نظم می‌دهد.

اما مهم‌تر از همه تاثیر آن روی سئوی سایت است. به طور کلی مرتب کردن کد های html تاثیرات زیر را برای سئوی سایت به همراه دارد:

1 | شیوه‌ی کدنویسی معتبر و اصولی دسترسی عنکبوت‌های گوگل به سایت شما و ایندکس گذاری آن را تضمین می‌کند.

2 | مرتب کردن دستورات html به افزایش سرعت سایت ما نیز کمک می‌کند. علت این مسئله، جلوگیری از خطاهای احتمالی، حذف فضاهای سفید اضافه، حفظ خوانایی کد، عدم استفاده از تگ‌ها و آدرس‌هایی اضافه است.

3 | ساخت آدرس‌های SEF یا آدرس‌های خوانا که هم برای تجربه کاربری مفید است و هم سئوی سایت.

4 | کاهش زمان لود سایت با فشرده کردن یا ترکیب فایل‌ها و اسکریپت‌ها.

5 | افزایش سرعت اجرا با حذف کدها، کتابخانه‌ها و فانکشن‌های اضافه.

سئو تنها دلیلی نیست که شما باید کدهای سایتتان را تمیز بنویسید. دلیل دیگر آن نگهداری راحت‌تر سایت است. وقتی یک دولوپر قرار است سایت شما را مجددا آپدیت کند یا امکاناتی را به کدهای قبلی اضافه کند، کدهای تمیز او را سردرگم نخواهد کرد و این کار راحت‌تر می‌شود.

نحوه مرتب سازی کد های html

خب در این بخش نحوه مرتب سازی کد های html را به شما نشان می‌دهیم. کافیست در هنگام کدنویسی به تکنیک‌های زیر توجه کنید تا کدهایی تمیز و مرتب داشته باشید:

1 | از ساختار مناسب استفاده کنید

زبان html، زبان فداکاری است و حتی به کدهای ضعیف شما هم اجازه اجرا می‌دهد. یعنی صفحات شما حتی بدون المان‌های زیر اجرا می‌شود:

<DOCTYPE html>
<html>
<head>
<body>

ولی بدون این المان‌ها صفحات شما در هر مرورگری اجرا شدنی نیست. مثال:

شکل غلط کد:

<html>
  <h1>Hello World</h1>
  <p>This is a web page.</p>
</html>

شکل صحیح کد:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <!-- Other meta tags -->
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

2 | همیشه از نشانه‌گذاری‌های استاندارد استفاده کنید.

همیشه عناصر را درست باز و بسته کنید. مثال:

شکل غلط کد:

<p id="intro"><strong>AltCampus, the alternative to college
that you wish existed.</p></strong>
<p id="intro">A 6-month program that helps you become a software developer.

شکل صحیح کد:

<p className="intro">
  <strong>AltCampus, the alternative to college that you wish existed.</strong>.
</p>
<p className="intro">
  A 6-month program that helps you become a software developer.
</p>

3 | تو رفتگی ایجاد کنید.

ایجاد تو رفتگی در کد باعث خوانایی، درک و نگهداری راحت‌تر آن می‌شود.

شکل غلط کد:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Hello World&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;p&gt;This is a web page.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

شکل صحیح کد:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a web page.</p>
  </body>
</html>

4 | سینتکس را سازماندهی کنید.

چند قاعده‌ی کلی برای سازماندهی سینتکس در هنگام مرتب کردن کد های html ، وجود دارد:

عناصر nested را ایندنت کنید.
از حروف کوچک برای عناصر، ویژگی‌ها و مقادیر استفاده کنید.
از سینگل یا دابل کوتیشن در جای مناسب استفاده کنید. البته نه از هر دوی آن‌ها به صورت همزمان
مقادیر را از ویژگی‌های بولین حذف کنید.

شکل غلط کد:

<aside>
  <h3>Chicago</h3>
  <h5 hidden="HIDDEN">City in Illinois</h5>
  <img
    src="chicago.jpg"
    alt="Chicago, the third most populous city in the United States"
  />
  <ul>
    <li>234 square miles</li>
    <li>2.715 million residents</li>
  </ul>
</aside>

شکل صحیح کد:

<aside>
  <h3>Chicago</h3>
  <h5 hidden>City in Illinois</h5>
  <img
    src="chicago.jpg"
    alt="Chicago, the third most populous city in the United States"
  />
  <ul>
    <li>234 square miles</li>
    <li>2.715 million residents</li>
  </ul>
</aside>

پایداری یک اصل مهم در کدنویسی است؛ یعنی وقتی یک روش را انتخاب کردید، تا انتهای کد از همان شیوه استفاده کنید و آن را تغییر ندهید.

5 | استفاده از عناصر سمنتیک یا معنایی

کتابخانه‌ی عناصر html واقعا بزرگ است. ما می‌توانیم از هر عنصری برای نمایش محتوای خود استفاده کنیم. انتخاب عنصر درست برای نمایش محتوا یکی از مهم‌ترین چالش‌هایی است که باید رد کنیم. بنابراین در انتخاب تگ‌ها هوشمند باشید چون باید از لحاظ معنایی نیز تگ انتخابی درست باشد.

برای مثال هرگز برای نمایش خط مهم از تگ <span> استفاده نکنید بلکه تگ‌های هدینگ را به کار ببرید.

یا اینکه برای ساخت اسلایدبار از تگ‌ <aside> به جای <div> استفاده کنید. مثال:

شکل غلط کد:

<span className="heading"><strong>AltCampus</span></strong>
<br><br>
The Alternative to College That You Wish Existed
<br><br>

شکل صحیح کد:

<h1>AltCampus</h1>
<p>The Alternative to College That You Wish Existed</p>

6 | از تگ <h1> فقط یکبار در صفحه استفاده کنید.

این تگ نقش مهمی در رنکینگ صفحه در موتور جستجو دارد. پس بهتر است آن را به مهم‌ترین متن خود اختصاص دهید.

7 | در مصرف Divitis صرفه‌جویی کنید.

ما معمولا برای استایل‌دهی به المان‌ها از تگ div زیاد استفاده می‌کنیم. این کار اگرچه برای استایل‌دهی مناسب است؛ ولی به محتوای ما در صفحه اشاره نمی‌کند. مثال:

شکل غلط کد:

<div className="container">
  <div className="article">
    <div className="headline">Headlines Across the World</div>
  </div>
</div>

شکل صحیح کد:

<section className="container">
  <article>
    <h1>Headlines Across the World</h1>
  </article>
</section>

8 | زیاد کامنت ننویسید.

کامنت گذاشتن خوانایی کد را بالا می‌برد؛ ولی استفاده بیش از حد از آن ظاهر بدی به کد می‌دهد. اگر از کامنت بیش از اندازه استفاده کنید یک کد نامرتب و گیج کننده خواهید داشت. مثال:

شکل غلط کد:

<!-- Primary Section -->
<div>
  <!-- Article -->
  <div>
    <!-- Heading -->
    <div>Headlines Across the World</div>
  </div>
</div>

شکل صحیح کد:

<!-- Primary Section -->
<section>
  <article>
    <h1>Headlines Across the World</h1>
  </article>
</section>

9 | به جای استایل اینلاین، از استایل شیت خارجی استفاده کنید.

شاید استایل اینلاین راحت‌تر باشد، ولی کد را طولانی‌تر کرده و نگهداری از آن سخت‌تر خواهد بود. با استفاده از استایل شیت خارجی شما امکان استفاده مجدد از استایل را خواهید داشت، ضمن اینکه کدها واضح‌تر و خواناتر می‌شوند. مثال:

شکل غلط کد:

<p style="color: #393; font-size: 24px;">Thank you!</p>

شکل صحیح کد:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p className="greeting">Hello, how are you?</p>
  </body>
</html>

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

این کار نه تنها برای سئوی سایت خوب است، بلکه برای صفحه خوان‌ها نیز دسترسی به سایت شما را فراهم می‌کند. ضمن اینکه برای خودتان هم توضیحی راجع به هدف تصویر ارائه می‌دهد.

11 | مقادیر شناسه‌ها و نام‌ها را درست انتخاب کنید.

هر چیزی را به عنوان نام و شناسه انتخاب نکنید یکی از چیزهایی که اغلب افراد مبتدی انجام می‌دهند، انتخاب غیرهوشمندانه نام‌هاست که بعدا خوانایی کد را کم می‌کند. مثال:

شکل غلط کد:

<p className="red">Error! please try again.</p>

شکل صحیح کد:

<p className="error">Error! please try again.</p>

12 | از فضای سفید به صورت مناسب استفاده کنید.

بسیاری از افراد خصوصا افراد مبتدی چندان به فضای خالی اهمیت نمی‌دهند یا بیش از حد از آن استفاده می‌کنند. ولی بهتر است در استفاده از این فضا تعادل داشته باشید و در مکان مناسب از آن استفاده کنید. مثال:

شکل غلط کد:

&lt;body&gt;
&lt;h1&gt;List&lt;/h1&gt;
&lt;ul className=&quot; list &quot;&gt;&lt;li&gt;Item 1&lt;/li&gt;&lt;li&gt;Item 2&lt;/li&gt;&lt;li&gt;Item 3&lt;/li&gt;&lt;li&gt;Item 4&lt;/li&gt;&lt;li&gt;Item 5&lt;/li&gt;&lt;/ul&gt;
&lt;/body&gt;

شکل صحیح کد:

<body>
  <h1>List</h1>
  <ul className="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</body>

ابزارهای رایگان برای مرتب سازی دستورات در html

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

اما اگر کدی در اختیار شما قرار گرفته که تمیز نیست و نیاز به مرتب‌سازی دارد، بهتر است از ابزارهای زیر برای تمیز کردن آن کمک بگیرید:

HTML Cleaner

یکی از ابزارهای آنلاین مرتب کردن کدهای html شماست. برای کار با این ابزار کافیست محتوای خود را در ادیتور سایت کپی کرده و گزینه‌ی clean html را انتخاب کنید. گزینه‌های زیادی برای نحوه مرتب سازی کد های html در این سایت وجود دارد که هر کدام را که نیاز دارید می‌توانید انتخاب کنید. مثلا: حذف تگ‌های ویژگی‌ها، حذف استایل‌های اینلاین و… .

htmltidy

این ابزار آنلاین نیز به صورت رایگان بوده و گزینه‌های زیادی از جمله حذف تگ‌های خالی، حذف کامنت‌ها یا ساخت پلین تکست را برای مرتب سازی دستورات در html فراهم می‌کند. در این پلتفرم آنلاین دو ادیتور در کنار هم قرار دارد و شما می‌توانید به دو صورت ویژوال و سورس کد، کدهای‌تان را ادیت کنید. کافیست سورس کد خود را در ادیتورها کپی کرده و کار ادیت آن را انجام دهید.

htmlhint

یک ابزار آنلاین کاربردی دیگر برای مرتب کردن کدهای html، این ابزار است که به صورت رایگان بوده و خطاهای بالقوه کدهای شما را شناسایی می‌کند. این ابزار تعدادی ابزارک برای تشخیص اشکالات کد و تمیز کردن آن دارد که می‌توانید برای بهبود کدها از آن‌ها استفاده کنید.

جمع بندی

مرتب کردن کدها در html کار چندان سختی نیست؛ فقط به کمی تمرکز و دقت نیاز دارد. تکنیک‌های زیادی برای این کار وجود دارد که باید موقع کدنویسی رعایت شود که در این مقاله به برخی از مهم‌ترین‌هایشان اشاره کردیم. البته این تکنیک‌ها زیادند و باید بیشتر آن‌ها را در نظر داشته باشید تا بفهمید که کدهای html را چطور مرتب کنیم.

اگر با نحوه مرتب سازی کد های html آشنا باشید و این کار را انجام دهید، مسلما عملکرد سایت شما نیز بهبود یافته و سئوی بهتری خواهد داشت. سعی کنید همیشه نسبت به مرتب کردن دستورات html یا هر زبان دیگری حساس باشید تا کار شما حرفه‌ای‌تر دیده شود و بعدا هم بتوانید کدهای خود را اصلاح کنید.

چگونه میتوانم HTML را یاد بگیریم؟

برای یادگیری HTML به‌صورت اصولی شما نیاز دارید در کنار یک مدرس باتجربه و دلسوز آموزش خودتان را طی کنید و همچنین در طول مسیر یادگیری از پشتیبانی تمام وقت برخوردار باشید تا در لحظه به لحظه پیشرفتتان به صورت قدم به قدم شما را در مسیر یادگیر HTML یاری کند؛ احتمالا فکر کنید که همچین چیزی خیالی است!! اصلا همچین شرایطی مگه وجود دارد؟ باید بگم بله؛ شما می‌توانید آموزش صفر تا صد HTML را در کنار تیم سبزلرن یاد بگیرید آن هم به‌صورت کاملا رایگان!!! شما در طول دوره آموزشی تمرینات مختلفی از مدرس دریافت می‌کنید و همچنین پروژه‌های متنوعی را پیاده سازی خواهید کرد تا به HTML به طور کامل مسلط شوید پس فرصت رو غنمیت بشمرید و همین الان یادگیری خودتان را شروع کنید.

سوالات متداول

آیا در vscode هم می‌توان مرتب کردن کدهای html را انجام داد؟

بله برای این کار افزونه‌هایی برای این برنامه وجود دارد که می‌توانید استفاده کنید. همچنین کلیدهای میانبر Shift + Alt + F برای ویندوز، Shift + Option + F برای مک و Ctrl + Shift + I برای لینوکس هم این کار را انجام می‌دهند.

مرتب سازی کدها در ++notepad به چه صورت است؟

باید پلاگین textfx را نصب کنید و با استفاده از آن کدهای خود را مرتب کنید. این پلاگین را می‌توانید از قسمت پلاگین‌ها در خود برنامه پیدا کنید. بعد از نصب تبی با نام textfx برای شما نمایش داده می‌شود که می‌توانید با انتخاب آن و وارد زدن روی گزینه‌ی textfx edit کار مرتب کردن کدهای html را انجام دهید.