HTML பியூட்டிஃபையர் & மினிஃபையர்

குழப்பமான HTML-ஐப் படிக்க எளிதாக உள்தள்ளுங்கள், அல்லது வெளியிடுவதற்காகச் சுருக்குங்கள் — உடைந்த டேக்குகளைச் சரிபார்க்கும் கூடுதல் வசதியுடன்.

HTML உள்ளீடு

உள்தள்ளல்
சரிபார்
page.html
HTML-ஐ வடிவமைக்க, சுருக்க அல்லது சரிபார்க்க இங்கே ஒட்டவும் அல்லது தட்டச்சு செய்யவும்.

உங்கள் HTML உங்கள் உலாவியிலேயே வடிவமைக்கப்பட்டு, சுருக்கப்பட்டு, சரிபார்க்கப்படுகிறது. BroBroGo-விற்கு எதுவும் பதிவேற்றப்படுவதில்லை.

அடிக்கடி கேட்கப்படும் கேள்விகள்

Beautify மற்றும் Minify ஆகியவற்றுக்கு இடையே உள்ள வேறுபாடு என்ன?

Beautify என்பது மார்க்அப் குறியீட்டின் உள்தள்ளல்களையும் இடைவெளிகளையும் சீரமைத்து, எளிதாகப் படிக்கவும் திருத்தவும் வழிவகுக்கிறது. Minify இதற்கு நேர்மாறானது — உலாவிக்குத் தேவையில்லாத வெற்று இடைவெளிகளையும் கருத்துகளையும் நீக்கி, கோப்பின் அளவைக் குறைத்து வேகமாக ஏற்ற உதவுகிறது. வேலை செய்யும்போது Beautify-ஐயும், வெளியிடும்போது Minify-ஐயும் பயன்படுத்தவும்.

சரிபார்ப்பை (Validation) இயக்குவது எவற்றைச் சோதிக்கும்?

இது உலாவி சாதாரணமாகக் கடந்து செல்லும் கட்டமைப்புப் பிரச்சினைகளைக் கண்டறிந்து காட்டும் — மூடப்படாத அல்லது பொருந்தாத டேக்குகள், நகல் ஐடிகள் (duplicate ids), மீண்டும் மீண்டும் வரும் பண்புக்கூறுகள் மற்றும் எஸ்கேப் செய்யப்படாத எழுத்துகள் போன்றவற்றை அவற்றின் வரிசை மற்றும் நெடுவரிசையுடன் குறிப்பிடும். இது ஒரு விரைவான கட்டமைப்புச் சரிபார்ப்பே தவிர, முழுமையான W3C இணக்க அறிக்கை அல்ல.

சுருக்குவதால் எனது பக்கத்தின் தோற்றம் மாறுமா?

இல்லை — உங்கள் பக்கத்தின் தோற்றமும் செயல்பாடும் அப்படியே இருக்கும். சுருக்குதல் (Minifying) என்பது வெற்று இடைவெளிகளையும் கருத்துகளையும் நீக்குகிறது, இன்லைன் CSS மற்றும் JavaScript குறியீடுகளைச் சுருக்குகிறது, மேலும் விருப்பத்திற்குரிய பண்புக்கூறு மேற்கோள்களைத் தவிர்க்கிறது; உலாவிக்குத் தேவையானவற்றை மட்டுமே தக்கவைத்துக் கொள்ளும். முன்வடிவமைக்கப்பட்ட பிளாக்குகள் (preformatted blocks) போன்ற இடைவெளி உணர்திறன் கொண்ட உரைகள் மாற்றப்படாமல் அப்படியே இருக்கும்.

HTML குறியீட்டை வடிவமைத்தல் மற்றும் சுருக்குதல்

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

பயனர்கள் தங்களின் HTML குறியீட்டை "HTML உள்ளீடு" பகுதியில் ஒட்டலாம் அல்லது தட்டச்சு செய்யலாம். குறியீட்டை அழகாக்கும்போது (Beautify), உள்தள்ளலுக்காக "2/4 spaces or Tab" ஆகிய விருப்பங்களில் ஒன்றைத் தேர்ந்தெடுக்கலாம். மேலும், குறியீட்டில் உள்ள பிழைகளைக் கண்டறியும் "சரிபார்" வசதியைத் தேவைக்கேற்ப "இயக்கு" அல்லது "முடக்கு" செய்து கொள்ளலாம்.

இந்தக் கருவி அதிகபட்சமாக 500,000 எழுத்துகள் வரை உள்ள HTML குறியீடுகளைச் செயலாக்க அனுமதிக்கிறது. உள்ளீடு செய்யப்பட்ட குறியீடு இந்த வரம்பை விட அதிகமாக இருந்தால், "இந்த ஆவணம் செயலாக்க முடியாத அளவுக்குப் பெரியதாக உள்ளது. சிறிய கோப்பை முயற்சிக்கவும்." என்ற பிழைச்செய்தி காட்டப்படும். ஏதேனும் காரணத்தினால் HTML குறியீட்டைச் செயலாக்க முடியாமல் போனால், "இந்த HTML-ஐச் செயலாக்க முடியவில்லை." என்ற செய்தி வெளியீடாகக் காட்டப்படும்.


