Span மற்றும் Div HTML உறுப்புகள் எவ்வாறு பயன்படுத்துவது

அதிக பாணி மற்றும் தளவமைப்பு கட்டுப்பாட்டுக்கு CSS உடன் span மற்றும் div ஐப் பயன்படுத்தவும்.

இணைய வடிவமைப்பு மற்றும் HTML / CSS க்கு புதியவர்கள் பலர் மற்றும்

உறுப்புகளை வலைப்பக்கங்களை உருவாக்குவதன் மூலம் ஒன்றுக்கொன்று மாற்றுகிறார்கள். உண்மையில், இருப்பினும், ஒவ்வொரு HTML உறுப்புகள் ஒவ்வொன்றும் வெவ்வேறு நோக்கங்களுக்காக சேவை செய்கின்றன. அதன் நோக்கத்திற்காக ஒவ்வொன்றும் பயன்படுத்தக் கற்றுக்கொள்வது, ஒட்டுமொத்தமாக நிர்வகிக்க எளிதாக இருக்கும் குறியீட்டு வலைப்பக்கங்களை உருவாக்க உதவும்.

உறுப்பைப் பயன்படுத்துதல்

Div உறுப்பு உங்கள் வலைப்பக்கத்தில் தருக்க பிரிவுகளை வரையறுக்கிறது.

இது அடிப்படையில் ஒரு பெட்டியில் நீங்கள் மற்ற HTML உறுப்புகள் வைக்க முடியும் இதில் தர்க்கரீதியாக ஒன்றாக செல்ல. பத்திகள், தலைப்புகள், பட்டியல்கள், இணைப்புகள், படங்கள் முதலியவற்றைப் போன்ற பல பிரிவுகளை அது கொண்டுள்ளது. இது உங்கள் HTML ஆவணத்திற்கு கூடுதல் கட்டமைப்பு மற்றும் அமைப்புகளை வழங்குவதற்குள் மற்ற பிரிவுகளையும் கொண்டிருக்கலாம்.

Div உறுப்புகளைப் பயன்படுத்த, உங்கள் பக்கத்தின் பகுதிக்கு ஒரு தனிப்பிரிவு மற்றும் அதற்குப் பிறகு ஒரு நெருக்கமான குறிச்சொல் எனத் தோன்றும் திறந்த

டேக் வைக்கவும்:

div உள்ளடக்கங்களை

உங்களுடைய பக்கத்தின் பகுதிக்குப் பின்னர் நீங்கள் CSS உடன் பாணியில் பயன்படுத்தக்கூடிய சில கூடுதல் தகவல்கள் தேவைப்பட்டால், நீங்கள் ஒரு ஐடி தேர்வுக்குழு (எ.கா.,

id = "myDiv">) அல்லது ஒரு வகுப்பு தேர்வுக்குழு (எ.கா., class = "bigDiv">). இந்த பண்புக்கூறுகள் பின்னர் CSS ஐப் பயன்படுத்தி அல்லது JavaScript ஐ பயன்படுத்தி மாற்றியமைக்கப்படும். தற்போதைய சிறந்த நடைமுறைகள் ஐடிகளுக்குப் பதிலாக வர்க்க தேர்வாளர்களைப் பயன்படுத்துவதைப் பொறுத்து, குறிப்பிட்ட ஐடி தேர்வாளர்கள் எப்படி இருக்கிறார்கள் என்பதைப் பொறுத்து. உண்மையாக, எனினும், நீங்கள் ஒரு பயன்படுத்த முடியும் மற்றும் கூட ஒரு ஐடி மற்றும் ஒரு வர்க்க தேர்வுக்குழு ஒரு பிரிவு கொடுக்க முடியும்.

வெர்சஸ் <பகுதி> எப்போது பயன்படுத்த வேண்டும்

