-
HTML Tags Elements
HTML
CSS
JavaScript
<div class="section"> <h2>Structure</h2> <div class="grid"> <div class="card"> <div class="tag">< html ></div> <div class="desc">Root element of an HTML document</div> </div> <div class="card"> <div class="tag">< head ></div> <div class="desc">Contains metadata and links</div> </div> <div class="card"> <div class="tag">< body ></div> <div class="desc">Main visible content</div> </div> <div class="card"> <div class="tag">< title ></div> <div class="desc">Page title in browser tab</div> </div> <div class="card"> <div class="tag">< meta ></div> <div class="desc">Defines metadata</div> </div> <div class="card"> <div class="tag">< link ></div> <div class="desc">Links external resources</div> </div> <div class="card"> <div class="tag">< style ></div> <div class="desc">Internal CSS styles</div> </div> <div class="card"> <div class="tag">< script ></div> <div class="desc">Adds JavaScript</div> </div> </div> </div> <!-- Text --> <div class="section"> <h2>Text Content</h2> <div class="grid"> <div class="card"> <div class="tag">< h1 >-< h6 ></div> <div class="desc">Headings from largest to smallest</div> </div> <div class="card"> <div class="tag">< p ></div> <div class="desc">Paragraph text</div> </div> <div class="card"> <div class="tag">< br ></div> <div class="desc">Line break</div> </div> <div class="card"> <div class="tag">< hr ></div> <div class="desc">Horizontal divider</div> </div> <div class="card"> <div class="tag">< pre ></div> <div class="desc">Preformatted text</div> </div> <div class="card"> <div class="tag">< blockquote ></div> <div class="desc">Quoted section</div> </div> <div class="card"> <div class="tag">< ul ></div> <div class="desc">Unordered list</div> </div> <div class="card"> <div class="tag">< ol ></div> <div class="desc">Ordered list</div> </div> <div class="card"> <div class="tag">< li ></div> <div class="desc">List item</div> </div> </div> </div> <!-- Inline --> <div class="section"> <h2>Inline Text</h2> <div class="grid"> <div class="card"> <div class="tag">< a ></div> <div class="desc">Hyperlink</div> </div> <div class="card"> <div class="tag">< span ></div> <div class="desc">Inline container</div> </div> <div class="card"> <div class="tag">< strong ></div> <div class="desc">Important text</div> </div> <div class="card"> <div class="tag">< em ></div> <div class="desc">Emphasized text</div> </div> <div class="card"> <div class="tag">< b ></div> <div class="desc">Bold text</div> </div> <div class="card"> <div class="tag">< i ></div> <div class="desc">Italic text</div> </div> <div class="card"> <div class="tag">< u ></div> <div class="desc">Underlined text</div> </div> <div class="card"> <div class="tag">< mark ></div> <div class="desc">Highlighted text</div> </div> <div class="card"> <div class="tag">< small ></div> <div class="desc">Smaller text</div> </div> </div> </div> <!-- Media --> <div class="section"> <h2>Media</h2> <div class="grid"> <div class="card"> <div class="tag">< img ></div> <div class="desc">Displays image</div> </div> <div class="card"> <div class="tag">< audio ></div> <div class="desc">Embeds audio</div> </div> <div class="card"> <div class="tag">< video ></div> <div class="desc">Embeds video</div> </div> <div class="card"> <div class="tag">< source ></div> <div class="desc">Media source file</div> </div> <div class="card"> <div class="tag">< track ></div> <div class="desc">Captions/subtitles</div> </div> <div class="card"> <div class="tag">< iframe ></div> <div class="desc">Embeds another page</div> </div> </div> </div> <!-- Forms --> <div class="section"> <h2>Forms</h2> <div class="grid"> <div class="card"> <div class="tag">< form ></div> <div class="desc">Form container</div> </div> <div class="card"> <div class="tag">< input ></div> <div class="desc">Input field</div> </div> <div class="card"> <div class="tag">< textarea ></div> <div class="desc">Multiline input</div> </div> <div class="card"> <div class="tag">< button ></div> <div class="desc">Clickable button</div> </div> <div class="card"> <div class="tag">< select ></div> <div class="desc">Dropdown list</div> </div> <div class="card"> <div class="tag">< option ></div> <div class="desc">Dropdown option</div> </div> <div class="card"> <div class="tag">< label ></div> <div class="desc">Label for input</div> </div> <div class="card"> <div class="tag">< fieldset ></div> <div class="desc">Groups form elements</div> </div> <div class="card"> <div class="tag">< legend ></div> <div class="desc">Fieldset title</div> </div> </div> </div> <!-- Table --> <div class="section"> <h2>Tables</h2> <div class="grid"> <div class="card"> <div class="tag">< table ></div> <div class="desc">Table container</div> </div> <div class="card"> <div class="tag">< tr ></div> <div class="desc">Table row</div> </div> <div class="card"> <div class="tag">< td ></div> <div class="desc">Table cell</div> </div> <div class="card"> <div class="tag">< th ></div> <div class="desc">Header cell</div> </div> <div class="card"> <div class="tag">< thead ></div> <div class="desc">Table header group</div> </div> <div class="card"> <div class="tag">< tbody ></div> <div class="desc">Table body group</div> </div> <div class="card"> <div class="tag">< tfoot ></div> <div class="desc">Table footer</div> </div> </div> </div> <!-- Semantic --> <div class="section"> <h2>Semantic</h2> <div class="grid"> <div class="card"> <div class="tag">< header ></div> <div class="desc">Top section</div> </div> <div class="card"> <div class="tag">< nav ></div> <div class="desc">Navigation links</div> </div> <div class="card"> <div class="tag">< section ></div> <div class="desc">Page section</div> </div> <div class="card"> <div class="tag">< article ></div> <div class="desc">Independent content</div> </div> <div class="card"> <div class="tag">< aside ></div> <div class="desc">Sidebar content</div> </div> <div class="card"> <div class="tag">< footer ></div> <div class="desc">Bottom section</div> </div> <div class="card"> <div class="tag">< main ></div> <div class="desc">Main content area</div> </div> <div class="card"> <div class="tag">< figure ></div> <div class="desc">Media container</div> </div> <div class="card"> <div class="tag">< figcaption ></div> <div class="desc">Caption for figure</div> </div> </div> </div>
body { margin: 0; font-family: 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; } header { text-align: center; padding: 25px; font-size: 26px; font-weight: bold; background: linear-gradient(135deg, #1e293b, #020617); } /* Section */ .section { padding: 20px; height: 500px; } .section h2 { margin-bottom: 15px; border-left: 4px solid #38bdf8; padding-left: 10px; } /* Grid */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; } /* Card */ .card { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; transition: 0.3s; cursor: pointer; } .card:hover { transform: translateY(-6px); background: #38bdf8; color: #020617; box-shadow: 0 6px 20px rgba(56,189,248,0.3); } .tag { font-weight: bold; font-size: 16px; } .desc { font-size: 13px; margin-top: 6px; opacity: 0.8; }
Live Preview
- HTML Tags Elements