比如，不要像这样做：

我的主题

介绍性文字


补充性的观点

相关文字

根据它们的意义使用元素，而不是根据它们的外观

ਸਾਡੇ ਕੁਝ ਲੋਕ ਇੱਕ ਬੜੇ ਸਾਈਜ਼ ਦੇ ਟੈਕਸਟ ਨੂੰ ਹੋਣ ਵਾਲਾ ਹੋਣ ਦੇ ਸਮੇਂ h1 ਦਾ ਇਸਤੇਮਾਲ ਕਰਦੇ ਹਨ, ਜਾਂ ਕਿਸੇ ਗੋਲੀ ਦੇ ਸਮੇਂ li ਦਾ ਇਸਤੇਮਾਲ ਕਰਦੇ ਹਨ। ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਪਹਿਲਾਂ ਦੇ ਚੈਪਟਰ ਵਿੱਚ ਚਰਚਾ ਕੀਤੀ, ਬਰਾਉਜ਼ਰ ਹਮੇਸ਼ਾ ਇਲੈਕਟ੍ਰੋਨ ਉੱਤੇ ਡਿਜ਼ਾਇਨ ਸੁਆਨਸ਼ਨਾਂ ਨੂੰ ਲਗਾ ਦਿੰਦੇ ਹਨ। ਅਸੀਂ ਹਮੇਸ਼ਾ ਇਹ ਮੰਨਦੇ ਰਹੇ ਹਾਂ ਕਿ h1 ਮੋਟਾ ਫੰਟ ਹੈ, li ਗੋਲੀ ਹੈ, ਜਾਂ blockquote ਟੈਕਸਟ ਦੇ ਇੰਦਰਾਸ਼ਟਰ ਹੈ। ਅਸੀਂ ਬਹੁਤ ਸਾਰੇ ਲੋਕ ਸਰੂਪਕਾਰੀ ਇਲੈਕਟ੍ਰੋਨ ਨੂੰ ਮਕਸਦਕਾਰੀ ਇਲੈਕਟ੍ਰੋਨ ਦੇ ਤੌਰ 'ਚ ਇਸਤੇਮਾਲ ਕਰਦੇ ਹਾਂ।

ਇਸ ਤਰ੍ਹਾਂ ਹੀ, ਜੇਕਰ ਡਿਜ਼ਾਇਨਰ ਸਾਰੇ ਸਿਰਲੇਖਾਂ ਨੂੰ ਇਕੱਲੇ ਸਾਈਜ਼ ਵਿੱਚ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹਨ, ਤਾਂ ਉਹ ਸਾਰੇ ਸਿਰਲੇਖਾਂ ਨੂੰ h1 ਵਿੱਚ ਰੱਖਣਗੇ, ਭਾਵੇਂ ਇਹ ਕੋਈ ਸਰੂਪਕਾਰੀ ਮਕਸਦ ਨਹੀਂ ਹੋਵੇ।

<h1>ਇਹ ਮੁੱਖ ਸਿਰਲੇਖ ਹੈ, ਜਦੋਂ ਮੈਂ ਟੈਕਸਟ ਨੂੰ ਅਨੁਸਾਰੀ ਫਾਰਮੈਟ ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦਾ ਹਾਂ。</h1>
<h1>ਇਹ ਮੁੱਖ ਸਿਰਲੇਖ ਨਹੀਂ ਹੈ, ਪਰ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਇਹ ਉੱਪਰਲੇ ਸਿਰਲੇਖ ਦੇ ਨਾਲ ਇਕੱਲੇ ਫੰਟ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇ, ਪਰ ਮੈਂ ਕਿਵੇਂ ਕ੍ਰਿਸਟਸ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਨਹੀਂ ਸਮਝਦਾ ਹਾਂ。</h1>
<h1>ਇਹ ਕੋਈ ਸਿਰਲੇਖ ਨਹੀਂ ਹੈ। ਪਰ ਮੈਂ ਬਹੁਤ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਪੰਨੇ 'ਚ ਦੇ ਲੇਖ ਨੂੰ ਇਕੱਲੇ ਫੰਟ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇ, ਜਿਵੇਂ ਕਿ ਮੈਂ ਚਾਹੁੰਦਾ ਹਾਂ,
ਅਗਰ ਮੈਂ CSS ਨੂੰ ਸਮਝਦਾ ਹਾਂ, ਤਾਂ ਮੈਂ ਇਸ ਡਿਜ਼ਾਇਨ ਨੂੰ ਸੜਕ ਬਿਨਾ ਪੰਨੇ ਦੀ ਸਰੂਪ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦਾ ਹਾਂ。</h1>

