2009-02-25 17 views
7

कुछ समय के लिए मैं वेबसाइट बना रहा हूं, लेकिन कंटेनर टैग के उचित उपयोग के बारे में कभी भी चर्चा नहीं देखी है। मैंने संग्रह टैग में विभिन्न प्रकार की सामग्री देखी है, लेकिन आमतौर पर ऐसा लगता है कि पेज निर्माता सिर्फ अपनी पसंद की शैली चुनता है और इसके साथ चिपक जाता है।एचटीएमएल 'कंटेनर' टैग - उचित उपयोग?

मेरे मन में मुख्य विसंगति है कि

लेकिन मैं यह भी

<span> 

के बारे में राय की तरह है और किसी भी अन्य लोगों मैं भूल जा सकता है चाहता हूँ के बीच

<p> 
<div> 

उत्तर

12

एचटीएमएल मूल रूप से कंप्यूटर के लिए समझ में आता है संरचना के कुछ प्रकार में दस्तावेजों की सामग्री डाल करने के लिए बनाया गया था। इस बात को ध्यान में रखते हुए, p टैग को ऐसा कुछ भी माना जाना चाहिए जो अनुच्छेद के रूप में संरचित किया जाएगा यदि पृष्ठ की सामग्री मुद्रित दस्तावेज़ में बदल दी जानी चाहिए। div और span तत्व सामान्य-उपयोग कंटेनर के रूप में आरक्षित हैं ताकि संरचना के अतिरिक्त स्तर प्रदान करने के लिए संबंधित तत्वों के गठन और समूह को सुविधाजनक बनाया जा सके, शायद टेक्स्ट दस्तावेज़ में पृष्ठों से संबंधित हो।

कुछ मामलों में, p टैग , इस तरह के लंगर (a), छवि (img) और अन्य में लाइन तत्व के रूप में अन्य तत्वों, शामिल करना चाहिए क्योंकि वे पैरा और बाकी की सामग्री के लिए सीधे संबंधित उन्हें इस तरह से समूहित करने के लिए समझ में आता है, या शेष अनुच्छेद का पाठ अधिक गहराई से वर्णन प्रदान करता है।

यदि उन तत्वों का अतिरिक्त विवरण नहीं है, हालांकि, उन्हें एक सुविधाजनक कंटेनर के रूप में अनुच्छेद में रखने का अर्थ नहीं है; एक div अधिक उपयुक्त होगा। आम तौर पर, एक अनुच्छेद में पाठ का एक अनुच्छेद और सीधे संबंधित या वर्णित तत्व शामिल होना चाहिए। अनुच्छेद में कुछ भी ज्यादा समझ नहीं आता है।


अद्यतन: एचटीएमएल 5 शामिल करने की भी article, nav, header, section, और aside अन्य अर्थ "कंटेनर" तत्वों, के एक नंबर कहते हैं।

+1

"और संभवतः सूचियां (' ol' और 'ul') "नहीं,' ol' और 'ul' तत्व' p' तत्वों के भीतर मान्य नहीं हैं। – zzzzBov

+0

@zzzzBov सच है, मुझे अपने संपादन में उस त्रुटि को याद आया। मैंने जवाब सही कर दिया है। – cdeszaq

2

मुझे लगता है कि पेज निर्माता को अर्थपूर्ण मार्कअप का उपयोग करना चाहिए, जिसका अर्थ है कि उनके द्वारा बनाए गए मार्कअप को अर्थ (और प्रस्तुतिकरण नहीं) को संवाद करना चाहिए। <div> और <p> के अलग-अलग अर्थ हैं। पूर्व का उपयोग किसी HTML पृष्ठ के विभाजन (या अनुभाग) को परिभाषित करने के लिए किया जाता है, बाद वाले पाठ के अनुच्छेद को परिभाषित करने के लिए।

6

मुझे लगता है कि, टैग का अर्थ कुछ इस तरह है:

<p>Paragraph, usually just text</p> 

<div>A block, containing anything</div> 

<span>Just a simple non-blocking wrapper</span> 
+2

+1 लेकिन "गैर-अवरोधक रैपर" से आपका क्या मतलब है? – dialex

2

<p> एक ब्लॉक स्तर तत्व है कि एक पैरा, इनलाइन तत्वों है कि पाठ (<p>, <a>, <abbr>, आदि) को संशोधित कि, और छवियों को शामिल करना चाहिए, पाठ के शामिल है।

<div> पृष्ठ को विभाजित करने के लिए उपयोग किए जाने वाले ब्लॉक-स्तर तत्व है, लगभग हमेशा सीएसएस शैलियों के संयोजन के साथ।