Div உறுப்பு HTML5 பிரிவில் இருந்து மாறுபடுகிறது, ஏனென்றால் மூடப்பட்ட உள்ளடக்கம் எந்த சொற்பொருள் அர்த்தத்தையும் கொடுக்காது. உள்ளடக்கத்தின் தொகுதி ஒரு பிரிவை அல்லது பிரிவாக இருக்க வேண்டுமா என உறுதியாக தெரியாவிட்டால், உறுப்பு மற்றும் உள்ளடக்கத்தின் நோக்கம் என்ன பயன்படுத்த வேண்டும் என்பதைத் தீர்மானிக்க உதவுவது பற்றி சிந்திக்கவும்:

  • நீங்கள் பக்கத்தின் பகுதிக்கு பாணியை சேர்க்க வெறுமனே உறுப்பு தேவைப்பட்டால், நீங்கள் div உறுப்பு பயன்படுத்த வேண்டும்.
  • உள்ளடக்கத்தை உள்ளடக்கியிருந்தால், ஒரு தனித்துவமான கவனம் செலுத்தி, அதன் மீது நிற்க முடியும், அதற்குப் பதிலாக, பகுதியைப் பயன்படுத்த வேண்டும்.

இறுதியில், divs மற்றும் பிரிவுகள் இருவரும் மிகவும் இதேபோல் நடந்து நீங்கள் அவர்களுக்கு கொடுக்க முடியும் மதிப்புகள் கற்பிதம் மற்றும் உங்களுக்கு தேவையான உங்கள் தளத்தில் தோற்றத்தை பெற CSS அவற்றை பாணியில். இவை இரண்டும் தொகுதி அளவு கூறுகள்.

உறுப்பைப் பயன்படுத்துதல்

Span உறுப்பு இயல்புநிலை ஒரு இன்லைன் உறுப்பு ஆகும். இது பிரிவு மற்றும் பிரிவு கூறுகளைத் தவிர்த்து அமைக்கிறது. Span உறுப்பு பெரும்பாலும் ஒரு குறிப்பிட்ட உள்ளடக்கத்தின் உள்ளடக்கத்தை சாதாரணமாக உரைக்கு மாற்றுவதற்குப் பயன்படுத்தப்படுகிறது, இது பின்னர் பாணியில் சேர்க்கக்கூடிய ஒரு கூடுதல் "கொக்கி" கொடுக்கிறது. CSS உடன் பயன்படுத்திய, அதை இணைக்கும் உரையின் பாணியை மாற்றலாம்; இருப்பினும், எந்தவொரு பாணி பண்புக்கூறும் இல்லாமல், ஸ்பான் உறுப்பு தனியாக உரை மீது எந்த விளைவையும் கொண்டிருக்கவில்லை.

இது span மற்றும் div உறுப்புகள் இடையேயான முக்கிய வேறுபாடு ஆகும். மேலே குறிப்பிட்டுள்ளபடி, div உறுப்பு ஒரு பத்தி இடைவெளியை உள்ளடக்குகிறது, அதேசமயத்தில் span உறுப்பு தொடர்புடைய CSS நடை விதிகள் விண்ணப்பிக்க உலாவிக்கு மட்டுமே குறிச்சொற்களை இணைக்கப்படும்:


சிறப்பம்சமாக உரை மற்றும் தனிப்படுத்தப்படாத உரை.

வகுப்பு = "சிறப்பம்சமாக" அல்லது பிற வர்க்கம் CSS உடன் உரை (எ.கா., வர்க்கம் = "சிறப்பம்சமாக>>) உடன் ஸ்பான் உறுப்புக்கு சேர்க்கவும்.

Span உறுப்புக்கு தேவையான பண்புக்கூறுகள் இல்லை, ஆனால் மிகவும் பயனுள்ளதாக இருக்கும் மூன்று div உறுப்பு அந்த அதே தான்:

  • பாணி
  • வர்க்கம்
  • ஐடி

ஆவணத்தில் புதிய பிளாக்-லெவல் உறுப்பு என்று உள்ளடக்கத்தை வரையறுக்காமல் உள்ளடக்கத்தின் பாணியை நீங்கள் மாற்ற விரும்பும்போது span ஐப் பயன்படுத்தவும்.

உதாரணமாக, ஒரு h3 இன் இரண்டாவது சொல்லை சிவப்பு நிறமாக விரும்பினால், அந்த வார்த்தையை ஒரு span உறுப்புடன் சுற்றிப் பார்க்க முடியும், அது சிவப்பு உரையாகும். வார்த்தை இன்னும் H3 உறுப்பு பகுதியாக உள்ளது, ஆனால் இப்போது சிவப்பு காட்டுகிறது:

இது எனது வியக்கத்தக்க தலைப்பு

2/2/17 அன்று ஜெரமி ஜாராரால் திருத்தப்பட்டது