HTML5 FAQ — Part 6

Q56 — What are custom data attributes (data-*)?

Used to store extra custom data inside HTML elements, accessible via JS.

<button data-user-id="101">Profile</button>
<script>
console.log(document.querySelector("button").dataset.userId); // 101
</script>

Q57 — Difference between inline, internal, and external CSS?

Inline: inside element → <p style="color:red">

Internal: inside <style> in head

External: separate .css file (✅ best practice)

Q58 — async vs defer vs normal script loading?

Normal: blocks HTML until loaded

async: loads parallel, executes immediately

defer: loads parallel, executes after HTML parsed

<script src="app.js" async></script>
<script src="app.js" defer></script>

Q59 — Shadow DOM vs Normal DOM?

Normal DOM: global, styles affect whole page

Shadow DOM: encapsulated, style isolated (Web Components)

Q60 — iframe vs AJAX?

iframe: loads entire external webpage

AJAX: loads only data without page reload

Q61 — HTML entities?

Used to display reserved characters.

&lt; = <
&gt; = >
&amp; = &
&quot; = "
&apos; = '
&copy; = ©

Q62 — Progressive rendering vs Lazy loading?

Progressive: shows content as it loads

Lazy loading: loads images only when needed

Q63 — What are polyfills?

JS code that adds modern browser features to older browsers.

Example: fetch() polyfill for old browsers.

Q64 — What is CORS?

Security mechanism to control cross-origin requests via server headers.

Q65 — How to optimize HTML for performance?

Minify CSS/JS, lazy load images, use async/defer, reduce DOM, caching.

Q66 — Lazy loading attribute?

Loads images only when user scrolls near them.

<img src="photo.jpg" loading="lazy">

Q67 — Inline SVG vs External SVG?

Inline SVG: inside HTML, styleable with CSS/JS

External SVG: used via <img>, limited styling

⬅ Home