-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhtml.html
More file actions
498 lines (457 loc) · 42.6 KB
/
html.html
File metadata and controls
498 lines (457 loc) · 42.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discite: HTML Fundamentals 🏗️ (Comprehensive)</title>
<meta name="description" content="Learn HTML from scratch. Covers basic structure, core elements (headings, paragraphs, links, images, lists), semantic HTML, forms, tables, attributes, and best practices.">
<link rel="stylesheet" href="css/style.css">
<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=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<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=JetBrains+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body>
<header class="sticky-header">
<div class="container header-container">
<div class="logo">
<a href="index.html" aria-label="Discite Homepage">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="glass-blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feOffset in="blur" dx="1.5" dy="1.5" result="offsetBlur"/>
<feComposite in="SourceGraphic" in2="offsetBlur" operator="in" result="shadowEffect"/>
<feFlood flood-color="white" flood-opacity="0.4" result="floodWhite"/>
<feComposite in="floodWhite" in2="shadowEffect" operator="in" result="innerHighlight"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="innerHighlight"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<linearGradient id="glass-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgba(88, 101, 242, 0.65)" />
<stop offset="100%" style="stop-color:rgba(88, 101, 242, 0.45)" />
</linearGradient>
</defs>
<g filter="url(#glass-blur)">
<path d="M 20 5 L 80 5 Q 95 5, 95 20 L 95 80 Q 95 95, 80 95 L 20 95 Q 5 95, 5 80 L 5 20 Q 5 5, 20 5 Z"
fill="url(#glass-gradient)"
stroke="rgba(255, 255, 255, 0.35)"
stroke-width="1.5"
/>
</g>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="'Inter', sans-serif" font-size="65" font-weight="700" fill="#000000" dy=".05em">D</text>
</svg>
</a>
</div>
<div class="header-controls">
<input type="search" id="site-search" name="q" placeholder="Search site..." aria-label="Search through site content" class="search-input">
<button id="theme-toggle" type="button" class="theme-toggle-button" aria-label="Toggle dark mode">
<span class="light-icon">☀️</span> <span class="dark-icon" style="display: none;">🌙</span>
</button>
</div>
<nav class="main-nav" aria-label="Main navigation">
<a href="index.html" class="nav-link">Introduction</a>
<a href="html.html" class="nav-link">HTML</a>
<a href="css.html" class="nav-link">CSS</a>
<a href="javascript.html" class="nav-link">JavaScript</a>
<a href="tools.html" class="nav-link">Tools & Next Steps</a>
</nav>
</div>
</header>
<main class="container main-content">
<section id="html" class="content-section" aria-labelledby="html-main-heading">
<h2 id="html-main-heading" class="text-3xl md:text-4xl font-bold section-header">
HTML: Structuring the Web 🏗️ (Beginner to Winner!)
</h2>
<p class="mb-4">Welcome to the HTML deep dive! HTML (HyperText Markup Language) is the absolute foundation of every webpage. It's not a programming language (it doesn't have logic like loops or conditions), but a **markup language** used to define the structure and meaning (semantics) of your content. Think of it as the architect's blueprint 📐 or the skeleton 🦴 of your website.</p>
<p class="mb-4">We'll go from the very basics to more advanced concepts you'll need to build well-structured, accessible, and SEO-friendly websites.</p>
<h3>1. Basic Document Structure 뼈대</h3>
<p class="mb-2">Every HTML document needs this core structure to be valid and work correctly in browsers:</p>
<div class="code-block-wrapper">
<pre><code class="language-html">
<span class="html-comment"><!-- DOCTYPE Declaration: Tells the browser which HTML version (HTML5) --></span>
<!DOCTYPE html>
<span class="html-comment"><!-- html Element: The root of the document. 'lang' attribute is crucial for accessibility and SEO. --></span>
<<span class="html-tag">html</span> <span class="html-attr">lang</span>="<span class="html-value">en</span>"> <span class="html-comment"><!-- Use appropriate language code, e.g., "fr", "es" --></span>
<span class="html-comment"><!-- head Element: Contains metadata (data about the data). Not displayed on the page itself. --></span>
<<span class="html-tag">head</span>>
<span class="html-comment"><!-- Character Encoding: Essential for displaying text correctly. UTF-8 is standard. --></span>
<<span class="html-tag">meta</span> <span class="html-attr">charset</span>="<span class="html-value">UTF-8</span>">
<span class="html-comment"><!-- Viewport Meta Tag: Configures the viewport for responsive design on mobile devices. --></span>
<<span class="html-tag">meta</span> <span class="html-attr">name</span>="<span class="html-value">viewport</span>" <span class="html-attr">content</span>="<span class="html-value">width=device-width, initial-scale=1.0</span>">
<span class="html-comment"><!-- Title Element: Text shown in the browser tab or window title bar. Important for SEO. --></span>
<<span class="html-tag">title</span>>My Awesome Web Page ✨</<span class="html-tag">title</span>>
<span class="html-comment"><!-- Link to External CSS Stylesheet --></span>
<<span class="html-tag">link</span> <span class="html-attr">rel</span>="<span class="html-value">stylesheet</span>" <span class="html-attr">href</span>="<span class="html-value">css/style.css</span>">
<span class="html-comment"><!-- Other meta tags (description, keywords), favicons, etc., go here --></span>
<<span class="html-tag">meta</span> <span class="html-attr">name</span>="<span class="html-value">description</span>" <span class="html-attr">content</span>="<span class="html-value">Learn HTML fundamentals on Discite.</span>">
<<span class="html-tag">link</span> <span class="html-attr">rel</span>="<span class="html-value">icon</span>" <span class="html-attr">href</span>="<span class="html-value">favicon.png</span>" <span class="html-attr">type</span>="<span class="html-value">image/png</span>"> <span class="html-comment"><!-- Example Favicon --></span>
</<span class="html-tag">head</span>>
<span class="html-comment"><!-- body Element: Contains ALL the visible content of the page. --></span>
<<span class="html-tag">body</span>>
<<span class="html-tag">h1</span>>Welcome to the Page!</<span class="html-tag">h1</span>>
<<span class="html-tag">p</span>>This content is visible to the user.</<span class="html-tag">p</span>>
<span class="html-comment"><!-- Link to External JavaScript (often placed here for performance) --></span>
<<span class="html-tag">script</span> <span class="html-attr">src</span>="<span class="html-value">js/main.js</span>" <span class="html-attr">defer</span>></<span class="html-tag">script</span>>
</<span class="html-tag">body</span>>
</<span class="html-tag">html</span>>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<p class="mt-2">Key takeaways: Use <code><!DOCTYPE html></code>, the <code><html></code> tag with `lang`, a <code><head></code> for metadata (especially `charset`, `viewport`, `title`, CSS links), and a <code><body></code> for visible content.</p>
<h3>2. Core Content Elements 👇</h3>
<p class="mb-2">These are the bread-and-butter tags you'll use constantly.</p>
<h4>Headings <code><h1></code> - <code><h6></code></h4>
<p>Define section headings. <code><h1></code> is the most important (usually the main page title, use only one per page ideally), down to <code><h6></code> for sub-sub-sections. Use them hierarchically!</p>
<div class="code-block-wrapper">
<pre><code class="language-html">
<<span class="html-tag">h1</span>>Main Page Title</<span class="html-tag">h1</span>>
<<span class="html-tag">section</span>>
<<span class="html-tag">h2</span>>Section Title</<span class="html-tag">h2</span>>
<<span class="html-tag">p</span>>Content...</<span class="html-tag">p</span>>
<<span class="html-tag">h3</span>>Subsection Title</<span class="html-tag">h3</span>>
<<span class="html-tag">p</span>>More content...</<span class="html-tag">p</span>>
</<span class="html-tag">section</span>>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<h4>Paragraphs <code><p></code></h4>
<p>The standard tag for blocks of text.</p>
<div class="code-block-wrapper">
<pre><code class="language-html">
<<span class="html-tag">p</span>>This is the first paragraph. Browsers usually add space between paragraphs.</<span class="html-tag">p</span>>
<<span class="html-tag">p</span>>This is the second paragraph.</<span class="html-tag">p</span>>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<h4>Links (Anchors) <code><a></code> 🔗</h4>
<p>Create hyperlinks to other pages or resources. The <code>href</code> attribute is essential.</p>
<div class="code-block-wrapper">
<pre><code class="language-html">
<span class="html-comment"><!-- Link to an external website (opens in new tab for good UX) --></span>
<<span class="html-tag">a</span> <span class="html-attr">href</span>="<span class="html-value">https://developer.mozilla.org/</span>" <span class="html-attr">target</span>="<span class="html-value">_blank</span>" <span class="html-attr">rel</span>="<span class="html-value">noopener noreferrer</span>">Visit MDN</<span class="html-tag">a</span>>
<span class="html-comment"><!-- Link to another page on your site --></span>
<<span class="html-tag">a</span> <span class="html-attr">href</span>="<span class="html-value">css.html</span>">Learn CSS</<span class="html-tag">a</span>>
<span class="html-comment"><!-- Link to an element on the *same* page (uses ID) --></span>
<<span class="html-tag">a</span> <span class="html-attr">href</span>="<span class="html-value">#semantic-html</span>">Go to Semantic HTML</<span class="html-tag">a</span>>
<span class="html-comment"><!-- Link to start an email --></span>
<<span class="html-tag">a</span> <span class="html-attr">href</span>="<span class="html-value">mailto:info@example.com</span>">Email Us</<span class="html-tag">a</span>>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<p class="mt-2"><code>target="_blank"</code> opens the link in a new tab. <code>rel="noopener noreferrer"</code> is important for security when using `target="_blank"`.</p>
<h4>Images <code><img></code> 🖼️</h4>
<p>Embed images. It's a self-closing tag (no <code></img></code> needed). `src` and `alt` are crucial.</p>
<div class="code-block-wrapper">
<pre><code class="language-html">
<<span class="html-tag">img</span>
<span class="html-attr">src</span>="<span class="html-value">https://placehold.co/300x150/a78bfa/ffffff?text=My+Image+%F0%9F%96%BC%EF%B8%8F</span>" <span class="html-comment"><!-- Path/URL --></span>
<span class="html-attr">alt</span>="<span class="html-value">A placeholder image showing text 'My Image'</span>" <span class="html-comment"><!-- ESSENTIAL Description --></span>
<span class="html-attr">width</span>="<span class="html-value">300</span>" <span class="html-comment"><!-- Intrinsic width (pixels) --></span>
<span class="html-attr">height</span>="<span class="html-value">150</span>" <span class="html-comment"><!-- Intrinsic height (pixels) --></span>
<span class="html-attr">loading</span>="<span class="html-value">lazy</span>" <span class="html-comment"><!-- Performance boost! --></span>
>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<p class="mt-2">Always provide descriptive `alt` text! If the image is purely decorative, use `alt=""`.</p>
<h4>Lists <code><ul></code>, <code><ol></code>, <code><li></code></h4>
<p>For grouping related items.</p>
<ul class="list-disc list-inside mb-4">
<li><code><ul></code>: Unordered List (bullets ⚫️).</li>
<li><code><ol></code>: Ordered List (numbers 🔢). Can use `type` attribute (<code>"a"</code>, <code>"i"</code>) or `start` attribute.</li>
<li><code><li></code>: List Item (goes inside `ul` or `ol`).</li>
</ul>
<div class="code-block-wrapper">
<pre><code class="language-html">
<<span class="html-tag">h4</span>>Favorite Fruits</<span class="html-tag">h4</span>>
<<span class="html-tag">ul</span>>
<<span class="html-tag">li</span>>Apples 🍎</<span class="html-tag">li</span>>
<<span class="html-tag">li</span>>Bananas 🍌</<span class="html-tag">li</span>>
<<span class="html-tag">li</span>>Cherries 🍒</<span class="html-tag">li</span>>
</<span class="html-tag">ul</span>>
<<span class="html-tag">h4</span>>Steps to Make Tea</<span class="html-tag">h4</span>>
<<span class="html-tag">ol</span> <span class="html-attr">start</span>="<span class="html-value">1</span>">
<<span class="html-tag">li</span>>Boil water 🔥</<span class="html-tag">li</span>>
<<span class="html-tag">li</span>>Add tea bag 🍵</<span class="html-tag">li</span>>
<<span class="html-tag">li</span>>Steep for 3-5 minutes ⏳</<span class="html-tag">li</span>>
<<span class="html-tag">li</span>>Enjoy! 👍</<span class="html-tag">li</span>>
</<span class="html-tag">ol</span>>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<h3 id="text-formatting">3. Text Formatting & Inline Elements ✍️</h3>
<p>Tags used within blocks of text (like <code><p></code>) to add meaning or style.</p>
<ul class="list-disc list-inside mb-4">
<li><code><strong></code>: Marks text with strong importance (usually bold).</li>
<li><code><em></code>: Marks text with emphasis (usually italic).</li>
<li><code><b></code>: Bring Attention To (bold, use if no semantic importance).</li>
<li><code><i></code>: Idiomatic Text (italic, e.g., technical terms, thoughts, use if no semantic emphasis).</li>
<li><code><span></code>: Generic inline container, no semantic meaning, used purely for CSS/JS targeting.</li>
<li><code><code></code>: Represents a fragment of computer code.</li>
<li><code><pre></code>: Preformatted text. Preserves whitespace and line breaks, often used with <code><code></code> for code blocks.</li>
<li><code><br></code>: Line break (use sparingly).</li>
<li><code><hr></code>: Thematic break (horizontal rule).</li>
<li><code><sub></code>/<code><sup></code>: Subscript / Superscript (H₂O, E=mc²).</li>
<li><code><q></code>: Short inline quotation (adds quotes).</li>
<li><code><cite></code>: Title of a cited creative work (book, movie).</li>
<li><code><dfn></code>: Defining instance of a term.</li>
<li><code><abbr title="..."></code>: Abbreviation (full expansion in `title`).</li>
<li><code><time datetime="..."></code>: Represents a specific time/date (machine-readable `datetime`).</li>
</ul>
<div class="code-block-wrapper">
<pre><code class="language-html">
<<span class="html-tag">p</span>>Use <<span class="html-tag">strong</span>>strong</<span class="html-tag">strong</span>> for important text and <<span class="html-tag">em</span>>emphasis</<span class="html-tag">em</span>>.
You can style a <<span class="html-tag">span</span> <span class="html-attr">class</span>="<span class="html-value">highlight</span>">specific word</<span class="html-tag">span</span>>.
The command is <<span class="html-tag">code</span>>git commit -m "message"</<span class="html-tag">code</span>>.</<span class="html-tag">p</span>>
<<span class="html-tag">p</span>>As defined by the <<span class="html-tag">abbr</span> <span class="html-attr">title</span>="<span class="html-value">World Wide Web Consortium</span>">W3C</<span class="html-tag">abbr</span>>.</<span class="html-tag">p</span>>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<h3>4. Attributes ✨</h3>
<p class="mb-2">Attributes provide extra information about elements and are always in the opening tag: <code><tag attribute="value"></code>.</p>
<h4>Global Attributes</h4>
<p>Can be used on (almost) any HTML element.</p>
<ul class="list-disc list-inside mb-4">
<li><code>id="unique-name"</code>: A unique identifier for the element on the page. Used by CSS (<code>#unique-name</code>) and JS (<code>getElementById</code>). **Must be unique!**</li>
<li><code>class="class1 class2"</code>: One or more space-separated class names. Used by CSS (<code>.class1</code>) and JS to group/style elements. Reusable.</li>
<li><code>style="css-property: value;"</code>: Inline CSS. Avoid for maintainability; use external CSS files.</li>
<li><code>title="Extra info"</code>: Shows a tooltip on hover.</li>
<li><code>lang="en-US"</code>: Specifies the language of the element's content.</li>
<li><code>tabindex="0"</code> / <code>"-1"</code>: Controls keyboard focus order.</li>
<li><code>data-*="some-value"</code>: Custom data attributes. Store data for JS use (e.g., <code>data-user-id="123"</code>). Accessed in JS via <code>element.dataset.userId</code>.</li>
<li><code>hidden</code>: Hides the element (like CSS <code>display: none</code>).</li>
<li><code>aria-*</code>: Attributes for accessibility (e.g., `aria-label`, `aria-hidden`). More advanced topic.</li>
</ul>
<h4>Specific Attributes</h4>
<p>Apply only to certain elements (we've seen `href`, `src`, `alt`, `width`, `height`, `type`, `value`, `name`, `required`, `placeholder`, `for`, `action`, `method`, etc.). Always check documentation (like MDN) for valid attributes for each tag.</p>
<h3 id="semantic-html">5. Semantic HTML 🧱 (Super Important!)</h3>
<p class="mb-2">Using HTML tags that accurately describe the *meaning* and *purpose* of the content they enclose, rather than just how they look. Why? 🤔</p>
<ul class="list-disc list-inside mb-4">
<li>**Accessibility (a11y):** Screen readers use semantic tags to understand page structure and navigate effectively ♿.</li>
<li>**SEO:** Search engines better understand your content, potentially improving rankings 📈.</li>
<li>**Maintainability:** Code is easier to read and understand for developers (including future you!).</li>
<li>**Styling Hooks:** Provides meaningful hooks for CSS without relying solely on generic `div`s and `span`s.</li>
</ul>
<h4>Key Semantic Layout Elements:</h4>
<ul class="list-disc list-inside mb-4">
<li><code><header></code>: Container for introductory content or navigational aids. Often contains logo, main heading, nav. Can be used inside `body`, `article`, `section`.</li>
<li><code><nav></code>: Contains major navigation links (main menu, breadcrumbs, table of contents).</li>
<li><code><main></code>: Specifies the main, dominant content of the document. **Should only be one <code><main></code> element** per page.</li>
<li><code><article></code>: Represents a complete, self-contained composition (e.g., blog post, news item, forum comment). Should make sense on its own. Can be nested.</li>
<li><code><section></code>: Represents a thematic grouping of content, typically with a heading (<code><h2></code>-<code><h6></code>). Use it to break up `article` or `main` content logically. Don't use it as a generic wrapper if `div` is more appropriate.</li>
<li><code><aside></code>: Content tangentially related to the main content around it (e.g., sidebar, pull quotes, related links, author bio).</li>
<li><code><footer></code>: Represents a footer for its nearest sectioning content or root (`body`, `article`, `section`). Typically contains authorship info, copyright, related links.</li>
</ul>
<h4>Other Semantic Elements:</h4>
<ul class="list-disc list-inside mb-4">
<li><code><figure></code> & <code><figcaption></code>: For self-contained content (like images, diagrams, code) referenced from the main flow, optionally with a caption.</li>
<li><code><time></code>, <code><address></code>, <code><mark></code>, etc.</li>
</ul>
<p><strong>Rule of Thumb:</strong> Before using a <code><div></code> or <code><span></code>, ask yourself: "Is there a more specific HTML tag that accurately describes this content's purpose?" If yes, use it!</p>
<div class="code-block-wrapper">
<pre><code class="language-html">
<<span class="html-tag">body</span>>
<<span class="html-tag">header</span>>
<<span class="html-tag">h1</span>>My Blog</<span class="html-tag">h1</span>>
<<span class="html-tag">nav</span> <span class="html-attr">aria-label</span>="<span class="html-value">Primary Navigation</span>">
<<span class="html-tag">ul</span>><<span class="html-tag">li</span>><<span class="html-tag">a</span> <span class="html-attr">href</span>="/">Home</<span class="html-tag">a</span>></<span class="html-tag">li</span>> <!-- ... --> </<span class="html-tag">ul</span>>
</<span class="html-tag">nav</span>>
</<span class="html-tag">header</span>>
<<span class="html-tag">main</span>>
<<span class="html-tag">article</span>>
<<span class="html-tag">h2</span>>Learning Semantic HTML</<span class="html-tag">h2</span>>
<<span class="html-tag">p</span>>It's important because...</<span class="html-tag">p</span>>
<<span class="html-tag">section</span> <span class="html-attr">aria-labelledby</span>="<span class="html-value">benefits-heading</span>">
<<span class="html-tag">h3</span> <span class="html-attr">id</span>="<span class="html-value">benefits-heading</span>">Benefits</<span class="html-tag">h3</span>>
<<span class="html-tag">ul</span>><!-- ... --></<span class="html-tag">ul</span>>
</<span class="html-tag">section</span>>
<<span class="html-tag">footer</span>>
<<span class="html-tag">p</span>>Posted on <<span class="html-tag">time</span> <span class="html-attr">datetime</span>="<span class="html-value">2025-04-27</span>">April 27, 2025</<span class="html-tag">time</span>></<span class="html-tag">p</span>>
</<span class="html-tag">footer</span>>
</<span class="html-tag">article</span>>
</<span class="html-tag">main</span>>
<<span class="html-tag">aside</span>>
<<span class="html-tag">h3</span>>Related Links</<span class="html-tag">h3</span>>
<<span class="html-tag">ul</span>><!-- ... --></<span class="html-tag">ul</span>>
</<span class="html-tag">aside</span>>
<<span class="html-tag">footer</span>>
<<span class="html-tag">p</span>>© 2025 My Blog. All rights reserved.</<span class="html-tag">p</span>>
</<span class="html-tag">footer</span>>
</<span class="html-tag">body</span>>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<h3>6. Tables 📊</h3>
<p>Use tables for displaying **tabular data** (data best represented in rows and columns), NOT for page layout (use CSS Grid/Flexbox for layout).</p>
<ul class="list-disc list-inside mb-4">
<li><code><table></code>: The main container.</li>
<li><code><caption></code>: Table title/description (important for context).</li>
<li><code><thead></code>: Groups header rows (<code><tr></code> with <code><th></code> cells).</li>
<li><code><tbody></code>: Groups main data rows (<code><tr></code> with <code><td></code> cells).</li>
<li><code><tfoot></code>: Groups footer rows (optional, e.g., totals).</li>
<li><code><tr></code>: Table Row.</li>
<li><code><th></code>: Table Header cell. Use <code>scope="col"</code> or <code>scope="row"</code> attribute for accessibility.</li>
<li><code><td></code>: Table Data cell.</li>
<li><code>colspan</code> / <code>rowspan</code> attributes let cells span multiple columns/rows.</li>
</ul>
<div class="code-block-wrapper">
<pre><code class="language-html">
<<span class="html-tag">table</span>>
<<span class="html-tag">caption</span>>User Data Summary</<span class="html-tag">caption</span>>
<<span class="html-tag">thead</span>>
<<span class="html-tag">tr</span>>
<<span class="html-tag">th</span> <span class="html-attr">scope</span>="<span class="html-value">col</span>">ID</<span class="html-tag">th</span>>
<<span class="html-tag">th</span> <span class="html-attr">scope</span>="<span class="html-value">col</span>">Name</<span class="html-tag">th</span>>
<<span class="html-tag">th</span> <span class="html-attr">scope</span>="<span class="html-value">col</span>">Role</<span class="html-tag">th</span>>
</<span class="html-tag">tr</span>>
</<span class="html-tag">thead</span>>
<<span class="html-tag">tbody</span>>
<<span class="html-tag">tr</span>>
<<span class="html-tag">td</span>>1</<span class="html-tag">td</span>>
<<span class="html-tag">td</span>>Alice</<span class="html-tag">td</span>>
<<span class="html-tag">td</span>>Admin</<span class="html-tag">td</span>>
</<span class="html-tag">tr</span>>
<<span class="html-tag">tr</span>>
<<span class="html-tag">td</span>>2</<span class="html-tag">td</span>>
<<span class="html-tag">td</span>>Bob</<span class="html-tag">td</span>>
<<span class="html-tag">td</span>>User</<span class="html-tag">td</span>>
</<span class="html-tag">tr</span>>
</<span class="html-tag">tbody</span>>
</<span class="html-tag">table</span>>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<h3>7. Forms 📝</h3>
<p>Allow users to input and submit data.</p>
<ul class="list-disc list-inside mb-4">
<li><code><form action="url" method="post/get">...</form></code>: The container. `action` is where data goes, `method` is how.</li>
<li><code><label for="id"></code>: Connects text label to input for accessibility. `for` matches input `id`.</li>
<li><code><input type="..."></code>: Versatile input field. Important types: `text`, `email`, `password`, `number`, `date`, `checkbox`, `radio`, `file`, `submit`, `reset`, `button`, `hidden`, `search`, `tel`, `url`, `range`, `color`.</li>
<li><code><textarea></code>: Multi-line text input.</li>
<li><code><select></code> with <code><option></code> tags: Dropdown list.</li>
<li><code><button type="submit/reset/button"></code>: Clickable button.</li>
<li><code><fieldset></code> & <code><legend></code>: Group related controls visually and semantically.</li>
<li>Key Input Attributes: `name` (essential for server-side processing), `id` (for label `for`), `value`, `placeholder`, `required`, `disabled`, `readonly`, `checked` (for checkbox/radio), `min`/`max`/`step` (for numbers/ranges), `pattern` (regex validation).</li>
</ul>
<div class="code-block-wrapper">
<pre><code class="language-html">
<<span class="html-tag">form</span> <span class="html-attr">action</span>="<span class="html-value">/signup</span>" <span class="html-attr">method</span>="<span class="html-value">post</span>">
<<span class="html-tag">fieldset</span>>
<<span class="html-tag">legend</span>>Create Account</<span class="html-tag">legend</span>>
<<span class="html-tag">div</span> <span class="html-attr">class</span>="<span class="html-value">form-group</span>">
<<span class="html-tag">label</span> <span class="html-attr">for</span>="<span class="html-value">email-input</span>">Email:</<span class="html-tag">label</span>>
<<span class="html-tag">input</span> <span class="html-attr">type</span>="<span class="html-value">email</span>" <span class="html-attr">id</span>="<span class="html-value">email-input</span>" <span class="html-attr">name</span>="<span class="html-value">user_email</span>" <span class="html-attr">required</span> <span class="html-attr">placeholder</span>="<span class="html-value">you@example.com</span>">
</<span class="html-tag">div</span>>
<<span class="html-tag">div</span> <span class="html-attr">class</span>="<span class="html-value">form-group</span>">
<<span class="html-tag">label</span> <span class="html-attr">for</span>="<span class="html-value">password-input</span>">Password:</<span class="html-tag">label</span>>
<<span class="html-tag">input</span> <span class="html-attr">type</span>="<span class="html-value">password</span>" <span class="html-attr">id</span>="<span class="html-value">password-input</span>" <span class="html-attr">name</span>="<span class="html-value">user_password</span>" <span class="html-attr">required</span> <span class="html-attr">minlength</span>="<span class="html-value">8</span>">
</<span class="html-tag">div</span>>
<<span class="html-tag">div</span> <span class="html-attr">class</span>="<span class="html-value">form-group</span>">
<<span class="html-tag">label</span> <span class="html-attr">for</span>="<span class="html-value">account-type</span>">Account Type:</<span class="html-tag">label</span>>
<<span class="html-tag">select</span> <span class="html-attr">name</span>="<span class="html-value">account_type</span>" <span class="html-attr">id</span>="<span class="html-value">account-type</span>">
<<span class="html-tag">option</span> <span class="html-attr">value</span>="<span class="html-value">free</span>">Free Tier</<span class="html-tag">option</span>>
<<span class="html-tag">option</span> <span class="html-attr">value</span>="<span class="html-value">premium</span>">Premium Tier ($)</<span class="html-tag">option</span>>
</<span class="html-tag">select</span>>
</<span class="html-tag">div</span>>
<<span class="html-tag">div</span> <span class="html-attr">class</span>="<span class="html-value">form-group</span>">
<<span class="html-tag">input</span> <span class="html-attr">type</span>="<span class="html-value">checkbox</span>" <span class="html-attr">id</span>="<span class="html-value">terms</span>" <span class="html-attr">name</span>="<span class="html-value">agree_terms</span>" <span class="html-attr">required</span>>
<<span class="html-tag">label</span> <span class="html-attr">for</span>="<span class="html-value">terms</span>">I agree to the terms and conditions</<span class="html-tag">label</span>>
</<span class="html-tag">div</span>>
<<span class="html-tag">button</span> <span class="html-attr">type</span>="<span class="html-value">submit</span>">Sign Up 🎉</<span class="html-tag">button</span>>
</<span class="html-tag">fieldset</span>>
</<span class="html-tag">form</span>>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<h3>8. More Media Elements 🎬🔊</h3>
<ul class="list-disc list-inside mb-4">
<li><code><audio controls src="..."></code>: Embed audio files. `controls` adds default player UI.</li>
<li><code><video controls width="..." height="..." src="..." poster="..."></code>: Embed video files. `poster` shows an image before loading. Can include <code><source></code> tags for multiple formats.</li>
<li><code><iframe src="..."></code>: Embed another HTML page (e.g., YouTube video, Google Map). Use with caution (security/performance).</li>
<li><code><picture></code>: Art direction for images. Provide different image sources based on screen size, resolution, or format support using <code><source media="..." srcset="..."></code> and a fallback <code><img></code>.</li>
<li><code><svg></code>: Embed Scalable Vector Graphics directly in HTML for sharp icons/illustrations.</li>
</ul>
<h3>9. Accessibility (a11y) & Entities</h3>
<h4>Accessibility Basics ✅</h4>
<p>Making your site usable by everyone, including those with disabilities, is crucial.</p>
<ul class="list-disc list-inside mb-4">
<li>**Use Semantic HTML:** As discussed, this is foundational.</li>
<li>**Provide Text Alternatives:** Use meaningful `alt` text for images. Provide transcripts/captions for audio/video.</li>
<li>**Use Labels for Forms:** Connect <code><label></code> to inputs using `for`/`id`.</li>
<li>**Ensure Keyboard Navigability:** All interactive elements should be reachable and operable using the keyboard alone (check `tabindex`).</li>
<li>**Sufficient Color Contrast:** Text should be easily readable against its background.</li>
<li>**(Intro to) ARIA:** Accessible Rich Internet Applications attributes (like `role`, `aria-label`, `aria-hidden`) can enhance accessibility for complex widgets, but use native HTML semantics first whenever possible.</li>
</ul>
<h4>HTML Entities ™️©️<</h4>
<p>Used to display reserved characters (like <code><</code> or <code>></code>) or characters not easily typed (like <code>©</code>).</p>
<ul class="list-disc list-inside mb-4">
<li>Common ones: <code>&lt;</code> (<), <code>&gt;</code> (>), <code>&amp;</code> (&), <code>&quot;</code> ("), <code>&nbsp;</code> (non-breaking space), <code>&copy;</code> (©), <code>&reg;</code> (®).</li>
</ul>
<h3>10. Comments & Best Practices 💯</h3>
<h4>HTML Comments</h4>
<p>Ignored by the browser, useful for notes to developers.</p>
<div class="code-block-wrapper">
<pre><code class="language-html">
<span class="html-comment"><!-- This is an HTML comment. It won't be displayed. --></span>
<<span class="html-tag">p</span>>This text will be displayed.</<span class="html-tag">p</span>>
<span class="html-comment"><!-- TODO: Add more content here later --></span>
</code></pre>
<button class="copy-button" aria-label="Copy code to clipboard">Copy</button>
</div>
<h4>Best Practices</h4>
<ul class="list-disc list-inside mb-4">
<li>**Validate Your HTML:** Use tools like the W3C Validator to check for errors.</li>
<li>**Use Semantic HTML:** Always prefer meaningful tags over generic `div`s/`span`s.</li>
<li>**Prioritize Accessibility:** Build with everyone in mind from the start.</li>
<li>**Keep it Clean:** Use consistent indentation and formatting.</li>
<li>**Separate Concerns:** HTML for structure, CSS for presentation, JS for behavior. Avoid large amounts of inline styles or scripts.</li>
<li>**Comment Appropriately:** Explain complex sections or temporary code.</li>
</ul>
<div class="quiz-container mt-10 pt-6 border-t border-purple-200 border-opacity-50" id="html-quiz">
<h3 class="text-xl font-semibold mb-4 text-purple-800">Check Your HTML Knowledge! 🤔</h3>
<form class="quiz-form space-y-6">
<fieldset class="quiz-question p-4 border border-purple-300 border-opacity-50 rounded-lg squircle-sm">
<legend class="text-lg font-medium mb-2 px-1">1. What does HTML stand for?</legend>
<div class="space-y-2">
<div><label><input type="radio" name="q1" value="a"> HyperText Markup Language</label></div>
<div><label><input type="radio" name="q1" value="b"> HighTech Machine Learning</label></div>
<div><label><input type="radio" name="q1" value="c"> HyperTransfer Mail Language</label></div>
</div>
</fieldset>
<fieldset class="quiz-question p-4 border border-purple-300 border-opacity-50 rounded-lg squircle-sm">
<legend class="text-lg font-medium mb-2 px-1">2. Which tag is used for the *most important* heading?</legend>
<div class="space-y-2">
<div><label><input type="radio" name="q2" value="a"> <h6></label></div>
<div><label><input type="radio" name="q2" value="b"> <heading></label></div>
<div><label><input type="radio" name="q2" value="c"> <h1></label></div>
</div>
</fieldset>
<fieldset class="quiz-question p-4 border border-purple-300 border-opacity-50 rounded-lg squircle-sm">
<legend class="text-lg font-medium mb-2 px-1">3. What is the purpose of the `alt` attribute on an `<img>` tag?</legend>
<div class="space-y-2">
<div><label><input type="radio" name="q3" value="a"> To provide alternative text if the image fails or for screen readers.</label></div>
<div><label><input type="radio" name="q3" value="b"> To set the alignment of the image.</label></div>
<div><label><input type="radio" name="q3" value="c"> To link the image to another page.</label></div>
</div>
</fieldset>
<button type="submit" class="cta-button quiz-submit-button">Check Answers ✅</button>
</form>
<div class="quiz-results mt-4 p-4 rounded-lg squircle-sm" aria-live="polite"></div>
</div>
<p class="mt-6 font-semibold">Congrats! 🎉 You've covered the essentials (and more) of HTML. Keep practicing by building things and inspecting websites you like!</p>
</section>
</main>
<footer class="main-footer">
<div class="container footer-container">
<p>© 2025 Discite. Keep Building! 🛠️</p>
</div>
</footer>
<script src="js/main.js" defer></script>
</body>
</html>