HTML and CSS Quiz: 12 Questions

Answer: nav. The nav element marks a block of major navigation links, which screen readers expose as a landmark. A div has no meaning on its own.

Answer: alt="" (empty). An empty alt tells assistive technology to skip the image. Omitting alt makes some screen readers read the file name instead.

Answer: Give the label a for attribute that matches the input's id. A matching for and id (or wrapping the input inside the label) links them, so clicking the label focuses the field and screen readers announce it. Placeholders disappear when typing and are not a substitute.

Answer: #main p. One ID selector outweighs any number of classes. #main p is (1,0,1), while .nav .menu .item a is only (0,3,1).

Answer: 200px. With border-box, padding and border sit inside the declared width, so the box is 200px. With the default content-box it would be 200 + 40 + 4 = 244px.

Answer: CSS Grid. Grid handles rows and columns at the same time. Flexbox lays items out along one axis at a time, which suits toolbars and simple rows.

Answer: The font size of the root (html) element. rem means "root em". The em unit is the one relative to the current or parent font size; 16px is only the usual browser default for the root.

Answer: @media (min-width: 768px). Mobile-first means base styles target small screens and min-width queries layer on styles as the screen gets wider.

Answer: Its nearest ancestor with a position other than static (or the initial containing block if there is none). That is why you often set position: relative on a parent. Fixed positioning uses the viewport; relative positioning offsets from the element's normal position.

Answer: inline-block. inline-block flows like inline content but respects width and height. Plain inline elements ignore width and height.

Answer: display: none removes the element from the layout; visibility: hidden hides it but keeps its space. With visibility: hidden the empty gap remains. Both hide the element from screen readers.

Answer: It is keyboard focusable, works with Enter and Space, and is announced as a button by screen readers without extra code. A div needs tabindex, a role and key handlers to imitate what a native button gives you for free.