ਅਸੀਂ ਆਪਣੇ ਛੋਟੇ ਨਾਚ ਨੂੰ ਕਟ ਦੇਣਾ ਹੈ, ਅਤੇ ਇਲੈਕਟ੍ਰੋਨ ਦੇ ਮਕਸਦ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ ਉਨ੍ਹਾਂ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੈ, ਨਾ ਕਿ ਉਨ੍ਹਾਂ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ। ਇੱਕ ਵਾਰ ਅਕਸਰ, h1 ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋਏ ਕਿਸੇ ਪ੍ਰਕਾਰ ਦਾ ਹੋ ਸਕਦਾ ਹੈ। ਕ੍ਰਿਸਟਸ ਦੇ ਮਾਧਿਅਮ ਨਾਲ, h1 ਨੂੰ ਨਾਜ਼ੂਕ ਰੋਮਨ ਫੰਟ ਵਿੱਚ ਲਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਜਦਕਿ p ਟੈਕਸਟ ਨੂੰ ਮੋਟਾ ਵੱਡਾ ਫੰਟ ਵਿੱਚ ਲਿਆ ਜਾ ਸਕਦਾ ਹੈ, li ਨੂੰ ਬਿਨਾ ਗੋਲੀ ਦੇ ਲਿਆ ਜਾ ਸਕਦਾ ਹੈ (ਤੁਸੀਂ ਛੋਟੇ ਬੱਚੇ ਜਾਂ ਛੋਟੇ ਕੁਤਿਆਂ ਜਾਂ ਕੰਪਨੀ ਦੇ ਪਿਕਸੇਲ ਗਰਫਿਕਸ ਦੇ PNG, GIF ਜਾਂ JPEG ਚਿੱਤਰ ਦੀ ਜਗ੍ਹਾ 'ਚ ਲਿਆ ਸਕਦੇ ਹੋ) ਆਦਿ।

ਅੱਜ ਤੋਂ ਲੈ ਕੇ, ਅਸੀਂ CSS ਦੀ ਮਦਦ ਨਾਲ ਇਲੈਕਟ੍ਰੋਨ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਤੈਅ ਕਰਾਂਗੇ। ਅਸੀਂ ਇਲੈਕਟ੍ਰੋਨ ਦੀ ਸਥਿਤੀ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ ਉਨ੍ਹਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਬਦਲ ਸਕਦੇ ਹਾਂ, ਜਿਵੇਂ ਕਿ ਉਹ ਪੰਨੇ 'ਤੇ ਕਿਥੇ ਹਨ ਜਾਂ ਸਾਈਟ 'ਚ ਕਿਥੇ ਹਨ。 CSS ਨਾਲ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਸਰੂਪ ਤੋਂ ਹੋਰ ਤੋਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਵੱਖ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਕਿਸੇ ਵੀ ਇਲੈਕਟ੍ਰੋਨ ਨੂੰ ਆਪਣੇ ਮਨ ਦੇ ਹਾਰਮਨ ਅਨੁਸਾਰ ਫਾਰਮੈਟ ਕਰ ਸਕਦੇ ਹੋ।

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	}

你为什么要这么做呢？这么做的目的是为了在图形浏览器中获得品牌化的外观和感觉的同时，在文本浏览器、无线设备、HTML 格式的电子邮件中，文档的结构得到保留。

ਅਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਕਿ XHTML ਦੇ ਅਧਿਆਏ ਵਿੱਚ ਹੋਰ ਵੀ ਕੁਝ ਸਮਝਾਇਆ ਜਾਵੇ ਜੋ CSS ਨਾਲ ਸਬੰਧਤ ਹੋਵੇ।ਅਸੀਂ ਕੇਵਲ ਇਹ ਦਿਸ਼ਾ-ਦਰਸ਼ਨ ਦੇਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਕਿ ਦਸਤਾਵੇਜ਼ ਦਾ ਢਾਂਚਾ ਅਤੇ ਦਿਸ਼ਾ-ਦਰਸ਼ਨ ਦੋ ਵੱਖ-ਵੱਖ ਚੀਜ਼ਾਂ ਹਨ, ਅਤੇ ਢਾਂਚਾਗਤ ਤੱਤਾਂ ਨੂੰ ਟੈਕਸਟ ਨੂੰ ਢਾਂਚਾਗਤ ਰੂਪ ਵਿੱਚ ਬਦਲਣ ਲਈ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ, ਨਾ ਕਿ ਦਿਸ਼ਾ-ਦਰਸ਼ਨ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ

ਢਾਂਚਾਗਤ ਤੱਤਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ, ਨਾ ਕਿ ਬੇਕਾਰ ਕਚਰੇ ਵਜੋਂ

ਹਾਲਾਂਕਿ ਅਸੀਂ ਭੁਲਾ ਦਿੱਤੇ ਹਨ ਜਾਂ ਕਿਸੇ ਹੋਰ ਵਿੱਚ ਹੀ ਹਾਲਾਂਕਿ ਨਾਲ ਨਾਲ HTML ਅਤੇ XHTML ਦੀ ਵਰਤੋਂ ਸਰੂਪਕਾਰੀ ਮਹੱਤਵ ਨੂੰ ਪਹਿਚਾਣ ਨਹੀਂ ਕਰਦੇ, ਕਈ ਵਾਰ HTML ਵਾਦਕ ਇਹ ਤੱਤਾਂ ਨੂੰ ਸੂਚੀ ਵਜੋਂ ਵਰਤਦੇ ਹਨ:

ਪ੍ਰੋਜੈਕਟ ਇੱਕ<br />
ਪ੍ਰੋਜੈਕਟ ਦੋ<br />
ਪ੍ਰੋਜੈਕਟ ਤਿੰਨ<br />

ਇਹ ਸੋਚੋ ਕਿ ਕਿਵੇਂ ਕ੍ਰਮਵਾਰ ਜਾਂ ਅਕਰਮਵਾਰ ਸੂਚੀ ਨੂੰ ਵਰਤੋਂ ਕਰਨਾ ਹੈ:

<ul>
<li>ਪ੍ਰੋਜੈਕਟ ਇੱਕ</li>
<li>ਪ੍ਰੋਜੈਕਟ ਦੋ</li>
<li>ਪ੍ਰੋਜੈਕਟ ਤਿੰਨ</li>
</ul>

"ਲੇਕਿਨ li ਨੂੰ ਮੈਨੂੰ ਗੋਲੀ ਦਿੰਦੀ ਹੈ, ਅਤੇ ਮੈਨੂੰ ਗੋਲੀ ਨਹੀਂ ਚਾਹੀਦੀ!" ਤੁਸੀਂ ਇਹ ਕਹਿ ਸਕਦੇ ਹੋ।ਉੱਪਰੋਕਤ ਅਧਿਆਏ ਦੇ ਅਨੁਸਾਰ, CSS ਨਾਲ ਕਿਸੇ ਤੱਤ ਦੇ ਅਨੁਮਾਨਿਤ ਦਿਸ਼ਾ-ਦਰਸ਼ਨ ਬਾਰੇ ਕੋਈ ਅਨੁਮਾਨ ਨਹੀਂ ਲਗਾਉਂਦਾ।ਇਹ ਤੁਹਾਨੂੰ ਅਨੁਸਾਰ ਤੱਤ ਦਾ ਦਿਸ਼ਾ-ਦਰਸ਼ਨ ਦੱਸਣ ਦੀ ਉਮੀਦ ਕਰਦਾ ਹੈ।ਸਰਲ ਬੰਦ ਕਰਨਾ ਕੇਵਲ ਸਭ ਤੋਂ ਮੁੱਢਲੀ ਸਮਰੱਥਾ ਹੈ।ਇਸ ਨੇ ਸੂਚੀ ਨੂੰ ਸਧਾਰਨ ਟੈਕਸਟ ਨਾਲ ਸਮਾਨ ਦਿਖਾਉਣ ਦੀ ਸਮਰੱਥਾ ਹੈ, ਅਤੇ ਸੂਚੀ ਨੂੰ ਗਰਾਫਿਕ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰੇ ਦਿਖਾਉਣ ਦੀ ਸਮਰੱਥਾ ਵੀ ਹੈ, ਜਿਸ ਵਿੱਚ ਪੂਰੀ ਮੋਟਰੀ ਦਿਸ਼ਾ-ਦਰਸ਼ਨ ਹੁੰਦੀ ਹੈ।

