Syntax ها در HTML

دسته بندی : آموزش HTML سطح مقاله : مقدماتی زمان مطالعه : 3 دقیقه 04 آبان 1399
Syntax-ها-در-HTML

Syntax ها در HTML قوانین و قراردادهایی هستند که استفاده صحیح از زبان نشانه گذاری را تعریف و تعیین می کند. برای استفاده کامل و بدون نقص از HTML قطعا باید این نکات را رعایت کنید که بتوانید در درجه جهانی صفحات را بنویسید.

مبانی Syntaxها HTML

اولین و مهمترین نکته قابل درک در نحو استفاده از HTML استفاده از عناصر و تگ ها است. هر عنصر HTML توسط یک تگ باز و یک تگ بسته شده در اطراف محتوای آن ها تعریف می شود:

راهنمای-سبک-و-کنوانسیون

یک جفت براکت زاویه ای ( < و > ) هر تگ را احاطه کرده اند. تفاوت تگ بازشونده با تگ بستن یک ( / ) است. یک مثال ساده از استفاده از تگ <style> را مشاهده کنید:

<head>
<style>
h1 {
    color: indianred;
}

p {
    color: red;
}
</style>
</head>

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

عناصر بسته

بستن همه عناصر در HTML5 ضروری نیست. با این حال ، اگر در XHTML می نویسید یا به سادگی کد قابل خواندن و از نظر سینتکس صحیح می خواهید ، باید بسته کردن همه تگ ها را انجام دهید:

<section>
  <p>This element is not closed which can cause problems in the future.
  <p>This is a closed element. The range where it starts and where it ends is clearly defined</p>
</section>

یک عنصر خالی فقط دارای تگ باز است و نیازی به بسته شدن ندارد. با این حال ، XHTML نیاز به بسته شدن همه عناصر دارد. اگر این احتمال وجود دارد که در آینده نرم افزار XML به صفحه شما دسترسی پیدا می کند ، باید عناصر خالی خود را ببندید ، زیرا ممکن است باعث درد شود.

می توانید یک عنصر خالی را با اضافه کردن یک اسلش رو به جلو ( / ) قبل از براکت زاویه دوم ( > ) بسته کنید:

<meta charset="utf-8">   not closed

<meta charset="utf-8"/>  closed

صفات HTML

شما می توانید ویژگی های مختلفی را در تگ باز اضافه کنید. آن ها در name-value با مقدار بسته بندی شده در نقل قول های بیشتر نوشته می شوند:

<track src="subtitles_en.vtt">

بزرگ یا کوچک بودن حروف در HTML

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

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

از نظر فنی ، می توانید حروف بزرگ و کوچک را در HTML5 مخلوط کنید. با این حال ، استفاده از حروف کوچک برای نام عناصر و ویژگی ها به طور کلی روش خوبی تلقی می شود. این امر هم ظاهر و هم خوانایی کد شما را بهبود می بخشد:

<section> 
  <p>I'm a paragraph that is easy to understand.</p>
</section>

برای جلوگیری از بروز مشکلات ، توصیه می شود هنگام نامگذاری پرونده ها ، از حروف کوچک نیز استفاده کنید ، زیرا سرورهای وب اغلب به حروف کوچک و بزرگ حساس هستند.

خطوط طولانی و فضاهای خالی

تمام کد HTML5 شما باید با پیمایش از بالا به پایین قابل مشاهده باشد. برای کاربر بسیار ناخوشایند است که مجبور شود به پهلو پیمایش کند. همچنین در مورد قوانین Syntax ها در HTML غیرحرفه ای است. سعی کنید خطوط کد خود را بیش از 70 نکنید.

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

فضای سفید نیز روی حیله و تزویر است. می توانید دو فاصله برای تورفتگی اضافه کنید:

<!DOCTYPE html>
<html>
<body>

<section>

<h1>Without indentation it is hard to read</h1>

<p>This example has unnecessary blank lines and no indentation.</p>

</section>

  <section>
    <h1>Indentation is cool</h1>
    <p>This example has indentation instead of blank lines. It is easy to read and saves space.</p>
  </section>
</body>
</html>

با این حال ، از فاصله های غیرضروری بین نمادها خودداری کنید. به عنوان مثال ، در حالی که از نظر فنی می توانید فضاها را در اطراف = علائم قرار دهید ، سینتکس HTML توصیه می کند که از آن ها برای خواندن بهتر جلوگیری کنید:

<link rel = "stylesheet" href = "styles_file.css">

<link rel="stylesheet" href="styles_file.css">

کامنت گذاری در HTML

نظرات کد بین برچسب <!-- و --> نوشته می شوند. آن ها بر روی صفحه وب در سمت کاربر تأثیر نمی گذارند ، زیرا هدف آن ها فقط یادداشت برداری برای توسعه دهنده است:

<!--
This is commented out text.
This is commented out text.
-->

<body>
  <p>This is visible <!-- this is an invisible comment --> text.</p>
</body>

نکات مفید Syntax ها در HTML

  • اگر نگران فراموش شدن بسته شدن تگ های خود هستید ، با تایپ هر دو آن ها شروع کرده و سپس محتوا را پر کنید.
  • اگر فکر می کنید به شما کمک می کند ساختار سند HTML5 را راحت تر درک کنید ، می توانید برجسته سازی نحوی را امتحان کنید (به عنوان مثال از highlight.js).
  • اگر هنوز درباره نحو HTML خود مطمئن نیستید ، یک اعتبارسنج نحوی ساده مانند Freeformatter را امتحان کنید که تمام خطاهای نحوی را نمایش می دهد.

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 5.00
[ 1 رای ]
مطالب مشابه

Related Posts