Skip to content

chore: add new file for html #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yash-pluto merged 1 commit into from
Aug 8, 2026
Merged

chore: add new file for html #37

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
268 changes: 268 additions & 0 deletions frontend/content/html.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
---
title: "HTML"
description: "The standard markup language for building web pages. Learn semantics, structure, forms, media, and modern best practices."
category: "Core Programming"
---

## Getting Started

HTML (HyperText Markup Language) is the foundation of every web page. It provides the structure and meaning of content, while CSS handles presentation and JavaScript adds interactivity. A good HTML document is semantic, accessible, and easy to maintain.

### Basic Document Structure

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document.</p>
</body>
</html>
```

### Common HTML Elements

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<a href="https://example.com">Visit Example</a>
<img src="image.jpg" alt="A sample image" />
<button>Click Me</button>
```

---

## Semantic Structure

Semantic HTML improves readability for humans and machines. It helps search engines, assistive technologies, and developers understand the purpose of each section.

```html
<article>
<header>
<h2>Article Title</h2>
<p>Published on April 8, 2026</p>
</header>

<section>
<h3>Overview</h3>
<p>This content belongs to a specific article.</p>
</section>

<footer>
<p>Written by a contributor</p>
</footer>
</article>
```

### Common Semantic Tags

```html
<header>Site header</header>
<nav>Navigation links</nav>
<main>Main content</main>
<section>Grouped content</section>
<article>Independent content block</article>
<aside>Related or supplementary content</aside>
<footer>Footer information</footer>
```

---

## Text Content & Formatting

HTML provides tags for formatting text, though visual styling is usually handled by CSS.

```html
<p>This is <strong>important</strong> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>Use <mark>highlighted</mark> text for emphasis.</p>
<p>Here is <code>inline code</code>.</p>
Comment on lines +82 to +85

@coderabbitai coderabbitai Bot Aug 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🌐 Web query:

Verify current HTML guidance for the semantic meanings of <mark>, <em>, and <strong>, responsive <img> sizing, form enctype and control labels, video captions, and table caption/scope semantics.

💡 Result:

Current HTML guidance for semantic elements and common attributes is as follows: Text Semantics - : Represents stress emphasis that changes the meaning of a sentence [1][2]. It is not for stylistic italics [2]. - : Represents strong importance, seriousness, or urgency [1][3]. It should not be used merely for bold styling [3]. - : Represents text marked or highlighted for reference or notation purposes due to its relevance in a particular context, such as search results or highlighted quotes [4][5]. It is distinct from ; denotes relevance, whereas denotes importance [5][6]. Responsive Images - Use the srcset and sizes attributes on the element to provide the browser with multiple image sources and hints about their intended display size, allowing it to choose the most appropriate image based on viewport size, resolution, and pixel density [7][8][9][10]. - Always include the width and height attributes to define the intrinsic aspect ratio; this allows the browser to reserve space before the image loads, preventing layout shifts [8][11]. Form Enctype and Labels - The enctype attribute on the

element defines the MIME type used for submission, with application/x-www-form-urlencoded being the default and multipart/form-data required for file uploads [12][13]. - Every form control should have a , associated either by nesting the control inside the label or by using the for attribute matching the control's id [14][12]. Video Captions - The element, used as a child of

<p>Line break:<br />This continues on the next line.</p>
```

### Lists

```html
<ul>
<li>Unordered list item</li>
<li>Another item</li>
</ul>

<ol>
<li>First item</li>
<li>Second item</li>
</ol>
```

---

## Links, Images & Media

### Anchor Links

```html
<a href="#section">Jump to a section</a>
<a href="about.html">Go to About Page</a>
<a href="mailto:hello@example.com">Email us</a>
<a href="tel:+1234567890">Call us</a>
```

### Images