<span> ... अच्छा, मैं ईमानदारी से इस टैग का अक्सर उपयोग नहीं करता हूं।यह एक इनलाइन तत्व है, और मैं आमतौर पर इसका उपयोग करता हूं जब मैं पाठ के एक हिस्से में शैलियों को लागू करना चाहता हूं जो <strong> और <em> टैग जैसे अधिक अर्थ के साथ कुछ उपयोग करने से लाभ नहीं उठाएगा।

1

मुझे <span> और <div> को "वेब डिवेलपमेंट के टोफू" के रूप में देखने के लिए खरीदा गया था, क्योंकि इसमें कोई वास्तविक स्वाद नहीं है लेकिन आप इसके साथ लगभग कुछ भी कर सकते हैं।

(एक्स) एचटीएमएल टैग परिभाषित करते हैं कि वे किस पाठ के आसपास हैं। यह और पता है, यह एक कड़ी है यह एक पैरा है, और इतने पर ...

<div> और <span> बस अपनी साइट के टुकड़े आप सामान्य रूप से करने के लिए नहीं मिल सकता के लिए हो रही के तरीके हैं। जब आप एक का आकार बदलने की कोशिश कर रहे हैं प्रतीक। मैंने कभी पाया है कि सबसे तेज़ तरीका यह था कि इसे एक कक्षा दें, इसे एक कक्षा दें और फिर सीएसएस को लागू करें।

यही मेरी राय में, वे अच्छे हैं। मैं यहां जो लिखा है उस पर अधिक या यहां तक ​​कि सुधारों को सुनने में दिलचस्पी होगी।

3

इन तीनों (और कई अन्य) टैग के बीच का अंतर उनके अर्थपूर्ण अर्थ है। एचटीएमएल मानक में विशिष्ट अर्थपूर्ण अर्थों के साथ दोनों टैग शामिल हैं (<p> पैराग्राफ के लिए, <em> जोरदार टेक्स्ट इत्यादि के लिए) और टैग अर्थपूर्ण अर्थ के बिना टैग्स।

बाद <div> और <span> जो block- या इनलाइन-स्तर की सामग्री जो पहचान किए जाने की आवश्यकता की पहचान करने के लिए उपयोग किया जाता है, (का उपयोग करते हुए कहते हैं, एक class= या id= विशेषता), लेकिन जिसके लिए एक शब्दार्थ-विशिष्ट टैग मौजूद नहीं है । उदाहरण के लिए, कोई <p>Hi, my name is <span class="name">John Doe</span>.</p> लिख सकता है - यह इंगित करता है कि यह एक पैराग्राफ है (जिसे ब्राउजर को पहले से ही यह समझने का विचार है) और इसका सामग्री का वह हिस्सा एक नाम है (जिसका अर्थ है कि ब्राउज़र के लिए कुछ भी नहीं है जब तक कि सीएसएस या जावास्क्रिप्ट इसका उपयोग नहीं करता)।

ये टैग इसलिए कर रहे हैं अविश्वसनीय रूप से उपयोगी दोनों एक HTML दस्तावेज जो मानक द्वारा आपूर्ति की अर्थ टैग में नहीं आता है के लिए अतिरिक्त जानकारी जोड़ने में आवेदन करने वाले दृश्य (सीएसएस) और के लिए (एक उत्कृष्ट उदाहरण के लिए the hCard specification देखें) या कार्यात्मक (जावास्क्रिप्ट) संरचना को इसके अर्थशास्त्र को बदलने के बिना किसी दस्तावेज़ में।

0

ऐसा लगता है कि आप HTML specification

The p element पढ़ने की जरूरत है:

p तत्व एक पैराग्राफ का प्रतिनिधित्व करता है।

The div element:

div तत्व सभी में कोई विशेष अर्थ नहीं है। यह अपने बच्चों का प्रतिनिधित्व करता है। इसका उपयोग class, lang, और title गुणों के साथ लगातार तत्वों के समूह में समान अर्थशास्त्र को चिह्नित करने के लिए किया जा सकता है।

The span element:

span तत्व अपने आप ही कुछ भी मतलब नहीं है, लेकिन जब वैश्विक गुण, जैसे के साथ उपयोग किया उपयोगी हो सकता हैclass, lang, या dir। यह अपने बच्चों का प्रतिनिधित्व करता है।

div और span के बीच प्रमुख अंतर यह है कि काल flow content, phrasing content, और palpable content है, जबकि एक div केवल flow content और palpable content है।

अनिवार्य रूप से यह करने पर निर्भर करता:

div तत्वों ब्लॉक स्तर तत्व हैं, और आम तौर पर केवल, अन्य ब्लॉक स्तर तत्वों के भीतर रखा जा सकता है जबकि span तत्वों इनलाइन तत्व हैं, और सबसे अन्य तत्वों के भीतर रखा जा सकता है ।

The HTML spec defines which elements are acceptable as descendents of each element

संबंधित मुद्दे