'}, {n:'header',cat:'sem',d:'Page or section header',attrs:[],ex:'
    '}, {n:'hr',cat:'text',d:'Thematic break (self-closing)',attrs:[],ex:'

    Para 1

    Para 2

    '}, {n:'html',cat:'meta',d:'Root element',attrs:['lang','dir'],ex:'...'}, {n:'i',cat:'text',d:'Alternate voice / icon (no emphasis)',attrs:[],ex:''}, {n:'iframe',cat:'media',d:'Inline frame (nested browsing context)',attrs:['src','srcdoc','name','width','height','sandbox','loading'],ex:''}, {n:'img',cat:'media',d:'Image (self-closing)',attrs:['src','alt','width','height','loading','srcset','sizes'],ex:'A cat'}, {n:'input',cat:'form',d:'Form input (self-closing)',attrs:['type','name','value','placeholder','required','disabled','readonly','min','max','pattern','accept','autofocus','autocomplete'],ex:''}, {n:'ins',cat:'text',d:'Inserted text',attrs:['cite','datetime'],ex:'new'}, {n:'kbd',cat:'text',d:'Keyboard input',attrs:[],ex:'Press Ctrl+S.'}, {n:'label',cat:'form',d:'Caption for form control',attrs:['for'],ex:''}, {n:'legend',cat:'form',d:'Caption for fieldset',attrs:[],ex:'
    Profile...
    '}, {n:'li',cat:'list',d:'List item',attrs:['value'],ex:''}, {n:'link',cat:'meta',d:'External resource link (self-closing)',attrs:['rel','href','type','as','crossorigin','integrity','media'],ex:''}, {n:'main',cat:'sem',d:'Main content of the page',attrs:[],ex:'

    Page

    ...

    '}, {n:'map',cat:'media',d:'Image map',attrs:['name'],ex:''}, {n:'mark',cat:'text',d:'Highlighted / marked text',attrs:[],ex:'important'}, {n:'menu',cat:'list',d:'List of commands',attrs:[],ex:'
  1. Cut
  2. Copy
    3. '}, {n:'meter',cat:'text',d:'Scalar measurement',attrs:['min','max','value','low','high','optimum'],ex:'6/10'}, {n:'nav',cat:'sem',d:'Navigation links',attrs:[],ex:''}, {n:'noscript',cat:'meta',d:'Fallback for no-JS',attrs:[],ex:''}, {n:'object',cat:'media',d:'Embedded external resource',attrs:['data','type','width','height'],ex:''}, {n:'ol',cat:'list',d:'Ordered list',attrs:['start','reversed','type'],ex:'
    1. First
    2. Second
    '}, {n:'optgroup',cat:'form',d:'Group of option elements',attrs:['label','disabled'],ex:''}, {n:'option',cat:'form',d:'Option in a select list',attrs:['value','selected','disabled','label'],ex:''}, {n:'output',cat:'form',d:'Result of a calculation',attrs:['for','form','name'],ex:'0'}, {n:'p',cat:'text',d:'Paragraph',attrs:[],ex:'

    Hello world.

    '}, {n:'picture',cat:'media',d:'Responsive image container',attrs:[],ex:''}, {n:'pre',cat:'text',d:'Preformatted text',attrs:[],ex:'
    line1\n  line2
    '}, {n:'progress',cat:'text',d:'Progress bar',attrs:['value','max'],ex:'70%'}, {n:'q',cat:'text',d:'Inline quotation',attrs:['cite'],ex:'He said hello.'}, {n:'rp',cat:'text',d:'Fallback for ruby',attrs:[],ex:'漢(han)'}, {n:'rt',cat:'text',d:'Ruby annotation',attrs:[],ex:'漢han'}, {n:'ruby',cat:'text',d:'East Asian annotations',attrs:[],ex:'漢han'}, {n:'s',cat:'text',d:'Strikethrough (no longer correct)',attrs:[],ex:'old price'}, {n:'samp',cat:'text',d:'Sample output',attrs:[],ex:'404 Not Found'}, {n:'script',cat:'meta',d:'Embedded or linked script',attrs:['src','type','defer','async','integrity','crossorigin','nonce'],ex:'<'+'script src="app.js" defer>'}, {n:'search',cat:'sem',d:'Search section',attrs:[],ex:''}, {n:'section',cat:'sem',d:'Thematic group of content',attrs:[],ex:'

    Chapter 1

    ...

    '}, {n:'select',cat:'form',d:'Drop-down list',attrs:['name','size','multiple','required','disabled','autofocus'],ex:''}, {n:'slot',cat:'text',d:'Placeholder in web component',attrs:['name'],ex:'Hi'}, {n:'small',cat:'text',d:'Side comments / small print',attrs:[],ex:'© 2026'}, {n:'source',cat:'media',d:'Media resource (audio/video/picture)',attrs:['src','srcset','type','media','sizes'],ex:''}, {n:'span',cat:'text',d:'Inline container (no semantic meaning)',attrs:[],ex:'highlighted'}, {n:'strong',cat:'text',d:'Important text',attrs:[],ex:'Warning'}, {n:'style',cat:'meta',d:'Embedded CSS',attrs:['type','media','nonce'],ex:''}, {n:'sub',cat:'text',d:'Subscript',attrs:[],ex:'H2O'}, {n:'summary',cat:'sem',d:'Caption for details',attrs:[],ex:'
    More info

    ...

    '}, {n:'sup',cat:'text',d:'Superscript',attrs:[],ex:'E=mc2'}, {n:'svg',cat:'svg',d:'Scalable vector graphics',attrs:['viewBox','xmlns','width','height'],ex:''}, {n:'table',cat:'table',d:'Table',attrs:[],ex:'
    Cell
    '}, {n:'tbody',cat:'table',d:'Table body',attrs:[],ex:'...
    '}, {n:'td',cat:'table',d:'Table cell',attrs:['colspan','rowspan','headers'],ex:'Cell'}, {n:'template',cat:'meta',d:'Inactive HTML fragment',attrs:[],ex:''}, {n:'textarea',cat:'form',d:'Multiline text input',attrs:['name','rows','cols','placeholder','required','maxlength','readonly','disabled','wrap'],ex:''}, {n:'tfoot',cat:'table',d:'Table footer',attrs:[],ex:'
    Sum: 10
    '}, {n:'th',cat:'table',d:'Table header cell',attrs:['colspan','rowspan','scope','abbr'],ex:'Name'}, {n:'thead',cat:'table',d:'Table header group',attrs:[],ex:'
    X
    '}, {n:'time',cat:'text',d:'Time / date',attrs:['datetime'],ex:''}, {n:'title',cat:'meta',d:'Document title',attrs:[],ex:'My page'}, {n:'tr',cat:'table',d:'Table row',attrs:[],ex:'AB'}, {n:'track',cat:'media',d:'Text track for media (self-closing)',attrs:['src','kind','srclang','label','default'],ex:''}, {n:'u',cat:'text',d:'Unarticulated annotation (underline)',attrs:[],ex:'spelling'}, {n:'ul',cat:'list',d:'Unordered list',attrs:[],ex:''}, {n:'var',cat:'text',d:'Variable',attrs:[],ex:'x = 5'}, {n:'video',cat:'media',d:'Video content',attrs:['src','controls','autoplay','loop','muted','poster','preload','width','height'],ex:''}, {n:'wbr',cat:'text',d:'Word break opportunity (self-closing)',attrs:[],ex:'longword'}, {n:'area',cat:'media',d:'Hotspot in image map',attrs:['shape','coords','href','alt'],ex:''}, {n:'base',cat:'meta',d:'Base URL for relative links',attrs:['href','target'],ex:''}, {n:'body',cat:'meta',d:'Document body',attrs:[],ex:'...'}, {n:'data-*',cat:'aria',d:'Custom data attributes',attrs:['any'],ex:'
    '}, {n:'aria-*',cat:'aria',d:'ARIA accessibility attributes',attrs:['aria-label','aria-hidden','aria-current','aria-expanded','aria-controls','aria-describedby'],ex:''} ]; const {$,$$,t}=GZ; const CATS={sem:'Semantic',text:'Text',form:'Forms',media:'Media',table:'Tables',list:'Lists',aria:'ARIA',meta:'Meta',svg:'SVG'}; function renderTabs(){ const cats=[{v:'all',k:'all'},...Object.entries(CATS).map(([v,k])=>({v,k}))]; $('#catTabs').innerHTML=cats.map(c=>`${t(c.k)||c.k}`).join(''); $('#cat').innerHTML=cats.map(c=>``).join(''); $('#catTabs').addEventListener('click',e=>{ if(!e.target.classList.contains('cat-tab'))return; $$('#catTabs .cat-tab').forEach(t=>t.classList.remove('active')); e.target.classList.add('active'); $('#cat').value=e.target.dataset.cat; render(); }); $('#cat').addEventListener('change',e=>{ $$('#catTabs .cat-tab').forEach(t=>t.classList.toggle('active',t.dataset.cat===e.target.value)); render(); }); } function filterTags(){ const q=$('#search').value.toLowerCase().trim(); const cat=$('#cat').value; return TAGS.filter(t=>{ if(cat!=='all'&&t.cat!==cat)return false; if(!q)return true; return t.n.toLowerCase().includes(q) || t.d.toLowerCase().includes(q) || t.attrs.join(' ').toLowerCase().includes(q) || (CATS[t.cat]||'').toLowerCase().includes(q); }); } function render(){ const list=filterTags(); $('#grid').innerHTML=list.map(t=>`

    <${t.n}> ${CATS[t.cat]||t.cat}

    ${t.d}

    ${t.attrs.length?t.attrs.slice(0,3).map(a=>''+a+'').join(' ')+(t.attrs.length>3?' +'+(t.attrs.length-3)+'':''):''}
    `).join('') || '
    No matches.
    '; $$('.tag-card').forEach(card=>card.addEventListener('click',()=>showDetail(card.dataset.tag))); } function showDetail(name){ const tag=TAGS.find(t=>t.n===name); if(!tag)return; const d=$('#detail'); d.classList.add('open'); d.innerHTML=`

    <${tag.n}>

    ${tag.d}

    ${t('exampleLabel')}

    ${escapeHtml(tag.ex)}
    ${tag.attrs.length?`

    Attributes

    ${tag.attrs.map(a=>`
    ${a}
    ${attrDesc(a)}
    `).join('')}
    `:''}

    Live preview

    `; d.scrollIntoView({behavior:'smooth',block:'nearest'}); } function escapeHtml(s){return s.replace(/&/g,'&').replace(//g,'>');} function escapeAttr(s){return s.replace(/"/g,'"').replace(/&/g,'&');} function attrDesc(a){ const map={href:'URL or fragment',target:'_self|_blank|_parent|_top|framename',rel:'Relationship (noopener, nofollow…)', src:'Resource URL',alt:'Alternative text (accessibility)',type:'MIME type',name:'Field name',value:'Field value', placeholder:'Hint text',required:'Required field',disabled:'Disable element',id:'Unique identifier', class:'CSS classes',style:'Inline CSS',title:'Advisory text',lang:'Language code',dir:'ltr|rtl|auto', width:'Width (px or %)',height:'Height (px or %)',loading:'eager|lazy',srcset:'Responsive image source set', sizes:'Sizes for responsive images',defer:'Defer script execution',async:'Async script',action:'Form submit URL', method:'get|post',enctype:'Form encoding type',autocomplete:'on|off',maxlength:'Max characters', pattern:'Regex for validation',min:'Min value/date',max:'Max value/date',step:'Increment step',rows:'Visible rows', cols:'Visible columns',wrap:'soft|hard',cite:'Source URL',datetime:'Machine-readable date', open:'Open by default',controls:'Show playback controls',autoplay:'Auto-play',loop:'Loop media',muted:'Muted', poster:'Video poster image',preload:'none|metadata|auto',sandbox:'Sandbox flags',srcdoc:'Inline HTML content', for:'Associated control id',form:'Associated form id',scope:'row|col|rowgroup|colgroup',colspan:'Span columns', rowspan:'Span rows',headers:'Related th ids',selected:'Selected by default',multiple:'Allow multiple', reversed:'Reverse order',start:'Start number',span:'Span count',kind:'subtitles|captions|descriptions|chapters|metadata', srclang:'Language code',label:'Visible label',default:'Default track',download:'Download as filename', integrity:'Subresource integrity hash',crossorigin:'anonymous|use-credentials',nonce:'CSP nonce',as:'Resource type', media:'Media query or media type',viewBox:'SVG viewBox',xmlns:'XML namespace',coords:'Shape coordinates', shape:'rect|circle|poly|default',hreflang:'Language of linked resource',rev:'Reverse relationship', abbr:'Abbreviation of header content'}; return map[a]||'Element-specific attribute'; } renderTabs(); render(); $('#search').addEventListener('input',render); GZ.renderToolPage({ category:'dev', titleKey:'toolTitle',descKey:'toolDesc', howToSteps:['step1','step2','step3','step4'], related:[ {icon:'📜',href:'/dev/regex-cheatsheet.html',name:'Regex Cheatsheet'}, {icon:'📄',href:'/dev/html-validator.html',name:'HTML Validator'}, {icon:'📚',href:'/dev/git-commands.html',name:'Git Commands'}, {icon:'🎯',href:'/dev/css-specificity.html',name:'CSS Specificity'} ] });