HTML ஃபார்மேட்டர்
HTML குறியீட்டை ஆன்லைனில் ஃபார்மேட் செய்யுங்கள்.
கண்டெண்ட் மேனேஜ்மென்ட் சிஸ்டம்கள், டெம்ப்ளேட் என்ஜின்கள் அல்லது கோட் ஜெனரேட்டர்கள் உருவாக்கும் HTML பெரும்பாலும் மினிஃபை செய்யப்பட்டு ஒரே வரியில் இருக்கும் — படிக்கவோ, டிபக் செய்யவோ, refactor செய்யவோ முடியாத நிலையில். இந்த HTML ஃபார்மேட்டர் உங்கள் markup-இன் nesting கட்டமைப்பைக் காட்ட சரியான இண்டெண்டேஷனைச் சேர்க்கிறது, இதனால் closed செய்யப்படாத tags, ஆழமாக nest செய்யப்பட்ட elements, அல்லது தவறான இடத்தில் உள்ள attributes ஆகியவற்றைக் கண்டறிவது எளிதாகிறது. வெளி மூலங்களில் இருந்து வரும் HTML உடன் பணிபுரிபவர்களுக்கும், லேஅவுட் சிக்கல்களை டிபக் செய்பவர்களுக்கும் இது ஒரு அவசியமான கருவி.
📋 இந்த கால்குலேட்டரை எப்படி பயன்படுத்துவது
உங்கள் HTML-ஐ input புலத்தில் பேஸ்ட் செய்யவும் — அது ஒரு snippet அல்லது முழு HTML document-ஆக இருக்கலாம். 2-space இண்டெண்டேஷன் கொண்ட வெளியீட்டைப் பெற "Format HTML" கிளிக் செய்யவும். Child elements தங்கள் parent-ஐ ஒப்பிட்டு இண்டெண்ட் செய்யப்படும். Elements-க்குள் உள்ள text content அந்த element-இன் level-க்கு இண்டெண்ட் செய்யப்படும். Void elements (br, img, input, hr, meta, link) சரியாகக் கையாளப்படும், அவற்றுக்கு closing tags தேவைப்படாது. ஃபார்மேட் செய்யப்பட்ட வெளியீட்டைப் பெற Copy பட்டனைப் பயன்படுத்தவும். ஃபார்மேட் செய்யப்பட்ட HTML, input-உடன் அர்த்தத்தில் சரியாக ஒத்திருக்கும்.
💡 முக்கிய தகவல்கள்
HTML ஃபார்மேட்டிங் ஒரு token-அடிப்படையிலான அணுகுமுறையைப் பயன்படுத்துகிறது: input tag boundaries-இல் பிரிக்கப்படும், மற்றும் ஒவ்வொரு token-உம் தற்போதைய இண்டெண்டேஷன் depth-ஐக் கண்காணிக்க வரிசையாகப் பயன்படுத்தப்படும். Opening tags depth-ஐ அதிகரிக்கும், closing tags அதைக் குறைக்கும். Void elements (area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr) depth-ஐ அதிகரிக்காது. Self-closing tags (/>-இல் முடிவடையும்) அவையும் depth-ஐ அதிகரிக்காது. Comments அப்படியே பாதுகாக்கப்படும். இந்த அணுகுமுறை பெரும்பாலான HTML-ஐ சரியாகக் கையாளும், ஆனால் வேண்டுமென்றே செய்யப்பட்ட inline ஃபார்மேட்டிங்கை (எ.கா., ஒரு வாக்கியத்தின் நடுவில் உள்ள <strong> tag தனி வரிக்கு நகர்த்தப்படலாம்) பாதுகாக்காமல் இருக்கலாம்.