Beautify மற்றும் Minify செயல்பாடுகளின் வேறுபாடுகள்

HTML குறியீட்டை அழகாக்குவதற்கும் (Beautify) சுருக்குவதற்கும் (Minify) இடையே உள்ள வேறுபாடுகள் அவற்றின் நோக்கத்திலும் செயல்பாட்டிலும் அடங்கியுள்ளன.

HTML Beautification (அழகாக்குதல்)

குழப்பமாக இருக்கும் HTML குறியீடுகளை மனிதர்கள் எளிதாகப் படித்துப் புரிந்துகொள்ளும் வகையில் மாற்றுவதே இதன் நோக்கமாகும்.

  • இது மார்க்அப் குறியீடுகளை மறுசீரமைத்து, முறையான உள்தள்ளல்களுடன் இடைவெளி விட்டு அமைக்கிறது.
  • இதன் மூலம் குறியீட்டைத் திருத்துவதும் பராமரிப்பதும் எளிதாகிறது.
  • இந்தச் செயல்முறை முடிந்ததும், "அழகாக்கப்பட்டது." என்ற நிலைச் செய்தி திரையில் தோன்றும்.

HTML Minification (சுருக்குதல்)

இணையதளங்களின் செயல்திறனையும், அவை ஏற்றப்படும் வேகத்தையும் அதிகரிப்பதே இதன் முதன்மை நோக்கமாகும்.

  • இது குறியீட்டில் உள்ள தேவையற்ற வெற்று இடைவெளிகளையும் (whitespace) கருத்துகளையும் (comments) முழுமையாக நீக்குகிறது.
  • HTML பக்கங்களுக்குள் இருக்கும் இன்லைன் CSS மற்றும் JavaScript குறியீடுகளைச் சுருக்குகிறது.
  • விருப்பத்திற்குரிய பண்புக்கூறு மேற்கோள்களைத் (optional attribute quotes) தவிர்க்கிறது.
  • முன்வடிவமைக்கப்பட்ட பிளாக்குகள் (preformatted blocks) போன்ற இடைவெளி உணர்திறன் கொண்ட உரைகளைச் சுருக்கத்தின் போது எந்த மாற்றமும் செய்யாமல் அப்படியே விட்டுவிடுகிறது.
  • இந்தச் செயல்முறை முடிந்ததும், "சுருக்கப்பட்டது." அல்லது சேமிக்கப்பட்ட அளவின் சதவீதத்தைக் காட்டும் வகையில் "சுருக்கப்பட்டது — {pct}% சிறியது." என்ற செய்தி காட்டப்படும்.

குறியீட்டு அளவீடுகள் மற்றும் புள்ளிவிவரங்கள்

HTML குறியீடு செயலாக்கப்பட்ட பிறகு, அதன் தற்போதைய நிலையை விளக்கும் புள்ளிவிவரங்கள் நிகழ்நேரத்தில் காட்டப்படும்.

அளவீடு விளக்கம்
வரிகள் செயலாக்கப்பட்ட HTML குறியீட்டில் உள்ள மொத்த வரிகளின் எண்ணிக்கை.
எழுத்துகள் செயலாக்கப்பட்ட HTML குறியீட்டில் உள்ள மொத்த எழுத்துகளின் எண்ணிக்கை.
அளவு செயலாக்கப்பட்ட HTML குறியீட்டின் அளவு பைட்டுகளில் (bytes).

சுருக்குதல் (Minify) செயல்பாட்டைப் பயன்படுத்தும்போது, அசல் கோப்பின் அளவிலிருந்து எவ்வளவு சதவீதம் குறைக்கப்பட்டுள்ளது என்பதை "சுருக்கப்பட்டது — {pct}% சிறியது." என்ற வடிவில் துல்லியமாகக் கணக்கிட்டுக் காட்டுகிறது.


HTML கட்டமைப்புச் சரிபார்ப்பு (Validation)

குறியீட்டில் உள்ள பிழைகளைக் கண்டறியும் சரிபார்ப்பு வசதி இயக்கத்தில் இருக்கும்போது, பின்னணியில் "சரிபார்க்கிறது…" என்ற நிலைச் செய்தி காண்பிக்கப்படும். இந்தச் சரிபார்ப்பு என்பது முழுமையான W3C இணக்க அறிக்கை (W3C conformance report) அல்ல; இது குறியீட்டின் கட்டமைப்பை விரைவாகச் சரிபார்க்கும் ஒரு வழிமுறையாகும்.

