HTML <figure> ਟੈਗ

ਵਿਆਖਿਆ ਅਤੇ ਵਰਤੋਂ

<figure> ਟੈਗ ਵਿੱਚ ਸਵੈ-ਸਮਾਵੇਸ਼ੀ ਸਮਾਗਮ ਸ਼ਾਮਿਲ ਹੁੰਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਚਿੱਤਰ, ਗਰਾਫ, ਫੋਟੋ, ਕੋਡ ਸੂਚੀ ਆਦਿ।

ਹਾਲਾਂਕਿ <figure> ਐਲੀਮੈਂਟ ਦਾ ਸਮਾਗਮ ਮੁੱਖ ਸਮਾਗਮ ਤੋਂ ਸੰਬੰਧਤ ਹੁੰਦਾ ਹੈ, ਪਰ ਇਸ ਦਾ ਸਥਾਨ ਮੁੱਖ ਸਮਾਗਮ ਤੋਂ ਅਲੱਗ ਹੁੰਦਾ ਹੈ, ਜੇਕਰ ਇਸ ਨੂੰ ਹਟਾਇਆ ਜਾਵੇ ਤਾਂ ਇਸ ਨਾਲ ਦਸਤਾਵੇਜ਼ ਦਾ ਸਮਾਗਮ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੋਵੇਗਾ।

ਸੁਝਾਅ:ਇਸ ਤਰ੍ਹਾਂ ਵਰਤੋਂ ਕਰੋ: <figcaption> ਐਲੀਮੈਂਟ ਲਈ <figure> ਐਲੀਮੈਂਟ ਦੇ ਟਾਈਟਲ ਵਾਲੇ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।

ਹੋਰ ਦੇਖੋ:

HTML DOM ਪੁਸਤਕਾਲ:ਫਿਗਰ ਆਬਜੈਕਟ

ਇਨਸਟੈਂਸ

ਉਦਾਹਰਣ 1

ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਫੋਟੋ ਦਰਸਾਉਣ ਲਈ <figure> ਐਲੀਮੈਂਟ ਵਰਤੋਂ ਕਰੋ, ਫੋਟੋ ਦੇ ਟਾਈਟਲ ਨੂੰ ਦੱਸਣ ਲਈ <figcaption> ਐਲੀਮੈਂਟ ਵਰਤੋਂ ਕਰੋ:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>ਚਿੱਤਰ 1 - ਇਟਲੀ ਦੇ ਪੁਲੀਆ ਖੇਤਰ ਦੇ ਤਰੂਲੀ。</figcaption>
</figure>

ਆਪਣੇ ਆਪ ਦੋਸ਼ਣ ਕਰੋ

ਉਦਾਹਰਣ 2

ਸਿਸਟਮ ਸੈਟਿੰਗ ਦੇ ਮਾਧਿਅਮ ਨਾਲ <figure> ਅਤੇ <figcaption> ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰੋ:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>ਚਿੱਤਰ 1 - ਇਟਲੀ ਦੇ ਪੁਲੀਆ ਖੇਤਰ ਦੇ ਤਰੂਲੀ。</figcaption>
</figure>
</body>
</html>

ਆਪਣੇ ਆਪ ਦੋਸ਼ਣ ਕਰੋ

ਸਾਰਵਤਰਿਕ ਪ੍ਰਤੀਯੋਗਿਤਾ

<figure> ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸਮਰਥਨ ਕਰਦੀ ਹੈ HTML ਵਿੱਚ ਸਾਰਵਤਰਿਕ ਪ੍ਰਤੀਯੋਗਿਤਾ

ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ

<figure> ਟੈਗ ਨੇ ਵੀ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ ਸਮਰਥਨ ਕਰਦੀ ਹੈ HTML ਵਿੱਚ ਈਵੈਂਟ ਪ੍ਰਤੀਯੋਗਿਤਾ

ਮੂਲਤਬੀ ਸੀਐੱਸਐੱਸ ਸੈਟਿੰਗ

ਮੋਸਟ ਬਰਾਊਜ਼ਰਜ਼ ਨੇ ਹੇਠ ਲਿਖੇ ਮੂਲਤਬੀ ਮੁੱਲਾਂ ਨਾਲ ਦਿਸਾਈ ਹੈ <figure> ਅਣਗਿਣਤ ਮੁੱਲ

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

ਆਪਣੇ ਆਪ ਦੋਸ਼ਣ ਕਰੋ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਇਸ ਸਾਰੀ ਤਾਲਿਕਾ ਵਿੱਚ ਸੰਖਿਆਵਾਂ ਨੇ ਪਹਿਲੀ ਵਾਰ ਇਸ ਇਲੈਕਟਰੋਨ ਦਾ ਪੂਰਨ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਆਖਰੀ ਸੰਸਕਰਣ ਦਿਸਾਈ ਹੈ。

ਚਰੋਮ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
ਚਰੋਮ ਐਂਜਲ ਫਾਇਰਫਾਕਸ ਸੈਫਾਰੀ ਓਪੇਰਾ
8.0 9.0 4.0 5.1 11.0

ਟਿੱਪਣੀ: <figure> ਟੈਗ ਹੈਲਥ ਵੀ.5 ਵਿੱਚ ਨਵਾਂ ਟੈਗ ਹੈ।