HTMLCodeRunner Editorial
Forum Replies Created
-
AuthorPosts
-
</>HTMLCodeRunner EditorialEditorial team
Detailed answer
A boolean attribute is true when present, even if its value is the text false.
Remove disabled to enable the control, or set the corresponding DOM property to false. This rule does not apply to every attribute: ARIA attributes and other enumerated attributes have their own value rules.
Example
<input name="preview" disabled> <input name="editable">Understanding the behavior
Boolean attributes are enabled by their presence, regardless of a string such as false. Remove disabled to enable the control, or update its JavaScript disabled property. Disabled controls also behave differently from read-only fields during form submission.
Practical implementation notes
Test keyboard focus and submitted data after changing the attribute. If a value must remain submitted but should not be editable, check whether readonly is supported by that control and fits the intended interaction.
How to check it
Remove the disabled attribute entirely, then try focusing and editing the control.
Expected result
The control becomes editable only when disabled is absent or its DOM property is false.
Watch out: Do not apply HTML boolean syntax rules to aria-expanded.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Set lang on the root html element using a valid language tag such as en or hi.
It helps software interpret text and choose pronunciation. Mark a passage in another language on a suitable surrounding element. Language metadata describes the actual content; it does not translate the document.
Example
<html lang="en"><body><p>A greeting: <span lang="hi">नमस्ते</span></p></body></html>Understanding the behavior
Language information helps screen readers, translation tools and other language-sensitive processing. Choose a valid language tag that describes the actual text. It is not a character encoding setting and does not translate the content.
Practical implementation notes
When a passage uses another language, place an appropriate lang attribute on that passage. Keep the root language accurate even if the interface contains a short quotation in another language.
How to check it
Inspect the root language and the span language separately with accessibility tools.
Expected result
The document declares English while the greeting is marked as Hindi.
Watch out: Use a language tag, not a country name.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Choose elements for meaning before deciding how they look.
A button performs an action, a link navigates, and a heading introduces a section. CSS can change presentation while preserving those roles. Native semantics give browsers and assistive technology information generic containers do not supply by themselves.
Example
<main><h1>HTML guide</h1><article><h2>Getting started</h2><p>Build a small document.</p></article></main>Understanding the behavior
Meaningful elements communicate the purpose of content as well as providing hooks for styling. Choose a heading because it introduces a section, and a button because it performs an action. Default browser appearance can be changed with CSS.
Practical implementation notes
Review the page without relying on color or positioning. Landmarks, headings and control names should still explain its structure. Using semantic elements helps, but does not automatically make every interaction accessible.
How to check it
Inspect landmarks and headings in the accessibility tree after choosing native elements.
Expected result
Main content is identifiable and the lesson has a real heading.
Watch out: A div styled as a button does not gain native button behavior.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Article represents a self-contained composition such as a forum post or news item.
Section groups a theme within a larger document, normally with a heading. Use div when the grouping is only for layout and has no particular document meaning. The choice is about content purpose rather than default appearance.
Example
<article><h2>HTML forms</h2><section><h3>Labels</h3><p>Name every control.</p></section></article>Understanding the behavior
An article should make sense as a relatively independent item, such as a post or a review. A section groups related content within a larger structure and usually needs a meaningful heading. Neither is a general replacement for every div.
Practical implementation notes
Ask whether the block could reasonably stand on its own. If the wrapper exists only to create a grid or apply spacing, a div may express the purpose more accurately.
How to check it
Read the article outside its original page, then examine whether the subsection needs that context.
Expected result
Article remains self-contained; section describes a theme within it.
Watch out: Do not replace every layout wrapper with section.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Start with a doctype, an html element with a language, a head for metadata, and a body for visible content.
Declare UTF-8 early and include a viewport setting. Save the document as index.html. The title labels the browser tab while h1 introduces visible content.
Example
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My page</title> </head> <body> <h1>Hello HTML</h1> </body> </html>Understanding the behavior
The language attribute belongs on the root element so assistive technology can choose a suitable pronunciation. Charset describes how bytes become characters; the viewport setting controls the initial mobile layout viewport. These settings solve different problems and should not replace one another.
Practical implementation notes
After saving, change only the title and reload. The tab should change without changing the heading. This separates document metadata from visible content and makes a useful first debugging exercise.
How to check it
Put the visible greeting in body and the browser-tab name in title, then save and reopen the file.
Expected result
The tab reads My page and the document displays Hello HTML.
Watch out: Confirm the file is .html rather than .html.txt.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
The short HTML doctype selects standards mode in modern browsers.
Put it before the document element. It is a declaration rather than an element and does not need a closing tag. For a page with unexpected legacy layout behavior, inspect document.compatMode in the console.
Example
<!doctype html> <html lang="en"><head><title>Standards mode</title></head><body><p>Hello</p></body></html>Understanding the behavior
Standards mode makes browser layout follow modern rules rather than compatibility behavior for older pages. A doctype is not a link to a validator or a stylesheet, and the short HTML declaration does not require an HTML version number.
Practical implementation notes
Compare document.compatMode before and after fixing a missing doctype. If the page still looks wrong in standards mode, inspect the CSS box model rather than repeatedly changing the declaration.
How to check it
Evaluate document.compatMode in the browser console after adding the doctype at the beginning.
Expected result
A standards-mode document reports CSS1Compat.
Watch out: A reusable component should not introduce a second doctype.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
The head contains metadata and resource references.
The body contains the page content people read and interact with. Put title, charset, and stylesheet links in head, then headings, navigation, forms, and articles in body. Browser error recovery can relocate invalid markup, so inspect the parsed DOM when debugging.
Example
<head><meta charset="utf-8"><title>Structure</title></head> <body><h1>Visible content</h1><p>A paragraph.</p></body>Understanding the behavior
A document can have useful metadata that never appears as page text. Stylesheet links and title information belong in head; navigation and the main article belong in body. Keeping that separation makes source code predictable.
Practical implementation notes
Use the Elements panel to inspect the browser's repaired document. A browser displaying something does not prove that the original placement is valid; validate the source as well.
How to check it
Move the paragraph into body and compare the Elements panel with the original source.
Expected result
Visible prose belongs in body; the tab title remains metadata.
Watch out: View Source and the parsed DOM can differ after error recovery.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Attributes add settings or information in an opening tag.
Some accept strings, some accept defined keywords, and boolean attributes are true when present. Quote values consistently. A global attribute such as id works on many elements, but an attribute like href has an element-specific purpose.
Example
<a id="guide" href="/html/" title="Read the guide">HTML guide</a>Understanding the behavior
An attribute modifies the element on which it appears. Quote values containing spaces, and choose attributes supported by that element. A class identifies styling or scripting hooks; it does not automatically create a visual style.
Practical implementation notes
Change one attribute at a time and inspect the resulting DOM property. For URL attributes, also check the resolved destination, because the browser can resolve a relative value against the document URL.
How to check it
Inspect the opening anchor tag and follow its href; use the id only for identification.
Expected result
The link navigates to /html/ and the id does not determine its destination.
Watch out: Check that an attribute is supported by the element using it.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Place comments between the comment delimiters.
They explain source without rendering as ordinary text, but remain visible to anyone who receives the document. Keep private notes, passwords, and tokens out of them. Comments should be short and should not be nested inside other comments.
Example
<!-- Primary navigation --> <nav aria-label="Primary"><a href="/">Home</a></nav>Understanding the behavior
Comments are useful for short implementation notes, but they remain available in delivered page source. A comment is not a safe place for passwords, API tokens, private customer details, or unpublished server configuration.
Practical implementation notes
Avoid nesting comments and keep comment delimiters out of the comment body. If a large section disappears unexpectedly, inspect the opening and closing delimiters before looking for CSS problems.
How to check it
Open View Source after loading the example, then inspect the rendered navigation.
Expected result
The comment is present in source while only the Home link is rendered.
Watch out: Commenting out a secret does not remove it from the downloaded source.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Escape markup characters when they must appear as text.
Character references let an HTML lesson show tags without turning them into elements. Use code for a short example and pre with code when whitespace matters. Escaping markup is separate from validating or sanitizing arbitrary user content.
Example
<p>The <article> element.</p> <p>Research & development.</p>Understanding the behavior
A literal less-than sign can begin markup, so encode it when the intention is to show source code. Encoding text is different from sanitizing HTML that you intend to allow. A code element changes meaning and presentation, but does not escape its contents.
Practical implementation notes
For text inserted by JavaScript, assign textContent rather than concatenating untrusted strings into innerHTML. Check that the example is displayed as text and creates no extra elements in the DOM.
How to check it
Compare a literal tag with an escaped one inside code and inspect the rendered text.
Expected result
The escaped version visibly shows angle brackets instead of creating an element.
Watch out: Avoid inserting untrusted text through innerHTML.
-
AuthorPosts