இந்தச் சரிபார்ப்பு பின்வரும் பொதுவான கட்டமைப்புப் பிரச்சினைகளைக் கண்டறிகிறது:

  • மூடப்படாத அல்லது பொருந்தாத டேக்குகள் (unclosed or mismatched tags).
  • ஒரே பக்கத்தில் மீண்டும் பயன்படுத்தப்பட்டுள்ள நகல் ஐடிகள் (duplicate IDs).
  • ஒரே டேக்கில் மீண்டும் மீண்டும் வரும் பண்புக்கூறுகள் (repeated attributes).
  • எஸ்கேப் செய்யப்படாத எழுத்துகள் (unescaped characters).

குறியீட்டில் எந்தப் பிரச்சினையும் இல்லை எனில், "சரிபார்ப்பு" பிரிவின் கீழ் "சிக்கல்கள் எதுவும் கண்டறியப்படவில்லை." என்ற செய்தி தோன்றும். ஏதேனும் பிழைகள் கண்டறியப்பட்டால், "{count} சிக்கல்(கள்) கண்டறியப்பட்டது." என்று காட்டப்பட்டு, ஒவ்வொரு பிழையும் இருக்கும் இடம் "வரிசை {line}:{col}" என்ற வடிவில் துல்லியமாகக் குறிப்பிடப்படும்.


தரவுப் பாதுகாப்பு மற்றும் செயலாக்கம்

இந்தக் கருவியைப் பயன்படுத்தும்போது உங்கள் தரவுகளின் தனியுரிமை முழுமையாகப் பாதுகாக்கப்படுகிறது. உங்கள் HTML குறியீடு வடிவமைக்கப்படுவதும், சுருக்கப்படுவதும், சரிபார்க்கப்படுவதும் முற்றிலும் உங்கள் கணினியின் இணைய உலாவியிலேயே (browser) நடைபெறுகிறது. நீங்கள் உள்ளீடு செய்யும் எந்தவொரு குறியீடும் BroBroGo இணையதளத்தின் சேவையகங்களுக்குப் (servers) பதிவேற்றப்படுவதில்லை.


அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)

Beautify மற்றும் Minify ஆகியவற்றுக்கு இடையே உள்ள வேறுபாடு என்ன?

Beautify என்பது மார்க்அப் குறியீட்டின் உள்தள்ளல்களையும் இடைவெளிகளையும் சீரமைத்து, எளிதாகப் படிக்கவும் திருத்தவும் வழிவகுக்கிறது. Minify இதற்கு நேர்மாறானது — உலாவிக்குத் தேவையில்லாத வெற்று இடைவெளிகளையும் கருத்துகளையும் நீக்கி, கோப்பின் அளவைக் குறைத்து வேகமாக ஏற்ற உதவுகிறது. வேலை செய்யும்போது Beautify-ஐயும், வெளியிடும்போது Minify-ஐயும் பயன்படுத்தவும்.

சரிபார்ப்பை (Validation) இயக்குவது எவற்றைச் சோதிக்கும்?

இது உலாவி சாதாரணமாகக் கடந்து செல்லும் கட்டமைப்புப் பிரச்சினைகளைக் கண்டறிந்து காட்டும் — மூடப்படாத அல்லது பொருந்தாத டேக்குகள், நகல் ஐடிகள் (duplicate ids), மீண்டும் மீண்டும் வரும் பண்புக்கூறுகள் மற்றும் எஸ்கேப் செய்யப்படாத எழுத்துகள் போன்றவற்றை அவற்றின் வரிசை மற்றும் நெடுவரிசையுடன் குறிப்பிடும். இது ஒரு விரைவான கட்டமைப்புச் சரிபார்ப்பே தவிர, முழுமையான W3C இணக்க அறிக்கை அல்ல.

சுருக்குதால் எனது பக்கத்தின் தோற்றம் மாறுமா?

இல்லை — உங்கள் பக்கத்தின் தோற்றமும் செயல்பாடும் அப்படியே இருக்கும். சுருக்குதல் (Minifying) என்பது வெற்று இடைவெளிகளையும் கருத்துகளையும் நீக்குகிறது, இன்லைன் CSS மற்றும் JavaScript குறியீடுகளைச் சுருக்குகிறது, மேலும் விருப்பத்திற்குரிய பண்புக்கூறு மேற்கோள்களைத் தவிர்க்கிறது; உலாவிக்குத் தேவையானவற்றை மட்டுமே தக்கவைத்துக் கொள்ளும். முன்வடிவமைக்கப்பட்ட பிளாக்குகள் (preformatted blocks) போன்ற இடைவெளி உணர்திறன் கொண்ட உரைகள் மாற்றப்படாமல் அப்படியே இருக்கும்.

இந்தக் கருவியில் உள்ளீடு செய்யக்கூடிய அதிகபட்ச வரம்பு என்ன?

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