ایچ تی ایم ایل(5) سٹائل گائیڈ اور کوڈ کا عرصہ

HTML ਕੋਡ ਸਮਝੌਤੇ

web ਡਿਵੈਲਪਰ ਹੈਲਟਿਮ ਵਿੱਚ ਉਪਯੋਗ ਵਾਲੇ ਕੋਡ ਸਟਾਈਲ ਅਤੇ ਗਰੰਥ ਨੂੰ ਅਣਪਛਾਣਿਆ ਜਾਂਦਾ ਸੀ

2000 ਤੋਂ 2010 ਦਰਮਿਆਨ, ਕਈ web ਡਿਵੈਲਪਰ ਹੈਲਟਿਮ ਤੋਂ XHTML ਵਿੱਚ ਆ ਗਏ

XHTML ਰਾਹੀਂ, ਡਿਵੈਲਪਰ ਨੂੰ ਪ੍ਰਮਾਣਿਤ 'ਫਾਰਮੈਟਿੰਗ' ਕੋਡ ਲਿਖਣਾ ਪੈਂਦਾ ਸੀ

HTML5 ਕੋਡ ਪ੍ਰਮਾਣਨ ਵਿੱਚ ਹੋਰ ਖੁਸ਼ਹਾਲ ਹੈ

HTML5 ਰਾਹੀਂ, ਤੁਸੀਂ ਆਪਣਾ ਖੁਦ ਦਾਸਭ ਤੋਂ ਚੰਗੀ ਪਿਰਤ, ਸਟਾਈਲ ਗਾਈਡਲਾਈਨ ਅਤੇ ਕੋਡ ਸਮਝੌਤੇ。

ਸਮਾਰਟ ਅਤੇ ਭਵਿੱਖ ਵਾਲਾ

ਸਟਾਈਲ ਦਾ ਤਰਕਸੰਗਤ ਉਪਯੋਗ, ਦੂਜਿਆਂ ਨੂੰ ਤੁਹਾਡੇ HTML ਨੂੰ ਹੋਰ ਅਸਾਨ ਵਿਕਸਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ

ਭਵਿੱਖ ਵਿੱਚ, XML ਰੀਡਰਾਂ ਜਿਹੇ ਪ੍ਰੋਗਰਾਮ ਤੁਹਾਡੇ HTML ਨੂੰ ਪੜ੍ਹਣ ਦੇ ਲਈ ਜ਼ਰੂਰਤ ਪਾਉਣਗੇ

ਸਹੀ ਫਾਰਮੈਟਿੰਗ ਵਾਲੇ 'ਲਗਭਗ XHTML' ਗਰੰਥ ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਵਧੇਰੇ ਸਮਾਰਟ ਹੁੰਦਾ ਹੈ

نوٹ:ਤੁਹਾਡੇ ਸਟਾਈਲ ਨੂੰ ਹਮੇਸ਼ਾ ਸਮਾਰਟ, ਸਾਫ, ਪਵਿੱਤਰ ਅਤੇ ਫਾਰਮੈਟਿੰਗ ਕਰੋ

ਸਹੀ ਦਸਤਾਵੇਜ਼ ਪ੍ਰਕਾਰ ਦਾ ਉਪਯੋਗ ਕਰੋ

ਦਸਤਾਵੇਜ਼ ਦੇ ਪਹਿਲੇ ਵਾਕ ਵਿੱਚ ਦਸਤਾਵੇਜ਼ ਪ੍ਰਕਾਰ ਘੋਸ਼ਿਤ ਕਰੋ:

ਜੇਕਰ ਤੁਸੀਂ ਹਮੇਸ਼ਾ ਛੋਟੇ ਅੱਖਰਾਂ ਵਾਲੇ ਟੈਗ ਦੀ ਆਦਤ ਰੱਖਦੇ ਹੋ, ਤਾਂ ਇਹ ਵਰਤ ਸਕਦੇ ਹੋ:

<!doctype html>

ਛੋਟੇ ਅੱਖਰਾਂ ਵਾਲੇ ਐਲੀਮੈਂਟ ਨਾਮ ਦਾ ਉਪਯੋਗ ਕਰੋ

HTML5 ਐਲੀਮੈਂਟ ਨਾਮ ਵਿੱਚ ਮਿਸ਼ਰਿਤ ਸਾਈਜ਼ ਦੇ ਅੱਖਰਾਂ ਦੀ ਪ੍ਰਵਾਨਗੀ ਦਿੰਦਾ ਹੈ。

