Topic 5 · 5 of 43

HTML Elements and Attributes

All in one: every attribute and flow rule, side by side

What this example compares

Element, attribute, content: <img src alt width>, <a href target>, an attribute on the opening tag vs the closing tag
Naming: id (one element) vs class (a group), and a duplicate id that fails silently
Other global attributes: style, title, lang, hidden, data-*, dir, tabindex, aria-label
Point to or load from: href vs src (<a>, <link>, <img>, <audio>, <video>, <source>, <iframe>, <script>)
Size and text alternative: width vs height vs alt (on img, iframe, svg, canvas)
One name, four jobs: type on <input>, <button>, <ol>, <source>
Forms: action, method="get" vs "post", target, name + value, <label for>
Table cells: colspan vs rowspan
Boolean attributes: checked vs checked="checked" vs checked="false" vs removed (also disabled, required, hidden)
More switches: disabled vs readonly, selected vs multiple, controls vs controls="false" vs autoplay muted loop, reversed, autofocus
Flow: block-level (div, p, h1–h6, section ...) vs inline (span, a, strong, img ...)
Nesting: <p><span> vs <span><p>, and the <p> that closes itself before a <div>
The width rule: a span vs display: inline-block vs display: block
Containers: div and span vs header, nav, main, article, footer, figure

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see fourteen panels; the last few are further down inside the preview, so scroll it. Panel 1 shows a small campus picture, a blue link, the same words as plain text, red words, and words that stay plain because their style sits on the closing tag. Panel 2 shows one box with an orange border (class featured) beside one without, and two tick boxes that share an id. In panel 9 the first three cards look identical — ticked box, grey Save button, red outline, nothing after “hidden” — and only the fourth card, where the attributes are removed, differs. Panel 11 shows orange block boxes reaching the right edge and green inline boxes hugging their words; panel 12 shows “more” falling outside the shaded paragraph in the last card. The page has no JavaScript, so there is no console output.

Quick check: in panel 9, which card shows the only correct way to switch a boolean attribute such as disabled off, and why does disabled="false" not do it?

The fourth card, where the attribute is removed. The browser only checks whether disabled is written at all; its value is ignored, so disabled="false" is still disabled.