HTML Quiz 44

What does the loading="lazy" attribute do in an <img> tag?

It delays loading the image until it's needed (when it appears in the viewport).

What is the purpose of <a rel="noreferrer">?

It prevents the browser from sending the referring page’s URL to the target site.

What is the purpose of the <blockquote> element?

It semantically indicates a section that is quoted from another source.

What is the role of the <aside> element in HTML?

It marks content that is tangentially related to the surrounding content, like sidebars or pull quotes.

Why is the alt attribute important in <img> tags?

It improves accessibility by describing the image for screen readers.

Why is text-align: justify a potential accessibility concern?

It can cause uneven word spacing, making text harder to read for people with dyslexia or visual impairments.

What does display: grid; do in CSS?

It enables CSS Grid layout on an element, allowing for two-dimensional layout control.

How do grid-template-columns and grid-template-rows work?

They define the number and size of columns/rows using units or fractions like 1fr.

What does the gap property control in CSS Grid?

It sets spacing between grid rows and columns.

What is grid-auto-flow: column; used for?

It places grid items in columns automatically, instead of rows.

How do align-items and justify-items function in Grid?

They control the alignment of grid items along the block and inline axes, respectively.

What does grid-column: 2 / 4; do?

It places an item starting at column line 2 and ending before line 4.

What does minmax(100px, 1fr) do in Grid?

It sets a column/row to be at least 100px wide but grow to fill remaining space.

What does repeat(3, 1fr) mean in CSS Grid?

It repeats 1fr three times, creating three equal columns.

What does object-fit: cover; do?

It makes an image fill its container without distortion, cropping if necessary.

What does list-style-type: none; do?

It removes bullets from unordered lists.

What is the ::first-letter pseudo-selector for?

It styles the first letter of a text block, often used for drop caps.

How do you define a CSS variable?

--name: value; (usually inside :root for global access)

How do you use a CSS variable with a fallback?

property: var(--name, fallback-value);

What is the role of :root in CSS?

It targets the root element to define global CSS variables.

How does the cascading nature of CSS variables work?

Variables inherit and can be overridden based on selector specificity and location in the DOM.

What’s the syntax for a linear gradient in CSS?

linear-gradient(direction, color1, color2)

What is repeating-linear-gradient used for?

To create a linear gradient that repeats indefinitely.

What does radial-gradient do?

It creates a gradient radiating outward from a center point.

How do you write a CSS comment?

/* This is a comment */