ਅਸੀਂ ਛੋਟੇ ਅੱਖਰਾਂ ਵਾਲੇ ਐਲੀਮੈਂਟ ਨਾਮ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ:

  • ਮਿਸ਼ਰਿਤ ਸਾਈਜ਼ ਦੇ ਨਾਮ ਚੰਗੇ ਨਹੀਂ ਹਨ
  • ਡਿਵੈਲਪਰ ਛੋਟੇ ਅੱਖਰਾਂ ਦੇ ਨਾਮ ਦੀ ਆਦਤ ਰੱਖਦੇ ਹਨ (ਉਦਾਹਰਣ ਵਜੋਂ XHTML ਵਿੱਚ)
  • ਛੋਟੇ ਅੱਖਰਾਂ ਨਾਲ ਸਾਫ ਹੁੰਦਾ ਹੈ
  • ਛੋਟੇ ਅੱਖਰਾਂ ਨਾਲ ਲਿਖਣਾ ਅਸਾਨ ਹੈ

ਚੰਗਾ ਨਹੀਂ ਹੈ:

<SECTION> 
  <p>This is a paragraph.</p>
</SECTION>

ਬਦਕਿਸਮਤੀ ਹੈ:

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

ਚੰਗਾ ਹੈ:

<section> 
  <p>This is a paragraph.</p>
</section>

ਸਾਰੇ HTML ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਬੰਦ ਕਰਨਾ

HTML5 ਵਿੱਚ, ਤੁਸੀਂ ਸਾਰੇ ਐਲੀਮੈਂਟਾਂ (ਉਦਾਹਰਣ ਵਜੋਂ <p> ਐਲੀਮੈਂਟ) ਨੂੰ ਬੰਦ ਕਰਨੇ ਨਹੀਂ ਚਾਹੀਦੇ。

ਅਸੀਂ ਸਾਰੇ HTML ਐਲੀਮੈਂਟਾਂ ਨੂੰ ਬੰਦ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ:

Looks bad:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Looks good:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

Closing empty HTML elements

In HTML5, closing empty elements is optional.

Allowed:

<meta charset="utf-8">

Also allowed:

<meta charset="utf-8" />

The slash (/) is required in XHTML and XML.

If you expect XML software to access your page, it is a good idea to maintain this habit.

Use lowercase attribute names

HTML5 allows mixed-case attribute names.

We recommend using lowercase attribute names:

  • Mixed attribute names are not good
  • Developers are accustomed to using lowercase attribute names (such as in XHTML)
  • Lowercase attribute names are purer in case
  • Lowercase attribute names are easier to write

Looks bad:

<div CLASS="menu">

Looks good:

<div class="menu">

Quoted attribute values

HTML5 allows attribute values without quotes.

We recommend that attribute values be quoted:

  • If the attribute value contains a value, then quotes must be used
  • Mixed styles are absolutely bad
  • Quoted values are easier to read

This attribute value is invalid because it contains spaces:

<table class=table striped>

This is valid:

<table class="table striped">

Required attributes

Always use images for alt Attributes. This attribute is important when the image cannot be displayed.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Always define image size. This will reduce flicker because the browser will reserve space for the image before it loads.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spaces and equal sign

Equal sign ਦੋਹਾਂ ਤਰਫ਼ ਦੇ ਸਪੇਸ ਨਾਲ ਪ੍ਰਵਾਨ ਹਨ:

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

ਲੇਕਿਨ ਸਪੇਸ ਲੇਸ ਪੜ੍ਹਣ ਵਿੱਚ ਆਸਾਨ ਹੈ, But space-less is easier to read, and groups entities better together:

ਲੰਮੇ ਕੋਡ ਲਾਈਨਾਂ ਨੂੰ ਬਚਾਓ:

HTML ਐਡੀਟਰ ਵਰਤਣ ਦੇ ਸਮੇਂ, HTML ਕੋਡ ਨੂੰ ਪੜ੍ਹਣ ਲਈ ਲੈਫਟ ਅਤੇ ਰਾਇਟ ਸਕਰੋਲ ਕਰਨਾ ਅਸੁਵਿਧਾਜਨਕ ਹੁੰਦਾ ਹੈ:

ਕੋਡ ਲਾਈਨਾਂ ਨੂੰ 80 ਅੰਕਾਂ ਤੋਂ ਜ਼ਿਆਦਾ ਨਾ ਕਰੋ:

ਖਾਲੀ ਲਾਈਨਾਂ ਅਤੇ ਸਕਰੋਲ:

ਬੇਕਾਰ ਖਾਲੀ ਲਾਈਨ ਵਰਤਣ ਨਾ ਕਰੋ:

ਪੜ੍ਹਾਈ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ, ਵੱਡੇ ਜਾਂ ਲੋਜਿਕਲ ਕੋਡ ਬਲਾਕਾਂ ਵਿੱਚ ਖਾਲੀ ਲਾਈਨ ਵਰਤਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ:

ਪੜ੍ਹਾਈ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ, ਦੋ ਸਪੇਸ ਦਾ ਸਕਰੋਲ ਵਰਤੋਂ ਕਰੋ। ਟੈਬ ਨਾ ਵਰਤੋਂ ਕਰੋ:

ਕਿਰਪਾ ਕਰਕੇ ਗ਼ੈਰ ਜ਼ਰੂਰੀ ਖਾਲੀ ਲਾਈਨਾਂ ਅਤੇ ਸਕਰੋਲ ਨਾ ਵਰਤੋਂ। ਛੋਟੇ ਅਤੇ ਸਬੰਧਤ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਖਾਲੀ ਲਾਈਨ ਵਰਤਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ, ਅਤੇ ਹਰੇਕ ਅੰਗਾਮ ਵਿੱਚ ਸਕਰੋਲ ਨਾ ਵਰਤਣ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ:

ਲਾਜ਼ਮੀ ਨਹੀਂ:

<body>
  <h1>Famous Cities</1>
  <h2>Tokyo</h2>
  <p>
    ਟੋਕੀਓ ਜਪਾਨ ਦੀ ਰਾਜਧਾਨੀ ਹੈ, ਮੋਟੋਟੋਕੀਓ ਖੇਤਰ ਦਾ ਕੇਂਦਰ ਹੈ,
    ਅਤੇ ਦੁਨੀਆ ਦਾ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਜਨਸੰਖਿਆ ਵਾਲਾ ਮੈਟਰੋਪੋਲੀਟਨ ਖੇਤਰ ਹੈ。
    ਇਹ ਜਪਾਨੀ ਸਰਕਾਰ ਅਤੇ ਇੰਪੀਰੀਅਲ ਪੈਲੇਸ ਦਾ ਸਥਾਨ ਹੈ,
    ਅਤੇ ਜਪਾਨੀ ਸਮਰਾਟ ਪਰਿਵਾਰ ਦੀ ਘਰ ਹੈ。
  </p>

ਬਿਹਤਰ:

<body>
<h1>Famous Cities</1>
<h2>Tokyo</h2>
<p>
ਟੋਕੀਓ ਜਪਾਨ ਦੀ ਰਾਜਧਾਨੀ ਹੈ, ਮੋਟੋਟੋਕੀਓ ਖੇਤਰ ਦਾ ਕੇਂਦਰ ਹੈ,
ਅਤੇ ਦੁਨੀਆ ਦਾ ਸਭ ਤੋਂ ਜ਼ਿਆਦਾ ਜਨਸੰਖਿਆ ਵਾਲਾ ਮੈਟਰੋਪੋਲੀਟਨ ਖੇਤਰ ਹੈ。
ਇਹ ਜਪਾਨੀ ਸਰਕਾਰ ਅਤੇ ਇੰਪੀਰੀਅਲ ਪੈਲੇਸ ਦਾ ਸਥਾਨ ਹੈ,
ਅਤੇ ਜਪਾਨੀ ਸਮਰਾਟ ਪਰਿਵਾਰ ਦੀ ਘਰ ਹੈ。
</p>

ਤਾਲਿਕਾ ਉਦਾਹਰਣ:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  <tr>
</table>

ਸੂਚੀ ਉਦਾਹਰਣ:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

<html> ਅਤੇ <body> ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਨਾ?

ਐੱਚਟੀਐੱਮਐੱਲ5 ਮਿਆਰ ਵਿੱਚ, <html> ਅਤੇ <body> ਟੈਗ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਨਾ ਹੋਵੇਗਾ。

ਹੇਠ ਲਿਖੇ ਕੋਡ ਨੂੰ ਐੱਚਟੀਐੱਮਐੱਲ5 ਵਿੱਚ ਪ੍ਰਮਾਣਿਤ ਕਰੋ:

ਇੱਕ ਉਦਾਹਰਣ



  <title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

亲自试一试

ਅਸੀਂ <html> ਅਤੇ <body> ਟੈਗ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਨ ਦੀ ਸਲਾਹ ਨਹੀਂ ਦਿੰਦੇ ਹਾਂ。