```html
<img src="images/photo.jpg" alt="A smiling developer" />

<!-- Responsive image with width and height -->
<img
src="images/photo.jpg"
alt="A smiling developer"
width="600"
height="400"
/>
Comment on lines +121 to +127

@coderabbitai coderabbitai Bot Aug 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -eu
file="frontend/content/html.mdx"
printf '%s\n' "== target lines =="
sed -n '1,20p;115,150p' "$file"
printf '%s\n' "== frontmatter and fenced code blocks =="
sed -n '1,12p' "$file"
rg -n '^```|^~~~|<img|Responsive image|Explicit dimensions|max-width' "$file"
printf '%s\n' "== image dimension behavior probe =="
python3 - <<'PY'
from html.parser import HTMLParser

class Images(HTMLParser):
    def handle_starttag(self, tag, attrs):
        if tag == "img":
            print(dict(attrs))

Images().feed('<img src="images/photo.jpg" alt="A smiling developer" width="600" height="400"/>')
PY

Repository: Yash-pluto/refme

Length of output: 2701

Correct the image comment.

width and height set intrinsic dimensions. They do not make the image responsive. Add CSS such as max-width: 100%; height: auto, or describe the dimensions as explicit.

Proposed wording 
-<!-- Responsive image with width and height -->
+<!-- Explicit dimensions; use CSS max-width: 100% for responsive sizing -->
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<!-- Responsive image with width and height -->
<img
src="images/photo.jpg"
alt="A smiling developer"
width="600"
height="400"
/>
<!-- Explicit dimensions; use CSS max-width: 100% for responsive sizing -->
<img
src="images/photo.jpg"
alt="A smiling developer"
width="600"
height="400"
/>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/content/html.mdx` around lines 121 - 127, Update the comment above
the image in the responsive image example to accurately describe the width and
height attributes as intrinsic or explicit dimensions, or add the required CSS
styling such as max-width: 100% and height: auto before calling it responsive.

```

### Audio and Video

```html
<audio controls>
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support audio playback.
</audio>

<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4" />
Your browser does not support video playback.
</video>
```

---

## Forms

Forms are essential for collecting user input. They should use appropriate labels and accessible attributes.

```html
<form action="/submit" method="post">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
Comment on lines +150 to +153

@coderabbitai coderabbitai Bot Aug 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -eu

file="frontend/content/html.mdx"
printf '%s\n' "=== file status ==="
git ls-files -- "$file"
printf '%s\n' "=== lines 140-190 ==="
sed -n '140,190p' "$file"
printf '%s\n' "=== form and file-input references ==="
rg -n -C 3 '(<form|type="file"|enctype|multipart|FormData)' "$file"
printf '%s\n' "=== nearby code fences ==="
sed -n '1,20p' "$file"
sed -n '130,185p' "$file"

Repository: Yash-pluto/refme

Length of output: 3775

🌐 Web query:

HTML form input type=file application/x-www-form-urlencoded file contents multipart/form-data required WHATWG MDN

💡 Result:

When using an HTML form to upload files via an element, you must set the form's enctype attribute to multipart/form-data [1][2][3]. The enctype attribute determines the encoding type used for the form submission body [4][5]. The default value is application/x-www-form-urlencoded [6][7], which is designed for simple key-value pairs where characters are URL-encoded [8]. This default encoding is unsuitable for file uploads because it is inefficient for large binary data and does not provide the structure necessary to handle file metadata (such as filenames and content types) alongside form fields [8]. In contrast, multipart/form-data encodes the form's data as a series of parts separated by a unique boundary string, allowing binary data to be sent without being altered by URL encoding [9][2]. According to the HTML Standard and associated documentation, this encoding is specifically required to correctly transmit the contents of files selected via the control [1][7]. If a form contains a file input but omits the enctype attribute (or sets it to the default), the file data will likely not be transmitted correctly, or the browser may treat the input as a simple text field containing only the file's name [8]. In summary: 1. Method: The form must use the POST method [2][7]. 2. Enctype: The form must specify enctype="multipart/form-data" [1][3]. 3. Requirement: This is technically required by the HTML specification to ensure that file data is packaged and sent as a multi-part MIME message rather than a URL-encoded string [9][8].

Citations:

🏁 Script executed:

#!/bin/bash
set -eu

python3 - <<'PY'
from html.parser import HTMLParser
from pathlib import Path
import re

path = Path("frontend/content/html.mdx")
text = path.read_text()
blocks = re.findall(r"```([^\n]*)\n(.*?)```", text, re.S)

class FormShape(HTMLParser):
    def __init__(self):
        super().__init__()
        self.form_depth = 0
        self.forms = []
        self.file_inputs_inside_forms = 0
        self.standalone_file_inputs = 0

    def handle_starttag(self, tag, attrs):
        attrs = dict(attrs)
        if tag == "form":
            self.form_depth += 1
            self.forms.append(attrs)
        elif tag == "input" and attrs.get("type") == "file":
            if self.form_depth:
                self.file_inputs_inside_forms += 1
            else:
                self.standalone_file_inputs += 1

    def handle_endtag(self, tag):
        if tag == "form" and self.form_depth:
            self.form_depth -= 1

for index, (language, body) in enumerate(blocks, 1):
    if language.strip().lower() == "html":
        parser = FormShape()
        parser.feed(body)
        if parser.forms or parser.file_inputs_inside_forms or parser.standalone_file_inputs:
            print(f"HTML block {index}:")
            print(f"  forms: {parser.forms}")
            print(f"  file inputs inside forms: {parser.file_inputs_inside_forms}")
            print(f"  standalone file inputs: {parser.standalone_file_inputs}")
PY

Repository: Yash-pluto/refme

Length of output: 363

Document multipart/form-data for file-upload forms

If the standalone <input type="file"> example is used inside a form, set that form's enctype to multipart/form-data. Do not add enctype to the current base form because it contains no file input. Document this requirement beside the file-input example.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/content/html.mdx` around lines 150 - 153, Document beside the
standalone file-input example that any form containing <input type="file"> must
set enctype to multipart/form-data. Leave the current base form unchanged
because it has no file input.