ਇਸ ਤਰ੍ਹਾਂ, ਸੂਚੀ ਤੱਤਾਂ ਨੂੰ ਸੂਚੀ ਵਜੋਂ ਮਾਰਕਰ ਵਰਤੋਂ ਕਰੋ।ਇਸੇ ਤਰ੍ਹਾਂ, strong ਨੂੰ b ਦੀ ਥਾਂ ਵਰਤੋਂ ਕਰੋ, em ਨੂੰ i ਦੀ ਥਾਂ ਵਰਤੋਂ ਕਰੋ, ਆਦਿ।ਅਧਿਕਾਂਸ਼ਕ ਰੂਪ ਵਿੱਚ, strong ਦਾ ਪ੍ਰਦਰਸ਼ਨ b ਨਾਲ ਸਮਾਨ ਹੁੰਦਾ ਹੈ, ਜਦਕਿ em ਅਤੇ i ਸਮਾਨ ਹੁੰਦੇ ਹਨ, ਅਤੇ ਤੁਸੀਂ ਦਸਤਾਵੇਜ਼ ਦੀ ਰੂਪਰੇਖਾ ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਣ ਬਿਨਾ ਆਪਣੇ ਉਮੀਦ ਵਾਲੇ ਦਿਸ਼ਾ-ਦਰਸ਼ਨ ਤਿਆਰ ਕਰ ਸਕਦੇ ਹੋ:

ਹਾਲਾਂਕਿ CSS ਕਿਸੇ ਵੀ ਅਣਗਿਣਤ ਤੱਤ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਬਾਰੇ ਕੋਈ ਅਨੁਮਾਨ ਨਹੀਂ ਲਗਾਉਂਦਾ, ਬਰਾਉਜ਼ਰ ਨੇ ਬਹੁਤ ਸਾਰੇ ਅਨੁਮਾਨ ਲਗਾਏ ਹਨ, ਅਤੇ ਅਸੀਂ ਅਜੇ ਵੀ ਕੋਈ ਅਜਿਹਾ ਬਰਾਉਜ਼ਰ ਨਹੀਂ ਮਿਲਿਆ ਹੈ ਜੋ strong ਨੂੰ ਕਿਸੇ ਹੋਰ ਪ੍ਰਭਾਵ ਨਾਲ ਦਿਖਾਵੇ (ਹਾਲਾਂਕਿ ਇਹ ਇੱਕ ਹੋਰ ਤਰ੍ਹਾਂ ਦੇ CSS ਸੂਚਕਾਂ ਤੋਂ ਹੋ ਸਕਦਾ ਹੈ)।ਜੇਕਰ ਤੁਸੀਂ ਇਹ ਚਿੰਤਾ ਕਰਦੇ ਹੋ ਕਿ ਕਿਸੇ ਅਜਿਹੇ ਅਜਿਆਦੀ ਬਰਾਉਜ਼ਰ ਵਿੱਚ strong ਨੂੰ ਕੋਈ ਹੋਰ ਪ੍ਰਭਾਵ ਨਾਲ ਦਿਖਾਇਆ ਨਹੀਂ ਜਾਵੇ, ਤਾਂ ਤੁਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਇੱਕ CSS ਨਿਯਮ ਲਿਖ ਸਕਦੇ ਹੋ:

strong {
	font-weight: bold;
	font-style: normal;
	}