<html> ਟੈਗ ਟੈਕਸਟ ਦਾ ਮੂਲ ਟੈਗ ਹੈ। ਇਹ ਪੰਨੇ ਦੀ ਭਾਸ਼ਾ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਦਾ ਮਹੱਤਵਪੂਰਨ ਸਥਾਨ ਹੈ。

ਪਹੁੰਚਯੋਗ ਐਪਲੀਕੇਸ਼ਨ (ਸਕਰੀਨ ਰੀਡਰ) ਅਤੇ ਸਰਚ ਇੰਜਣਾਂ ਲਈ ਘੋਸ਼ਣਾ ਭਾਸ਼ਾ ਮਹੱਤਵਪੂਰਨ ਹੈ。

ਹੈਡਜ਼ (head) ਟੈਗ ਅਤੇ ਬੋਡੀ (body) ਟੈਗ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਨਾ ਡੌਮ (DOM) ਅਤੇ ਐਕਸਐੱਮਐੱਲ ਸਾਫਟਵੇਅਰ ਨੂੰ ਤੁਰੰਤ ਖਟਮ ਕਰ ਸਕਦਾ ਹੈ。

ਹੈਡਜ਼ (head) ਟੈਗ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਨਾ ਬੁਰੇ ਬਰਾਉਜ਼ਰਾਂ (IE9) ਵਿੱਚ ਗਲਤੀ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ。

ਹੈਡਜ਼ (head) ਟੈਗ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਨਾ?

ਐੱਚਟੀਐੱਮਐੱਲ5 ਮਿਆਰ ਵਿੱਚ, ਹੈਡਜ਼ (head) ਟੈਗ ਨੂੰ ਵੀ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਨਾ ਹੋਵੇਗਾ。

ਮੂਲਤਬੀ ਤੌਰ 'ਤੇ, ਬਰਾਉਜ਼ਰ ਹੈਡਜ਼ (head) ਟੈਗ ਤੋਂ ਪਹਿਲਾਂ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਦੇ ਤਮਗੇ ਮੂਲਤਬੀ ਹੈਡਜ਼ (head) ਟੈਗ ਵਿੱਚ ਜੋੜ ਦੇਣਗੇ。

ਹੈਡਜ਼ (head) ਟੈਗ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਨ ਨਾਲ ਤੁਸੀਂ ਐੱਚਟੀਐੱਮਐੱਲ ਦੀ ਜ਼ਿਆਦਾ ਜ਼ਿਆਦਾ ਜ਼ਿੰਜਾਲਤਾ ਘਟਾ ਸਕਦੇ ਹੋ

ਇੱਕ ਉਦਾਹਰਣ


<html>
<title>Page Title</title>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

亲自试一试

نوٹ:对于 web 开发者，省略标签的做法是陌生的。建立规则需要时间。

元数据

元素在 HTML5 中是必需的。请尽可能制作有意义的标题。</p> <pre class="language-html"> <title>HTML5 Syntax and Coding Style

为了确保恰当的解释，以及正确的搜索引擎索引，在文档中对语言和字符编码的定义越早越好：




  
  HTML5 Syntax and Coding Style

ایچ تی ایم ایل کچن

短注释应该在单行中书写，并在 之前增加一个空格：

长注释，跨越多行，应该通过 在独立的行中书写：

长注释更易观察，如果它们被缩进两个空格的话。

样式表

请使用简单的语法来链接样式表（type 属性不是必需的）：

短规则可以压缩为一行，就像这样：

p.into {font-family:"Verdana"; font-size:16em;}

长规则应该分为多行：

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • 开括号与选择器位于同一行
  • 在开括号之前用一个空格
  • 使用两个字符的缩进
  • 在每个属性与其值之间使用冒号加一个空格
  • ہر کم یا سینک کے بعد خالی سپارا استعمال کریں
  • ہر اپنے اپنے کی قیمتی کے بعد (شامل آخری) سینک استعمال کریں
  • صرف جب کسی کی قیمتی میں خالی سپارا ہو تو اس کی احاطہ کیلئے کوٹیوں کو استعمال کریں
  • بند کروشی کو نئی سطر میں رکھنا، پہلے خالی سپارا نہ لگانا
  • کسی بھی سطر میں 80 حروف سے زیادہ نہ ہو

نوٹ:کم یا سینک سے بعد خالی سپارا لگانا، تمام لکھنے کی نوعیتوں کا مشترکہ قاعدہ ہے。

HTML میں جاوا اسکریپٹ لوڈ کرنا

请使用简单的语法来加载外部脚本（type 属性不是必需的）：