<label for="email">Email</label>
<input id="email" name="email" type="email" required />

<label for="message">Message</label>
<textarea id="message" name="message" rows="4"></textarea>

<button type="submit">Send</button>
</form>
```

### Common Input Types

```html
<input type="text" placeholder="Enter text" />
<input type="email" />
<input type="password" />
<input type="number" />
<input type="date" />
<input type="checkbox" />
<input type="radio" />
<input type="file" />
Comment on lines +167 to +175

@coderabbitai coderabbitai Bot Aug 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -eu
printf '%s\n' '--- file metadata ---'
wc -l frontend/content/html.mdx
printf '%s\n' '--- frontmatter and target context ---'
sed -n '1,35p;135,195p' frontend/content/html.mdx
printf '%s\n' '--- fenced code blocks without language identifiers ---'
python3 - <<'PY'
from pathlib import Path
p = Path("frontend/content/html.mdx")
in_fence = False
for n, line in enumerate(p.read_text().splitlines(), 1):
    stripped = line.strip()
    if stripped.startswith("```"):
        marker = stripped[3:]
        if not in_fence:
            if not marker:
                print(n, repr(line))
            in_fence = True
        else:
            in_fence = False
PY
printf '%s\n' '--- nearby form-related references ---'
rg -n -C 3 'form|label|checkbox|radio|name=|value=' frontend/content/html.mdx

Repository: Yash-pluto/refme

Length of output: 5314

🏁 Script executed:

#!/bin/bash
set -eu
sed -n '1,35p;135,195p' frontend/content/html.mdx

Repository: Yash-pluto/refme

Length of output: 2450

🏁 Script executed:

#!/bin/bash
set -eu
printf '%s\n' '--- target context ---'
nl -ba frontend/content/html.mdx | sed -n '145,190p'
printf '%s\n' '--- document start ---'
nl -ba frontend/content/html.mdx | sed -n '1,30p'

Repository: Yash-pluto/refme

Length of output: 272

🌐 Web query:

MDN HTML form input name attribute successful controls checkbox radio default value

💡 Result:

In HTML form submission, a successful control is a form control that is considered "valid" for submission and whose name and value are sent to the server [1]. For a control to be successful, it must generally be defined within a form, have a name attribute, and not be disabled [1]. For checkbox and radio button inputs, the following rules apply regarding submission and values: Successful Status: Unlike most other form controls, checkbox and radio button inputs are only considered successful if they are in a checked state [2][1]. If they are unchecked, they are not successful, and neither their name nor their value is included in the submitted form data [2][3][4]. Default Value: The value attribute specifies the data to be sent to the server when the control is checked [5][3]. If a value attribute is not specified, the default value submitted is the string "on" [6][5][3]. Key Differences in Usage: - Radio buttons: These are grouped by having the same name attribute [2][3]. Within such a group, only the checked radio button can be successful [1]. If none are checked, no value is sent for that group [2][7]. - Checkboxes: Multiple checkboxes with the same name can be checked and submitted simultaneously [5][2]. Each checked checkbox will contribute its name/value pair to the submitted data [3]. If you need to ensure a value is always submitted even when a checkbox is unchecked, common practices include using a hidden input with the same name or handling the absence of the key on the server side [4][7].

Citations:

Clarify the purpose of the input examples.

If this block shows form controls, add labels and id/for pairs. Add name to every submitted control, and meaningful explicit value attributes to the checkbox and radio examples. Otherwise, mark the block as syntax-only.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/content/html.mdx` around lines 167 - 175, Update the input examples
block to demonstrate accessible form controls: add meaningful labels with
matching id/for pairs, assign name attributes to each submitted control, and
provide explicit meaningful values for the checkbox and radio inputs. If the
examples are intended only to show syntax, instead clearly label the block as
syntax-only.

```

### Select and Option

@coderabbitai coderabbitai Bot Aug 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Clarify the select section heading.

### Select and Option is grammatically incomplete and does not reflect the multiple <option> elements below. Rename it to ### Select and Option Elements or ### Select and Options.

🧰 Tools
🪛 LanguageTool

[grammar] ~178-~178: Ensure spelling is correct
Context: ...> ### Select and Option html Choose a country United States Canada United Kingdom ``` --- ## Tables Tables are used for displaying t...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/content/html.mdx` at line 178, Update the “Select and Option”
heading in the select documentation section to a grammatically correct plural
form, preferably “Select and Option Elements” or “Select and Options,” while
leaving the surrounding content unchanged.

Source: Linters/SAST tools


```html
<label for="country">Choose a country</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>
```

---

## Tables

Tables are used for displaying tabular data, not for visual layout.

```html
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Developer</td>
</tr>
<tr>
<td>Bob</td>
<td>Designer</td>
</tr>
</tbody>
</table>
```

---

## Accessibility Basics

Accessible HTML ensures your content is usable by everyone, including people using assistive technologies.

```html
<img src="profile.jpg" alt="Profile photo of Jane Doe" />

<button aria-label="Close dialog">×</button>

<label for="search">Search</label>
<input id="search" type="search" name="search" />
```

### Accessibility Tips

- Use meaningful `alt` text for images.
- Always associate labels with form controls.
- Use semantic elements like `header`, `main`, and `footer`.
- Ensure buttons and links have clear purpose.
- Avoid relying on color alone for meaning.

---

## Best Practices

```html
<!-- Good: semantic, descriptive, and accessible -->
<main>
<section>
<h2>Products</h2>
<p>Browse our latest offerings.</p>
</section>
</main>

<!-- Avoid: using divs for everything and missing structure -->
<div>
<div>
<div>Products</div>
<div>Browse our latest offerings.</div>
</div>
</div>
```

### Recommended Practices

- Use semantic tags whenever possible.
- Keep markup clean and well-indented.
- Use lowercase tag names and attribute names.
- Add `alt` text to images.
- Prefer native form controls over custom ones when possible.
- Validate your HTML to catch structural issues early.
Loading