-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
873 lines (798 loc) · 59.3 KB
/
index.html
File metadata and controls
873 lines (798 loc) · 59.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The Ultimate HTML Encyclopedia. Every tag, every attribute, and every best practice explained from scratch.">
<meta name="author" content="ProXentix">
<title>The Complete HTML Encyclopedia | Master Every Tag</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ProgrammerKR/ProXIcons@latest/css/proxicons.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="scroll-progress"></div>
<button id="mobile-menu-toggle" class="mobile-menu-btn">
<i class="px px-menu"></i>
</button>
<div class="app-container">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<a href="#" class="sidebar-logo">
<i class="px px-code-alt"></i>
<span>HTML Complete</span>
</a>
<nav id="sidebar-nav">
<p class="nav-section-title">1. Introduction</p>
<a href="#intro" class="nav-link active">What is HTML?</a>
<a href="#history" class="nav-link">Origins & History</a>
<a href="#how-to-build" class="nav-link">Build Your First Site</a>
<p class="nav-section-title">2. Document Structure</p>
<a href="#boilerplate" class="nav-link">Root Elements</a>
<a href="#metadata" class="nav-link">Head & Metadata</a>
<p class="nav-section-title">3. Content Organization</p>
<a href="#semantic" class="nav-link">Semantic Sections</a>
<a href="#text-basic" class="nav-link">Text Basics</a>
<a href="#text-inline" class="nav-link">Inline Elements</a>
<a href="#lists" class="nav-link">Lists Mastery</a>
<p class="nav-section-title">4. Multimedia & Embedded</p>
<a href="#images" class="nav-link">Images & Picture</a>
<a href="#media-tags" class="nav-link">Audio & Video</a>
<a href="#embedding" class="nav-link">Iframes & Canvas</a>
<a href="#svg-math" class="nav-link">SVG & MathML</a>
<p class="nav-section-title">5. Data & Forms</p>
<a href="#tables" class="nav-link">Table Mastery</a>
<a href="#forms-basic" class="nav-link">Form Basics</a>
<a href="#input-types" class="nav-link">Every Input Type</a>
<a href="#forms-adv" class="nav-link">Advanced Forms</a>
<p class="nav-section-title">6. Scripting & Interactive</p>
<a href="#scripting" class="nav-link">Script & Noscript</a>
<a href="#interactive" class="nav-link">Dialog & Details</a>
<p class="nav-section-title">7. Mastery & Advanced</p>
<a href="#global-attrs" class="nav-link">Global Attributes</a>
<a href="#entities" class="nav-link">Character Entities</a>
<a href="#a11y" class="nav-link">Accessibility (ARIA)</a>
<a href="#seo" class="nav-link">SEO Best Practices</a>
<a href="#web-components" class="nav-link">Web Components</a>
<a href="#perf-opt" class="nav-link">Performance</a>
<a href="#qna" class="nav-link">100 HTML Q&A</a>
</nav>
</aside>
<!-- Main Content -->
<main class="main-content">
<header class="header">
<span class="section-tag" style="background: white; border: 1px solid var(--border-light);">Version 2026</span>
<h1>The Complete HTML <span style="color: var(--primary);">Encyclopedia</span></h1>
<p>The most comprehensive, step-by-step guide to every single HTML tag ever created. Master the web from the foundation up.</p>
<div class="author-watermark">
<i class="px px-user"></i> Created by <span class="fw-bold">Prog. Kanishk Raj</span>
</div>
</header>
<!-- 1. Introduction -->
<section id="intro" class="content-section fade-in">
<span class="section-tag">Introduction</span>
<h2>What is HTML?</h2>
<div class="card">
<p><strong>HTML (HyperText Markup Language)</strong> is the standard markup language for documents designed to be displayed in a web browser. It is not a programming language, but a <strong>markup language</strong> that defines the structure of your content.</p>
<div class="grid-cols-2" style="margin-top: 1.5rem;">
<div>
<h6 class="fw-bold">How it works:</h6>
<p class="text-muted small">Browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically.</p>
</div>
<div>
<h6 class="fw-bold">Key Concept:</h6>
<p class="text-muted small">HTML consists of a series of <strong>elements</strong>, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.</p>
</div>
</div>
</div>
</section>
<section id="history" class="content-section fade-in">
<span class="section-tag">Introduction</span>
<h2>Origins & Detailed History</h2>
<div class="card">
<p><strong>Who created HTML?</strong><br>
HTML was created by <strong>Sir Tim Berners-Lee</strong>, a British computer scientist, while he was working at <strong>CERN</strong> (the European Organization for Nuclear Research) in Switzerland.</p>
<p class="mt-3"><strong>Why was it created?</strong><br>
It was created to solve a specific problem: scientists needed a way to share data, research papers, and documentation across different computer systems easily. Berners-Lee combined <strong>Hypertext</strong> (clickable links) with the internet to create a global information system.</p>
<p class="mt-3"><strong>When was it created?</strong><br>
The first version was proposed in <strong>1989</strong>, and the first official "tags" document was published in <strong>1991</strong>.</p>
</div>
<div class="table-container">
<table>
<thead>
<tr><th>Version</th><th>Year</th><th>Key Change</th></tr>
</thead>
<tbody>
<tr><td>HTML 1.0</td><td>1991</td><td>The very beginning (20 tags).</td></tr>
<tr><td>HTML 2.0</td><td>1995</td><td>Standardized version with forms.</td></tr>
<tr><td>HTML 3.2</td><td>1997</td><td>Tables and scripts support.</td></tr>
<tr><td>HTML 4.01</td><td>1999</td><td>Cascading Style Sheets (CSS) integration.</td></tr>
<tr><td>HTML5</td><td>2014</td><td>Native Video, Audio, and Canvas.</td></tr>
</tbody>
</table>
</div>
</section>
<!-- New Section: How to build a website -->
<section id="how-to-build" class="content-section fade-in">
<span class="section-tag">Introduction</span>
<h2>How to Build Your First Website</h2>
<p>Follow these 5 steps to go from zero to a live website.</p>
<div class="card">
<div class="step-guide">
<div class="mb-4">
<h6>Step 1: Content Planning</h6>
<p class="small text-muted">Decide what you want to say. Write down the text and gather images.</p>
</div>
<div class="mb-4">
<h6>Step 2: Structure with HTML</h6>
<p class="small text-muted">Use tags like <code><header></code>, <code><main></code>, and <code><section></code> to organize your content into a hierarchy.</p>
</div>
<div class="mb-4">
<h6>Step 3: Style with CSS</h6>
<p class="small text-muted">Create a <code>style.css</code> file to add colors, fonts, and layout (like grids or flexbox).</p>
</div>
<div class="mb-4">
<h6>Step 4: Logic with JavaScript</h6>
<p class="small text-muted">Add interactivity like sliders, popups, or form validation using JS.</p>
</div>
<div class="mb-4">
<h6>Step 5: Hosting & Domain</h6>
<p class="small text-muted">Upload your files to a host (like GitHub Pages, Netlify, or Vercel) to make it live for the world.</p>
</div>
</div>
</div>
</section>
<!-- 2. Document Structure -->
<section id="boilerplate" class="content-section fade-in">
<span class="section-tag">Document Structure</span>
<h2>Root Elements</h2>
<p>These tags form the outer shell of every webpage.</p>
<div class="card">
<h5><code><!DOCTYPE html></code> - The Declaration</h5>
<p>The <code>!DOCTYPE</code> declaration is an instruction to the web browser about what version of HTML the page is written in. In HTML5, it is mandatory and very simple.</p>
<pre><code><!DOCTYPE html></code></pre>
</div>
<div class="card">
<h5><code><html></code> - The Root</h5>
<p>The <code><html></code> tag represents the root of an HTML document. All other elements must be descendants of this element.</p>
<pre><code><html lang="en">
<!-- Page content goes here -->
</html></code></pre>
</div>
<div class="card">
<h5><code><head></code> vs <code><body></code></h5>
<div class="grid-cols-2">
<div>
<strong>Head:</strong>
<p class="small text-muted">Contains metadata (data about data) that is NOT shown to the user but used by browsers and search engines.</p>
</div>
<div>
<strong>Body:</strong>
<p class="small text-muted">Contains all the visible content: text, images, videos, tables, lists, etc.</p>
</div>
</div>
</div>
</section>
<section id="metadata" class="content-section fade-in">
<span class="section-tag">Document Structure</span>
<h2>The Head & Metadata</h2>
<p>Every tag that goes inside the <code><head></code>.</p>
<div class="card">
<h5><code><title></code></h5>
<p>Defines the title of the document, which is shown in the browser's title bar or a page's tab.</p>
<pre><code><title>Master HTML Guide</title></code></pre>
</div>
<div class="card">
<h5><code><meta></code> Tags</h5>
<p>Used to specify character set, page description, keywords, author, and viewport settings.</p>
<pre><code><meta charset="UTF-8">
<meta name="description" content="A very long guide">
<meta name="viewport" content="width=device-width, initial-scale=1.0"></code></pre>
</div>
<div class="card">
<h5><code><link></code> & <code><style></code></h5>
<pre><code><!-- Link to external CSS -->
<link rel="stylesheet" href="style.css">
<!-- Internal CSS -->
<style>
body { background: white; }
</style></code></pre>
</div>
</section>
<!-- 3. Content Organization -->
<section id="semantic" class="content-section fade-in">
<span class="section-tag">Content Organization</span>
<h2>Semantic Layout Sections</h2>
<p>HTML5 introduced tags that define the structure of a page semantically.</p>
<div class="card">
<div class="grid-cols-2">
<div>
<h5><code><header></code></h5>
<p class="small">A container for introductory content or a set of navigational links.</p>
</div>
<div>
<h5><code><nav></code></h5>
<p class="small">Defines a set of navigation links.</p>
</div>
<div>
<h5><code><main></code></h5>
<p class="small">Specifies the main content of a document. Only one <code><main></code> allowed per page.</p>
</div>
<div>
<h5><code><section></code></h5>
<p class="small">Defines a thematic grouping of content, typically with a heading.</p>
</div>
<div>
<h5><code><article></code></h5>
<p class="small">Defines independent, self-contained content (e.g., a blog post).</p>
</div>
<div>
<h5><code><aside></code></h5>
<p class="small">Defines content aside from the content it is placed in (like a sidebar).</p>
</div>
<div>
<h5><code><footer></code></h5>
<p class="small">Defines a footer for a document or section.</p>
</div>
<div>
<h5><code><address></code></h5>
<p class="small">Defines contact information for the author/owner.</p>
</div>
</div>
</div>
</section>
<section id="text-basic" class="content-section fade-in">
<span class="section-tag">Content Organization</span>
<h2>Text Basics</h2>
<p>Headings and paragraphs are the foundation of text.</p>
<div class="card">
<h5>Headings (<code><h1></code> to <code><h6></code>)</h5>
<h1>H1 - The Main Title</h1>
<h2>H2 - Major Section</h2>
<h3>H3 - Sub Section</h3>
<h4>H4 - Minor Section</h4>
<h5>H5 - Tiny Section</h5>
<h6>H6 - Tiniest Section</h6>
</div>
<div class="card">
<h5>Paragraphs & Breaks</h5>
<p>The <code><p></code> tag defines a paragraph.</p>
<p>This is a line.<br>This is a line after <code><br></code> (line break).</p>
<hr>
<p>The <code><hr></code> tag (above) defines a thematic break / horizontal line.</p>
</div>
<div class="card">
<h5>Preformatted Text (<code><pre></code>)</h5>
<p>Maintains whitespace and line breaks as they are in the source code.</p>
<pre><code>This text
keeps its
format.</code></pre>
</div>
</section>
<section id="text-inline" class="content-section fade-in">
<span class="section-tag">Content Organization</span>
<h2>Inline Text Elements</h2>
<p>Every single tag for formatting text within a paragraph.</p>
<div class="table-container">
<table>
<thead>
<tr><th>Tag</th><th>Definition</th><th>Example</th></tr>
</thead>
<tbody>
<tr><td><code><strong></code></td><td>Important text</td><td><strong>Strong Text</strong></td></tr>
<tr><td><code><em></code></td><td>Emphasized text</td><td><em>Emphasized Text</em></td></tr>
<tr><td><code><b></code></td><td>Bold (Stylistic)</td><td><b>Bold Text</b></td></tr>
<tr><td><code><i></code></td><td>Italic (Stylistic)</td><td><i>Italic Text</i></td></tr>
<tr><td><code><u></code></td><td>Underlined</td><td><u>Underlined Text</u></td></tr>
<tr><td><code><mark></code></td><td>Highlighted</td><td><mark>Highlighted Text</mark></td></tr>
<tr><td><code><small></code></td><td>Smaller text</td><td><small>Smaller Text</small></td></tr>
<tr><td><code><del></code></td><td>Deleted text</td><td><del>Deleted Text</del></td></tr>
<tr><td><code><ins></code></td><td>Inserted text</td><td><ins>Inserted Text</ins></td></tr>
<tr><td><code><sub></code></td><td>Subscript</td><td>H<sub>2</sub>O</td></tr>
<tr><td><code><sup></code></td><td>Superscript</td><td>X<sup>2</sup></td></tr>
<tr><td><code><abbr></code></td><td>Abbreviation</td><td><abbr title="HyperText Markup Language">HTML</abbr></td></tr>
<tr><td><code><cite></code></td><td>Citation</td><td><cite>Mona Lisa</cite></td></tr>
<tr><td><code><q></code></td><td>Short Quote</td><td><q>Be yourself</q></td></tr>
<tr><td><code><dfn></code></td><td>Definition</td><td><dfn>HTML</dfn> is...</td></tr>
<tr><td><code><kbd></code></td><td>Keyboard Input</td><td>Press <kbd>Ctrl</kbd></td></tr>
<tr><td><code><samp></code></td><td>Sample Output</td><td><samp>File not found</samp></td></tr>
<tr><td><code><var></code></td><td>Variable</td><td><var>x</var> = 5</td></tr>
<tr><td><code><time></code></td><td>Date/Time</td><td><time datetime="2026-04-28">Today</time></td></tr>
</tbody>
</table>
</div>
</section>
<section id="lists" class="content-section fade-in">
<span class="section-tag">Content Organization</span>
<h2>Lists Mastery</h2>
<div class="grid-cols-2">
<div class="card">
<h5>Unordered (Bullet)</h5>
<pre><code><ul>
<li>Coffee</li>
<li>Tea</li>
</ul></code></pre>
</div>
<div class="card">
<h5>Ordered (Numbered)</h5>
<pre><code><ol>
<li>First</li>
<li>Second</li>
</ol></code></pre>
</div>
</div>
<div class="card">
<h5>Description List (<code><dl></code>)</h5>
<p>Perfect for glossaries or metadata.</p>
<pre><code><dl>
<dt>HTML</dt>
<dd>A markup language.</dd>
<dt>CSS</dt>
<dd>A style sheet language.</dd>
</dl></code></pre>
</div>
</section>
<!-- 4. Multimedia -->
<section id="images" class="content-section fade-in">
<span class="section-tag">Multimedia</span>
<h2>Images & Responsive Art</h2>
<div class="card">
<h5>The <code><img></code> Tag</h5>
<p>Used to embed an image in a web page.</p>
<pre><code><img src="image.jpg" alt="Description" width="500" height="300" loading="lazy"></code></pre>
<ul>
<li><strong>src:</strong> Path to image.</li>
<li><strong>alt:</strong> Alternate text (Accessibility).</li>
<li><strong>loading:</strong> "lazy" improves performance.</li>
</ul>
</div>
<div class="card">
<h5>The <code><picture></code> Tag</h5>
<p>Gives more flexibility in specifying image sources based on screen width.</p>
<pre><code><picture>
<source media="(min-width: 650px)" srcset="large.jpg">
<source media="(min-width: 465px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive">
</picture></code></pre>
</div>
</section>
<section id="media-tags" class="content-section fade-in">
<span class="section-tag">Multimedia</span>
<h2>Audio & Video</h2>
<div class="card">
<h5><code><video></code></h5>
<pre><code><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support video.
</video></code></pre>
</div>
<div class="card">
<h5><code><audio></code></h5>
<pre><code><audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio></code></pre>
</div>
</section>
<!-- 5. Data & Forms -->
<section id="tables" class="content-section fade-in">
<span class="section-tag">Data & Forms</span>
<h2>Table Mastery</h2>
<p>Complete structure for tabular data.</p>
<div class="card">
<pre><code><table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table></code></pre>
<h6 class="mt-3">Advanced Tags:</h6>
<ul>
<li><code><caption></code>: Title of the table.</li>
<li><code><colgroup></code>: Grouping columns for styling.</li>
<li><code><col></code>: Styling specific columns.</li>
<li><code><tfoot></code>: Footer of the table.</li>
</ul>
</div>
</section>
<section id="forms-basic" class="content-section fade-in">
<span class="section-tag">Data & Forms</span>
<h2>Form Basics</h2>
<div class="card">
<pre><code><form action="/submit" method="POST">
<label for="user">Username:</label>
<input type="text" id="user" name="user">
<button type="submit">Submit</button>
</form></code></pre>
</div>
</section>
<section id="input-types" class="content-section fade-in">
<span class="section-tag">Data & Forms</span>
<h2>Every Input Type</h2>
<p>The <code><input></code> tag has many types that change its behavior.</p>
<div class="table-container">
<table>
<thead>
<tr><th>Type</th><th>Example</th></tr>
</thead>
<tbody>
<tr><td>text</td><td><code><input type="text"></code></td></tr>
<tr><td>password</td><td><code><input type="password"></code></td></tr>
<tr><td>email</td><td><code><input type="email"></code></td></tr>
<tr><td>number</td><td><code><input type="number"></code></td></tr>
<tr><td>checkbox</td><td><code><input type="checkbox"></code></td></tr>
<tr><td>radio</td><td><code><input type="radio"></code></td></tr>
<tr><td>file</td><td><code><input type="file"></code></td></tr>
<tr><td>date</td><td><code><input type="date"></code></td></tr>
<tr><td>color</td><td><code><input type="color"></code></td></tr>
<tr><td>range</td><td><code><input type="range"></code></td></tr>
<tr><td>tel</td><td><code><input type="tel"></code></td></tr>
<tr><td>url</td><td><code><input type="url"></code></td></tr>
<tr><td>submit</td><td><code><input type="submit"></code></td></tr>
</tbody>
</table>
</div>
</section>
<section id="forms-adv" class="content-section fade-in">
<span class="section-tag">Data & Forms</span>
<h2>Advanced Form Elements</h2>
<div class="card">
<h5><code><select></code> & <code><optgroup></code></h5>
<pre><code><select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</optgroup>
</select></code></pre>
</div>
<div class="card">
<h5><code><datalist></code></h5>
<p>Provides an "autocomplete" feature on input tags.</p>
<pre><code><input list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
</datalist></code></pre>
</div>
<div class="card">
<h5>Interactive Displays</h5>
<ul>
<li><code><textarea></code>: Multi-line text input.</li>
<li><code><progress></code>: Progress bar.</li>
<li><code><meter></code>: Scalar measurement (like a gauge).</li>
<li><code><output></code>: Result of a calculation.</li>
</ul>
</div>
</section>
<!-- 6. Scripting -->
<section id="scripting" class="content-section fade-in">
<span class="section-tag">Scripting & Interactive</span>
<h2>Scripting & Logic</h2>
<div class="card">
<h5><code><script></code></h5>
<p>Embeds or refers to an executable script (JavaScript).</p>
<pre><code><script src="script.js"></script>
<script>
console.log("Hello!");
</script></code></pre>
</div>
<div class="card">
<h5><code><noscript></code></h5>
<p>Displays content if JavaScript is disabled in the browser.</p>
<pre><code><noscript>Your browser does not support JavaScript!</noscript></code></pre>
</div>
</section>
<section id="interactive" class="content-section fade-in">
<span class="section-tag">Scripting & Interactive</span>
<h2>Interactive Elements</h2>
<div class="card">
<h5><code><dialog></code></h5>
<p>Defines a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.</p>
<pre><code><dialog open>This is an open dialog</dialog></code></pre>
</div>
<div class="card">
<h5><code><details></code> & <code><summary></code></h5>
<p>Creates an interactive widget that the user can open and close.</p>
<details>
<summary>Read More</summary>
<p>This is hidden content that can be revealed by the user.</p>
</details>
</div>
</section>
<!-- 7. Advanced -->
<section id="global-attrs" class="content-section fade-in">
<span class="section-tag">Advanced Concepts</span>
<h2>Global Attributes</h2>
<p>Attributes that can be used on any HTML element.</p>
<div class="table-container">
<table>
<thead>
<tr><th>Attribute</th><th>Purpose</th></tr>
</thead>
<tbody>
<tr><td><code>accesskey</code></td><td>Shortcut key to focus/activate element.</td></tr>
<tr><td><code>contenteditable</code></td><td>Allows user to edit the content.</td></tr>
<tr><td><code>contextmenu</code></td><td>Specifies a context menu for an element.</td></tr>
<tr><td><code>dir</code></td><td>Direction of text (ltr or rtl).</td></tr>
<tr><td><code>draggable</code></td><td>Specifies if element is draggable.</td></tr>
<tr><td><code>hidden</code></td><td>Hides the element.</td></tr>
<tr><td><code>spellcheck</code></td><td>Enables spell check.</td></tr>
<tr><td><code>translate</code></td><td>Specifies if content should be translated.</td></tr>
</tbody>
</table>
</div>
</section>
<section id="entities" class="content-section fade-in">
<span class="section-tag">Advanced Concepts</span>
<h2>Character Entities</h2>
<p>Reserved characters in HTML must be replaced with character entities.</p>
<div class="grid-cols-2">
<div class="card">
<p><code>&lt;</code> → <</p>
<p><code>&gt;</code> → ></p>
<p><code>&amp;</code> → &</p>
</div>
<div class="card">
<p><code>&copy;</code> → ©</p>
<p><code>&reg;</code> → ®</p>
<p><code>&euro;</code> → €</p>
</div>
</div>
</section>
<!-- 4. Multimedia (Extended) -->
<section id="embedding" class="content-section fade-in">
<span class="section-tag">Multimedia</span>
<h2>Embedding & Graphics</h2>
<div class="card">
<h5>The <code><iframe></code> Tag</h5>
<p>Used to embed another document within the current HTML document.</p>
<pre><code><iframe src="https://example.com" width="100%" height="300" loading="lazy"></iframe></code></pre>
</div>
<div class="card">
<h5>The <code><canvas></code> Element</h5>
<p>Used to draw graphics, on the fly, via scripting (usually JavaScript).</p>
<pre><code><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas></code></pre>
</div>
</section>
<section id="svg-math" class="content-section fade-in">
<span class="section-tag">Multimedia</span>
<h2>SVG & MathML</h2>
<div class="card">
<h5>Scalable Vector Graphics (SVG)</h5>
<pre><code><svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg></code></pre>
</div>
<div class="card">
<h5>MathML</h5>
<p>Used to display mathematical notations.</p>
<pre><code><math>
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
</mrow>
</math></code></pre>
</div>
</section>
<!-- 7. Advanced (Extended) -->
<section id="a11y" class="content-section fade-in">
<span class="section-tag">Advanced Concepts</span>
<h2>Accessibility (ARIA)</h2>
<div class="card">
<p>ARIA (Accessible Rich Internet Applications) makes web content more accessible to people with disabilities.</p>
<ul>
<li><code>role="button"</code>: Tells screen readers that an element behaves like a button.</li>
<li><code>aria-label</code>: Provides a label for an element that doesn't have visible text.</li>
<li><code>aria-hidden="true"</code>: Hides an element from screen readers.</li>
</ul>
</div>
</section>
<section id="seo" class="content-section fade-in">
<span class="section-tag">Advanced Concepts</span>
<h2>SEO Best Practices</h2>
<div class="card">
<ul>
<li>Use only one <code><h1></code> per page.</li>
<li>Write descriptive <code><title></code> and <code><meta name="description"></code> tags.</li>
<li>Use semantic tags (<code><main></code>, <code><article></code>, etc.) instead of just <code><div></code>.</li>
<li>Ensure all images have an <code>alt</code> attribute.</li>
</ul>
</div>
</section>
<!-- New Section: Web Components & Templates -->
<section id="web-components" class="content-section fade-in">
<span class="section-tag">Modern HTML</span>
<h2>Web Components & Templates</h2>
<p>The future of modular web design using native HTML features.</p>
<div class="card">
<h5>The <code><template></code> Tag</h5>
<p>Holds HTML that is not rendered on page load but can be instantiated via JavaScript.</p>
<pre><code><template id="my-paragraph">
<p>My cloned content.</p>
</template></code></pre>
</div>
<div class="card">
<h5>Shadow DOM & <code><slot></code></h5>
<p>Encapsulates styles and structure. <code><slot></code> is a placeholder inside a web component that you can fill with your own markup.</p>
<pre><code><!-- Inside a component template -->
<div class="wrapper">
<slot name="title">Default Title</slot>
<slot>Default Content</slot>
</div></code></pre>
</div>
</section>
<!-- New Section: Performance & Optimization -->
<section id="perf-opt" class="content-section fade-in">
<span class="section-tag">Optimization</span>
<h2>Performance Optimization</h2>
<p>How to make your HTML load and render lightning fast.</p>
<div class="grid-cols-2">
<div class="card">
<h5>Resource Hints</h5>
<p class="small text-muted">Tell the browser what's coming next.</p>
<pre><code><link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload" href="style.css" as="style"></code></pre>
</div>
<div class="card">
<h5>Lazy Loading</h5>
<p class="small text-muted">Delay loading of off-screen content.</p>
<pre><code><img src="pic.jpg" loading="lazy">
<iframe src="vid.html" loading="lazy"></iframe></code></pre>
</div>
</div>
</section>
<!-- 100 Q&A Section -->
<section id="qna" class="content-section fade-in">
<span class="section-tag">Mastery</span>
<h2>100 HTML Q&A Mastery</h2>
<p>Everything you ever wanted to know about HTML.</p>
<div class="mb-3">
<button id="toggle-all-qna" class="btn-primary" style="padding: 0.5rem 1rem; font-size: 0.85rem;">Show All Answers</button>
</div>
<div class="card">
<div id="qna-container">
<h6 class="fw-bold mb-3">Part 1: Basic Fundamentals</h6>
<details class="mb-2"><summary>1. What does HTML stand for?</summary><p class="small p-2">HyperText Markup Language.</p></details>
<details class="mb-2"><summary>2. Who created HTML?</summary><p class="small p-2">Sir Tim Berners-Lee in 1991.</p></details>
<details class="mb-2"><summary>3. What is the main purpose of HTML?</summary><p class="small p-2">To define the structure and content of a web page.</p></details>
<details class="mb-2"><summary>4. Is HTML a case-sensitive language?</summary><p class="small p-2">No, <code><P></code> and <code><p></code> are the same, but lowercase is recommended.</p></details>
<details class="mb-2"><summary>5. What is the extension of an HTML file?</summary><p class="small p-2">.html or .htm.</p></details>
<details class="mb-2"><summary>6. What is the difference between a tag and an element?</summary><p class="small p-2">A tag is the code (<code><h1></code>), an element is the whole thing (tag + content).</p></details>
<details class="mb-2"><summary>7. What is an attribute in HTML?</summary><p class="small p-2">Extra information added to a tag, like <code>src</code> in <code><img></code>.</p></details>
<details class="mb-2"><summary>8. What is a "Void Element"?</summary><p class="small p-2">An element with no closing tag, like <code><br></code> or <code><hr></code>.</p></details>
<details class="mb-2"><summary>9. What is the root element of an HTML page?</summary><p class="small p-2">The <code><html></code> tag.</p></details>
<details class="mb-2"><summary>10. What is the purpose of the <code><!DOCTYPE></code>?</summary><p class="small p-2">It tells the browser what version of HTML is being used.</p></details>
<h6 class="fw-bold mt-4 mb-3">Part 2: Text & Formatting</h6>
<details class="mb-2"><summary>11. Which tag is used for the largest heading?</summary><p class="small p-2">The <code><h1></code> tag.</p></details>
<details class="mb-2"><summary>12. How do you create a line break?</summary><p class="small p-2">Using the <code><br></code> tag.</p></details>
<details class="mb-2"><summary>13. What is the difference between <code><b></code> and <code><strong></code>?</summary><p class="small p-2"><code><b></code> is just visual bold, <code><strong></code> adds semantic importance.</p></details>
<details class="mb-2"><summary>14. What is the difference between <code><i></code> and <code><em></code>?</summary><p class="small p-2"><code><i></code> is visual italic, <code><em></code> is semantic emphasis.</p></details>
<details class="mb-2"><summary>15. How do you display code inline?</summary><p class="small p-2">Using the <code><code></code> tag.</p></details>
<details class="mb-2"><summary>16. Which tag is used for a horizontal line?</summary><p class="small p-2">The <code><hr></code> tag.</p></details>
<details class="mb-2"><summary>17. What is a <code><blockquote></code>?</summary><p class="small p-2">A section quoted from another source.</p></details>
<details class="mb-2"><summary>18. How do you write 2² in HTML?</summary><p class="small p-2">2<code><sup></code>2<code></sup></code>.</p></details>
<details class="mb-2"><summary>19. How do you write H₂O in HTML?</summary><p class="small p-2">H<code><sub></code>2<code></sub></code>O.</p></details>
<details class="mb-2"><summary>20. What is the <code><pre></code> tag used for?</summary><p class="small p-2">To display text exactly as written, including spaces.</p></details>
<h6 class="fw-bold mt-4 mb-3">Part 3: Links & Multimedia</h6>
<details class="mb-2"><summary>21. Which tag is used for links?</summary><p class="small p-2">The <code><a></code> tag.</p></details>
<details class="mb-2"><summary>22. What does the <code>href</code> attribute do?</summary><p class="small p-2">It specifies the destination URL of a link.</p></details>
<details class="mb-2"><summary>23. How do you open a link in a new tab?</summary><p class="small p-2">Using <code>target="_blank"</code>.</p></details>
<details class="mb-2"><summary>24. Which tag embeds an image?</summary><p class="small p-2">The <code><img></code> tag.</p></details>
<details class="mb-2"><summary>25. What is the <code>alt</code> attribute for images?</summary><p class="small p-2">Alternate text for accessibility and SEO.</p></details>
<details class="mb-2"><summary>26. How do you create an image link?</summary><p class="small p-2">Wrap an <code><img></code> tag inside an <code><a></code> tag.</p></details>
<details class="mb-2"><summary>27. Which tag is used for video?</summary><p class="small p-2">The <code><video></code> tag.</p></details>
<details class="mb-2"><summary>28. Which tag is used for audio?</summary><p class="small p-2">The <code><audio></code> tag.</p></details>
<details class="mb-2"><summary>29. What is an <code><iframe></code>?</summary><p class="small p-2">An inline frame used to embed another document.</p></details>
<details class="mb-2"><summary>30. How do you link to an email address?</summary><p class="small p-2"><code><a href="mailto:email@pro.com"></code>.</p></details>
<h6 class="fw-bold mt-4 mb-3">Part 4: Lists & Tables</h6>
<details class="mb-2"><summary>31. What is an Unordered List?</summary><p class="small p-2">A bulleted list created with <code><ul></code>.</p></details>
<details class="mb-2"><summary>32. What is an Ordered List?</summary><p class="small p-2">A numbered list created with <code><ol></code>.</p></details>
<details class="mb-2"><summary>33. Which tag defines a list item?</summary><p class="small p-2">The <code><li></code> tag.</p></details>
<details class="mb-2"><summary>34. How do you start an ordered list at number 5?</summary><p class="small p-2"><code><ol start="5"></code>.</p></details>
<details class="mb-2"><summary>35. What is a Description List?</summary><p class="small p-2">A list of terms and descriptions using <code><dl></code>, <code><dt></code>, <code><dd></code>.</p></details>
<details class="mb-2"><summary>36. Which tag starts a table?</summary><p class="small p-2">The <code><table></code> tag.</p></details>
<details class="mb-2"><summary>37. What is <code><tr></code> in a table?</summary><p class="small p-2">A Table Row.</p></details>
<details class="mb-2"><summary>38. What is <code><td></code> in a table?</summary><p class="small p-2">A Table Data cell.</p></details>
<details class="mb-2"><summary>39. What is <code><th></code> in a table?</summary><p class="small p-2">A Table Header cell.</p></details>
<details class="mb-2"><summary>40. How do you merge two columns in a table?</summary><p class="small p-2">Using the <code>colspan</code> attribute.</p></details>
<h6 class="fw-bold mt-4 mb-3">Part 5: Forms & Inputs</h6>
<details class="mb-2"><summary>41. Which tag creates a form?</summary><p class="small p-2">The <code><form></code> tag.</p></details>
<details class="mb-2"><summary>42. What is the <code>action</code> attribute in a form?</summary><p class="small p-2">The URL where the form data is sent.</p></details>
<details class="mb-2"><summary>43. What is the <code>method</code> attribute in a form?</summary><p class="small p-2">Specifies HTTP method (GET or POST).</p></details>
<details class="mb-2"><summary>44. How do you create a text input?</summary><p class="small p-2"><code><input type="text"></code>.</p></details>
<details class="mb-2"><summary>45. How do you create a password field?</summary><p class="small p-2"><code><input type="password"></code>.</p></details>
<details class="mb-2"><summary>46. Which tag creates a multi-line text input?</summary><p class="small p-2">The <code><textarea></code> tag.</p></details>
<details class="mb-2"><summary>47. How do you create a radio button?</summary><p class="small p-2"><code><input type="radio"></code>.</p></details>
<details class="mb-2"><summary>48. How do you create a checkbox?</summary><p class="small p-2"><code><input type="checkbox"></code>.</p></details>
<details class="mb-2"><summary>49. Which tag is used for a dropdown list?</summary><p class="small p-2">The <code><select></code> tag.</p></details>
<details class="mb-2"><summary>50. What is a <code><fieldset></code>?</summary><p class="small p-2">Groups related elements in a form.</p></details>
<h6 class="fw-bold mt-4 mb-3">Part 6: Semantic HTML</h6>
<details class="mb-2"><summary>51. What is Semantic HTML?</summary><p class="small p-2">Using tags that describe their meaning (e.g., <code><nav></code> instead of <code><div></code>).</p></details>
<details class="mb-2"><summary>52. What is the purpose of the <code><nav></code> tag?</summary><p class="small p-2">To define a block of navigation links.</p></details>
<details class="mb-2"><summary>53. What is the <code><main></code> tag?</summary><p class="small p-2">Specifies the main content of the body.</p></details>
<details class="mb-2"><summary>54. What is <code><aside></code> used for?</summary><p class="small p-2">Content related to the main topic but placed aside (sidebars).</p></details>
<details class="mb-2"><summary>55. Which tag is used for a page footer?</summary><p class="small p-2">The <code><footer></code> tag.</p></details>
<details class="mb-2"><summary>56. What is the <code><article></code> tag?</summary><p class="small p-2">A self-contained piece of content, like a blog post.</p></details>
<details class="mb-2"><summary>57. What is <code><section></code> used for?</summary><p class="small p-2">To define a generic section of a document.</p></details>
<details class="mb-2"><summary>58. What is the <code><figure></code> tag?</summary><p class="small p-2">Specifies self-contained content, like photos/diagrams.</p></details>
<details class="mb-2"><summary>59. Which tag provides a caption for a figure?</summary><p class="small p-2">The <code><figcaption></code> tag.</p></details>
<details class="mb-2"><summary>60. Why is Semantic HTML important for SEO?</summary><p class="small p-2">It helps search engines understand the page structure better.</p></details>
<h6 class="fw-bold mt-4 mb-3">Part 7: Advanced & Metadata</h6>
<details class="mb-2"><summary>61. What is the <code><meta charset="UTF-8"></code> tag?</summary><p class="small p-2">It sets the character encoding for the page.</p></details>
<details class="mb-2"><summary>62. What is the Viewport Meta tag?</summary><p class="small p-2">It controls how a page is displayed on mobile devices.</p></details>
<details class="mb-2"><summary>63. How do you link a CSS file?</summary><p class="small p-2">Using <code><link rel="stylesheet" href="style.css"></code>.</p></details>
<details class="mb-2"><summary>64. How do you add JavaScript to HTML?</summary><p class="small p-2">Using the <code><script></code> tag.</p></details>
<details class="mb-2"><summary>65. What is the <code><noscript></code> tag?</summary><p class="small p-2">Content shown if the browser disables JavaScript.</p></details>
<details class="mb-2"><summary>66. What is the Global Attribute <code>id</code>?</summary><p class="small p-2">A unique identifier for an element.</p></details>
<details class="mb-2"><summary>67. What is the Global Attribute <code>class</code>?</summary><p class="small p-2">Used to group multiple elements for styling.</p></details>
<details class="mb-2"><summary>68. What is <code>contenteditable</code>?</summary><p class="small p-2">An attribute that makes an element editable by the user.</p></details>
<details class="mb-2"><summary>69. What is <code>tabindex</code>?</summary><p class="small p-2">Specifies the tabbing order of an element.</p></details>
<details class="mb-2"><summary>70. What are Data Attributes (<code>data-*</code>)?</summary><p class="small p-2">Custom attributes used to store private data for JavaScript.</p></details>
<h6 class="fw-bold mt-4 mb-3">Part 8: Mastery Level</h6>
<details class="mb-2"><summary>71. What is the difference between <code><div></code> and <code><span></code>?</summary><p class="small p-2"><code><div></code> is block-level, <code><span></code> is inline.</p></details>
<details class="mb-2"><summary>72. What is a "Self-Closing" tag?</summary><p class="small p-2">Same as void element, it closes itself (e.g., <code><img /></code>).</p></details>
<details class="mb-2"><summary>73. What is the <code><canvas></code> element?</summary><p class="small p-2">Used to draw graphics via JavaScript.</p></details>
<details class="mb-2"><summary>74. What is the <code><svg></code> element?</summary><p class="small p-2">Scalable Vector Graphics for resolution-independent images.</p></details>
<details class="mb-2"><summary>75. What is the <code><details></code> and <code><summary></code> tag?</summary><p class="small p-2">Creates an interactive disclosure widget (accordion).</p></details>
<details class="mb-2"><summary>76. What is the <code><dialog></code> tag?</summary><p class="small p-2">Represents a dialog box or subwindow.</p></details>
<details class="mb-2"><summary>77. What is the <code><datalist></code> tag?</summary><p class="small p-2">Provides an autocomplete feature for inputs.</p></details>
<details class="mb-2"><summary>78. What is the <code><meter></code> tag?</summary><p class="small p-2">Displays a scalar measurement within a range (gauge).</p></details>
<details class="mb-2"><summary>79. What is the <code><progress></code> tag?</summary><p class="small p-2">Represents the completion progress of a task.</p></details>
<details class="mb-2"><summary>80. What is <code><wbr></code>?</summary><p class="small p-2">Word Break Opportunity (where a browser can break a long word).</p></details>
<h6 class="fw-bold mt-4 mb-3">Part 9: Final Touches</h6>
<details class="mb-2"><summary>81. What is the <code><base></code> tag?</summary><p class="small p-2">Specifies a base URL for all relative URLs in a page.</p></details>
<details class="mb-2"><summary>82. What is <code><math></code> used for?</summary><p class="small p-2">To display mathematical formulas (MathML).</p></details>
<details class="mb-2"><summary>83. What is the difference between GET and POST?</summary><p class="small p-2">GET sends data in URL, POST sends data in body (more secure).</p></details>
<details class="mb-2"><summary>84. How do you make an input field read-only?</summary><p class="small p-2">Using the <code>readonly</code> attribute.</p></details>
<details class="mb-2"><summary>85. How do you disable an input field?</summary><p class="small p-2">Using the <code>disabled</code> attribute.</p></details>
<details class="mb-2"><summary>86. What is the <code>placeholder</code> attribute?</summary><p class="small p-2">Temporary text shown inside an input before the user types.</p></details>
<details class="mb-2"><summary>87. What is <code><optgroup></code>?</summary><p class="small p-2">Used to group related options inside a <code><select></code> dropdown.</p></details>
<details class="mb-2"><summary>88. What is the <code><legend></code> tag?</summary><p class="small p-2">Defines a caption for a <code><fieldset></code>.</p></details>
<details class="mb-2"><summary>89. How do you create a file upload button?</summary><p class="small p-2"><code><input type="file"></code>.</p></details>
<details class="mb-2"><summary>90. What is <code><map></code> and <code><area></code>?</summary><p class="small p-2">Used to create an image map with clickable areas.</p></details>
<h6 class="fw-bold mt-4 mb-3">Part 10: Pro Tips</h6>
<details class="mb-2"><summary>91. What are "Character Entities"?</summary><p class="small p-2">Special codes for reserved characters (like <code>&copy;</code> for ©).</p></details>
<details class="mb-2"><summary>92. What is ARIA?</summary><p class="small p-2">Accessible Rich Internet Applications (for accessibility).</p></details>
<details class="mb-2"><summary>93. What is an "Anchor Link"?</summary><p class="small p-2">A link that jumps to a specific part of the same page using IDs.</p></details>
<details class="mb-2"><summary>94. What is the <code><template></code> tag?</summary><p class="small p-2">Holds HTML that is not rendered on page load, but can be used later by JS.</p></details>
<details class="mb-2"><summary>95. What is <code><bdi></code>?</summary><p class="small p-2">Bi-Directional Isolation (isolates text that might be formatted in a different direction).</p></details>
<details class="mb-2"><summary>96. What is <code><bdo></code>?</summary><p class="small p-2">Bi-Directional Override (overrides current text direction).</p></details>
<details class="mb-2"><summary>97. What is the <code><ruby></code> tag?</summary><p class="small p-2">Used to display East Asian typography annotations.</p></details>
<details class="mb-2"><summary>98. What is <code><slot></code> used for?</summary><p class="small p-2">A placeholder inside a web component.</p></details>
<details class="mb-2"><summary>99. What is the <code>manifest</code> attribute?</summary><p class="small p-2">Used for offline caching (deprecated in favor of Service Workers).</p></details>
<details class="mb-2"><summary>100. How do you master HTML?</summary><p class="small p-2">Practice every day, build real projects, and keep exploring new tags!</p></details>
</div>
</div>
</section>
<footer style="padding: 4rem 3rem; background: var(--bg-sidebar); border-top: 1px solid var(--border-light); text-align: center;">
<h4 style="margin-bottom: 1rem;">End of the Encyclopedia</h4>
<p class="text-muted">You have reached the end of the guide. Master these tags and you master the web.</p>
<div style="margin-top: 2rem;">
<a href="#intro" class="nav-link" style="display: inline-block; background: var(--primary); color: white;">Back to Top</a>
</div>
</footer>
</main>
</div>
<!-- Scripts -->
<button id="back-to-top" class="back-to-top" aria-label="Back to Top">
<i class="px px-chevron-up"></i>
</button>
<script src="script.js"></script>
</body>
</html>