HTMLCodeRunner Editorial
Forum Replies Created
-
AuthorPosts
-
</>HTMLCodeRunner EditorialEditorial team
Detailed answer
Ordinary form submission sends name/value pairs.
Check that the field has a name and belongs to the submitted form. Disabled fields and unchecked checkboxes are normally omitted. Inspect the actual request in developer tools to compare what the browser sends with the names expected by the server.
Example
<form action="/subscribe" method="post"><label for="name">Name</label><input id="name" name="full_name"><button>Subscribe</button></form>Understanding the behavior
A control generally needs a name to contribute a key to submitted form data. Disabled controls are excluded, unchecked checkboxes are absent, and only the relevant submitter contributes its name and value. An id serves a different purpose.
Practical implementation notes
Inspect FormData for the actual form and compare its keys with the server's expected field names. Do not assume that a value visible on screen must be included in the request.
How to check it
Submit the form and inspect the request payload before and after adding name.
Expected result
The payload contains full_name when a successful named control is submitted.
Watch out: An id alone does not make a field part of submitted name/value data.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Required adds a built-in constraint for compatible controls, so normal form submission can be blocked when a value is missing.
Give the field a clear label and explain required fields in visible text. Browser validation improves feedback but can be bypassed, so repeat important checks on the server.
Example
<label for="message">Message (required)</label> <textarea id="message" name="message" required></textarea>Understanding the behavior
Required participates in constraint validation for supported controls. Validation normally runs through an appropriate form submission path, but custom scripts and novalidate can change that behavior. Browser validation improves feedback; the server must enforce its own rules.
Practical implementation notes
Submit the empty form using both the keyboard and the normal submit button. Then provide a valid value and confirm submission proceeds. Include clear instructions before the user encounters an error.
How to check it
Submit the example without a value using its normal submit button.
Expected result
The compatible required control prevents normal submission and requests a value.
Watch out: Passing a browser check does not make submitted data trustworthy.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
No.
It checks a syntax constraint rather than mailbox ownership or delivery. Use a confirmation email when ownership matters and provide autocomplete=email for an ordinary contact address. Avoid overly narrow custom patterns that reject legitimate addresses. Test validation feedback and the full confirmation process independently.
Example
<label for="contact-email">Email</label> <input id="contact-email" name="email" type="email" autocomplete="email" required>Understanding the behavior
Email input validation checks a browser-supported address syntax, not whether the mailbox exists or belongs to the visitor. Successful delivery and ownership need a server-side verification process. Avoid treating a syntactically valid value as a verified identity.
Practical implementation notes
Test empty, malformed and plausible addresses, including the effect of required. If the application sends a verification message, keep the account's verification state separate from the input's validity state.
How to check it
Separate browser syntax testing from server delivery and mailbox ownership verification.
Expected result
Browser acceptance proves only a syntax constraint was satisfied.
Watch out: A syntactically valid address is not necessarily a verified mailbox.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
For an ordinary upload, use a file input, POST, and multipart/form-data encoding.
Accept guides the file picker but does not validate safety. The server needs to check size, actual content, permissions, and storage rules. Treat a selected file as untrusted even when its extension looks familiar.
Example
<form action="/upload" method="post" enctype="multipart/form-data"><label for="photo">Image</label><input id="photo" name="photo" type="file" accept="image/png,image/jpeg"><button>Upload</button></form>Understanding the behavior
A file upload needs a file input with a name and an appropriate multipart form submission. The browser sends the selected file data, while a server endpoint must accept, inspect and store it. The accept attribute is a chooser hint rather than a security boundary.
Practical implementation notes
On the server, enforce size and type rules, generate safe storage names and avoid executing uploaded files. Test a small allowed file and a rejected file so failure feedback is understandable.
How to check it
Inspect method and enctype, then confirm the request body uses multipart/form-data.
Expected result
The request includes file data; the server still validates content and size.
Watch out: A file extension does not prove the real file type.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Radio buttons share a group through the same name.
Each option needs a distinct value and a label. Fieldset and legend provide a shared question. Use checkboxes instead for independent choices. The server should validate submitted values against the choices it supports instead of trusting the interface alone.
Example
<fieldset><legend>Format</legend><label><input type="radio" name="format" value="html">HTML</label><label><input type="radio" name="format" value="text">Text</label></fieldset>Understanding the behavior
Radio buttons with the same name form a choice group in the relevant form context. Each option needs its own value and label. IDs must still be distinct, and a fieldset with a legend gives the group an understandable question.
Practical implementation notes
Use keyboard navigation to move between options and inspect the submitted value. If two unrelated questions unexpectedly deselect each other, check whether they accidentally share the same group name.
How to check it
Check that both inputs use the same name and different values, then choose each in turn.
Expected result
Selecting the second option clears the first in the same group.
Watch out: Different names create separate radio groups.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Both are generic containers.
Div groups flow content, while span wraps phrasing content such as words in a sentence. Their default display behavior differs, but CSS can change it. Prefer a more specific semantic element when the content has a clear purpose that another element can express.
Example
<div class="card"><p>Learn <span class="highlight">HTML</span> today.</p></div>Understanding the behavior
Div and span are generic containers with different default layout behavior. Their lack of additional semantics can be useful for styling wrappers, but they do not replace controls, headings or lists. CSS can change display without changing the underlying meaning.
Practical implementation notes
Use a span for a small inline text fragment and a div for a larger generic group when no specific element fits. Start with the correct semantic element whenever one describes the purpose.
How to check it
Keep the word in span and the card in div, then inspect nesting in the DOM.
Expected result
The paragraph remains a valid phrasing-content structure.
Watch out: Do not wrap arbitrary page sections in a span.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Strong indicates importance or urgency; em indicates stress emphasis.
Their default bold and italic styles are presentation conventions, not the reason to choose them. If you only want a visual treatment, use CSS or another suitable element. Consider how the emphasis changes the actual meaning of the sentence.
Example
<p><strong>Save your work</strong> before closing.</p> <p>I said <em>one</em> file.</p>Understanding the behavior
Strong marks importance, seriousness or urgency; em marks stress emphasis that can change the meaning of a sentence. Bold and italic appearance alone do not determine the right element. CSS can reproduce either appearance without adding those meanings.
Practical implementation notes
Read the sentence aloud with emphasis in different positions. If the styling is purely decorative or follows a publication convention, consider CSS or another more appropriate text element.
How to check it
Read the sentence aloud and decide which words express importance versus stress.
Expected result
The chosen element matches the intended meaning rather than only the desired font style.
Watch out: Do not choose em merely to get italic lettering.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Figure groups self-contained illustrative content with an optional caption.
It may hold an image, diagram, or code listing. Figcaption provides context, while a meaningful image still needs suitable alternative text. Write the caption and alt text to complement each other rather than repeating the same sentence unnecessarily.
Example
<figure><img src="tree.png" alt="HTML branches into head and body"><figcaption>A basic document tree.</figcaption></figure>Understanding the behavior
Figure groups self-contained material with an optional caption. The caption describes that group, while image alternative text addresses the image's role for someone who cannot see it. These two texts may complement rather than duplicate one another.
Practical implementation notes
If the image is a chart, provide the important conclusion and a way to access the underlying data. A caption alone may not communicate every relationship visible in a complex graphic.
How to check it
Read the caption and alt text together and remove unnecessary duplication.
Expected result
The caption gives context while alt conveys the diagram's essential visual information.
Watch out: A caption is not automatically a replacement for alt text.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Visible text can use a friendly date format while datetime carries a machine-readable value.
Use valid syntax and supply timezone information when representing a particular instant. This preserves meaning without forcing readers to see technical formatting. Publish genuine dates rather than backdating learning posts to imitate historic activity.
Example
<p>Updated <time datetime="2026-10-22">22 October 2026</time></p>Understanding the behavior
Datetime gives time-related text a machine-readable representation while allowing a human-friendly label. Use a valid value that matches the visible meaning. If a precise moment matters across time zones, include an appropriate offset in a full date-time value.
Practical implementation notes
Do not encode a vague phrase as an invented exact timestamp. For a publication date that only needs a calendar day, a date-only value can be clearer than adding an arbitrary time.
How to check it
Inspect datetime and compare it with the visible date; add an offset when describing a precise instant.
Expected result
The machine-readable value describes the same date or instant shown to readers.
Watch out: A date alone does not identify a timezone-specific event instant.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
A practical page has a clear main heading and uses lower levels for nested sections.
Select levels by structure instead of font size; CSS controls appearance. A heading should summarize what follows. Heading structure makes a long reference page easier to scan and navigate without depending on visual size alone.
Example
<h1>HTML forms</h1> <h2>Contact details</h2> <h3>Email address</h3>Understanding the behavior
Heading levels communicate nesting rather than a preferred font size. A page heading can introduce sections with h2 headings and subsections with h3 headings. CSS should control the appearance independently of that hierarchy.
Practical implementation notes
Read only the headings in order. They should form a useful outline, avoid vague repeated labels, and describe what each section contains. Do not choose a lower level simply because it looks smaller.
How to check it
Write the outline first, then style heading sizes without changing their structural levels.
Expected result
The heading list reads like an understandable outline of the page.
Watch out: A bold paragraph is not exposed as an actual heading.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Yes.
Header can introduce its containing section, and footer can provide related information such as authorship. A document may contain both a site header and an article header. Their context affects meaning, so use them deliberately rather than making every decorative strip a header or footer.
Example
<article><header><h2>Semantic markup</h2></header><p>Article content.</p><footer>HTMLCodeRunner Editorial</footer></article>Understanding the behavior
Headers and footers can provide introductory or closing information for their containing article or section. A site-wide header and an article header therefore have different contexts. The element name alone does not mean every instance is a page-level landmark.
Practical implementation notes
Keep the visible title, author information and related metadata close to the article they describe. Test landmark navigation when several headers or footers appear on the same page.
How to check it
Place introduction and authorship inside the article header and footer, then inspect their context.
Expected result
Those elements describe the article rather than replacing the site-wide header or footer.
Watch out: An article footer does not replace the main site footer.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Nav is appropriate for significant navigation groups such as the main menu, table of contents, and pagination.
Incidental links in a paragraph usually do not need their own navigation landmark. When several navigation areas share a page, meaningful labels help people distinguish them without reading every link.
Example
<nav aria-label="Primary"><a href="/">Home</a></nav> <nav aria-label="On this page"><a href="#forms">Forms</a></nav>Understanding the behavior
A nav region identifies a major navigation group, not every collection of links. Main navigation, a table of contents and pagination can each have a navigation purpose. A sentence containing two reference links normally needs no nav wrapper.
Practical implementation notes
When several nav regions exist, give them distinct accessible names. Users should be able to distinguish primary navigation from article contents without having to inspect every link first.
How to check it
Give each navigation area a distinct accessible label and inspect its landmark name.
Expected result
Readers can distinguish Primary from On this page.
Watch out: The native nav element already supplies navigation semantics.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Aside is for content tangentially related to its surroundings, such as related reading.
Being visually positioned on the side does not automatically make something an aside. Essential instructions belong in the main flow even if a design displays them in a narrow column. Choose structure before applying layout.
Example
<aside aria-labelledby="related"><h2 id="related">Related reading</h2><a href="/forms/">HTML forms</a></aside>Understanding the behavior
An aside contains complementary material that is related but separable from the surrounding content. Visual placement on the right does not establish that relationship. Essential instructions should stay in the main reading flow even when the design resembles a sidebar.
Practical implementation notes
Check the page on a narrow screen where the columns stack. The content order should remain sensible, and the aside should not interrupt the middle of a sentence or a required form task.
How to check it
Remove the panel temporarily and reread the main article from beginning to end.
Expected result
The main explanation still makes sense without the aside.
Watch out: Do not move essential article steps outside its main content for visual reasons.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
An id identifies one element in the document, such as a fragment destination or label target.
A class groups elements for styling or scripting. Multiple elements can share a class; duplicate IDs make references ambiguous. Use descriptive names that remain meaningful when the layout changes.
Example
<section id="contact" class="panel"><h2>Contact</h2></section> <a href="#contact">Jump to contact</a>Understanding the behavior
An id identifies one element within a document and can be used by fragment links, labels and scripts. Classes are reusable groups. Repeating an id in a component can make a label or selector reach the wrong instance.
Practical implementation notes
Render the component twice and test every label and fragment link. Reusable templates should generate distinct IDs and update all matching references, rather than only renaming the input.
How to check it
Reuse the panel class on another section but keep contact as a unique id.
Expected result
All panels can share styling while #contact identifies just one destination.
Watch out: Repeated cards normally share classes rather than IDs.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Normal text rendering collapses sequences of whitespace.
Extra source spaces are not a dependable layout technique. Use CSS for presentation and pre for meaningful whitespace such as a code listing. A newline in source does not have the same meaning as an explicit br element.
Example
<p>One space between words.</p> <pre>line one indented line two</pre>Understanding the behavior
Normal HTML text layout collapses runs of whitespace, including many line breaks in source. Use paragraphs for paragraphs and CSS for spacing. A string of spaces is unreliable for aligning columns or creating indentation.
Practical implementation notes
Use pre for content whose line breaks and spacing are meaningful. For a visual layout, use CSS grid or flexbox so the result can adapt to narrow screens and different font sizes.
How to check it
Compare normal paragraph text with the same text in pre, then resize the window.
Expected result
The paragraph collapses spaces; pre preserves meaningful line breaks and indentation.
Watch out: Avoid chains of nonbreaking spaces to align a page.
-
AuthorPosts